sul-dlss · corylown · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/Gemfile b/Gemfile
@@ -71,7 +71,8 @@ group :test do
   gem 'webmock'
 end
 
-gem 'arclight', '>= 1.1.0', '< 2'
+# gem 'arclight', '>= 1.1.0', '< 2'
+gem 'arclight', github: 'projectblacklight/arclight', branch: 'main'
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,3 +1,15 @@
+GIT
+  remote: https://github.com/projectblacklight/arclight.git
+  revision: 4bc3e9c25b88313cde03d0c5e36646d615e6ca5b
+  branch: main
+  specs:
+    arclight (2.0.0.alpha)
+      blacklight (>= 9.0.0, < 10)
+      gretel
+      rails (>= 7.1, < 9)
+      traject (~> 3.0)
+      traject_plus (~> 2.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -81,27 +93,21 @@ GEM
     afm (1.0.0)
     airbrussh (1.6.0)
       sshkit (>= 1.6.1, != 1.7.0)
-    arclight (1.6.2)
-      blacklight (>= 8.0.0, < 9)
-      gretel
-      rails (>= 7.1, < 9)
-      traject (~> 3.0)
-      traject_plus (~> 2.0)
     ast (2.4.3)
     base64 (0.3.0)
     bcrypt (3.1.21)
     bcrypt_pbkdf (1.1.2)
     benchmark (0.5.0)
     bigdecimal (3.3.1)
     bindex (0.8.1)
-    blacklight (8.12.3)
+    blacklight (9.0.0)
       globalid
       i18n (>= 1.7.0)
       jbuilder (~> 2.7)
       kaminari (>= 0.15)
       ostruct (>= 0.3.2)
-      rails (>= 6.1, < 9)
-      view_component (>= 2.74, < 5)
+      rails (>= 7.0, < 9)
+      view_component (>= 3.0, < 5.0)
       zeitwerk
     blacklight-locale_picker (1.3.0)
       rails (>= 5.2.3, < 9)
@@ -595,7 +601,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
-  arclight (>= 1.1.0, < 2)
+  arclight!
   blacklight-locale_picker
   blacklight_dynamic_sitemap
   blacklight_range_limit (~> 9)

diff --git a/app/assets/stylesheets/sulBase.css b/app/assets/stylesheets/sulBase.css
@@ -56,7 +56,7 @@ body {
   color: black;
 }
 
-label.toggle-bookmark {
+label.toggle-bookmark-label {
   color: var(--stanford-digital-blue);
 }
 

diff --git a/app/assets/stylesheets/sulFacets.css b/app/assets/stylesheets/sulFacets.css
@@ -24,3 +24,22 @@
     }
   }
 }
+
+.facet-limit-active {
+  --bs-accordion-btn-color: var(--bs-body-color);
+  --bl-facet-active-color: var(--bs-body-color);
+  --bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
+}
+
+.accordion-item {
+  margin-left: 6px;
+}
+
+/* Applied constraints to match searchworks. */
+.applied-filter .constraint-value .filter-name::after {
+  height: 0.8rem;
+  width: 1.25rem;
+  vertical-align: middle;
+  margin-right: -0.2rem;
+  margin-left: 0.25rem;
+}
diff --git a/app/assets/stylesheets/sulHeader.css b/app/assets/stylesheets/sulHeader.css
@@ -8,6 +8,10 @@
   background-color: var(--stanford-palo-alto-dark);
 }
 
+.navbar-logo {
+  background-size: auto;
+}
+
 /* Search bar in header -- interior pages */
 .navbar-search {
   display: flex;
@@ -16,12 +20,6 @@
   background-color: var(--stanford-black);
   border-top: none;
   margin-bottom: 0;
-
-  .form-select {
-    background-size: 1.125rem 1.125rem;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 
   /* fill entire width on small screens, 75% when larger */
   .search-query-form {
@@ -46,23 +44,17 @@
 /* custom-select aka the fielded search (keyword, place, etc.) styles 
    display only on larger screens
 */
-.custom-select {
+#search_field {
   border-radius: 0;
   display: none;
 }
 
 @media (min-width: 768px) {
-  .custom-select {
+  #search_field {
     display: block;
   }
 }
 
-.masthead ~ .navbar-search .custom-select.form-select {
-  width: auto;
-  flex: 0 0 auto;
-  border: none;
-}
-
 /* Misc other styles */
 .searchtips-link a {
   color: white;

diff --git a/app/assets/stylesheets/sulLanding.css b/app/assets/stylesheets/sulLanding.css
@@ -10,6 +10,10 @@
   .search-btn {
     align-items: center;
   }
+  .search-query-form {
+    --search-q-border: none;
+    width: 85%;
+  }
 }
 
 #featured-item-wrapper {
@@ -43,35 +47,6 @@
     }
   }
 
-  .input-group > .search-autocomplete-wrapper input:focus {
-    box-shadow: none;
-  }
-
-  .search-query-form .input-group:focus-within {
-    box-shadow: 0 0 0 0.25rem rgba(var(--stanford-digital-blue-rgb), 0.25);
-  }
-
-  /* Remove left border from the search input on the landing page */
-  .input-group .search-autocomplete-wrapper::before {
-    width: 0px;
-  }
-
-  .input-group input {
-    background-image: none;
-    background-repeat: no-repeat;
-    background-position: 0.5rem center;
-    padding-left: 0.75rem;
-  }
-
-  @media (min-width: 768px) {
-    .input-group input {
-      background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="%23585754" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
-      background-repeat: no-repeat;
-      background-position: 0.5rem center;
-      padding-left: 2.75rem;
-    }
-  }
-
   li a {
     font-size: 1.125rem;
     font-weight: 350;
@@ -121,12 +96,6 @@
   border-radius: 0;
 }
 
-.input-group {
-  input {
-    font-style: italic;
-  }
-}
-
 .landing-page-access,
 .landing-page-info {
   --bs-border-color: var(--stanford-70-black);

diff --git a/app/assets/stylesheets/sulSearchbar.css b/app/assets/stylesheets/sulSearchbar.css
@@ -1,122 +1,8 @@
 /* Input group styles -- make sure to only impact input-groups within .navbar-search */
 .search-query-form {
-    .input-group {
-        height: 2.75rem;
-        border-radius: var(--bs-border-radius);
-
-        .search-autocomplete-wrapper,
-        input,
-        select {
-            border: none;
-        }
-
-        .search-autocomplete-wrapper ul li:active {
-            color: var(--stanford-black);
-            background-color: var(--grey-lighter);
-        }
+  .input-group {
+    #search_field.search-field {
+      border-left: var(--search-q-border);
     }
-
-    .input-group.within-collection-dropdown {
-        background-color: var(--bs-body-bg);
-        border-radius: var(--bs-border-radius);
-        position: relative;
-    }
-
-    .input-group.within-collection-dropdown select {
-        border: none;
-    }
-
-    .input-group.within-collection-dropdown .input-group-text {
-        padding-left: 0;
-        padding-right: 1.25rem;
-        background-color: var(--stanford-black);
-        border: none;
-        color: white;
-        font-weight: 700;
-        padding-top: 0.25rem;
-        padding-bottom: 0.25rem;
-    }
-
-    /* make dividers 80% of height to match designs */
-    .input-group.within-collection-dropdown::after,
-    .input-group:has(.custom-select)::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        height: 80%;
-        width: 1px;
-        background-color: var(--stanford-40-black);
-        pointer-events: none;
-    }
-
-    .input-group.within-collection-dropdown::after {
-        right: 0;
-    }
-
-    .input-group:has(.custom-select)::after {
-        left: 0;
-    }
-
-    @media(min-width: 768px) {
-        .input-group:has(.custom-select)::after {
-            left: 8rem;
-        }
-    }
-}
-
- /* Bootstrap overrides -- needs to be this specific in order to work */
-.input-group.within-collection-dropdown> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
-    border-top-left-radius: var(--bs-border-radius);
-    border-bottom-left-radius: var(--bs-border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  }
 }
-
-/* Search button -- says "Search" or displays magnifying glass icon depending on size
-      See SearchButtonComponent
-    */
-.input-group>.search-btn-wrapper {
-    background-color: var(--bs-body-bg);
-    border: none;
-    height: 100%;
-    align-items: center;
-    align-self: center;
-}
-
-.input-group>.search-btn-wrapper .search-btn {
-    border-radius: var(--bs-btn-border-radius);
-    margin: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    max-height: 2.25rem;
-    align-items: center;
-}
-
-@media (min-width: 768px) {
-    .input-group .search-btn-wrapper .search-btn {
-        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
-    }
-}
-
-/* Search icon -- the magnifying glass on left side of bar */
-.blacklight-icons-search {
-    background-color: transparent;
-}
-
-.blacklight-icons-search svg {
-    margin: 0;
-    fill: var(--grey-lighter);
-    width: 1.5rem;
-}
-
-@media (min-width: 768px) {
-    .blacklight-icons-search {
-        align-self: center;
-        background-color: var(--bs-body-bg);
-    }
-
-    .blacklight-icons-search svg {
-        margin: 0 0 0 0.5rem;
-        fill: var(--stanford-80-black);
-    }
-}
diff --git a/app/components/alert_component.html.erb b/app/components/alert_component.html.erb
@@ -1,7 +1,9 @@
-<div class="alert <%= @classes %> alert-dismissible shadow-sm d-flex align-items-center">
+<div class="container mx-auto">
+  <div role="alert" class="alert <%= @classes %> alert-dismissible shadow-sm d-flex align-items-center mt-3">
     <%= render(icon.new) %>
     <div class="text-body ps-2">
-        <div><%= message %></div>
+      <div><%= message %></div>
     </div>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
+  </div>
+</div>
diff --git a/app/components/arclight/repository_location_component.html.erb b/app/components/arclight/repository_location_component.html.erb
@@ -2,7 +2,7 @@
   <% component.with_label do %>
     <%= label %>
   <% end %>
-  <% component.with_value do %>
+  <% component.with_value(index: 0) do %>
     <div class='al-in-person-repository-name'>
       <% if repository.thumbnail_url %>
         <%= image_tag repository.thumbnail_url, alt: '', class: 'img-fluid float-left' %>

diff --git a/app/components/arclight/search_bar_component.html.erb b/app/components/arclight/search_bar_component.html.erb
@@ -5,20 +5,11 @@
                             search_field: @search_field,
                             form_options: { data: { controller: "search-form" } })) do |c| %>
 
-  <% c.with_before_input_group do %>
-    <div class="input-group within-collection-dropdown">
-      <%# don't show magnifying glass icon if screen smaller than md breakpoint %>
-      <span class="d-none d-md-flex">
-        <%= render(Blacklight::Icons::SearchComponent.new) %>
-      </span>
-      <label class="visually-hidden" for="within_collection">
-        <%= t('arclight.within_collection_dropdown.label_html') %>
-      </label>
-      <%= select_tag ('f[collection][]' if collection_name.present?), within_collection_options, id: 'within_collection', class: 'form-select search-field' %>
-    </div>
-  <% end %>
-
   <% c.with_prepend do %>
+    <label class="visually-hidden" for="within_collection">
+      <%= t('arclight.within_collection_dropdown.label_html') %>
+    </label>
+    <%= select_tag ('f[collection][]' if collection_name.present?), within_collection_options, id: 'within_collection', class: 'form-select search-field' %>
     <%= prepend %>
   <% end %>