@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -1,99 +1,102 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-dropdown {
-  @include text($bodySmall);
-
-  &__trigger {
-    align-items: center;
-    background-color: $white-100;
-    border: none;
-    color: $black-100;
-    display: inline-flex;
-    gap: 10px;
-    justify-content: center;
-    padding: $spacing-xsm;
-
-    &:disabled {
-      color: $medium-gray;
-      cursor: default;
-      pointer-events: none;
+@layer seldon.components {
+  .#{$px}-dropdown {
+    @include text($bodySmall);
 
-      svg {
-        stroke: $light-gray;
+    &__trigger {
+      align-items: center;
+      background-color: $white-100;
+      border: none;
+      color: $black-100;
+      display: inline-flex;
+      gap: 10px;
+      justify-content: center;
+      padding: $spacing-xsm;
+
+      &:disabled {
+        color: $medium-gray;
+        cursor: default;
+        pointer-events: none;
+
+        svg {
+          stroke: $light-gray;
+        }
       }
-    }
 
-    svg {
-      height: 16px;
-      width: 16px;
-    }
+      svg {
+        height: 16px;
+        width: 16px;
+      }
 
-    &-icon-expanded {
-      transform: rotateX(180deg);
-    }
+      &-icon-expanded {
+        transform: rotateX(180deg);
+      }
 
-    &:hover:not(:disabled) {
-      cursor: pointer;
-    }
+      &:hover:not(:disabled) {
+        cursor: pointer;
+      }
 
-    &:focus-within:not(:disabled) {
-      @include focus-ring($border-radius: $radius-xs);
+      &:focus-within:not(:disabled) {
+        @include focus-ring($border-radius: $radius-xs);
+      }
     }
-  }
 
-  &__content {
-    background-color: $white-100;
-    border: 1px solid $light-gray;
+    &__content {
+      background-color: $white-100;
+      border: 1px solid $light-gray;
 
-    // following will add additional arrows if list is near edge of viewport
-    max-height: var(--radix-select-content-available-height);
-    overflow: hidden;
-    position: relative;
-    z-index: 10;
-  }
+      // following will add additional arrows if list is near edge of viewport
+      max-height: var(--radix-select-content-available-height);
+      overflow: hidden;
+      position: relative;
+      z-index: 10;
+    }
 
-  &__scroll-button,
-  &__scroll-button__up {
-    align-items: center;
-    cursor: default;
-    display: flex;
-    justify-content: center;
+    &__scroll-button,
+    &__scroll-button__up {
+      align-items: center;
+      cursor: default;
+      display: flex;
+      justify-content: center;
 
-    svg {
-      height: 16px;
-      width: 16px;
+      svg {
+        height: 16px;
+        width: 16px;
+      }
     }
-  }
 
-  &__scroll-button__up {
-    transform: rotateX(180deg);
-  }
+    &__scroll-button__up {
+      transform: rotateX(180deg);
+    }
 
-  &__viewport {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-xsm;
-    padding: $spacing-sm 0;
-  }
+    &__viewport {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-xsm;
+      padding: $spacing-sm 0;
+    }
 
-  &__item {
-    @include text($bodySmall);
+    &__item {
+      @include text($bodySmall);
 
-    align-items: center;
-    display: flex;
-    padding: 0 $padding-sm;
-    position: relative;
-    user-select: none;
+      align-items: center;
+      display: flex;
+      padding: 0 $padding-sm;
+      position: relative;
+      user-select: none;
 
-    &[data-disabled] {
-      color: $medium-gray;
-      pointer-events: none;
-    }
+      &[data-disabled] {
+        color: $medium-gray;
+        pointer-events: none;
+      }
 
-    &[data-highlighted] {
-      background-color: $light-gray;
-      cursor: pointer;
-      outline: none;
+      &[data-highlighted] {
+        background-color: $light-gray;
+        cursor: pointer;
+        outline: none;
+      }
     }
   }
 }

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -1,80 +1,83 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-exit-gate-card {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  padding-left: $spacing-md;
+@layer seldon.components {
+  .#{$px}-exit-gate-card {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    padding-left: $spacing-md;
 
-  @media (max-width: $breakpoint-md) {
-    flex-direction: column;
+    @media (max-width: $breakpoint-md) {
+      flex-direction: column;
 
-    &__desktop_image {
-      max-width: unset;
-      overflow: visible;
+      &__desktop_image {
+        max-width: unset;
+        overflow: visible;
+      }
     }
-  }
 
-  @media (min-width: $breakpoint-md) {
-    flex-direction: row;
-    padding-left: $spacing-lg;
+    @media (min-width: $breakpoint-md) {
+      flex-direction: row;
+      padding-left: $spacing-lg;
 
-    &__desktop_image {
-      flex: 0 50%;
+      &__desktop_image {
+        flex: 0 50%;
+      }
     }
-  }
 
-  &__content {
-    align-items: flex-start;
-    color: $pure-black;
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-sm;
-    margin: auto 0;
+    &__content {
+      align-items: flex-start;
+      color: $pure-black;
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      margin: auto 0;
 
-    &-label {
-      @media (max-width: $breakpoint-md) {
-        font-variation-settings: 'wght' 500;
+      &-label {
+        @media (max-width: $breakpoint-md) {
+          font-variation-settings: 'wght' 500;
+        }
       }
-    }
 
-    &-title {
-      margin: 0;
-      text-transform: none;
-    }
+      &-title {
+        margin: 0;
+        text-transform: none;
+      }
 
-    &-description {
-      @media (max-width: $breakpoint-md) {
-        font-size: $body-size1;
-        text-align: center;
+      &-description {
+        @media (max-width: $breakpoint-md) {
+          font-size: $body-size1;
+          text-align: center;
+        }
       }
-    }
 
-    &-link {
-      padding: $padding-xsm $padding-xxl;
-    }
+      &-link {
+        padding: $padding-xsm $padding-xxl;
+      }
 
-    // Match button focus state when the link (wrapper) is focused
-    > a:focus-visible {
-      @include focus-ring($border-radius: $radius-3xl);
+      // Match button focus state when the link (wrapper) is focused
+      > a:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
     }
   }
-}
-
-.#{$px}-exit-gate-card {
-  display: flex;
-  flex-direction: row-reverse;
 
-  @media (max-width: $breakpoint-md) {
-    flex-direction: column;
-    padding: 0;
-  }
+  .#{$px}-exit-gate-card {
+    display: flex;
+    flex-direction: row-reverse;
 
-  &__content {
     @media (max-width: $breakpoint-md) {
-      align-items: center;
-      margin-top: $spacing-md;
-      padding: 0 $spacing-md;
+      flex-direction: column;
+      padding: 0;
+    }
+
+    &__content {
+      @media (max-width: $breakpoint-md) {
+        align-items: center;
+        margin-top: $spacing-md;
+        padding: 0 $spacing-md;
+      }
     }
   }
 }

package/dist/scss/components/FavoritingTileButton/_favoritingTileButton.scss

@@ -1,44 +1,47 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-favoriting-tile-button {
-  align-items: center;
-  background-color: $white-100;
-  border: 1px solid $light-gray;
-  display: flex;
-  flex-shrink: 0;
-  gap: $spacing-md;
-  justify-content: space-between;
-  padding: $padding-md $padding-sm;
-  transition: all 0.2s ease-in-out;
-  width: 100%;
-
-  &--lot-in-list {
-    border: 1px solid $pure-black;
-  }
-
-  &__text {
+@layer seldon.components {
+  .#{$px}-favoriting-tile-button {
+    align-items: center;
+    background-color: $white-100;
+    border: 1px solid $light-gray;
     display: flex;
-    gap: $spacing-micro;
-    overflow: hidden;
+    flex-shrink: 0;
+    gap: $spacing-md;
+    justify-content: space-between;
+    padding: $padding-md $padding-sm;
+    transition: all 0.2s ease-in-out;
+    width: 100%;
 
-    &--action,
-    &--number {
-      font-variation-settings: 'wght' 600;
+    &--lot-in-list {
+      border: 1px solid $pure-black;
     }
 
-    span {
-      color: inherit;
+    &__text {
+      display: flex;
+      gap: $spacing-micro;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+
+      &--action,
+      &--number {
+        font-variation-settings: 'wght' 600;
+      }
+
+      span {
+        color: inherit;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
-  }
 
-  @include hoverOrActive {
-    align-items: center;
-    background: $button-hover;
-    border: 1px solid $button-hover;
-    color: $white-100;
-    cursor: pointer;
+    @include hoverOrActive {
+      align-items: center;
+      background: $button-hover;
+      border: 1px solid $button-hover;
+      color: $white-100;
+      cursor: pointer;
+    }
   }
 }

package/dist/scss/components/Filter/_filter.scss

@@ -1,110 +1,113 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-$default-transition-duration: 0.3s;
-$default-easing: ease-in-out;
-$chevron-scale: 0.8;
+@layer seldon.components {
+  $default-transition-duration: 0.3s;
+  $default-easing: ease-in-out;
+  $chevron-scale: 0.8;
 
-@keyframes slide-in {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-out {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-.#{$px}-filter {
-  &-header {
-    margin-bottom: $spacing-sm;
-
-    legend {
-      padding-inline: 0; // needed for default browser styles
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
     }
 
-    &__back {
-      .#{$px}-text.#{$px}-text--labelMedium {
-        font-variation-settings: 'wght' 600;
-      }
+    to {
+      opacity: 1;
+      transform: translateX(0);
     }
   }
 
-  &__chevron {
-    transform: scale($chevron-scale);
-  }
+  @keyframes slide-out {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
 
-  &__fieldset {
-    border: 0;
-    margin: 0 3px 0 0; // save room for input borders
-    padding: 0;
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
   }
 
-  &__filters {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-sm;
-
-    .#{$px}-input {
-      align-items: center;
-      height: unset;
+  .#{$px}-filter {
+    &-header {
+      margin-bottom: $spacing-sm;
 
-      &__label {
-        color: inherit;
-        margin-bottom: 0;
+      legend {
+        padding-inline: 0; // needed for default browser styles
       }
 
-      &__input {
-        align-self: center;
-        height: $body-line-height-size3;
-        margin-bottom: 0;
-        width: $body-line-height-size3;
+      &__back {
+        .#{$px}-text.#{$px}-text--labelMedium {
+          font-variation-settings: 'wght' 600;
+        }
       }
+    }
 
-      &__validation,
-      &__empty-validation {
-        display: none;
+    &__chevron {
+      transform: scale($chevron-scale);
+    }
+
+    &__fieldset {
+      border: 0;
+      margin: 0 3px 0 0; // save room for input borders
+      padding: 0;
+    }
+
+    &__filters {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+
+      .#{$px}-input {
+        align-items: center;
+        height: unset;
+
+        &__label {
+          color: inherit;
+          margin-bottom: 0;
+        }
+
+        &__input {
+          align-self: center;
+          height: $body-line-height-size3;
+          margin-bottom: 0;
+          width: $body-line-height-size3;
+        }
+
+        &__validation,
+        &__empty-validation {
+          display: none;
+        }
       }
     }
-  }
 
-  &__view-all {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
+    &__view-all {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
 
-  &.is-opening {
-    animation: slide-in $default-transition-duration $default-easing forwards;
-  }
+    &.is-opening {
+      animation: slide-in $default-transition-duration $default-easing forwards;
+    }
 
-  &.is-closing {
-    animation: slide-out $default-transition-duration $default-easing forwards;
+    &.is-closing {
+      animation: slide-out $default-transition-duration $default-easing forwards;
+    }
   }
-}
 
-.#{$px}-filter-input {
-  &__input {
-    &__wrapper {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      .#{$px}-text {
-        font-variation-settings: 'wght' 600;
+  .#{$px}-filter-input {
+    &__input {
+      &__wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .#{$px}-text {
+          font-variation-settings: 'wght' 600;
+        }
       }
     }
   }

package/dist/scss/components/Grid/_grid.scss

@@ -1,28 +1,31 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-grid {
-  @include gridContainer(false);
+@layer seldon.components {
+  .#{$px}-grid {
+    @include gridContainer(false);
 
-  &--has-margins {
-    margin: 0 $spacing-md;
+    &--has-margins {
+      margin: 0 $spacing-md;
 
-    @media (min-width: 1401px) {
-      margin: 0 $spacing-lg;
-    }
+      @media (min-width: 1401px) {
+        margin: 0 $spacing-lg;
+      }
 
-    @media (min-width: 1801px) {
-      margin: 0 $spacing-xl;
+      @media (min-width: 1801px) {
+        margin: 0 $spacing-xl;
+      }
     }
-  }
 
-  // Generate unique classes for column and row gaps with all spacings
-  @each $spacing-size in $spacing-sizes {
-    &--column-gap-#{$spacing-size} {
-      column-gap: var(--spacing-#{$spacing-size});
-    }
+    // Generate unique classes for column and row gaps with all spacings
+    @each $spacing-size in $spacing-sizes {
+      &--column-gap-#{$spacing-size} {
+        column-gap: var(--spacing-#{$spacing-size});
+      }
 
-    &--row-gap-#{$spacing-size} {
-      row-gap: var(--spacing-#{$spacing-size});
+      &--row-gap-#{$spacing-size} {
+        row-gap: var(--spacing-#{$spacing-size});
+      }
     }
   }
 }