@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Countdown/_countdown.scss

@@ -1,82 +1,85 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-countdown {
-  align-items: stretch;
-  border-bottom: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-bottom: 0;
-  padding-bottom: $spacing-sm;
-  width: 100%;
-
-  &--closing-lot {
-    .#{$px}-duration,
-    .#{$px}-duration .#{$px}-text {
-      color: $warning-default;
-      font-variation-settings: 'wght' 600;
-    }
-  }
-
-  &--show-bottom-border {
-    border-bottom: 1px solid $light-gray;
-    margin-bottom: 1.5rem;
-  }
-
-  &__countdown-container {
-    align-items: flex-start;
+@layer seldon.components {
+  .#{$px}-countdown {
+    align-items: stretch;
+    border-bottom: none;
     display: flex;
-    flex-flow: row wrap;
-    gap: $spacing-micro $spacing-sm;
-    justify-content: flex-start;
-    text-transform: inherit;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 0;
+    padding-bottom: $spacing-sm;
     width: 100%;
 
-    > .#{$px}-text {
-      flex-shrink: 0;
-      font-variation-settings: 'wght' 600;
-    }
-  }
-
-  &--center-align {
-    .#{$px}-countdown__countdown-container {
-      align-items: center;
-      justify-content: center;
-      text-align: center;
+    &--closing-lot {
+      .#{$px}-duration,
+      .#{$px}-duration .#{$px}-text {
+        color: $warning-default;
+        font-variation-settings: 'wght' 600;
+      }
     }
 
-    .#{$px}-countdown__duration-group {
-      justify-content: center;
+    &--show-bottom-border {
+      border-bottom: 1px solid $light-gray;
+      margin-bottom: 1.5rem;
     }
-  }
 
-  &__duration-group {
-    align-items: center;
-    display: flex;
-    flex-flow: row wrap;
-    gap: 0 $spacing-sm;
-    justify-content: flex-start;
+    &__countdown-container {
+      align-items: flex-start;
+      display: flex;
+      flex-flow: row wrap;
+      gap: $spacing-micro $spacing-sm;
+      justify-content: flex-start;
+      text-transform: inherit;
+      width: 100%;
 
-    .#{$px}-duration .#{$px}-text {
-      font-variation-settings: 'wght' 600;
+      > .#{$px}-text {
+        flex-shrink: 0;
+        font-variation-settings: 'wght' 600;
+      }
     }
-  }
 
-  &--compact {
-    .#{$px}-countdown__countdown-container {
-      column-gap: $spacing-xsm;
-    }
+    &--center-align {
+      .#{$px}-countdown__countdown-container {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
 
-    .#{$px}-countdown__duration-group {
-      column-gap: $spacing-xsm;
+      .#{$px}-countdown__duration-group {
+        justify-content: center;
+      }
     }
 
-    &--closing-lot {
-      .#{$px}-duration,
+    &__duration-group {
+      align-items: center;
+      display: flex;
+      flex-flow: row wrap;
+      gap: 0 $spacing-sm;
+      justify-content: flex-start;
+
       .#{$px}-duration .#{$px}-text {
-        color: $warning-default;
         font-variation-settings: 'wght' 600;
       }
     }
+
+    &--compact {
+      .#{$px}-countdown__countdown-container {
+        column-gap: $spacing-xsm;
+      }
+
+      .#{$px}-countdown__duration-group {
+        column-gap: $spacing-xsm;
+      }
+
+      &--closing-lot {
+        .#{$px}-duration,
+        .#{$px}-duration .#{$px}-text {
+          color: $warning-default;
+          font-variation-settings: 'wght' 600;
+        }
+      }
+    }
   }
 }

package/dist/scss/components/Countdown/_duration.scss

@@ -1,6 +1,9 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-duration {
-  display: flex;
-  gap: $spacing-micro;
+@layer seldon.components {
+  .#{$px}-duration {
+    display: flex;
+    gap: $spacing-micro;
+  }
 }

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -1,89 +1,98 @@
 /* stylelint-disable selector-class-pattern */
+@use 'sass:meta';
 @use '../../allPartials' as *;
-@import 'flatpickr/dist/flatpickr.css';
+@use '../../layers';
 
-.#{$px}-date-picker {
-  font-size: $font-size-body-medium;
+// Inline, don't @import: a nested CSS @import inside @layer is left
+// unresolved by Vite and Chromatic fails to preload DatePicker-*.css.
+@layer vendor {
+  @include meta.load-css('flatpickr/dist/flatpickr.css');
 }
 
-.flatpickr-calendar {
-  .flatpickr-day,
-  .flatpickr-day.selected,
-  .flatpickr-day:hover,
-  .flatpickr-day:focus,
-  .flatpickr-day.startRange,
-  .flatpickr-day.endRange {
-    border-radius: $radius-xs;
+@layer seldon.components {
+  .#{$px}-date-picker {
+    font-size: $font-size-body-medium;
   }
 
-  .flatpickr-day.selected,
-  .flatpickr-day:hover,
-  .flatpickr-day:focus,
-  .flatpickr-day.startRange,
-  .flatpickr-day.endRange {
-    background: $pure-black;
-    border-color: $pure-black;
-    color: $pure-white;
-  }
-
-  .flatpickr-day:focus {
-    @include focus-ring($border-radius: $radius-xs);
-  }
+  .flatpickr-calendar {
+    .flatpickr-day,
+    .flatpickr-day.selected,
+    .flatpickr-day:hover,
+    .flatpickr-day:focus,
+    .flatpickr-day.startRange,
+    .flatpickr-day.endRange {
+      border-radius: $radius-xs;
+    }
 
-  .flatpickr-day.today {
-    border-color: transparent;
-    font-variation-settings: 'wght' 700;
-    position: relative;
+    .flatpickr-day.selected,
+    .flatpickr-day:hover,
+    .flatpickr-day:focus,
+    .flatpickr-day.startRange,
+    .flatpickr-day.endRange {
+      background: $pure-black;
+      border-color: $pure-black;
+      color: $pure-white;
+    }
 
-    &::after {
-      background-color: $pure-black;
-      bottom: 2px;
-      content: '';
-      height: 0.25rem;
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-      width: 0.25rem;
+    .flatpickr-day:focus {
+      @include focus-ring($border-radius: $radius-xs);
     }
-  }
 
-  .flatpickr-months .flatpickr-prev-month:hover,
-  .flatpickr-months .flatpickr-next-month:hover {
-    background-color: $pure-black;
+    .flatpickr-day.today {
+      border-color: transparent;
+      font-variation-settings: 'wght' 700;
+      position: relative;
 
-    svg {
-      fill: $pure-white;
+      &::after {
+        background-color: $pure-black;
+        bottom: 2px;
+        content: '';
+        height: 0.25rem;
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%);
+        width: 0.25rem;
+      }
     }
-  }
 
-  .flatpickr-current-month,
-  .flatpickr-monthDropdown-months,
-  .flatpickr-current-month input.cur-year {
-    text-transform: uppercase;
-  }
+    .flatpickr-months .flatpickr-prev-month:hover,
+    .flatpickr-months .flatpickr-next-month:hover {
+      background-color: $pure-black;
 
-  .flatpickr-weekday {
-    font-variation-settings: 'wght' 700;
-  }
+      svg {
+        fill: $pure-white;
+      }
+    }
 
-  .flatpickr-current-month.flatpickr-current-month {
-    @include text($labelLarge);
+    .flatpickr-current-month,
+    .flatpickr-monthDropdown-months,
+    .flatpickr-current-month input.cur-year {
+      text-transform: uppercase;
+    }
 
-    padding: 0.65rem 0 0;
+    .flatpickr-weekday {
+      font-variation-settings: 'wght' 700;
+    }
 
-    .cur-year {
+    .flatpickr-current-month.flatpickr-current-month {
       @include text($labelLarge);
+
+      padding: 0.65rem 0 0;
+
+      .cur-year {
+        @include text($labelLarge);
+      }
     }
-  }
 
-  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
-  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-    box-shadow: -10px 0 0 $grey-50;
-  }
+    .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+    .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+    .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+      box-shadow: -10px 0 0 $grey-50;
+    }
 
-  &.arrowTop::before,
-  &.arrowTop::after {
-    content: unset;
+    &.arrowTop::before,
+    &.arrowTop::after {
+      content: unset;
+    }
   }
 }

package/dist/scss/components/DescriptiveRadioButton/_descriptiveRadioButton.scss

@@ -1,61 +1,64 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-descriptive-radio-button {
-  &__container {
-    align-items: flex-start;
-    background: $white-100;
-    border: 1px solid $light-gray;
-    border-radius: $radius-xs;
-    cursor: pointer;
-    display: flex;
-    padding: $spacing-sm;
-
-    &--selected {
-      border: 1.5px solid $pure-black;
-    }
+@layer seldon.components {
+  .#{$px}-descriptive-radio-button {
+    &__container {
+      align-items: flex-start;
+      background: $white-100;
+      border: 1px solid $light-gray;
+      border-radius: $radius-xs;
+      cursor: pointer;
+      display: flex;
+      padding: $spacing-sm;
+
+      &--selected {
+        border: 1.5px solid $pure-black;
+      }
 
-    &:has(input:focus-visible) {
-      @include focus-ring($border-radius: $radius-xs);
+      &:has(input:focus-visible) {
+        @include focus-ring($border-radius: $radius-xs);
+      }
     }
-  }
 
-  &__input {
-    accent-color: $light-gray;
-    cursor: pointer;
-    height: 1rem;
-    margin-right: $spacing-sm;
-    margin-top: 2px;
-    width: 1rem;
+    &__input {
+      accent-color: $light-gray;
+      cursor: pointer;
+      height: 1rem;
+      margin-right: $spacing-sm;
+      margin-top: 2px;
+      width: 1rem;
 
-    @media (min-width: $breakpoint-md) {
-      margin-top: $spacing-micro;
-    }
+      @media (min-width: $breakpoint-md) {
+        margin-top: $spacing-micro;
+      }
 
-    &:focus,
-    &:focus-visible {
-      outline: none;
+      &:focus,
+      &:focus-visible {
+        outline: none;
+      }
     }
-  }
 
-  &__input:checked {
-    accent-color: $pure-black;
-  }
+    &__input:checked {
+      accent-color: $pure-black;
+    }
 
-  &__label-content {
-    align-items: flex-start;
-    cursor: pointer;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: $spacing-sm;
-    pointer-events: none;
-  }
+    &__label-content {
+      align-items: flex-start;
+      cursor: pointer;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: $spacing-sm;
+      pointer-events: none;
+    }
 
-  &__label-text {
-    font-variation-settings: 'wght' 600;
-  }
+    &__label-text {
+      font-variation-settings: 'wght' 600;
+    }
 
-  &__description {
-    display: block;
+    &__description {
+      display: block;
+    }
   }
 }

package/dist/scss/components/DescriptiveRadioButtonGroup/_descriptiveRadioButtonGroup.scss

@@ -1,27 +1,30 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-descriptive-radio-button-group {
-  // Hide the fieldset border and padding
-  border: none;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-  margin: 0;
-  padding: 0;
+@layer seldon.components {
+  .#{$px}-descriptive-radio-button-group {
+    // Hide the fieldset border and padding
+    border: none;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    margin: 0;
+    padding: 0;
 
-  @media (min-width: $breakpoint-md) {
-    gap: $spacing-md;
-  }
+    @media (min-width: $breakpoint-md) {
+      gap: $spacing-md;
+    }
 
-  // Visually hide the legend
-  &__sr-only {
-    border: 0 !important;
-    clip: rect(0, 0, 0, 0) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
+    // Visually hide the legend
+    &__sr-only {
+      border: 0 !important;
+      clip: rect(0, 0, 0, 0) !important;
+      height: 1px !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      padding: 0 !important;
+      position: absolute !important;
+      width: 1px !important;
+    }
   }
 }

package/dist/scss/components/Detail/_detail.scss

@@ -1,52 +1,55 @@
 @use '../../allPartials' as *;
+@use '../../layers';
+
+@layer seldon.components {
+  .#{$px}-detail {
+    align-items: center;
+    align-items: flex-start;
+    align-self: stretch;
+    color: $pure-black;
+    display: flex;
+    gap: $spacing-md;
+
+    &__label-section {
+      flex: 0 0 160px;
+      max-width: 100%;
+
+      &--label.#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
 
-.#{$px}-detail {
-  align-items: center;
-  align-items: flex-start;
-  align-self: stretch;
-  color: $pure-black;
-  display: flex;
-  gap: $spacing-md;
-
-  &__label-section {
-    flex: 0 0 160px;
-    max-width: 100%;
+      @media (max-width: $breakpoint-md) {
+        flex: 0 0 128px;
+      }
 
-    &--label.#{$px}-text {
-      font-variation-settings: 'wght' 600;
-    }
+      @media (max-width: $breakpoint-sm) {
+        flex: 0 0 96px;
+      }
 
-    @media (max-width: $breakpoint-md) {
-      flex: 0 0 128px;
-    }
+      &--has-sub-label {
+        flex: 0 0 240px;
 
-    @media (max-width: $breakpoint-sm) {
-      flex: 0 0 96px;
-    }
+        @media (max-width: $breakpoint-sm) {
+          flex: 0 0 120px;
+        }
+      }
 
-    &--has-sub-label {
-      flex: 0 0 240px;
+      &--no-wrap {
+        flex: none;
+      }
 
-      @media (max-width: $breakpoint-sm) {
-        flex: 0 0 120px;
+      span {
+        font-variation-settings: 'wght' 400;
       }
     }
 
-    &--no-wrap {
-      flex: none;
+    &__sub-label {
+      text-wrap: nowrap;
     }
 
-    span {
+    &__value {
+      flex: 0 1 auto;
       font-variation-settings: 'wght' 400;
     }
   }
-
-  &__sub-label {
-    text-wrap: nowrap;
-  }
-
-  &__value {
-    flex: 0 1 auto;
-    font-variation-settings: 'wght' 400;
-  }
 }

package/dist/scss/components/DetailList/_detailList.scss

@@ -1,52 +1,55 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-detail-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-  margin: 0;
+@layer seldon.components {
+  .#{$px}-detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    margin: 0;
 
-  &.#{$px}-has-separators {
-    gap: 0;
-  }
+    &.#{$px}-has-separators {
+      gap: 0;
+    }
 
-  &-wrapper {
-    .#{$px}-detail {
-      padding: 0;
+    &-wrapper {
+      .#{$px}-detail {
+        padding: 0;
+      }
     }
-  }
 
-  .#{$px}-columns {
-    .#{px}-detail {
-      justify-content: start;
+    .#{$px}-columns {
+      .#{px}-detail {
+        justify-content: start;
+      }
     }
-  }
 
-  .#{$px}-justified {
-    .#{$px}-detail {
-      justify-content: space-between;
+    .#{$px}-justified {
+      .#{$px}-detail {
+        justify-content: space-between;
 
-      &__label {
-        text-align: left;
-      }
+        &__label {
+          text-align: left;
+        }
 
-      &__value {
-        text-align: right;
+        &__value {
+          text-align: right;
+        }
       }
     }
-  }
 
-  .#{$px}-has-separators {
-    border-top: 1px solid $light-gray;
-  }
+    .#{$px}-has-separators {
+      border-top: 1px solid $light-gray;
+    }
 
-  .#{$px}-detail {
-    padding: $spacing-sm 0;
-  }
+    .#{$px}-detail {
+      padding: $spacing-sm 0;
+    }
 
-  &--sm {
-    .#{$px}-detail.#{$px}-detail {
-      padding: $spacing-xsm 0;
+    &--sm {
+      .#{$px}-detail.#{$px}-detail {
+        padding: $spacing-xsm 0;
+      }
     }
   }
 }