@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/patterns/LanguageSelector/_languageSelector.scss

@@ -1,60 +1,64 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
 // Mobile version of the language selector mirrors the navigation menu link styles
-.#{$px}-language-selector {
-  display: flex;
-  min-width: 87px; // needed to handle English vs Chinese option.  Arguably this should be determined by the Dropdown component the longest element in the dropdown
-  opacity: 1;
-  transition: opacity 0.25s ease-in;
-
-  &--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
 
-  @include isHeaderDesktop {
-    &.#{$px}-accordion {
-      display: none;
-    }
-  }
+@layer seldon.patterns {
+  .#{$px}-language-selector {
+    display: flex;
+    min-width: 87px; // needed to handle English vs Chinese option.  Arguably this should be determined by the Dropdown component the longest element in the dropdown
+    opacity: 1;
+    transition: opacity 0.25s ease-in;
 
-  @include isHeaderMobile {
-    border-top: 0;
-    &.#{$px}-accordion {
-      border-bottom: 0;
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
     }
-    .#{$px}-accordion-item {
-      border-top: 1px solid $light-gray;
-      .#{$px}-nav__list {
-        display: flex;
-        flex-direction: column;
-        gap: $spacing-xsm;
-        padding: 0;
-      }
 
-      &-label {
-        opacity: 1;
-        padding: $snowflake-menu-padding 0;
+    @include isHeaderDesktop {
+      &.#{$px}-accordion {
+        display: none;
       }
+    }
 
-      &__border-bottom {
+    @include isHeaderMobile {
+      border-top: 0;
+      &.#{$px}-accordion {
         border-bottom: 0;
       }
-    }
-  }
+      .#{$px}-accordion-item {
+        border-top: 1px solid $light-gray;
+        .#{$px}-nav__list {
+          display: flex;
+          flex-direction: column;
+          gap: $spacing-xsm;
+          padding: 0;
+        }
 
-  &.#{$px}-dropdown {
-    display: flex;
-    padding: 0;
+        &-label {
+          opacity: 1;
+          padding: $snowflake-menu-padding 0;
+        }
+
+        &__border-bottom {
+          border-bottom: 0;
+        }
+      }
+    }
 
-    button {
-      border: none;
-      box-shadow: unset;
-      justify-content: center;
-      outline: none;
+    &.#{$px}-dropdown {
+      display: flex;
       padding: 0;
-      text-transform: unset;
-      width: fit-content;
+
+      button {
+        border: none;
+        box-shadow: unset;
+        justify-content: center;
+        outline: none;
+        padding: 0;
+        text-transform: unset;
+        width: fit-content;
+      }
     }
   }
 }

package/dist/scss/patterns/ObjectTile/_objectTile.scss

@@ -1,106 +1,109 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-object-tile {
-  display: flex;
-  flex-direction: column;
-  max-width: 24.5rem;
-  text-align: left;
-
-  &__img {
-    margin-bottom: $spacing-sm;
-    max-width: 100%;
-  }
+@layer seldon.patterns {
+  .#{$px}-object-tile {
+    display: flex;
+    flex-direction: column;
+    max-width: 24.5rem;
+    text-align: left;
 
-  &__badge {
-    color: $warning-default;
-    display: block; // Ensures the badge can be sized correctly
-    min-height: 1rem;
-    text-transform: uppercase;
-  }
+    &__img {
+      margin-bottom: $spacing-sm;
+      max-width: 100%;
+    }
 
-  &__title,
-  &__maker,
-  &__model,
-  &__reference-number {
-    @include DistinctDisplay;
+    &__badge {
+      color: $warning-default;
+      display: block; // Ensures the badge can be sized correctly
+      min-height: 1rem;
+      text-transform: uppercase;
+    }
 
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    overflow: hidden;
+    &__title,
+    &__maker,
+    &__model,
+    &__reference-number {
+      @include DistinctDisplay;
 
-    &.#{$px}-text {
-      font-variation-settings: 'wght' 600;
-    }
-  }
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      overflow: hidden;
 
-  &__lot-number-like {
-    align-items: center;
-    display: flex;
-    font-variation-settings: 'wght' 600;
-    margin-bottom: $spacing-xsm;
-    position: relative;
-
-    & > :not(.#{$px}-object-tile__lot-number):not(.#{$px}-object-tile__lot-badge) {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
+      &.#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
     }
 
-    .#{$px}-object-tile__lot-badge {
-      display: block;
-      padding-left: $spacing-xsm;
+    &__lot-number-like {
+      align-items: center;
+      display: flex;
+      font-variation-settings: 'wght' 600;
+      margin-bottom: $spacing-xsm;
       position: relative;
 
-      svg {
-        height: 100%;
-        width: 100%;
+      & > :not(.#{$px}-object-tile__lot-number):not(.#{$px}-object-tile__lot-badge) {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .#{$px}-object-tile__lot-badge {
+        display: block;
+        padding-left: $spacing-xsm;
+        position: relative;
+
+        svg {
+          height: 100%;
+          width: 100%;
 
-        path {
-          fill: $pure-black;
+          path {
+            fill: $pure-black;
+          }
         }
       }
     }
-  }
 
-  & .#{$px}-object-tile__lot-number {
-    display: block;
-    margin-bottom: 0;
-    padding-top: 2px;
-  }
+    & .#{$px}-object-tile__lot-number {
+      display: block;
+      margin-bottom: 0;
+      padding-top: 2px;
+    }
 
-  & .#{$px}-object-tile__maker,
-  & .#{$px}-object-tile__model,
-  & .#{$px}-object-tile__reference-number,
-  & .#{$px}-object-tile__title {
-    display: block;
-    margin-bottom: 0;
-  }
+    & .#{$px}-object-tile__maker,
+    & .#{$px}-object-tile__model,
+    & .#{$px}-object-tile__reference-number,
+    & .#{$px}-object-tile__title {
+      display: block;
+      margin-bottom: 0;
+    }
 
-  &__title,
-  &__reference-number,
-  &__model {
-    font-style: italic;
-  }
+    &__title,
+    &__reference-number,
+    &__model {
+      font-style: italic;
+    }
 
-  &__meta {
-    display: block;
-    margin-bottom: $spacing-sm;
-  }
+    &__meta {
+      display: block;
+      margin-bottom: $spacing-sm;
+    }
 
-  &__withdrawn {
-    font-family: $Distinct;
-  }
+    &__withdrawn {
+      font-family: $Distinct;
+    }
 
-  &__section {
-    .#{$px}-has-separators .#{$px}-detail {
-      flex-wrap: wrap;
-      gap: 0 $spacing-sm;
+    &__section {
+      .#{$px}-has-separators .#{$px}-detail {
+        flex-wrap: wrap;
+        gap: 0 $spacing-sm;
 
-      .#{$px}-detail__value {
-        text-align: unset;
+        .#{$px}-detail__value {
+          text-align: unset;
+        }
       }
     }
   }

package/dist/scss/patterns/PhoneNumberInput/_phoneNumberInput.scss

@@ -1,60 +1,63 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-phone-number-input {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-
-  &__wrapper {
-    align-items: flex-end;
+@layer seldon.patterns {
+  .#{$px}-phone-number-input {
     display: flex;
-    flex-direction: row;
-    gap: $spacing-xsm;
+    flex-direction: column;
+    position: relative;
     width: 100%;
-  }
-
-  &__country-picker {
-    flex: 0 0 30%;
-  }
-
-  &__input {
-    flex: 1 1 70%;
-    min-width: 0; // ensures input shrinks properly in flex container, 0 prevents overflow and lets flex-basis do its thing
 
-    // Hide input validation inside phone number input, we use a shared one
-    .#{$px}-input__validation {
-      display: none;
+    &__wrapper {
+      align-items: flex-end;
+      display: flex;
+      flex-direction: row;
+      gap: $spacing-xsm;
+      width: 100%;
     }
 
-    .#{$px}-input__empty-validation {
-      display: none;
-    }
-  }
-
-  @media screen {
     &__country-picker {
-      flex: 0 0 37.5%;
-      min-width: 0;
+      flex: 0 0 30%;
     }
 
     &__input {
-      flex: 1 1 62.5%;
-      min-width: 0;
+      flex: 1 1 70%;
+      min-width: 0; // ensures input shrinks properly in flex container, 0 prevents overflow and lets flex-basis do its thing
+
+      // Hide input validation inside phone number input, we use a shared one
+      .#{$px}-input__validation {
+        display: none;
+      }
+
+      .#{$px}-input__empty-validation {
+        display: none;
+      }
     }
-  }
-}
 
-.#{$px}-input__validation {
-  animation: reveal 0.45s linear forwards;
-}
+    @media screen {
+      &__country-picker {
+        flex: 0 0 37.5%;
+        min-width: 0;
+      }
 
-@keyframes reveal {
-  0% {
-    opacity: 0;
+      &__input {
+        flex: 1 1 62.5%;
+        min-width: 0;
+      }
+    }
   }
 
-  100% {
-    opacity: 1;
+  .#{$px}-input__validation {
+    animation: reveal 0.45s linear forwards;
+  }
+
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
 }

package/dist/scss/patterns/ProgressWizard/_progressWizard.scss

@@ -1,81 +1,84 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-progress-wizard {
-  display: flex;
-  flex-direction: column;
-  z-index: 100;
-
-  &__logo {
-    align-items: center;
-    border-bottom: 1px solid $light-gray;
+@layer seldon.patterns {
+  .#{$px}-progress-wizard {
     display: flex;
-    justify-content: center;
-    margin-bottom: $spacing-md;
-    padding: $spacing-sm;
-  }
+    flex-direction: column;
+    z-index: 100;
 
-  &__content {
-    flex: 1 1 auto;
-    margin-top: $spacing-md;
-    overflow-y: visible;
-  }
+    &__logo {
+      align-items: center;
+      border-bottom: 1px solid $light-gray;
+      display: flex;
+      justify-content: center;
+      margin-bottom: $spacing-md;
+      padding: $spacing-sm;
+    }
 
-  &--full-height {
-    height: 100%;
-  }
+    &__content {
+      flex: 1 1 auto;
+      margin-top: $spacing-md;
+      overflow-y: visible;
+    }
 
-  &__footer {
-    align-items: stretch;
-    background-color: $white;
-    border-top: 1px solid $light-gray;
-    display: flex;
-    flex-shrink: 0;
-    gap: $spacing-sm;
-    justify-content: stretch;
-    padding: $spacing-sm 0;
-    width: 100%;
-  }
+    &--full-height {
+      height: 100%;
+    }
 
-  &__btn {
-    flex: 1 1 0;
-  }
+    &__footer {
+      align-items: stretch;
+      background-color: $white;
+      border-top: 1px solid $light-gray;
+      display: flex;
+      flex-shrink: 0;
+      gap: $spacing-sm;
+      justify-content: stretch;
+      padding: $spacing-sm 0;
+      width: 100%;
+    }
 
-  &-hidden {
-    display: none;
-  }
+    &__btn {
+      flex: 1 1 0;
+    }
 
-  // Mobile: sticky footer, only content scrolls
-  @media (max-width: $breakpoint-md) {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    overflow: visible;
+    &-hidden {
+      display: none;
+    }
 
-    &__content {
-      flex: 1 1 auto;
-      height: auto;
+    // Mobile: sticky footer, only content scrolls
+    @media (max-width: $breakpoint-md) {
+      display: flex;
+      flex-direction: column;
       min-height: 0;
-    }
+      overflow: visible;
 
-    &__footer {
-      bottom: 0;
-      left: 0;
-      position: sticky;
-      right: 0;
-      z-index: 10;
+      &__content {
+        flex: 1 1 auto;
+        height: auto;
+        min-height: 0;
+      }
+
+      &__footer {
+        bottom: 0;
+        left: 0;
+        position: sticky;
+        right: 0;
+        z-index: 10;
+      }
     }
-  }
 
-  // Desktop: footer at bottom if content is short, scrolls if content is long
-  @media (min-width: $breakpoint-md) {
-    display: flex;
-    flex-direction: column;
+    // Desktop: footer at bottom if content is short, scrolls if content is long
+    @media (min-width: $breakpoint-md) {
+      display: flex;
+      flex-direction: column;
 
-    &__footer {
-      border-top: none;
-      box-shadow: none;
-      margin-top: auto;
-      position: static;
+      &__footer {
+        border-top: none;
+        box-shadow: none;
+        margin-top: auto;
+        position: static;
+      }
     }
   }
 }