@phillips/seldon 1.279.1 → 1.280.0

package/dist/scss/components/TextSymbol/_textSymbol.scss

@@ -1,16 +1,19 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-text-symbol {
-  display: inline-flex;
-  font-variation-settings: 'wght' 600;
-  gap: $spacing-micro;
+@layer seldon.components {
+  .#{$px}-text-symbol {
+    display: inline-flex;
+    font-variation-settings: 'wght' 600;
+    gap: $spacing-micro;
 
-  &--estimation {
-    margin-left: 0.25rem;
-  }
+    &--estimation {
+      margin-left: 0.25rem;
+    }
 
-  &--lotNumber {
-    margin-left: $spacing-xsm;
-    vertical-align: super;
+    &--lotNumber {
+      margin-left: $spacing-xsm;
+      vertical-align: super;
+    }
   }
 }

package/dist/scss/components/Toast/_toast.scss

@@ -1,102 +1,105 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-toast {
-  align-items: center;
-  background-color: $black-100;
-  border-radius: $radius-xs;
-  color: $white-100;
-  column-gap: $spacing-sm;
-  display: grid;
-  grid-template-areas: 'title action';
-  grid-template-columns: auto max-content;
-  padding: $spacing-xsm $spacing-sm;
-
-  // Viewport is pointer-events: none so empty space doesn't block the page; re-enable on
-  // each toast so actions stay clickable (including when DismissableLayer sets body to none).
-  pointer-events: auto;
-
-  &__content {
+@layer seldon.components {
+  .#{$px}-toast {
     align-items: center;
-    display: flex;
-    gap: $spacing-sm;
-  }
-
-  &__action {
-    color: $text-inverted;
+    background-color: $black-100;
+    border-radius: $radius-xs;
+    color: $white-100;
+    column-gap: $spacing-sm;
+    display: grid;
+    grid-template-areas: 'title action';
+    grid-template-columns: auto max-content;
+    padding: $spacing-xsm $spacing-sm;
+
+    // Viewport is pointer-events: none so empty space doesn't block the page; re-enable on
+    // each toast so actions stay clickable (including when DismissableLayer sets body to none).
+    pointer-events: auto;
+
+    &__content {
+      align-items: center;
+      display: flex;
+      gap: $spacing-sm;
+    }
 
-    &:hover {
+    &__action {
       color: $text-inverted;
+
+      &:hover {
+        color: $text-inverted;
+      }
     }
-  }
 
-  &[data-state='open'] {
-    animation: slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
+    &[data-state='open'] {
+      animation: slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
 
-  &[data-state='closed'] {
-    animation: hide 100ms ease-in;
-  }
+    &[data-state='closed'] {
+      animation: hide 100ms ease-in;
+    }
 
-  &[data-swipe='move'] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
-  }
+    &[data-swipe='move'] {
+      transform: translateX(var(--radix-toast-swipe-move-x));
+    }
 
-  &[data-swipe='cancel'] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
+    &[data-swipe='cancel'] {
+      transform: translateX(0);
+      transition: transform 200ms ease-out;
+    }
 
-  &[data-swipe='end'] {
-    animation: swipeOut 100ms ease-out;
+    &[data-swipe='end'] {
+      animation: swipeOut 100ms ease-out;
+    }
   }
-}
 
-@keyframes hide {
-  from {
-    opacity: 1;
-  }
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
 
-  to {
-    opacity: 0;
+    to {
+      opacity: 0;
+    }
   }
-}
 
-@keyframes slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
 
-@keyframes swipe-out {
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
-  }
+  @keyframes swipe-out {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
 
-  to {
-    transform: translateX(calc(100% + #{$spacing-lg}));
+    to {
+      transform: translateX(calc(100% + #{$spacing-lg}));
+    }
   }
-}
 
-.#{$px}-toast-viewport {
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-  left: 0;
-  list-style: none;
-  margin: 0;
-  max-width: 100vw;
-  outline: none;
-  padding: $spacing-lg;
-
-  // Pass clicks through empty viewport space; individual toasts re-enable pointer events.
-  pointer-events: none;
-  position: fixed;
-  z-index: 99999;
+  .#{$px}-toast-viewport {
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    left: 0;
+    list-style: none;
+    margin: 0;
+    max-width: 100vw;
+    outline: none;
+    padding: $spacing-lg;
+
+    // Pass clicks through empty viewport space; individual toasts re-enable pointer events.
+    pointer-events: none;
+    position: fixed;
+    z-index: 99999;
+  }
 }

package/dist/scss/components/Toggle/_toggle.scss

@@ -1,190 +1,193 @@
 @use '../../allPartials' as *;
-
-$toggleBaseWidth: 3rem;
-$inline: #{$px}-input--inline;
-$disabled: #{$px}-input--disabled;
-$invalid: #{$px}-input--invalid;
-$warn: #{$px}-input--warn;
-$md: #{$px}-input--md;
-$lg: #{$px}-input--lg;
-
-// Shared Input styles
-.#{$px}-toggle-input {
-  position: relative;
-  transition: padding 0.25s;
-
-  .#{$px}-input__label {
-    line-height: 1;
-    margin-bottom: 2.5rem;
-
-    // margin-left: 66px;
+@use '../../layers';
+
+@layer seldon.components {
+  $toggleBaseWidth: 3rem;
+  $inline: #{$px}-input--inline;
+  $disabled: #{$px}-input--disabled;
+  $invalid: #{$px}-input--invalid;
+  $warn: #{$px}-input--warn;
+  $md: #{$px}-input--md;
+  $lg: #{$px}-input--lg;
+
+  // Shared Input styles
+  .#{$px}-toggle-input {
     position: relative;
+    transition: padding 0.25s;
 
-    &::after,
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 1.85rem;
-    }
-
-    &::before {
-      background-color: rgba($pure-black, 0.4);
-      border-radius: $radius-md;
-      height: 1rem;
-      left: 0;
-      transition:
-        background-color 0.25s,
-        color 0.25s;
-      width: $toggleBaseWidth;
-    }
+    .#{$px}-input__label {
+      line-height: 1;
+      margin-bottom: 2.5rem;
 
-    &::after {
-      // background-color: transparent;
-      background: $white linear-gradient(transparent, rgba($pure-black, 0.05));
-      border-radius: $radius-3xl;
-      box-shadow:
-        0 1px 2px 0 rgba($pure-black, 0.15),
-        0 0 0 1px rgba($pure-black, 0.15) inset;
-      color: $white-100;
-      height: 1rem;
-      left: 0;
-      transform: translate(0, 0);
-      transition: transform 0.25s;
-      width: 1rem;
-    }
-  }
+      // margin-left: 66px;
+      position: relative;
 
-  &.#{$inline} {
-    .#{$px}-input__label {
-      margin-bottom: 0.5rem;
-      margin-left: 66px;
+      &::after,
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 1.85rem;
+      }
 
       &::before {
-        left: unset;
-        right: calc(1rem + 100%);
-        top: 50%;
-        transform: translate(0, -50%);
+        background-color: rgba($pure-black, 0.4);
+        border-radius: $radius-md;
+        height: 1rem;
+        left: 0;
+        transition:
+          background-color 0.25s,
+          color 0.25s;
+        width: $toggleBaseWidth;
       }
 
       &::after {
-        left: unset;
-        right: calc($toggleBaseWidth + 100%);
-        top: 50%;
-        transform: translate(0, -50%);
+        // background-color: transparent;
+        background: $white linear-gradient(transparent, rgba($pure-black, 0.05));
+        border-radius: $radius-3xl;
+        box-shadow:
+          0 1px 2px 0 rgba($pure-black, 0.15),
+          0 0 0 1px rgba($pure-black, 0.15) inset;
+        color: $white-100;
+        height: 1rem;
+        left: 0;
+        transform: translate(0, 0);
+        transition: transform 0.25s;
+        width: 1rem;
       }
     }
-  }
 
-  // Hide actual checkbox input
-  .#{$px}-input__input,
-  .#{$px}-input__wrapper {
-    @include hidden;
+    &.#{$inline} {
+      .#{$px}-input__label {
+        margin-bottom: 0.5rem;
+        margin-left: 66px;
+
+        &::before {
+          left: unset;
+          right: calc(1rem + 100%);
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        &::after {
+          left: unset;
+          right: calc($toggleBaseWidth + 100%);
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+      }
+    }
 
-    margin-bottom: 0;
-  }
+    // Hide actual checkbox input
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
+      @include hidden;
 
-  &.#{$invalid}.#{$inline} {
-    padding-top: 2rem;
-  }
+      margin-bottom: 0;
+    }
 
-  // Height changes
-  &.#{$md},
-  &.#{$lg} {
-    .#{$px}-input__label::after {
-      right: calc($toggleBaseWidth - 0.5rem + 100%);
+    &.#{$invalid}.#{$inline} {
+      padding-top: 2rem;
     }
-  }
-  &.#{$md} {
-    .#{$px}-input__label {
-      margin-bottom: 3rem;
 
-      &::before {
-        height: 1.5rem;
+    // Height changes
+    &.#{$md},
+    &.#{$lg} {
+      .#{$px}-input__label::after {
+        right: calc($toggleBaseWidth - 0.5rem + 100%);
       }
+    }
+    &.#{$md} {
+      .#{$px}-input__label {
+        margin-bottom: 3rem;
 
-      &::after {
-        height: 1.5rem;
-        width: 1.5rem;
+        &::before {
+          height: 1.5rem;
+        }
+
+        &::after {
+          height: 1.5rem;
+          width: 1.5rem;
+        }
       }
-    }
 
-    &.#{$inline} {
-      .#{$px}-input__label {
-        margin-bottom: 0.5rem;
+      &.#{$inline} {
+        .#{$px}-input__label {
+          margin-bottom: 0.5rem;
+        }
       }
     }
-  }
-  &.#{$lg} {
-    .#{$px}-input__label {
-      margin-bottom: 3.5rem;
+    &.#{$lg} {
+      .#{$px}-input__label {
+        margin-bottom: 3.5rem;
 
-      &::before {
-        height: 2rem;
-        width: 3.5rem;
+        &::before {
+          height: 2rem;
+          width: 3.5rem;
+        }
+
+        &::after {
+          height: 2rem;
+          width: 2rem;
+        }
       }
 
-      &::after {
-        height: 2rem;
-        width: 2rem;
+      &.#{$inline} {
+        .#{$px}-input__label {
+          margin-bottom: 0.5rem;
+          margin-left: 4.375rem;
+        }
       }
     }
 
-    &.#{$inline} {
+    // When in checked state
+    &:has(input:checked) {
       .#{$px}-input__label {
-        margin-bottom: 0.5rem;
-        margin-left: 4.375rem;
+        &::before {
+          background-color: $pure-black;
+        }
+
+        &::after {
+          transform: translate($toggleBaseWidth - 1rem, 0);
+        }
       }
-    }
-  }
 
-  // When in checked state
-  &:has(input:checked) {
-    .#{$px}-input__label {
-      &::before {
-        background-color: $pure-black;
+      &.#{$md} .#{$px}-input__label::after,
+      &.#{$lg} .#{$px}-input__label::after {
+        transform: translate($toggleBaseWidth - 1.5rem, 0);
       }
 
-      &::after {
-        transform: translate($toggleBaseWidth - 1rem, 0);
+      &.#{$inline} .#{$px}-input__label::after {
+        transform: translate($toggleBaseWidth - 1rem, -50%);
       }
-    }
 
-    &.#{$md} .#{$px}-input__label::after,
-    &.#{$lg} .#{$px}-input__label::after {
-      transform: translate($toggleBaseWidth - 1.5rem, 0);
-    }
+      &.#{$md}.#{$inline} .#{$px}-input__label::after,
+      &.#{$lg}.#{$inline} .#{$px}-input__label::after {
+        transform: translate($toggleBaseWidth - 1.5rem, -50%);
+      }
 
-    &.#{$inline} .#{$px}-input__label::after {
-      transform: translate($toggleBaseWidth - 1rem, -50%);
-    }
+      // Error state checked
+      &.#{$invalid} .#{$px}-input__label::before {
+        background-color: $error-red;
+      }
 
-    &.#{$md}.#{$inline} .#{$px}-input__label::after,
-    &.#{$lg}.#{$inline} .#{$px}-input__label::after {
-      transform: translate($toggleBaseWidth - 1.5rem, -50%);
+      // warn state checked
+      &.#{$warn} .#{$px}-input__label::before {
+        background-color: $warn-yellow;
+      }
     }
-
-    // Error state checked
-    &.#{$invalid} .#{$px}-input__label::before {
-      background-color: $error-red;
+    &.#{$warn} {
+      &.#{$md},
+      &.#{$lg} {
+        padding-top: 3.5rem;
+      }
     }
 
-    // warn state checked
-    &.#{$warn} .#{$px}-input__label::before {
-      background-color: $warn-yellow;
-    }
-  }
-  &.#{$warn} {
-    &.#{$md},
-    &.#{$lg} {
-      padding-top: 3.5rem;
+    &:has(.#{$px}-input__input:focus) label:before {
+      outline: 2px solid AccentColor;
+      outline: 2px solid Highlight;
+      outline: 2px solid -webkit-focus-ring-color;
+      outline-offset: 1px;
     }
   }
-
-  &:has(.#{$px}-input__input:focus) label:before {
-    outline: 2px solid AccentColor;
-    outline: 2px solid Highlight;
-    outline: 2px solid -webkit-focus-ring-color;
-    outline-offset: 1px;
-  }
 }

package/dist/scss/components/Video/_video.scss

@@ -1,18 +1,21 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-video {
-  aspect-ratio: var(--aspect-ratio);
-  display: block;
-  height: auto;
-  position: relative;
-  width: 100%;
-
-  &__iframe {
-    border: 0;
-    height: 100%;
-    inset: 0;
-    position: absolute;
+@layer seldon.components {
+  .#{$px}-video {
+    aspect-ratio: var(--aspect-ratio);
+    display: block;
+    height: auto;
+    position: relative;
     width: 100%;
-    z-index: 0;
+
+    &__iframe {
+      border: 0;
+      height: 100%;
+      inset: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 0;
+    }
   }
 }

package/dist/scss/layers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scss/patterns/AccountPageHeader/_accountPageHeader.scss

@@ -1,42 +1,45 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-account-page-header {
-  &__container {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-xsm;
-    width: 100%;
-  }
+@layer seldon.patterns {
+  .#{$px}-account-page-header {
+    &__container {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-xsm;
+      width: 100%;
+    }
 
-  &__title {
-    // To help center the title, accounts for the extra space inside the span below the text
-    margin-top: $spacing-micro;
-  }
+    &__title {
+      // To help center the title, accounts for the extra space inside the span below the text
+      margin-top: $spacing-micro;
+    }
 
-  &__button-label {
-    font-variation-settings: 'wght' 600;
-  }
+    &__button-label {
+      font-variation-settings: 'wght' 600;
+    }
 
-  &__title-wrapper {
-    align-items: center;
-    display: flex;
-    gap: $spacing-md;
-    justify-content: space-between;
-  }
+    &__title-wrapper {
+      align-items: center;
+      display: flex;
+      gap: $spacing-md;
+      justify-content: space-between;
+    }
 
-  &__overline {
-    color: $button-hover;
-    font-variation-settings: 'wght' 600;
-  }
+    &__overline {
+      color: $button-hover;
+      font-variation-settings: 'wght' 600;
+    }
 
-  &__button-wrapper {
-    align-items: center;
-    display: flex;
-    gap: $spacing-sm;
-    justify-content: center;
-  }
+    &__button-wrapper {
+      align-items: center;
+      display: flex;
+      gap: $spacing-sm;
+      justify-content: center;
+    }
 
-  &__divider.seldon-divider {
-    margin: $spacing-md 0;
+    &__divider.seldon-divider {
+      margin: $spacing-md 0;
+    }
   }
 }