Merge branch 'main' into deployment

Author: carylwyatt

src/js/components/AdvancedSearchForm/index.svelte

@@ -29,7 +29,7 @@
     { value: 'title', label: 'Title' },
     { value: 'author', label: 'Author' },
     { value: 'subject', label: 'Subject' },
-    { value: 'isn', label: 'ISBN/ISSN' },
+    { value: 'isn', label: 'ISBN, ISSN, OCLC, etc.' },
     { value: 'publisher', label: 'Publisher' },
     { value: 'series', label: 'Series' },
     // { field: 'year', label: 'Year of Publication' },

src/js/components/SearchBar/index.svelte

@@ -195,7 +195,7 @@
               <option value="title">Title</option>
               <option value="author">Author</option>
               <option value="subject">Subject</option>
-              <option value="isn">ISBN/ISSN</option>
+              <option value="isn">ISBN, ISSN, OCLC, etc.</option>
               <option value="publisher">Publisher</option>
               <option value="seriestitle">Series Title</option>
             </select>

src/scss/apps.scss

@@ -7,7 +7,9 @@ body {
 }
 
 .apps {
-  transition: visibility 0s linear 100ms, opacity 150ms;
+  transition:
+    visibility 0s linear 100ms,
+    opacity 150ms;
 
   // &[data-initialized='true'] {
   //   visibility: visible !important;
@@ -56,10 +58,7 @@ body {
     gap: 1.5rem;
     align-items: start;
     margin-top: 2.625rem;
-    margin-inline: max(
-      clamp(0.938rem, calc(0.268rem + 3.348vw), 1.875rem),
-      ((100% - 73.125rem) / 2)
-    );
+    margin-inline: max(clamp(0.938rem, calc(0.268rem + 3.348vw), 1.875rem), ((100% - 73.125rem) / 2));
 
     // Phire is 48em, but that might assume a main
     // column that wraps more than HTDL
@@ -130,7 +129,7 @@ body {
     }
   }
 
-  button[data-action="expand-filter"] {
+  button[data-action='expand-filter'] {
     &[aria-expanded='false'] .is-expanded {
       display: none;
     }
@@ -194,7 +193,6 @@ body {
     &:has(+ span) {
       border-top-right-radius: var(--bs-list-group-border-radius) !important;
       border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
-      
     }
 
     // label colors
@@ -210,10 +208,11 @@ body {
       margin-left: auto;
     }
 
-    &:hover .visited-link, &:focus .visited-link {
+    &:hover .visited-link,
+    &:focus .visited-link {
       color: var(--bs-list-group-action-hover-bg);
     }
-    
+
     &:active .visited-link {
       color: var(--bs-list-group-action-active-bg);
     }
@@ -222,50 +221,76 @@ body {
       color: var(--bs-list-group-color);
     }
 
+    // z-index on this was causing focus ring on the neighboring
+    // list-group-item to visually "slide" behind/underneath the full-view item
+    &.active {
+      z-index: auto;
+    }
+
     &.active:visited .visited-link {
       color: var(--bs-list-group-active-color);
     }
 
     &.active .visited-link {
       color: var(--bs-list-group-active-bg);
-    }   
+    }
 
     &[data-activated-role] {
       background: var(--color-primary-800);
       color: var(--color-shades-0);
+      border-color: var(--color-primary-800);
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background: var(--color-shades-0);
         color: var(--color-primary-800);
+        border-color: var(--bs-list-group-border-color);
+      }
+
+      &:active {
+        background: var(--color-primary-900);
+        color: var(--color-shades-0);
+        border-color: var(--color-primary-900);
       }
 
+      //if the link hasn't been visited, then on hover/focus, the icon should match the background (800 on 800)
       .visited-link {
         color: var(--color-primary-800);
       }
-      
-      &:visited .visited-link {
-        color: var(--color-shades-0);
-      }
 
-      &:hover .visited-link, &:focus .visited-link {
+      //if the link hasn't been visited, then on hover/focus the icon should match the background (white on white)
+      &:hover .visited-link,
+      &:focus .visited-link {
         color: var(--color-shades-0);
       }
 
+      //if the link hasn't been visited, then on active state, the icon should match the background (900 on 900)
       &:active .visited-link {
+        color: var(--color-primary-900);
+      }
+
+      // the rest of these are *visited* states, which should contrast with the background
+      &:visited .visited-link,
+      &:visited:active .visited-link,
+      &:visited:active:hover .visited-link {
         color: var(--color-shades-0);
       }
 
-      &:visited:hover .visited-link, &:visited:focus .visited-link {
+      &:visited:hover .visited-link,
+      &:visited:focus .visited-link {
         color: var(--color-primary-800);
       }
-
     }
   }
-  .list-group-horizontal-sm>.list-group-item {
+  .list-group-horizontal-sm > .list-group-item {
     &:focus-visible {
       border-top-right-radius: 6px;
       border-bottom-left-radius: 6px;
     }
+    &:last-child:focus-visible {
+      border-inline-start-width: 1px;
+      margin-inline-start: -1px;
+    }
   }
 
   // by default, hide the 10+nth facets
@@ -315,15 +340,11 @@ body {
       border-right: var(--border);
       background-color: var(--color-primary-200);
     }
-    :is(thead, tbody:first-child, caption:first-child + tbody)
-      tr:first-child
-      > :first-child {
+    :is(thead, tbody:first-child, caption:first-child + tbody) tr:first-child > :first-child {
       border-left: var(--border);
       border-top-left-radius: 0.375rem;
     }
-    :is(thead, tbody:first-child, caption:first-child + tbody)
-      tr:first-child
-      > :last-child {
+    :is(thead, tbody:first-child, caption:first-child + tbody) tr:first-child > :last-child {
       border-right: var(--border);
       border-top-right-radius: 0.375rem;
     }
@@ -387,7 +408,7 @@ main.error::before {
 }
 
 .bg-vaguely-faded {
-  background: rgba(255,255,255,0.75);
+  background: rgba(255, 255, 255, 0.75);
 }
 
 .alert p:last-child {