@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -1,204 +1,207 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-$dropdown-height: 240px;
-$dropdown-width: 320px;
+@layer seldon.patterns {
+  $dropdown-height: 240px;
+  $dropdown-width: 320px;
 
-.#{$px}-filter-dropdown-menu {
-  background: $white-100;
-  border-radius: $radius-xs;
-  box-shadow: 0 4px 6px $medium-gray;
-  display: flex;
-  flex-direction: column;
-  padding: $spacing-sm 0;
-  width: $dropdown-width;
-
-  &__filters {
+  .#{$px}-filter-dropdown-menu {
+    background: $white-100;
+    border-radius: $radius-xs;
+    box-shadow: 0 4px 6px $medium-gray;
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
-    max-height: $dropdown-height;
-    overflow-y: auto;
-    padding: 0 $spacing-sm;
-    padding-bottom: $spacing-sm;
+    padding: $spacing-sm 0;
+    width: $dropdown-width;
 
-    &--mobile {
-      padding: $spacing-md;
+    &__filters {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      max-height: $dropdown-height;
+      overflow-y: auto;
+      padding: 0 $spacing-sm;
+      padding-bottom: $spacing-sm;
+
+      &--mobile {
+        padding: $spacing-md;
+      }
     }
-  }
 
-  &__buttons-wrap {
-    border-top: 1px solid $bg-border;
-    display: flex;
-    gap: $spacing-sm;
-    justify-content: space-between;
-    padding: $spacing-sm $spacing-sm 0 $spacing-sm;
-
-    > .#{$px}-button {
-      display: inline-flex;
-      flex: 1 1 0;
-      justify-content: center;
-      margin: 0;
-      max-width: none;
-      min-width: 0;
-      text-align: center;
-      white-space: nowrap;
-    }
-
-    &--drawer {
-      box-shadow: 0 -4px 8px -4px $medium-gray;
+    &__buttons-wrap {
+      border-top: 1px solid $bg-border;
       display: flex;
-      flex-direction: row;
       gap: $spacing-sm;
-      min-height: fit-content;
-      padding: $spacing-md $spacing-sm;
-      width: 100%;
+      justify-content: space-between;
+      padding: $spacing-sm $spacing-sm 0 $spacing-sm;
+
+      > .#{$px}-button {
+        display: inline-flex;
+        flex: 1 1 0;
+        justify-content: center;
+        margin: 0;
+        max-width: none;
+        min-width: 0;
+        text-align: center;
+        white-space: nowrap;
+      }
+
+      &--drawer {
+        box-shadow: 0 -4px 8px -4px $medium-gray;
+        display: flex;
+        flex-direction: row;
+        gap: $spacing-sm;
+        min-height: fit-content;
+        padding: $spacing-md $spacing-sm;
+        width: 100%;
+      }
     }
-  }
 
-  &__mobile-wrap {
-    box-shadow: 0 -4px 8px -4px $medium-gray;
-    padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
-  }
+    &__mobile-wrap {
+      box-shadow: 0 -4px 8px -4px $medium-gray;
+      padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
+    }
 
-  // Sort dropdown has no footer buttons; this spacer preserves the safe-area
-  // inset so the last option stays clear of the iOS home indicator.
-  &__mobile-safe-area {
-    padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
-  }
+    // Sort dropdown has no footer buttons; this spacer preserves the safe-area
+    // inset so the last option stays clear of the iOS home indicator.
+    &__mobile-safe-area {
+      padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
+    }
 
-  &__header {
-    margin-bottom: $spacing-sm;
-    margin-top: 0;
+    &__header {
+      margin-bottom: $spacing-sm;
+      margin-top: 0;
 
-    &--mobile {
-      padding: $spacing-md $spacing-md 0 $spacing-md;
+      &--mobile {
+        padding: $spacing-md $spacing-md 0 $spacing-md;
+      }
     }
-  }
-
-  &__button-text {
-    color: $white-100;
-  }
 
-  &--mobile {
-    border-radius: $radius-xs $radius-xs 0 0;
-    box-shadow: none;
-    height: 100%;
-    padding: 0;
-    width: 100vw;
-  }
+    &__button-text {
+      color: $white-100;
+    }
 
-  .#{$px}-input {
-    &__wrapper {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      max-height: 2rem;
+    &--mobile {
+      border-radius: $radius-xs $radius-xs 0 0;
+      box-shadow: none;
+      height: 100%;
+      padding: 0;
+      width: 100vw;
     }
 
-    &__label {
+    .#{$px}-input {
+      &__wrapper {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        max-height: 2rem;
+      }
+
+      &__label {
+        align-self: center;
+        margin: 0;
+      }
+    }
+    .#{$px}-input__input[type='radio'] {
       align-self: center;
-      margin: 0;
+      margin-left: auto;
     }
-  }
-  .#{$px}-input__input[type='radio'] {
-    align-self: center;
-    margin-left: auto;
-  }
-  .#{$px}-input__input[type='checkbox']:disabled {
-    border-color: $keyline-gray;
-  }
-  .#{$px}-input__input[type='checkbox'] {
-    align-self: center;
-    appearance: none;
-    background: $bg-default;
-    border: 1px solid $bg-inverted;
-    border-radius: $radius-xs;
-    display: grid;
-    height: 16px;
-    margin-bottom: 0;
-    margin-left: auto;
-    padding: 0;
-    place-content: center;
-    width: 16px;
-
-    &::after {
-      background: $text-inverted;
-      content: '';
-      height: 11px;
-      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E");
-      mask-position: center;
-      mask-repeat: no-repeat;
-      mask-size: 16px 11px;
-      opacity: 0;
-      width: 16px;
+    .#{$px}-input__input[type='checkbox']:disabled {
+      border-color: $keyline-gray;
     }
-
-    &:checked {
-      background: $bg-inverted;
+    .#{$px}-input__input[type='checkbox'] {
+      align-self: center;
+      appearance: none;
+      background: $bg-default;
+      border: 1px solid $bg-inverted;
+      border-radius: $radius-xs;
+      display: grid;
+      height: 16px;
+      margin-bottom: 0;
+      margin-left: auto;
+      padding: 0;
+      place-content: center;
+      width: 16px;
 
       &::after {
-        opacity: 1;
+        background: $text-inverted;
+        content: '';
+        height: 11px;
+        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 16px 11px;
+        opacity: 0;
+        width: 16px;
+      }
+
+      &:checked {
+        background: $bg-inverted;
+
+        &::after {
+          opacity: 1;
+        }
       }
     }
   }
-}
 
-.#{$px}-filter-dropdown-menu .#{$px}-filter-input__input__wrapper {
-  max-height: 2rem;
-}
+  .#{$px}-filter-dropdown-menu .#{$px}-filter-input__input__wrapper {
+    max-height: 2rem;
+  }
 
-// Filter option labels use the labels/label-small-bold type token.
-.#{$px}-filter-dropdown-menu,
-.#{$px}-filter-drawer-menu {
-  .#{$px}-input__label.#{$px}-text {
-    @include label-styles($font-size: $font-size-label-small, $font-weight: 600);
+  // Filter option labels use the labels/label-small-bold type token.
+  .#{$px}-filter-dropdown-menu,
+  .#{$px}-filter-drawer-menu {
+    .#{$px}-input__label.#{$px}-text {
+      @include label-styles($font-size: $font-size-label-small, $font-weight: 600);
+    }
   }
-}
 
-.#{$px}-filter-drawer-mobile {
-  height: min(70dvh, 640px);
-  padding: 0;
+  .#{$px}-filter-drawer-mobile {
+    height: min(70dvh, 640px);
+    padding: 0;
 
-  .#{$px}-drawer__content {
-    flex: 1 1 auto;
-    height: auto;
-    min-height: 0;
-    overflow: hidden;
-  }
+    .#{$px}-drawer__content {
+      flex: 1 1 auto;
+      height: auto;
+      min-height: 0;
+      overflow: hidden;
+    }
 
-  .#{$px}-filter-dropdown-menu--mobile {
-    min-height: 0;
-    overflow: hidden;
-  }
+    .#{$px}-filter-dropdown-menu--mobile {
+      min-height: 0;
+      overflow: hidden;
+    }
 
-  .#{$px}-filter-dropdown-menu__filters--mobile {
-    flex: 1 1 auto;
-    max-height: none;
-    min-height: 0;
-    overflow-y: auto;
-  }
+    .#{$px}-filter-dropdown-menu__filters--mobile {
+      flex: 1 1 auto;
+      max-height: none;
+      min-height: 0;
+      overflow-y: auto;
+    }
 
-  .#{$px}-filter-dropdown-menu__mobile-wrap {
-    flex: 0 0 auto;
-    margin-top: 0;
-  }
+    .#{$px}-filter-dropdown-menu__mobile-wrap {
+      flex: 0 0 auto;
+      margin-top: 0;
+    }
 
-  .#{$px}-filter-dropdown-menu__mobile-safe-area {
-    flex: 0 0 auto;
+    .#{$px}-filter-dropdown-menu__mobile-safe-area {
+      flex: 0 0 auto;
+    }
   }
-}
 
-.#{$px}-filter-drawer {
-  .#{$px}-filter-drawer-menu {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-  }
+  .#{$px}-filter-drawer {
+    .#{$px}-filter-drawer-menu {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+    }
 
-  .#{$px}-filter-dropdown-menu__buttons-wrap--drawer {
-    flex: 0 0 auto;
-    margin-top: auto;
-    overflow: visible;
+    .#{$px}-filter-dropdown-menu__buttons-wrap--drawer {
+      flex: 0 0 auto;
+      margin-top: auto;
+      overflow: visible;
+    }
   }
 }

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -1,40 +1,43 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-filters-inline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $spacing-sm;
+@layer seldon.patterns {
+  .#{$px}-filters-inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-sm;
 
-  // Desktop: align the Sort filter to the right of the filter row. The Sort
-  // pill is already rendered last in the DOM (see FiltersInline.tsx) so visual
-  // and tab order match; this just pushes it to the right edge.
-  @include media($breakpoint-md) {
-    > .#{$px}-filters-inline__sort {
-      margin-left: auto;
+    // Desktop: align the Sort filter to the right of the filter row. The Sort
+    // pill is already rendered last in the DOM (see FiltersInline.tsx) so visual
+    // and tab order match; this just pushes it to the right edge.
+    @include media($breakpoint-md) {
+      > .#{$px}-filters-inline__sort {
+        margin-left: auto;
+      }
     }
-  }
 
-  // Mobile: filter buttons scroll horizontally and overflow off-screen instead of wrapping.
-  @include media($breakpoint-md, 'max') {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
+    // Mobile: filter buttons scroll horizontally and overflow off-screen instead of wrapping.
+    @include media($breakpoint-md, 'max') {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scrollbar-width: none;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+      &::-webkit-scrollbar {
+        display: none;
+      }
 
-    > * {
-      flex: 0 0 auto;
+      > * {
+        flex: 0 0 auto;
+      }
     }
   }
-}
 
-.#{$px}-filter-drawer {
-  max-width: 380px;
-  padding: 0;
-}
+  .#{$px}-filter-drawer {
+    max-width: 380px;
+    padding: 0;
+  }
 
-.#{$px}-filter-drawer-menu {
-  padding: $spacing-md;
+  .#{$px}-filter-drawer-menu {
+    padding: $spacing-md;
+  }
 }

package/dist/scss/patterns/HeroBanner/_heroBanner.scss

@@ -1,95 +1,98 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-body:has(.seldon-header__toggle-btn--open) {
-  // targeting this button cause header itself has closed state only
-  overflow: hidden;
-}
-
-.#{$px}-hero-banner {
-  align-items: center;
-  background: var(--background);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  min-height: 25rem;
-  padding: 1rem;
-  text-transform: uppercase;
-  width: 100%;
-
-  &__header-text {
-    text-align: center;
+@layer seldon.patterns {
+  body:has(.seldon-header__toggle-btn--open) {
+    // targeting this button cause header itself has closed state only
+    overflow: hidden;
   }
 
-  @include media($size-md, $type: 'max') {
+  .#{$px}-hero-banner {
     align-items: center;
-    align-self: stretch;
-    background: transparent;
-    background-color: $pure-black;
-    flex-direction: column;
-    gap: 1.875rem;
-    min-height: unset;
-    padding: 1.875rem 0.9375rem;
-
-    &::before {
-      background: var(--background);
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      content: '';
-      height: 12rem;
-      width: 100%;
-    }
-  }
-
-  h1.#{$px}-text,
-  h2.#{$px}-text {
-    margin: 0;
-  }
-
-  & .#{$px}-hero-banner__content-wrapper {
-    align-items: center;
-    color: $pure-white;
+    background: var(--background);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
     display: flex;
-    flex-direction: column;
-    max-width: 1082px;
+    flex-flow: column;
+    justify-content: center;
+    min-height: 25rem;
+    padding: 1rem;
+    text-transform: uppercase;
+    width: 100%;
 
-    h1,
-    h2,
-    p {
-      color: $pure-white;
+    &__header-text {
       text-align: center;
     }
 
-    p {
-      font-size: 0.875rem;
-      letter-spacing: 0.125rem;
-      line-height: 1;
-      text-align: center;
-    }
-  }
+    @include media($size-md, $type: 'max') {
+      align-items: center;
+      align-self: stretch;
+      background: transparent;
+      background-color: $pure-black;
+      flex-direction: column;
+      gap: 1.875rem;
+      min-height: unset;
+      padding: 1.875rem 0.9375rem;
 
-  & .#{$px}-hero-banner__pre-head {
-    align-items: flex-start;
-    display: flex;
-    font-size: 0.75rem;
-    gap: 1.875rem;
-    padding-bottom: 1.875rem;
+      &::before {
+        background: var(--background);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        content: '';
+        height: 12rem;
+        width: 100%;
+      }
+    }
 
-    @include media($size-md) {
-      font-size: 0.875rem;
+    h1.#{$px}-text,
+    h2.#{$px}-text {
+      margin: 0;
     }
 
-    @include media($size-md, $type: 'max') {
+    & .#{$px}-hero-banner__content-wrapper {
       align-items: center;
+      color: $pure-white;
+      display: flex;
       flex-direction: column;
-      gap: 1rem;
+      max-width: 1082px;
+
+      h1,
+      h2,
+      p {
+        color: $pure-white;
+        text-align: center;
+      }
+
+      p {
+        font-size: 0.875rem;
+        letter-spacing: 0.125rem;
+        line-height: 1;
+        text-align: center;
+      }
     }
-  }
 
-  & .#{$px}-hero-banner__after-head {
-    padding-top: 1.875rem;
+    & .#{$px}-hero-banner__pre-head {
+      align-items: flex-start;
+      display: flex;
+      font-size: 0.75rem;
+      gap: 1.875rem;
+      padding-bottom: 1.875rem;
+
+      @include media($size-md) {
+        font-size: 0.875rem;
+      }
+
+      @include media($size-md, $type: 'max') {
+        align-items: center;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    }
+
+    & .#{$px}-hero-banner__after-head {
+      padding-top: 1.875rem;
+    }
   }
 }