@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/LinkList/_linkList.scss

@@ -1,26 +1,29 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-link-list {
-  @include media($size-sm, $type: max) {
-    max-width: 30rem;
-  }
+@layer seldon.components {
+  .#{$px}-link-list {
+    @include media($size-sm, $type: max) {
+      max-width: 30rem;
+    }
 
-  .#{$px}-link {
-    .seldon-text--link {
-      text-decoration: none;
+    .#{$px}-link {
+      .seldon-text--link {
+        text-decoration: none;
+      }
     }
-  }
 
-  &--item {
-    // mobile first
-    grid-column: span 2;
+    &--item {
+      // mobile first
+      grid-column: span 2;
 
-    @include media($size-md) {
-      grid-column: span 3;
-    }
+      @include media($size-md) {
+        grid-column: span 3;
+      }
 
-    @include media($size-lg) {
-      grid-column: span 4;
+      @include media($size-lg) {
+        grid-column: span 4;
+      }
     }
   }
 }

package/dist/scss/components/Loader/_loader.scss

@@ -1,26 +1,29 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-loader {
-  animation: rotation 1s linear infinite;
-  border: 2px solid $black-100;
-  border-bottom-color: transparent;
-  border-radius: $radius-3xl;
-  box-sizing: border-box;
-  display: flex;
-  height: var(--button-label-line-height);
-  width: var(--button-label-line-height);
+@layer seldon.components {
+  .#{$px}-loader {
+    animation: rotation 1s linear infinite;
+    border: 2px solid $black-100;
+    border-bottom-color: transparent;
+    border-radius: $radius-3xl;
+    box-sizing: border-box;
+    display: flex;
+    height: var(--button-label-line-height);
+    width: var(--button-label-line-height);
 
-  &--centered {
-    margin: auto;
-  }
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
+    &--centered {
+      margin: auto;
     }
 
-    100% {
-      transform: rotate(360deg);
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
     }
   }
 }

package/dist/scss/components/Modal/_modal.scss

@@ -1,33 +1,36 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-modal {
-  background-color: $white-100;
-  left: 50%;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: auto;
-  padding: $padding-md;
-  position: fixed;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 30;
+@layer seldon.components {
+  .#{$px}-modal {
+    background-color: $white-100;
+    left: 50%;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: auto;
+    padding: $padding-md;
+    position: fixed;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 30;
 
-  &__close--left {
-    left: 0.4rem;
-    right: auto;
-  }
+    &__close--left {
+      left: 0.4rem;
+      right: auto;
+    }
 
-  &__overlay {
-    background-color: $black-75;
-    inset: 0;
-    position: fixed;
-    z-index: 15;
-  }
+    &__overlay {
+      background-color: $black-75;
+      inset: 0;
+      position: fixed;
+      z-index: 15;
+    }
 
-  &__close {
-    position: absolute;
-    right: $spacing-sm;
-    top: $spacing-sm;
-    z-index: 100;
+    &__close {
+      position: absolute;
+      right: $spacing-sm;
+      top: $spacing-sm;
+      z-index: 100;
+    }
   }
 }

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -1,114 +1,117 @@
 @use '../../../allPartials' as *;
+@use '../../../layers';
 
-.#{$px}-nav__item {
-  .#{$px}-link:not(:hover):not(:focus-visible):not(.#{$px}-nav__item--view-all) {
-    text-decoration: none;
-  }
-
-  & .#{$px}-link--linkStylised {
-    @include media($breakpoint-md) {
-      padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
-      position: relative;
-      text-align: center;
-
-      &:hover::after,
-      &:focus-visible::after {
-        background: $pure-black;
-        bottom: -1px;
-        content: '';
-        height: 1px;
-        left: 0;
-        position: absolute;
-        right: 0;
-      }
+@layer seldon.components {
+  .#{$px}-nav__item {
+    .#{$px}-link:not(:hover):not(:focus-visible):not(.#{$px}-nav__item--view-all) {
+      text-decoration: none;
     }
-  }
 
-  @include isHeaderMobile {
-    a {
-      white-space: normal;
-    }
-
-    &--nav-link-start {
-      padding-top: $spacing-micro;
+    & .#{$px}-link--linkStylised {
+      @include media($breakpoint-md) {
+        padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
+        position: relative;
+        text-align: center;
+
+        &:hover::after,
+        &:focus-visible::after {
+          background: $pure-black;
+          bottom: -1px;
+          content: '';
+          height: 1px;
+          left: 0;
+          position: absolute;
+          right: 0;
+        }
+      }
     }
-  }
 
-  @include isHeaderDesktop {
-    align-items: center;
-    display: flex;
-    max-width: unset;
-  }
-
-  .#{$px}-nav__item-trigger > label::after {
     @include isHeaderMobile {
-      content: '\203A';
-      display: inline-block;
-      font-size: 1.75rem;
-      font-variation-settings: 'wght' 400;
-      position: absolute;
-      right: 0;
-      top: 35%;
-      transform: translateY(-50%);
+      a {
+        white-space: normal;
+      }
+
+      &--nav-link-start {
+        padding-top: $spacing-micro;
+      }
     }
 
     @include isHeaderDesktop {
-      content: '';
+      align-items: center;
+      display: flex;
+      max-width: unset;
     }
-  }
 
-  & > button {
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    display: flex;
-    padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
-  }
+    .#{$px}-nav__item-trigger > label::after {
+      @include isHeaderMobile {
+        content: '\203A';
+        display: inline-block;
+        font-size: 1.75rem;
+        font-variation-settings: 'wght' 400;
+        position: absolute;
+        right: 0;
+        top: 35%;
+        transform: translateY(-50%);
+      }
+
+      @include isHeaderDesktop {
+        content: '';
+      }
+    }
 
-  @include isHeaderMobile {
-    & > a,
     & > button {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
       display: flex;
+      padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
     }
-  }
-}
 
-.#{$px}-nav__list__section {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-
-  .#{$px}-text {
-    margin-bottom: 0;
-  }
-
-  a {
     @include isHeaderMobile {
-      display: block;
+      & > a,
+      & > button {
+        display: flex;
+      }
     }
   }
 
-  &--start,
-  &--end {
-    &__title {
+  .#{$px}-nav__list__section {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    .#{$px}-text {
+      margin-bottom: 0;
+    }
+
+    a {
       @include isHeaderMobile {
-        border-bottom: 1px solid $light-gray;
-        padding-bottom: $spacing-sm;
+        display: block;
       }
     }
-  }
 
-  &--end {
-    @include isHeaderMobile {
-      margin-top: $spacing-md;
+    &--start,
+    &--end {
+      &__title {
+        @include isHeaderMobile {
+          border-bottom: 1px solid $light-gray;
+          padding-bottom: $spacing-sm;
+        }
+      }
     }
-  }
 
-  &--start {
-    margin-right: 1rem;
+    &--end {
+      @include isHeaderMobile {
+        margin-top: $spacing-md;
+      }
+    }
 
-    @include isHeaderMobile {
-      margin-right: 0;
+    &--start {
+      margin-right: 1rem;
+
+      @include isHeaderMobile {
+        margin-right: 0;
+      }
     }
   }
 }

package/dist/scss/components/Navigation/NavigationItemWithSubmenu/_navigationItemWithSubmenu.scss

@@ -1,114 +1,117 @@
 @use '../../../allPartials' as *;
+@use '../../../layers';
+
+@layer seldon.components {
+  .#{$px}-navigation-item-with-submenu {
+    flex-direction: column;
+    justify-content: center;
+
+    & > button {
+      color: $pure-black;
+      display: flex;
+      justify-content: flex-start;
+      position: relative;
+      width: 100%;
 
-.#{$px}-navigation-item-with-submenu {
-  flex-direction: column;
-  justify-content: center;
-
-  & > button {
-    color: $pure-black;
-    display: flex;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-
-    @include isHeaderDesktop {
-      color: unset;
-      display: block;
-      text-align: center;
+      @include isHeaderDesktop {
+        color: unset;
+        display: block;
+        text-align: center;
 
-      // Match .nav__item .nav__link--linkStylised typography so trigger label aligns with link labels
-      @include text($linkStylised);
+        // Match .nav__item .nav__link--linkStylised typography so trigger label aligns with link labels
+        @include text($linkStylised);
 
-      &:focus-visible {
-        @include focus-ring($border-radius: $radius-xs);
+        &:focus-visible {
+          @include focus-ring($border-radius: $radius-xs);
+        }
       }
     }
-  }
 
-  @include isHeaderDesktop {
-    // Underline on button (full-width like .nav__item .nav__link--linkStylised) when open, hover or focus
-    &[data-state='open'] > button::after,
-    &--hovered > button::after,
-    & > button:hover::after,
-    & > button:focus-visible::after {
-      background-color: $pure-black;
-      bottom: -1px;
-      content: '';
-      height: 1px;
-      left: 0;
-      position: absolute;
-      right: 0;
-    }
+    @include isHeaderDesktop {
+      // Underline on button (full-width like .nav__item .nav__link--linkStylised) when open, hover or focus
+      &[data-state='open'] > button::after,
+      &--hovered > button::after,
+      & > button:hover::after,
+      & > button:focus-visible::after {
+        background-color: $pure-black;
+        bottom: -1px;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
 
-    // Radix: submenu content is rendered in viewport; these styles apply when content is in viewport
-    &__submenu[data-state='open'] {
-      box-sizing: border-box;
-      cursor: default;
-      left: 0;
-      max-height: calc(90vh - #{$header-height} + var(--banner-height));
-      min-width: 100%;
-      -ms-overflow-style: none;
-      overflow-y: auto;
-      padding: 0;
-      scrollbar-width: none;
-      width: 100%;
+      // Radix: submenu content is rendered in viewport; these styles apply when content is in viewport
+      &__submenu[data-state='open'] {
+        box-sizing: border-box;
+        cursor: default;
+        left: 0;
+        max-height: calc(90vh - #{$header-height} + var(--banner-height));
+        min-width: 100%;
+        -ms-overflow-style: none;
+        overflow-y: auto;
+        padding: 0;
+        scrollbar-width: none;
+        width: 100%;
 
-      &::-webkit-scrollbar {
-        display: none;
-      }
+        &::-webkit-scrollbar {
+          display: none;
+        }
 
-      .#{$px}-nav__list__section {
-        opacity: 1;
+        .#{$px}-nav__list__section {
+          opacity: 1;
+        }
       }
-    }
 
-    // When submenu is rendered inside nav viewport: panel and link styles (@at-root so selector is viewport → submenu)
-    @at-root .#{$px}-nav__radix-viewport .#{$px}-navigation-item-with-submenu__submenu {
-      background-color: $pure-white;
-      box-sizing: border-box;
-
-      .#{$px}-nav__list {
-        align-items: flex-start;
+      // When submenu is rendered inside nav viewport: panel and link styles (@at-root so selector is viewport → submenu)
+      @at-root .#{$px}-nav__radix-viewport .#{$px}-navigation-item-with-submenu__submenu {
+        background-color: $pure-white;
         box-sizing: border-box;
-        padding: $spacing-md;
-        width: 100%;
-      }
 
-      .#{$px}-nav__list .#{$px}-link--linkStylised {
-        padding: $snowflake-menu-padding 0;
-      }
+        .#{$px}-nav__list {
+          align-items: flex-start;
+          box-sizing: border-box;
+          padding: $spacing-md;
+          width: 100%;
+        }
 
-      // Single underline on hover/focus for submenu links
-      .#{$px}-nav__list .#{$px}-nav__item {
-        .#{$px}-link--linkStylised,
-        .#{$px}-link--linkMedium,
-        .#{$px}-link--linkLarge {
-          text-decoration: none;
+        .#{$px}-nav__list .#{$px}-link--linkStylised {
+          padding: $snowflake-menu-padding 0;
+        }
 
-          &:hover,
-          &:focus-visible {
+        // Single underline on hover/focus for submenu links
+        .#{$px}-nav__list .#{$px}-nav__item {
+          .#{$px}-link--linkStylised,
+          .#{$px}-link--linkMedium,
+          .#{$px}-link--linkLarge {
+            text-decoration: none;
+
+            &:hover,
+            &:focus-visible {
+              text-decoration: underline;
+              text-decoration-thickness: 1px;
+              text-underline-offset: 1px;
+            }
+          }
+
+          // View all link: always underlined
+          .#{$px}-nav__item--view-all {
             text-decoration: underline;
             text-decoration-thickness: 1px;
             text-underline-offset: 1px;
           }
         }
 
-        // View all link: always underlined
-        .#{$px}-nav__item--view-all {
-          text-decoration: underline;
-          text-decoration-thickness: 1px;
-          text-underline-offset: 1px;
+        .#{$px}-nav__list .#{$px}-link--linkMedium,
+        .#{$px}-nav__list .#{$px}-link--linkLarge {
+          padding: 0;
         }
       }
-
-      .#{$px}-nav__list .#{$px}-link--linkMedium,
-      .#{$px}-nav__list .#{$px}-link--linkLarge {
-        padding: 0;
-      }
     }
-  }
 
-  &__submenu--mobile.#{$px}-nav__list {
-    padding: 0 0 $snowflake-menu-padding;
+    &__submenu--mobile.#{$px}-nav__list {
+      padding: 0 0 $snowflake-menu-padding;
+    }
   }
 }