@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Select/_select.scss

@@ -1,69 +1,81 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-select-input {
-  margin-bottom: $spacing-sm;
-  position: relative;
+@layer seldon.components {
+  .#{$px}-select-input {
+    margin-bottom: $spacing-sm;
+    position: relative;
 
-  &__standalone {
-    margin-bottom: 0;
-  }
+    &.#{$px}-input {
+      width: fit-content;
+    }
 
-  .#{$px}-select-container {
-    position: relative;
+    .#{$px}-input__input {
+      background: transparent;
+      width: fit-content;
+    }
+
+    &__standalone {
+      margin-bottom: 0;
+    }
+
+    .#{$px}-select-container {
+      position: relative;
 
-    &--show__icon {
-      select {
-        appearance: none;
-        color: $black-100;
-        padding-right: 3rem;
+      &--show__icon {
+        select {
+          appearance: none;
+          color: $black-100;
+          padding-right: 3rem;
 
-        @media (min-width: $breakpoint-md) {
-          padding-right: 3.25rem;
+          @media (min-width: $breakpoint-md) {
+            padding-right: 3.25rem;
+          }
         }
       }
     }
-  }
 
-  svg {
-    height: 1rem;
-    pointer-events: none;
-    position: absolute;
-    right: 0.35rem;
-    top: 45%;
-    transform: translateY(-45%);
-    width: 1rem;
+    svg {
+      height: 1rem;
+      pointer-events: none;
+      position: absolute;
+      right: 0.35rem;
+      top: 45%;
+      transform: translateY(-45%);
+      width: 1rem;
 
-    @media (min-width: $breakpoint-md) {
-      height: 1.25rem;
-      right: 0.5rem;
-      width: 1.25rem;
-    }
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        right: 0.5rem;
+        width: 1.25rem;
+      }
 
-    path {
-      fill: $pure-black;
+      path {
+        fill: $pure-black;
+      }
     }
-  }
 
-  select.#{$px}-input {
-    &__select {
-      &--tertiary {
-        border: 1.5px solid $black-100;
-        border-radius: $radius-3xl;
-        color: inherit;
-        padding: $spacing-xsm $spacing-md $spacing-xsm $spacing-sm;
+    select.#{$px}-input {
+      &__select {
+        &--tertiary {
+          border: 1.5px solid $black-100;
+          border-radius: $radius-3xl;
+          color: inherit;
+          padding: $spacing-xsm $spacing-md $spacing-xsm $spacing-sm;
 
-        &:hover {
-          cursor: pointer;
-        }
+          &:hover {
+            cursor: pointer;
+          }
 
-        &:focus-visible {
-          @include focus-ring($border-radius: $radius-3xl);
+          &:focus-visible {
+            @include focus-ring($border-radius: $radius-3xl);
 
-          background-color: $pure-white;
-        }
+            background-color: $pure-white;
+          }
 
-        svg {
-          top: 0.625rem;
+          svg {
+            top: 0.625rem;
+          }
         }
       }
     }

package/dist/scss/components/SlideToActivate/_slideToActivate.scss

@@ -1,284 +1,287 @@
 @use '../../allPartials' as *;
+@use '../../layers';
+
+@layer seldon.components {
+  .#{$px}-slide-to-activate {
+    // Figma Saleroom Bid Status (8482:81744): 44 track / 40 thumb / 2px inset.
+    --seldon-slide-thumb-size: 40px;
+    --seldon-slide-hit-tolerance: 8px;
+    --seldon-slide-track-height: 44px;
+    --seldon-slide-gutter-inset: 2px;
+
+    display: block;
+    max-width: 100%;
+    touch-action: none;
+    width: 100%;
 
-.#{$px}-slide-to-activate {
-  // Figma Saleroom Bid Status (8482:81744): 44 track / 40 thumb / 2px inset.
-  --seldon-slide-thumb-size: 40px;
-  --seldon-slide-hit-tolerance: 8px;
-  --seldon-slide-track-height: 44px;
-  --seldon-slide-gutter-inset: 2px;
-
-  display: block;
-  max-width: 100%;
-  touch-action: none;
-  width: 100%;
-
-  &--small {
-    --seldon-slide-thumb-size: 28px;
-    --seldon-slide-track-height: 32px;
-  }
-
-  &--radius-sharp {
-    .#{$px}-slide-to-activate__track,
-    .#{$px}-slide-to-activate__thumb-face {
-      border-radius: 0;
-    }
-
-    .#{$px}-slide-to-activate__thumb:focus-visible {
-      @include focus-ring($border-radius: 0);
+    &--small {
+      --seldon-slide-thumb-size: 28px;
+      --seldon-slide-track-height: 32px;
     }
-  }
 
-  &--radius-rounded {
-    .#{$px}-slide-to-activate__track,
-    .#{$px}-slide-to-activate__thumb-face {
-      border-radius: $radius-md;
-    }
+    &--radius-sharp {
+      .#{$px}-slide-to-activate__track,
+      .#{$px}-slide-to-activate__thumb-face {
+        border-radius: 0;
+      }
 
-    .#{$px}-slide-to-activate__thumb:focus-visible {
-      @include focus-ring($border-radius: $radius-md);
+      .#{$px}-slide-to-activate__thumb:focus-visible {
+        @include focus-ring($border-radius: 0);
+      }
     }
-  }
 
-  &--radius-pill {
-    .#{$px}-slide-to-activate__track,
-    .#{$px}-slide-to-activate__thumb-face {
-      border-radius: $radius-3xl;
-    }
+    &--radius-rounded {
+      .#{$px}-slide-to-activate__track,
+      .#{$px}-slide-to-activate__thumb-face {
+        border-radius: $radius-md;
+      }
 
-    .#{$px}-slide-to-activate__thumb:focus-visible {
-      @include focus-ring($border-radius: $radius-3xl);
+      .#{$px}-slide-to-activate__thumb:focus-visible {
+        @include focus-ring($border-radius: $radius-md);
+      }
     }
-  }
 
-  &__track {
-    align-items: center;
-    background-color: $pure-black;
-    border-radius: 0;
-    box-sizing: border-box;
-    display: flex;
-    height: var(--seldon-slide-track-height);
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    touch-action: none;
-    transition:
-      background-color 0.32s ease-out,
-      border-color 0.32s ease-out;
-    user-select: none;
-    width: 100%;
-  }
+    &--radius-pill {
+      .#{$px}-slide-to-activate__track,
+      .#{$px}-slide-to-activate__thumb-face {
+        border-radius: $radius-3xl;
+      }
 
-  &__label {
-    color: $pure-white;
-    font-variation-settings: 'wght' 600;
-    pointer-events: none;
-    position: relative;
-    transition:
-      color 0.32s ease-out,
-      opacity 0.28s ease-out;
-    z-index: 1;
-  }
+      .#{$px}-slide-to-activate__thumb:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
+    }
 
-  &__pending-indicator {
-    align-items: center;
-    display: flex;
-    inset: 0;
-    justify-content: center;
-    pointer-events: none;
-    position: absolute;
-    transition: opacity 0.28s ease-out;
-    z-index: 2;
-
-    .#{$px}-loader {
-      border-color: $pure-white;
-      border-bottom-color: transparent;
+    &__track {
+      align-items: center;
+      background-color: $pure-black;
+      border-radius: 0;
+      box-sizing: border-box;
+      display: flex;
+      height: var(--seldon-slide-track-height);
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      touch-action: none;
+      transition:
+        background-color 0.32s ease-out,
+        border-color 0.32s ease-out;
+      user-select: none;
+      width: 100%;
     }
-  }
 
-  &__thumb {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    cursor: grab;
-    display: flex;
-    height: var(--seldon-slide-thumb-size);
-    justify-content: center;
-    left: var(--seldon-slide-gutter-inset);
-    padding: 0;
-    position: absolute;
-    top: 50%;
-    touch-action: none;
-    transform: translateY(-50%);
-    width: var(--seldon-slide-thumb-size);
-    z-index: 3;
+    &__label {
+      color: $pure-white;
+      font-variation-settings: 'wght' 600;
+      pointer-events: none;
+      position: relative;
+      transition:
+        color 0.32s ease-out,
+        opacity 0.28s ease-out;
+      z-index: 1;
+    }
 
-    &::before {
-      content: '';
-      inset: calc(var(--seldon-slide-hit-tolerance) * -1);
+    &__pending-indicator {
+      align-items: center;
+      display: flex;
+      inset: 0;
+      justify-content: center;
+      pointer-events: none;
       position: absolute;
-    }
+      transition: opacity 0.28s ease-out;
+      z-index: 2;
 
-    &:active,
-    &--held {
-      cursor: grabbing;
+      .#{$px}-loader {
+        border-color: $pure-white;
+        border-bottom-color: transparent;
+      }
     }
 
-    &:focus-visible {
-      @include focus-ring($border-radius: 0);
+    &__thumb {
+      align-items: center;
+      background: transparent;
+      border: 0;
+      cursor: grab;
+      display: flex;
+      height: var(--seldon-slide-thumb-size);
+      justify-content: center;
+      left: var(--seldon-slide-gutter-inset);
+      padding: 0;
+      position: absolute;
+      top: 50%;
+      touch-action: none;
+      transform: translateY(-50%);
+      width: var(--seldon-slide-thumb-size);
+      z-index: 3;
+
+      &::before {
+        content: '';
+        inset: calc(var(--seldon-slide-hit-tolerance) * -1);
+        position: absolute;
+      }
+
+      &:active,
+      &--held {
+        cursor: grabbing;
+      }
+
+      &:focus-visible {
+        @include focus-ring($border-radius: 0);
+      }
+
+      &--held .#{$px}-slide-to-activate__thumb-face {
+        box-shadow: 0 0 0 1px rgba($pure-black, 1);
+      }
     }
 
-    &--held .#{$px}-slide-to-activate__thumb-face {
-      box-shadow: 0 0 0 1px rgba($pure-black, 1);
+    &__thumb-face {
+      align-items: center;
+      background-color: $pure-white;
+      border: 0;
+      border-radius: 0;
+      box-sizing: border-box;
+      color: $pure-black;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      pointer-events: none;
+      transition:
+        box-shadow 0.28s ease-out,
+        background-color 0.32s ease-out,
+        color 0.32s ease-out;
+      width: 100%;
     }
-  }
 
-  &__thumb-face {
-    align-items: center;
-    background-color: $pure-white;
-    border: 0;
-    border-radius: 0;
-    box-sizing: border-box;
-    color: $pure-black;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    pointer-events: none;
-    transition:
-      box-shadow 0.28s ease-out,
-      background-color 0.32s ease-out,
-      color 0.32s ease-out;
-    width: 100%;
-  }
+    // Figma Chevron Group (8893:13050): two 22px ChevronRight icons, second at x=12.
+    &__thumb-chevrons {
+      align-items: center;
+      display: flex;
+      height: 22px;
+      width: 33px;
 
-  // Figma Chevron Group (8893:13050): two 22px ChevronRight icons, second at x=12.
-  &__thumb-chevrons {
-    align-items: center;
-    display: flex;
-    height: 22px;
-    width: 33px;
+      > *:last-child {
+        margin-left: -11px;
+      }
 
-    > *:last-child {
-      margin-left: -11px;
+      .#{$px}-icon {
+        flex-shrink: 0;
+        height: 22px;
+        width: 22px;
+      }
     }
 
-    .#{$px}-icon {
-      flex-shrink: 0;
-      height: 22px;
-      width: 22px;
-    }
-  }
+    &__thumb-icon {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      transition: transform 0.15s ease-out;
 
-  &__thumb-icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    transition: transform 0.15s ease-out;
+      svg {
+        height: 22px;
+        width: 22px;
+      }
 
-    svg {
-      height: 22px;
-      width: 22px;
+      &--held {
+        transform: scale(1.1);
+      }
     }
 
-    &--held {
-      transform: scale(1.1);
-    }
-  }
+    &--small &__thumb-chevrons {
+      height: 16px;
+      width: 24px;
 
-  &--small &__thumb-chevrons {
-    height: 16px;
-    width: 24px;
+      > *:last-child {
+        margin-left: -8px;
+      }
 
-    > *:last-child {
-      margin-left: -8px;
+      .#{$px}-icon {
+        height: 16px;
+        width: 16px;
+      }
     }
 
-    .#{$px}-icon {
+    &--small &__thumb-icon svg {
       height: 16px;
       width: 16px;
     }
-  }
-
-  &--small &__thumb-icon svg {
-    height: 16px;
-    width: 16px;
-  }
-
-  &--rtl &__thumb {
-    left: auto;
-    right: var(--seldon-slide-gutter-inset);
-  }
 
-  &--rtl &__thumb-icon {
-    transform: scaleX(-1);
-
-    &--held {
-      transform: scaleX(-1) scale(1.1);
+    &--rtl &__thumb {
+      left: auto;
+      right: var(--seldon-slide-gutter-inset);
     }
-  }
 
-  &--pending {
-    .#{$px}-slide-to-activate__label {
-      opacity: 0;
-    }
+    &--rtl &__thumb-icon {
+      transform: scaleX(-1);
 
-    .#{$px}-slide-to-activate__thumb {
-      cursor: default;
+      &--held {
+        transform: scaleX(-1) scale(1.1);
+      }
     }
-  }
 
-  &--disabled {
-    pointer-events: none;
+    &--pending {
+      .#{$px}-slide-to-activate__label {
+        opacity: 0;
+      }
 
-    .#{$px}-slide-to-activate__thumb {
-      cursor: not-allowed;
+      .#{$px}-slide-to-activate__thumb {
+        cursor: default;
+      }
     }
-  }
 
-  // Not allowed / unavailable
-  &--disabled-blocked {
-    .#{$px}-slide-to-activate__track {
-      background-color: $grey-50;
-    }
+    &--disabled {
+      pointer-events: none;
 
-    .#{$px}-slide-to-activate__label {
-      // $grey-75 fails 4.5:1 against this $grey-50 background (3.98:1) — $grey-100 passes at 6.24:1.
-      color: $grey-100;
+      .#{$px}-slide-to-activate__thumb {
+        cursor: not-allowed;
+      }
     }
 
-    .#{$px}-slide-to-activate__thumb-face {
-      background-color: $grey-50;
-      color: $grey-100;
+    // Not allowed / unavailable
+    &--disabled-blocked {
+      .#{$px}-slide-to-activate__track {
+        background-color: $grey-50;
+      }
+
+      .#{$px}-slide-to-activate__label {
+        // $grey-75 fails 4.5:1 against this $grey-50 background (3.98:1) — $grey-100 passes at 6.24:1.
+        color: $grey-100;
+      }
+
+      .#{$px}-slide-to-activate__thumb-face {
+        background-color: $grey-50;
+        color: $grey-100;
+      }
     }
-  }
 
-  // Already completed — settled success look; thumb is always faded out
-  &--disabled-complete {
-    .#{$px}-slide-to-activate__track {
-      background-color: $pure-black;
-    }
+    // Already completed — settled success look; thumb is always faded out
+    &--disabled-complete {
+      .#{$px}-slide-to-activate__track {
+        background-color: $pure-black;
+      }
 
-    .#{$px}-slide-to-activate__label {
-      color: $pure-white;
+      .#{$px}-slide-to-activate__label {
+        color: $pure-white;
+      }
     }
-  }
 
-  // Soft exit for activated / hide-thumb — keep gutter, ease the button away
-  &--disabled-hide-thumb {
-    .#{$px}-slide-to-activate__thumb,
-    .#{$px}-slide-to-activate__thumb--hidden {
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 100ms ease-out;
+    // Soft exit for activated / hide-thumb — keep gutter, ease the button away
+    &--disabled-hide-thumb {
+      .#{$px}-slide-to-activate__thumb,
+      .#{$px}-slide-to-activate__thumb--hidden {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 100ms ease-out;
+      }
     }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
-    &__track,
-    &__label,
-    &__pending-indicator,
-    &__thumb,
-    &__thumb-face {
-      transition: none;
+    @media (prefers-reduced-motion: reduce) {
+      &__track,
+      &__label,
+      &__pending-indicator,
+      &__thumb,
+      &__thumb-face {
+        transition: none;
+      }
     }
   }
 }