@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -1,95 +1,98 @@
 @use '../../../allPartials' as *;
+@use '../../../layers';
 
-$top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+@layer seldon.components {
+  $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-.#{$px}-nav__list {
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: left;
-  opacity: 1;
+  .#{$px}-nav__list {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: left;
+    opacity: 1;
 
-  // Remove default outline only for mouse focus; keep it for keyboard (:focus-visible)
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &--offscreen {
-    opacity: 0;
-    pointer-events: none;
-    top: -100%;
-  }
-
-  @include isHeaderDesktop {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    top: 0;
-    transform: translateY(0);
-    transition:
-      $top-transition,
-      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
-    z-index: 5;
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
+    // Remove default outline only for mouse focus; keep it for keyboard (:focus-visible)
+    &:focus:not(:focus-visible) {
+      outline: none;
     }
 
-    // Offscreen state (transform/opacity) driven by .nav__list-container--search-expanded in _navigation.scss
     &--offscreen {
+      opacity: 0;
+      pointer-events: none;
+      top: -100%;
+    }
+
+    @include isHeaderDesktop {
+      align-items: flex-end;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      top: 0;
+      transform: translateY(0);
       transition:
         $top-transition,
         transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+        opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
+      z-index: 5;
 
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }
-    }
 
-    &__section {
-      display: grid;
-      gap: $spacing-sm;
-      width: 50%;
+      // Offscreen state (transform/opacity) driven by .nav__list-container--search-expanded in _navigation.scss
+      &--offscreen {
+        transition:
+          $top-transition,
+          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+          opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
 
-      &:only-child {
-        width: 100%;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
-    }
 
-    .#{$px}-accordion {
-      display: none;
-    }
-  }
+      &__section {
+        display: grid;
+        gap: $spacing-sm;
+        width: 50%;
+
+        &:only-child {
+          width: 100%;
+        }
+      }
 
-  @include isHeaderMobile {
-    &__section {
-      width: 100%;
+      .#{$px}-accordion {
+        display: none;
+      }
     }
-    .#{$px}-accordion {
-      border-bottom: 0;
-      border-top: 0;
-      margin-bottom: 0;
 
-      &-item {
-        &-label {
-          opacity: 1;
+    @include isHeaderMobile {
+      &__section {
+        width: 100%;
+      }
+      .#{$px}-accordion {
+        border-bottom: 0;
+        border-top: 0;
+        margin-bottom: 0;
+
+        &-item {
+          &-label {
+            opacity: 1;
+          }
         }
       }
-    }
-    .#{$px}-link--linkStylised {
-      border-bottom: 1px solid $light-gray;
-      flex-wrap: wrap;
-      padding: $snowflake-menu-padding 0;
-    }
+      .#{$px}-link--linkStylised {
+        border-bottom: 1px solid $light-gray;
+        flex-wrap: wrap;
+        padding: $snowflake-menu-padding 0;
+      }
 
-    .#{$px}-accordion-item-label {
-      padding: $snowflake-menu-padding 0;
+      .#{$px}-accordion-item-label {
+        padding: $snowflake-menu-padding 0;
+      }
     }
   }
 }

package/dist/scss/components/Navigation/_navigation.scss

@@ -1,162 +1,165 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-nav {
-  border-top: 1px solid $light-gray;
-  display: flex;
-  height: fit-content;
-  justify-content: center;
-
-  &__list-container {
+@layer seldon.components {
+  .#{$px}-nav {
+    border-top: 1px solid $light-gray;
     display: flex;
-    flex-direction: column;
+    height: fit-content;
     justify-content: center;
-    padding: 0 $spacing-sm;
-    position: relative;
-    width: 100%;
-
-    > .#{$px}-nav__list {
-      padding-top: 0;
-
-      @include isHeaderDesktop {
-        border-top: unset;
-      }
 
-      @include isHeaderMobile {
-        padding: 0 $spacing-md;
-      }
+    &__list-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 $spacing-sm;
+      position: relative;
+      width: 100%;
 
-      .#{$px}-nav__item + .#{$px}-accordion {
-        border-top: 0;
-      }
-    }
+      > .#{$px}-nav__list {
+        padding-top: 0;
 
-    @include isHeaderDesktop {
-      flex-direction: row;
-      overflow: visible; // allow nav list to slide up/down when search opens/closes
-      padding-right: $search-size;
+        @include isHeaderDesktop {
+          border-top: unset;
+        }
 
-      // When search is open, slide nav list up and fade out (transform so slide is visible; list keeps position relative)
-      &--search-expanded .#{$px}-nav__list {
-        opacity: 0;
-        pointer-events: none;
-        transform: translateY(-100%);
-        transition:
-          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-          opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+        @include isHeaderMobile {
+          padding: 0 $spacing-md;
+        }
 
-        @media (prefers-reduced-motion: reduce) {
-          transition: none;
+        .#{$px}-nav__item + .#{$px}-accordion {
+          border-top: 0;
         }
       }
-    }
-  }
 
-  @include isHeaderDesktop {
-    border: unset;
-    width: fit-content;
-
-    // Remove mobile button on larger screens
-    .#{$px}-nav__close-btn {
-      display: none;
+      @include isHeaderDesktop {
+        flex-direction: row;
+        overflow: visible; // allow nav list to slide up/down when search opens/closes
+        padding-right: $search-size;
+
+        // When search is open, slide nav list up and fade out (transform so slide is visible; list keeps position relative)
+        &--search-expanded .#{$px}-nav__list {
+          opacity: 0;
+          pointer-events: none;
+          transform: translateY(-100%);
+          transition:
+            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+        }
+      }
     }
-  }
 
-  &__close-btn:hover,
-  &__close-btn:focus {
-    background-color: $grey-50;
-  }
+    @include isHeaderDesktop {
+      border: unset;
+      width: fit-content;
 
-  // Mobile: list has horizontal padding (original behaviour). Use descendant selector so it
-  // still applies when list is wrapped by SSRMediaQuery. Links and accordion labels get vertical padding.
-  @include isHeaderMobile {
-    &__list-container .#{$px}-nav__list {
-      padding: 0 $spacing-md;
+      // Remove mobile button on larger screens
+      .#{$px}-nav__close-btn {
+        display: none;
+      }
     }
 
-    &__list-container .#{$px}-nav__list .#{$px}-link--linkStylised {
-      padding: $snowflake-menu-padding 0;
+    &__close-btn:hover,
+    &__close-btn:focus {
+      background-color: $grey-50;
     }
 
-    // linkMedium and linkLarge: same compact padding as linkLarge had (no snowflake padding)
-    &__list-container .#{$px}-nav__list .#{$px}-link--linkMedium,
-    &__list-container .#{$px}-nav__list .#{$px}-link--linkLarge {
-      padding: 0;
-    }
+    // Mobile: list has horizontal padding (original behaviour). Use descendant selector so it
+    // still applies when list is wrapped by SSRMediaQuery. Links and accordion labels get vertical padding.
+    @include isHeaderMobile {
+      &__list-container .#{$px}-nav__list {
+        padding: 0 $spacing-md;
+      }
 
-    &__list-container .#{$px}-nav__list .#{$px}-accordion-item-label {
-      padding: $snowflake-menu-padding 0;
-    }
-  }
+      &__list-container .#{$px}-nav__list .#{$px}-link--linkStylised {
+        padding: $snowflake-menu-padding 0;
+      }
 
-  // Radix Navigation Menu (desktop only) – viewport hosts submenu content
-  @include isHeaderDesktop {
-    &__radix-root {
-      display: flex;
-      flex-direction: column;
-      overflow: visible; // allow nav list to slide up/down when search opens/closes
-      position: relative;
+      // linkMedium and linkLarge: same compact padding as linkLarge had (no snowflake padding)
+      &__list-container .#{$px}-nav__list .#{$px}-link--linkMedium,
+      &__list-container .#{$px}-nav__list .#{$px}-link--linkLarge {
+        padding: 0;
+      }
 
-      // Keep fit-content so search button stays next to nav list (position: absolute relative to list-container)
-      width: fit-content;
+      &__list-container .#{$px}-nav__list .#{$px}-accordion-item-label {
+        padding: $snowflake-menu-padding 0;
+      }
     }
 
-    &__radix-viewport {
-      height: 0;
-      left: 0;
-      overflow: hidden;
-      pointer-events: none; // allow clicks to reach search when viewport is closed or when search is open
-      position: fixed;
-      right: 0;
-      top: calc(var(--banner-height, 0px) + var(--header-height));
-      transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
+    // Radix Navigation Menu (desktop only) – viewport hosts submenu content
+    @include isHeaderDesktop {
+      &__radix-root {
+        display: flex;
+        flex-direction: column;
+        overflow: visible; // allow nav list to slide up/down when search opens/closes
+        position: relative;
+
+        // Keep fit-content so search button stays next to nav list (position: absolute relative to list-container)
+        width: fit-content;
       }
 
-      &[data-state='open'] {
-        animation: nav-viewport-enter 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-        height: var(--radix-navigation-menu-viewport-height, auto);
-        pointer-events: auto; // submenu content must receive clicks when open
+      &__radix-viewport {
+        height: 0;
+        left: 0;
+        overflow: hidden;
+        pointer-events: none; // allow clicks to reach search when viewport is closed or when search is open
+        position: fixed;
+        right: 0;
+        top: calc(var(--banner-height, 0px) + var(--header-height));
+        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
         @media (prefers-reduced-motion: reduce) {
-          animation: none;
+          transition: none;
         }
-      }
 
-      &[data-state='closed'] {
-        animation: nav-viewport-exit 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+        &[data-state='open'] {
+          animation: nav-viewport-enter 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+          height: var(--radix-navigation-menu-viewport-height, auto);
+          pointer-events: auto; // submenu content must receive clicks when open
 
-        @media (prefers-reduced-motion: reduce) {
-          animation: none;
+          @media (prefers-reduced-motion: reduce) {
+            animation: none;
+          }
+        }
+
+        &[data-state='closed'] {
+          animation: nav-viewport-exit 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+
+          @media (prefers-reduced-motion: reduce) {
+            animation: none;
+          }
         }
       }
     }
   }
-}
 
-@include isHeaderDesktop {
-  @keyframes nav-viewport-enter {
-    from {
-      opacity: 0;
-      transform: translateY(-16px);
-    }
+  @include isHeaderDesktop {
+    @keyframes nav-viewport-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-16px);
+      }
 
-    to {
-      opacity: 1;
-      transform: translateY(0);
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
-  }
 
-  @keyframes nav-viewport-exit {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    @keyframes nav-viewport-exit {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
 
-    to {
-      opacity: 0;
-      transform: translateY(-16px);
+      to {
+        opacity: 0;
+        transform: translateY(-16px);
+      }
     }
   }
 }

package/dist/scss/components/NotificationBanner/_notificationBanner.scss

@@ -1,44 +1,47 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-notification-banner {
-  background: $light-gray;
-  color: $pure-black;
-  left: 0;
-  padding: $spacing-sm $spacing-md;
-
-  // Radix UI DismissableLayer sets pointer-events: none on document.body while dialogs are open.
-  // This banner is rendered outside the layer, so opt back in to remain clickable.
-  pointer-events: auto;
-  position: fixed;
-  text-align: center;
-  top: 0;
-  width: 100%;
-  z-index: $notification-banner-z-index;
-
-  @include text($bodySmall);
-
-  & > *,
-  & .#{$px}-text {
+@layer seldon.components {
+  .#{$px}-notification-banner {
+    background: $light-gray;
+    color: $pure-black;
+    left: 0;
+    padding: $spacing-sm $spacing-md;
+
+    // Radix UI DismissableLayer sets pointer-events: none on document.body while dialogs are open.
+    // This banner is rendered outside the layer, so opt back in to remain clickable.
+    pointer-events: auto;
+    position: fixed;
     text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: $notification-banner-z-index;
 
     @include text($bodySmall);
-  }
 
-  .#{$px}-link {
-    @include text($linkSmall);
-  }
+    & > *,
+    & .#{$px}-text {
+      text-align: center;
 
-  > .#{$px}-notification-banner-content {
-    color: $pure-black;
-    text-align: center;
+      @include text($bodySmall);
+    }
 
     .#{$px}-link {
       @include text($linkSmall);
     }
-  }
 
-  .#{$px}-notification-banner-link {
-    cursor: pointer;
-    text-decoration: underline;
+    > .#{$px}-notification-banner-content {
+      color: $pure-black;
+      text-align: center;
+
+      .#{$px}-link {
+        @include text($linkSmall);
+      }
+    }
+
+    .#{$px}-notification-banner-link {
+      cursor: pointer;
+      text-decoration: underline;
+    }
   }
 }

package/dist/scss/components/PageContentWrapper/_pageContentWrapper.scss

@@ -1,9 +1,12 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-page-content-wrapper {
-  padding: 0 $padding-md;
+@layer seldon.components {
+  .#{$px}-page-content-wrapper {
+    padding: 0 $padding-md;
 
-  @media (min-width: $breakpoint-md) {
-    padding: 0 $padding-lg;
+    @media (min-width: $breakpoint-md) {
+      padding: 0 $padding-lg;
+    }
   }
 }