@openeuropa/bcl-theme-default 0.4298.202511051800 → 0.4360.202601141610

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.4298.202511051800",
+  "version": "0.4360.202601141610",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^0.4298.202511051800",
-    "@openeuropa/bcl-builder": "^0.4298.202511051800",
-    "@openeuropa/bcl-twig-templates": "^0.4298.202511051800",
+    "@openeuropa/bcl-bootstrap": "^0.4360.202601141610",
+    "@openeuropa/bcl-builder": "^0.4360.202601141610",
+    "@openeuropa/bcl-twig-templates": "^0.4360.202601141610",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "cf21a1c538fac191785bb5f86c4d78d5b3b25d4c"
+  "gitHead": "2caf9255f88587416f6e83e572a1f20e4cf206f5"
 }

package/src/js/header/header.js

@@ -0,0 +1,91 @@
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+const HEADER_SELECTOR = ".bcl-header";
+const TOGGLER_SELECTOR = ".bcl-navbar-toggler";
+const OFFSET_VARIABLE = "--oel-mega-menu-offset-top";
+
+class Header {
+  scheduleUpdate = () => {
+    if (this.frameRequest) {
+      return;
+    }
+
+    this.frameRequest = window.requestAnimationFrame(() => {
+      this.frameRequest = null;
+      this.updateOffset();
+    });
+  };
+
+  constructor(element) {
+    this.element = element;
+    this.frameRequest = null;
+    this.resizeObserver = null;
+
+    this.init();
+  }
+
+  init() {
+    this.updateOffset();
+
+    EventHandler.on(window, "resize", this.scheduleUpdate);
+    EventHandler.on(window, "orientationchange", this.scheduleUpdate);
+
+    const togglers = SelectorEngine.find(TOGGLER_SELECTOR, this.element);
+    togglers.forEach((toggler) => {
+      // Some layouts move the header when the nav toggler expands; keep offset in sync.
+      EventHandler.on(toggler, "click", this.scheduleUpdate);
+    });
+  }
+
+  updateOffset() {
+    if (!this.element) {
+      return;
+    }
+
+    const rect = this.element.getBoundingClientRect();
+    const offset = Math.max(0, rect.top);
+    const value = `${offset}px`;
+
+    if (this.element.style.getPropertyValue(OFFSET_VARIABLE) === value) {
+      return;
+    }
+
+    this.element.style.setProperty(OFFSET_VARIABLE, value);
+  }
+
+  static init(root) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return;
+    }
+
+    const resolvedRoot = root || document;
+    const context =
+      resolvedRoot instanceof Element
+        ? resolvedRoot
+        : resolvedRoot.documentElement || document.documentElement;
+
+    const headers = SelectorEngine.find(HEADER_SELECTOR, context);
+
+    headers.forEach((headerElement) => {
+      if (headerElement.dataset.headerOffsetInitialized === "true") {
+        return;
+      }
+
+      headerElement.dataset.headerOffsetInitialized = "true";
+      new Header(headerElement);
+    });
+  }
+}
+
+if (typeof document !== "undefined") {
+  const initializeHeaderOffset = () => Header.init();
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeHeaderOffset);
+  } else {
+    initializeHeaderOffset();
+  }
+}
+
+export default Header;

package/src/js/index.esm.js

@@ -23,6 +23,7 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export {
   Alert,
@@ -43,4 +44,5 @@ export {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  Header,
 };

package/src/js/index.umd.js

@@ -23,6 +23,7 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export default {
   Alert,
@@ -43,4 +44,5 @@ export default {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  Header,
 };

package/src/js/mega-menu/mega-menu.js

@@ -2,15 +2,33 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
 import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
 
+const SUBMENU_HEIGHT_VARIABLE = "--oel-mega-menu-submenu-height";
+const SUBMENU_BODY_SELECTOR = ".__submenu_body";
+
 class MegaMenu {
+  scheduleSubmenuHeightUpdate = () => {
+    if (this.submenuHeightFrame) {
+      return;
+    }
+
+    this.submenuHeightFrame = window.requestAnimationFrame(() => {
+      this.submenuHeightFrame = null;
+      this.updateSubmenuHeight();
+    });
+  };
 
   constructor(root) {
     this.root = root;
+    this.submenuHeightFrame = null;
+    this.submenuBodies = SelectorEngine.find(SUBMENU_BODY_SELECTOR, this.root);
 
     this.backButton = SelectorEngine.findOne(".back-button", this.root);
     this.trigger = SelectorEngine.findOne(':scope > .dropdown-toggle[data-bs-toggle="dropdown"]', this.root);
     this.ul = SelectorEngine.findOne('.bcl-mega-menu__items.__level-1', this.root);
 
+    EventHandler.on(window, "resize", this.scheduleSubmenuHeightUpdate);
+    EventHandler.on(window, "orientationchange", this.scheduleSubmenuHeightUpdate);
+
     this.addSubmenuTriggerListeners();
     this.addBackButtonListener();
     this.addTriggerListeners();
@@ -73,6 +91,7 @@ class MegaMenu {
 
     // When the mega menu is opened, focus the first item in the menu.
     EventHandler.on(this.trigger, 'shown.bs.dropdown', () => {
+      this.scheduleSubmenuHeightUpdate();
       const panelId = this.trigger.getAttribute('aria-controls');
       const panel = panelId ? document.getElementById(panelId) : null;
       const firstFocusable = panel ? this.getFocusableChildren(panel)[0] : null;
@@ -136,6 +155,7 @@ class MegaMenu {
     trigger.setAttribute('aria-expanded', 'true');
     const panel = this.getPanelForTrigger(trigger);
     if (panel) panel.hidden = false;
+    this.scheduleSubmenuHeightUpdate();
   }
 
   /**
@@ -164,6 +184,43 @@ class MegaMenu {
     if (panel) panel.hidden = true;
   }
 
+  updateSubmenuHeight() {
+    if (!this.trigger || this.trigger.getAttribute('aria-expanded') !== 'true') {
+      return;
+    }
+
+    if (!this.submenuBodies || this.submenuBodies.length === 0) {
+      return;
+    }
+
+    const viewportHeight =
+      (document.documentElement && document.documentElement.clientHeight) ||
+      window.innerHeight ||
+      0;
+
+    if (!viewportHeight) {
+      return;
+    }
+
+    this.submenuBodies.forEach((submenuBody) => {
+      if (!submenuBody.isConnected || submenuBody.closest('[hidden]')) {
+        return;
+      }
+
+      const rect = submenuBody.getBoundingClientRect();
+      const visibleTop = Math.max(rect.top, 0);
+      // Use the distance to the viewport bottom instead of the current element
+      // height. Nested submenus inherit the parent max-height, so relying on
+      // rect.bottom would keep the parent's value and never recalc for children.
+      const availableHeight = Math.max(0, viewportHeight - visibleTop);
+      const value = `${availableHeight}px`;
+
+      if (submenuBody.style.getPropertyValue(SUBMENU_HEIGHT_VARIABLE) !== value) {
+        submenuBody.style.setProperty(SUBMENU_HEIGHT_VARIABLE, value);
+      }
+    });
+  }
+
   static init(selector = ".bcl-mega-menu") {
     const megaMenus = SelectorEngine.find(selector);
     megaMenus.forEach((menuEl) => new MegaMenu(menuEl));

package/src/scss/_header.scss

@@ -46,6 +46,7 @@ $header-link-active-background: #003776 !default;
 }
 
 .bcl-header {
+  --oel-mega-menu-offset-top: 0px;
   .notification {
     position: relative;
     padding-right: 0;
@@ -96,10 +97,9 @@ $header-link-active-background: #003776 !default;
   header:has(.bcl-header__navbar #main-navbar.show),
   header:has(.bcl-header__navbar.collapsing),
   header:has(.bcl-header__navbar.show) {
-    height: 100vh;
+    height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
     display: flex;
     flex-flow: column;
-    overflow: auto;
 
     > div:has(.breadcrumb) {
       display: none;
@@ -127,6 +127,10 @@ $header-link-active-background: #003776 !default;
     z-index: 1030;
     width: 100%;
     align-items: flex-start;
+    height: 100%;
+    &:not(:has(.bcl-mega-menu__container.show)) {
+      overflow: auto;
+    }
     .navbar-nav {
       width: 100%;
       margin-top: 1rem;

package/src/scss/_input.scss

@@ -1,15 +1,57 @@
 /* stylelint-disable no-duplicate-selectors, selector-no-qualifying-type, no-descending-specificity */
 
+$default-border-color: $gray-600;
+
 .form-select {
   padding-top: $input-padding-y-lg;
   padding-bottom: $input-padding-y-lg;
   padding-left: $input-padding-x-lg;
   font-size: $form-font-size-lg;
+  border-color: $default-border-color;
+  &:focus-visible {
+    border-color: $default-border-color;
+    box-shadow: none;
+    @include form-focus-ring();
+    &.is-valid {
+      outline-color: $success;
+      &:focus {
+        box-shadow: none;
+        border-color: $default-border-color;
+      }
+    }
+    &.is-invalid {
+      outline-color: $danger;
+      &:focus {
+        box-shadow: none;
+        border-color: $default-border-color;
+      }
+    }
+  }
+  &:focus {
+    box-shadow: none;
+    border-color: $default-border-color;
+  }
+  &.is-valid,
+  &.is-invalid {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.form-check-input {
+  border-color: $primary;
   &:focus-visible {
-    outline: 2px solid $primary;
+    &[type="radio"] {
+      border-radius: 50%;
+    }
+  }
+  &:focus {
+    border-color: $primary;
     box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
+  }
+  &:focus-visible {
+    @include form-focus-ring(1px);
   }
 }
 
@@ -18,16 +60,35 @@
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $form-font-size-lg;
   border-radius: 0.3rem;
+  border-color: $default-border-color;
   &::file-selector-button {
     padding: $input-padding-y-lg $input-padding-x-lg;
     margin: (-$input-padding-y-lg) $input-padding-x-lg (-$input-padding-y-lg)
       (-$input-padding-x-lg);
   }
-  &:focus-visible {
-    outline: 2px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
+  &:focus:focus-visible {
+    border-color: $default-border-color;
+    @include form-focus-ring();
+  }
+  &.is-valid,
+  &.is-invalid {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  &.is-valid {
+    &:focus:focus-visible {
+      transition: none;
+      border-color: $default-border-color;
+      @include form-focus-ring($outline-color: $success);
+    }
+  }
+  &.is-invalid {
+    &:focus:focus-visible {
+      transition: none;
+      border-color: $default-border-color;
+      @include form-focus-ring($outline-color: $danger);
+    }
   }
 }
 .form-check:not(.form-switch) {
@@ -41,20 +102,6 @@
     margin-top: 0.15rem;
   }
 }
-.form-check-input {
-  &:focus-visible {
-    outline: 4px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: 0;
-    &[type="radio"] {
-      border-radius: 50%;
-    }
-  }
-  &:checked:focus-visible {
-    border-color: $white;
-  }
-}
 
 @include media-breakpoint-up(md) {
   .form-check:not(.form-switch) {
@@ -90,24 +137,18 @@
 textarea.form-control,
 .form-control {
   &.is-invalid {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
   }
   &.is-valid {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
   }
 }
 
-.form-select:not([multiple]):not([size]) {
-  &:focus-visible {
-    outline: 2px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
-  }
+select.form-select:not([multiple]):not([size]) {
   &.is-invalid {
     background-image:
       url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
-      url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+      url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
   }
   &.is-valid {
     background-image:

package/src/scss/_mega-menu.scss

@@ -193,6 +193,8 @@ ul.bcl-mega-menu__items {
   @include media-breakpoint-up(lg) {
     block-size: $mm-panel-height;
     overflow-y: auto;
+    scrollbar-color: $primary-bg-light-subtle transparent;
+    scrollbar-width: thin;
   }
   // Add space above in mobile viewport.
   @include media-breakpoint-down(lg) {
@@ -275,34 +277,6 @@ ul.bcl-mega-menu__items {
         }
       }
     }
-
-    // The see-all link is at the bottom of the list.
-    &:has(> a.see-all-button) {
-      position: sticky;
-      inset-block-start: 100%;
-    }
-    > a.see-all-button {
-      border-top: none;
-      &:after {
-        background: $neutral-border-color;
-        content: "";
-        block-size: 1px;
-        inset-inline-start: 0;
-        position: absolute;
-        inset-block-start: 0;
-        // Replicate horizontal padding of parent element.
-        inset-inline: $mm-gutter-x;
-      }
-      > svg {
-        inline-size: 0.8rem;
-      }
-      > span {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: block;
-        white-space: nowrap;
-      }
-    }
   }
 }
 
@@ -314,6 +288,21 @@ ul.bcl-mega-menu__items {
     // Avoid a space between the parent menu and the submenu.
     @include padding-right(0);
   }
+  @include media-breakpoint-down(lg) {
+    > .bcl-mega-menu__items {
+      &:has(.bcl-mega-menu__submenu:not([hidden])) {
+        > .__leaf,
+        > .__parent {
+          display: none;
+        }
+      }
+      > .__parent {
+        &:has(.bcl-mega-menu__submenu:not([hidden])) {
+          display: block;
+        }
+      }
+    }
+  }
 }
 
 // Nested submenu.
@@ -372,40 +361,42 @@ ul.bcl-mega-menu__items {
       }
     }
   }
-}
-
-// Second level items column.
-.bcl-mega-menu__second-submenu {
-  > .tab-content > .tab-pane {
-    // In desktop, the entire second-level list has a light blue background.
-    @include media-breakpoint-up(lg) {
-      background: $primary-bg-subtle;
-    }
-    // Hide other parts of the mega menu in mobile, when a sub-submenu is open.
-    @include media-breakpoint-down(lg) {
-      .bcl-mega-menu__container:has(&.active) {
-        .bcl-mega-menu__info,
-        .bcl-mega-menu__first-submenu {
-          display: none;
-        }
+  @include media-breakpoint-up(lg) {
+    > .bcl-mega-menu__items {
+      flex: 1 1 0;
+      overflow-y: auto;
+      > li > :is(span, a, button) {
+        @include mm-item-padding($px: map-get($spacers, "4-25"));
       }
     }
-    // The panel title only shows in mobile.
-    > .panel-title {
-      @include mm-item-padding(map-get($spacers, 3));
-      margin: 0;
-      color: $dark;
-      background: $primary-bg-subtle;
-      display: block;
-      font-size: 20px;
+  }
+  .__see_all {
+    border-top: 1px solid $neutral-border-color;
+    @include media-breakpoint-up(lg) {
+      border-top: 1px solid $primary-border-subtle;
+      margin: 0 map-get($spacers, "4-25");
+    }
+    > .see-all-button {
+      @include mm-item-padding();
+      // Use flex for icon spacing.
+      display: flex;
+      align-items: center;
+      color: $link-color;
       @include media-breakpoint-up(lg) {
-        display: none;
+        padding: $mm-gutter-y map-get($spacers, "4-25");
+        margin: 0 -1.75rem;
       }
-    }
-    // Items get a bit more space to the sides in xl viewport.
-    @include media-breakpoint-up(xl) {
-      > ul > li > * {
-        margin: 0 map-get($spacers, "2-5");
+      &:hover {
+        background: $primary-bg-subtle;
+      }
+      > svg {
+        flex-shrink: 0;
+      }
+      > span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        white-space: nowrap;
       }
     }
   }
@@ -429,4 +420,12 @@ ul.bcl-mega-menu__items {
       transform: translateX(-50%);
     }
   }
+  .bcl-mega-menu {
+    .__submenu_body {
+      max-height: var(--oel-mega-menu-submenu-height);
+      overflow: auto;
+      scrollbar-color: $primary-bg-light-subtle transparent;
+      scrollbar-width: thin;
+    }
+  }
 }

package/src/scss/_multiselect-2.scss

@@ -11,7 +11,7 @@
   --ss-font-color: #4d4d4d;
   --ss-font-placeholder-color: #212529;
   --ss-disabled-color: #dcdee2;
-  --ss-border-color: #dcdee2;
+  --ss-border-color: #6c757d;
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
@@ -77,8 +77,8 @@
   overflow: hidden;
   min-height: 38px;
 
-  &:focus {
-    box-shadow: 0 0 5px var(--ss-focus-color);
+  &:focus-visible {
+    @include form-focus-ring();
   }
 
   &.form-select {
@@ -330,7 +330,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 5px var(--ss-focus-color);
+        @include form-focus-ring();
       }
     }
 
@@ -534,21 +534,31 @@
   }
 }
 
-.ss-main.multi-select.is-invalid,
-.was-validated .multi-select:invalid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-invalid,
+.was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
   border-color: $danger;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a51f2c' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $danger;
+  }
 }
-.ss-main.multi-select.is-valid,
-.was-validated .multi-select:valid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-valid,
+.was-validated .multi-select:valid + .form-select.ss-main.multi-select {
   border-color: $success;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $success;
+  }
 }
 
 .ss-sr-only {

package/src/scss/_pagination.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 .pagination {
+  flex-wrap: wrap;
   .page-item {
     .page-link {
       // Align icons vertically and focus styling

package/src/scss/_search-form.scss

@@ -39,6 +39,10 @@ $search-spacers: (
       padding-right: map-get($search-spacers, "submit-spacer-right");
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      &:focus-visible {
+        outline-offset: 2px;
+        outline-color: $primary;
+      }
     }
     .bcl-search-form__group {
       display: flex;

package/src/scss/base/_colors.scss

@@ -25,6 +25,7 @@ $neutral-border-color: #b9c5e9;
 $table-hover-bg-factor: 0.1;
 
 // Background colors as before for Alerts and list-group
+$primary-bg-light-subtle: tint-color($primary, 70%);
 $primary-bg-subtle: tint-color($primary, 90%);
 $secondary-bg-subtle: tint-color($secondary, 90%);
 $success-bg-subtle: tint-color($success, 90%);