@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -1,56 +1,59 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-bid-snapshot {
-  position: relative;
+@layer seldon.patterns {
+  .#{$px}-bid-snapshot {
+    position: relative;
 
-  &__text .#{$px}-has-separators .#{$px}-detail.#{$px}-detail {
-    flex-wrap: wrap;
-    gap: 0 $spacing-sm;
-  }
+    &__text .#{$px}-has-separators .#{$px}-detail.#{$px}-detail {
+      flex-wrap: wrap;
+      gap: 0 $spacing-sm;
+    }
 
-  &__current-bid,
-  &__sold {
-    .#{$px}-detail__value .#{$px}-text.#{$px}-text {
-      font-variation-settings: 'wght' 600;
+    &__current-bid,
+    &__sold {
+      .#{$px}-detail__value .#{$px}-text.#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
     }
-  }
 
-  &:has(.#{$px}-bid-message) &__text .#{$px}-detail {
-    padding-bottom: 0;
-  }
+    &:has(.#{$px}-bid-message) &__text .#{$px}-detail {
+      padding-bottom: 0;
+    }
 
-  .#{$px}-countdown {
-    align-items: flex-start;
-    padding: 0;
-    position: absolute;
-    top: calc(100% + $spacing-xsm);
-  }
+    .#{$px}-countdown {
+      align-items: flex-start;
+      padding: 0;
+      position: absolute;
+      top: calc(100% + $spacing-xsm);
+    }
 
-  &--live:has(.#{$px}-countdown) {
-    border-bottom: 1px solid $light-gray;
-    margin-bottom: $spacing-md;
-  }
+    &--live:has(.#{$px}-countdown) {
+      border-bottom: 1px solid $light-gray;
+      margin-bottom: $spacing-md;
+    }
 
-  // styles that will apply to bid message inside bid snapshot only
-  .#{$px}-bid-message {
-    &.#{$px}-bid-message {
-      margin-bottom: $spacing-sm;
+    // styles that will apply to bid message inside bid snapshot only
+    .#{$px}-bid-message {
+      &.#{$px}-bid-message {
+        margin-bottom: $spacing-sm;
+      }
     }
   }
-}
 
-.#{$px}-bid-message {
-  align-items: center;
-  display: flex;
-  gap: $spacing-micro;
+  .#{$px}-bid-message {
+    align-items: center;
+    display: flex;
+    gap: $spacing-micro;
 
-  // Override the default text style being too specific
-  &-text {
-    font-variation-settings: 'wght' 600;
-    margin-bottom: 0;
-  }
+    // Override the default text style being too specific
+    &-text {
+      font-variation-settings: 'wght' 600;
+      margin-bottom: 0;
+    }
 
-  &__icon {
-    font-size: 0.5em;
+    &__icon {
+      font-size: 0.5em;
+    }
   }
 }

package/dist/scss/patterns/CountryPicker/_countryPickerModal.scss

@@ -1,106 +1,107 @@
 @use '../../allPartials' as *;
-
-.#{$px}-country-picker {
-  &__modal {
-    display: flex;
-    flex-direction: column;
-    height: 80vh;
-    width: 635px;
-
-    @media (max-width: $breakpoint-md) {
-      height: 100dvh;
-      width: 100%;
+@use '../../layers';
+
+@layer seldon.patterns {
+  .#{$px}-country-picker {
+    &__modal {
+      display: flex;
+      flex-direction: column;
+      height: 80vh;
+      width: 635px;
+
+      @media (max-width: $breakpoint-md) {
+        height: 100dvh;
+        width: 100%;
+      }
     }
-  }
-
-  &__wrapper {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: -webkit-fill-available;
-  }
 
-  &__header {
-    background: $white-100;
-    margin-bottom: 24px; // no token for this yet
-    position: sticky;
-    top: 0;
-
-    &-text {
-      margin-bottom: $spacing-md;
+    &__wrapper {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-height: -webkit-fill-available;
     }
-  }
 
-  &__list {
-    flex: 1;
-    margin-bottom: $spacing-sm;
-    min-height: 0;
-    overflow-y: auto;
-  }
+    &__header {
+      background: $white-100;
+      margin-bottom: 24px; // no token for this yet
+      position: sticky;
+      top: 0;
 
-  &__letter-header {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    margin: $spacing-sm 0;
-  }
+      &-text {
+        margin-bottom: $spacing-md;
+      }
+    }
 
-  &__letter-text {
-    &.seldon-text {
-      margin-bottom: 0;
+    &__list {
+      flex: 1;
+      margin-bottom: $spacing-sm;
+      min-height: 0;
+      overflow-y: auto;
     }
-  }
 
-  &__letter-line {
-    border-bottom: 1px solid $light-gray;
-    height: 0;
-    width: 100%;
-  }
+    &__letter-header {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      margin: $spacing-sm 0;
+    }
 
-  &__button-container {
-    background: $white-100;
-    border-top: 1px solid $light-gray;
-    margin-top: auto;
-    padding-top: 1rem;
-    width: 100%;
+    &__letter-text {
+      &.seldon-text {
+        margin-bottom: 0;
+      }
+    }
 
-    button {
+    &__letter-line {
+      border-bottom: 1px solid $light-gray;
+      height: 0;
       width: 100%;
     }
-  }
 
-  &__input-wrapper {
-    padding-bottom: 0.25rem;
-    position: relative;
-    width: 100%;
+    &__button-container {
+      background: $white-100;
+      border-top: 1px solid $light-gray;
+      margin-top: auto;
+      padding-top: 1rem;
+      width: 100%;
 
-    .seldon-input__validation {
-      display: none;
+      button {
+        width: 100%;
+      }
     }
 
-    input {
-      padding-left: $spacing-md;
+    &__input-wrapper {
+      padding-bottom: 0.25rem;
+      position: relative;
+      width: 100%;
 
-      &::placeholder {
-        font-variation-settings: 'wght' 700;
+      .seldon-input__validation {
+        display: none;
       }
 
-      // Remove iOS gray background
-      @supports (-webkit-touch-callout: none) {
-        appearance: none;
-        background-color: $white-100;
+      input {
+        &::placeholder {
+          font-variation-settings: 'wght' 700;
+        }
+
+        // Remove iOS gray background
+        @supports (-webkit-touch-callout: none) {
+          appearance: none;
+          background-color: $white-100;
+        }
       }
     }
-  }
 
-  .#{$px}-country-picker__input-wrapper .seldon-input__label {
-    border: 0;
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+    .#{$px}-country-picker__input-wrapper .seldon-input__label {
+      border: 0;
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
   }
 }

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -1,87 +1,90 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-country-picker {
-  &__option {
-    align-items: center;
-    background: $white-100;
-    border: 1px solid transparent;
-    border-radius: $radius-xs;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row-reverse;
-    font-variation-settings: 'wght' 600;
-    justify-content: space-between;
-    margin-bottom: $spacing-micro;
-    margin-right: 1px; // account for scroll bar
-    outline: none;
-    padding: 12px $spacing-sm;
-    transition:
-      border-color 0.2s,
-      background 0.2s;
+@layer seldon.patterns {
+  .#{$px}-country-picker {
+    &__option {
+      align-items: center;
+      background: $white-100;
+      border: 1px solid transparent;
+      border-radius: $radius-xs;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row-reverse;
+      font-variation-settings: 'wght' 600;
+      justify-content: space-between;
+      margin-bottom: $spacing-micro;
+      margin-right: 1px; // account for scroll bar
+      outline: none;
+      padding: 12px $spacing-sm;
+      transition:
+        border-color 0.2s,
+        background 0.2s;
 
-    &--selected {
-      border: 1px solid $pure-black;
+      &--selected {
+        border: 1px solid $pure-black;
 
-      .#{$px}-country-picker__radio {
-        accent-color: $pure-black;
+        .#{$px}-country-picker__radio {
+          accent-color: $pure-black;
+        }
       }
-    }
 
-    &--is-phone:focus-within {
-      box-shadow: inset 0 0 0 2px $focus-default;
-      outline: none;
-    }
+      &--is-phone:focus-within {
+        box-shadow: inset 0 0 0 2px $focus-default;
+        outline: none;
+      }
 
-    &-content {
-      display: flex;
-      flex: 1;
-      justify-content: space-between;
-      .#{$px}-text {
-        font-variation-settings: 'wght' 600;
+      &-content {
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+        .#{$px}-text {
+          font-variation-settings: 'wght' 600;
+        }
       }
-    }
 
-    &-flag {
-      align-items: center;
-      display: flex;
-      height: 1rem;
-      justify-content: center;
-      margin-right: $spacing-sm;
-      overflow: hidden;
-      width: 1.5rem;
+      &-flag {
+        align-items: center;
+        display: flex;
+        height: 1rem;
+        justify-content: center;
+        margin-right: $spacing-sm;
+        overflow: hidden;
+        width: 1.5rem;
 
-      @media (min-width: $breakpoint-md) {
-        height: 1.25rem;
-        width: 1.75rem;
-      }
+        @media (min-width: $breakpoint-md) {
+          height: 1.25rem;
+          width: 1.75rem;
+        }
 
-      &-img {
-        display: block;
-        height: 100%;
-        width: auto;
+        &-img {
+          display: block;
+          height: 100%;
+          width: auto;
+        }
       }
     }
-  }
-  .#{$px}-country-picker__radio {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
+    .#{$px}-country-picker__radio {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
 
-  &__radio--visually-hidden {
-    border: 0;
-    height: 1px;
-    margin: -1px;
-    opacity: 0;
-    padding: 0;
-    white-space: nowrap;
-    width: 1px;
+    &__radio--visually-hidden {
+      border: 0;
+      height: 1px;
+      margin: -1px;
+      opacity: 0;
+      padding: 0;
+      white-space: nowrap;
+      width: 1px;
+    }
   }
-}
 
-// When both selected and focused, show both the border and focus ring
-.#{$px}-country-picker__option--is-phone.#{$px}-country-picker__option--selected {
-  &:focus-within {
-    box-shadow: inset 0 0 0 2px $focus-default;
-    outline: none;
+  // When both selected and focused, show both the border and focus ring
+  .#{$px}-country-picker__option--is-phone.#{$px}-country-picker__option--selected {
+    &:focus-within {
+      box-shadow: inset 0 0 0 2px $focus-default;
+      outline: none;
+    }
   }
 }

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -1,103 +1,106 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-country-picker {
-  &__trigger {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+@layer seldon.patterns {
+  .#{$px}-country-picker {
+    &__trigger {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
 
-    &-label {
-      margin-bottom: $spacing-xsm;
-      white-space: nowrap;
+      &-label {
+        margin-bottom: $spacing-xsm;
+        white-space: nowrap;
 
-      &--error {
-        color: $error-red;
+        &--error {
+          color: $error-red;
+        }
       }
-    }
 
-    &-btn {
-      @include text($bodyMedium);
+      &-btn {
+        @include text($bodyMedium);
 
-      align-items: center;
-      appearance: none;
-      background: $white;
-      border: 1px solid $black-100;
-      border-radius: $radius-xs;
-      box-sizing: border-box;
-      color: $text-default;
-      cursor: pointer;
-      display: flex;
-      flex-direction: row;
-      font-variation-settings: 'wght' 600;
-      justify-content: space-between;
-      padding: $spacing-xsm;
-      width: 100%;
+        align-items: center;
+        appearance: none;
+        background: $white;
+        border: 1px solid $black-100;
+        border-radius: $radius-xs;
+        box-sizing: border-box;
+        color: $text-default;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        font-variation-settings: 'wght' 600;
+        justify-content: space-between;
+        padding: $spacing-xsm;
+        width: 100%;
 
-      &:focus-visible {
-        @include focus-ring($border-radius: $radius-xs);
-      }
+        &:focus-visible {
+          @include focus-ring($border-radius: $radius-xs);
+        }
 
-      &--error {
-        border-color: $error-red;
-        box-shadow: inset 0 0 3px 3px $error-pink;
+        &--error {
+          border-color: $error-red;
+          box-shadow: inset 0 0 3px 3px $error-pink;
+        }
       }
-    }
 
-    &-text {
-      flex: 1;
-      font-variation-settings: 'wght' 600;
-      margin-left: $spacing-xsm;
-      margin-right: $spacing-xsm;
-      overflow: hidden;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+      &-text {
+        flex: 1;
+        font-variation-settings: 'wght' 600;
+        margin-left: $spacing-xsm;
+        margin-right: $spacing-xsm;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-    &-icon {
-      align-items: center;
-      display: flex;
+      &-icon {
+        align-items: center;
+        display: flex;
 
-      // 1.4em matches the line-height from body-styles mixin, ensuring icon scales with font-size at different breakpoints
-      // This keeps the trigger button height aligned with the Input component across all screen sizes
-      height: 1.4em;
-      width: 1.4em;
-    }
+        // 1.4em matches the line-height from body-styles mixin, ensuring icon scales with font-size at different breakpoints
+        // This keeps the trigger button height aligned with the Input component across all screen sizes
+        height: 1.4em;
+        width: 1.4em;
+      }
 
-    &-flag {
-      align-items: center;
-      display: flex;
-      height: 1rem;
-      justify-content: center;
-      overflow: hidden;
-      width: 1.5rem;
+      &-flag {
+        align-items: center;
+        display: flex;
+        height: 1rem;
+        justify-content: center;
+        overflow: hidden;
+        width: 1.5rem;
 
-      @media (min-width: $breakpoint-md) {
-        height: 1.25rem;
-        width: 1.75rem;
-      }
+        @media (min-width: $breakpoint-md) {
+          height: 1.25rem;
+          width: 1.75rem;
+        }
 
-      &-img {
-        display: block;
-        height: 100%;
-        width: auto;
+        &-img {
+          display: block;
+          height: 100%;
+          width: auto;
+        }
       }
     }
   }
-}
-.#{$px}-input__validation {
-  animation: reveal 0.45s linear forwards;
-}
-.#{$px}-input__empty-validation {
-  line-height: $spacing-sm;
-}
-
-@keyframes reveal {
-  0% {
-    opacity: 0;
+  .#{$px}-input__validation {
+    animation: reveal 0.45s linear forwards;
+  }
+  .#{$px}-input__empty-validation {
+    line-height: $spacing-sm;
   }
 
-  100% {
-    opacity: 1;
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
 }