@phillips/seldon 1.277.0 → 1.278.1

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

@@ -0,0 +1,284 @@
+@use '../../allPartials' as *;
+
+.#{$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);
+    }
+  }
+
+  &--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-md);
+    }
+  }
+
+  &--radius-pill {
+    .#{$px}-slide-to-activate__track,
+    .#{$px}-slide-to-activate__thumb-face {
+      border-radius: $radius-3xl;
+    }
+
+    .#{$px}-slide-to-activate__thumb:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+    }
+  }
+
+  &__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%;
+  }
+
+  &__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;
+  }
+
+  &__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;
+    }
+  }
+
+  &__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);
+    }
+  }
+
+  &__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;
+
+    > *:last-child {
+      margin-left: -11px;
+    }
+
+    .#{$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;
+
+    svg {
+      height: 22px;
+      width: 22px;
+    }
+
+    &--held {
+      transform: scale(1.1);
+    }
+  }
+
+  &--small &__thumb-chevrons {
+    height: 16px;
+    width: 24px;
+
+    > *:last-child {
+      margin-left: -8px;
+    }
+
+    .#{$px}-icon {
+      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);
+    }
+  }
+
+  &--pending {
+    .#{$px}-slide-to-activate__label {
+      opacity: 0;
+    }
+
+    .#{$px}-slide-to-activate__thumb {
+      cursor: default;
+    }
+  }
+
+  &--disabled {
+    pointer-events: none;
+
+    .#{$px}-slide-to-activate__thumb {
+      cursor: not-allowed;
+    }
+  }
+
+  // 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;
+    }
+
+    .#{$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;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__track,
+    &__label,
+    &__pending-indicator,
+    &__thumb,
+    &__thumb-face {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+@use 'sass:color';
+@use '../../allPartials' as *;
+
+$slide-story-max-width: 360px;
+$branded-blush: color.mix($pure-white, $highlight-purple, 88%);
+$branded-rose: color.mix($pure-white, $highlight-purple, 62%);
+$branded-lilac: color.mix($pure-white, $highlight-purple, 45%);
+$branded-petal: color.mix($pure-white, $highlight-red, 82%);
+
+.slide-to-activate-story {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  max-width: $slide-story-max-width;
+  touch-action: none;
+  width: 100%;
+
+  &__reset {
+    align-self: flex-start;
+  }
+}
+
+.slide-to-activate-story-branded {
+  background: linear-gradient(165deg, $branded-blush 0%, $pure-white 55%, $branded-petal 100%);
+  border-radius: $radius-md;
+  box-sizing: border-box;
+  max-width: $slide-story-max-width;
+  padding: $padding-md;
+  width: 100%;
+
+  .slide-to-activate-story {
+    max-width: none;
+  }
+
+  .#{$px}-slide-to-activate__track {
+    background: linear-gradient(90deg, $branded-lilac 0%, $branded-rose 55%, $branded-petal 100%);
+    box-shadow: inset 0 1px 0 rgba($pure-white, 0.55);
+  }
+
+  .#{$px}-slide-to-activate__thumb-face {
+    background: linear-gradient(145deg, $pure-white 0%, $branded-blush 100%);
+    border: 2px solid rgba($highlight-purple, 0.35);
+    box-shadow: 0 2px 8px rgba($highlight-purple, 0.18);
+    color: $highlight-purple;
+  }
+
+  .#{$px}-slide-to-activate__label {
+    color: $pure-white;
+    font-variation-settings: 'wght' 500;
+    letter-spacing: 0.02em;
+    text-shadow: 0 1px 8px rgba($highlight-purple, 0.25);
+  }
+
+  .#{$px}-slide-to-activate--held .#{$px}-slide-to-activate__thumb-face,
+  .#{$px}-slide-to-activate__thumb--held .#{$px}-slide-to-activate__thumb-face {
+    border-color: $highlight-purple;
+    box-shadow:
+      0 0 0 2px rgba($pure-white, 0.85),
+      0 4px 14px rgba($highlight-purple, 0.28);
+  }
+
+  .#{$px}-slide-to-activate--disabled-complete {
+    .#{$px}-slide-to-activate__track {
+      background: linear-gradient(90deg, $branded-rose 0%, $highlight-purple 100%);
+    }
+  }
+
+  .#{$px}-slide-to-activate__pending-indicator .#{$px}-loader {
+    border-color: $pure-white;
+    border-bottom-color: transparent;
+  }
+}
+
+.slide-to-activate-story-custom-styling {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  width: 100%;
+}
+
+.slide-to-activate-story-compact {
+  .#{$px}-slide-to-activate__track {
+    background-color: $pure-white;
+    border: 2px solid $pure-black;
+  }
+
+  .#{$px}-slide-to-activate__label {
+    color: $pure-black;
+  }
+
+  .#{$px}-slide-to-activate__thumb-face {
+    background-color: $pure-black;
+    border: 2px solid $pure-black;
+    color: $pure-white;
+  }
+
+  .#{$px}-slide-to-activate__pending-indicator .#{$px}-loader {
+    border-color: $pure-black;
+    border-bottom-color: transparent;
+  }
+}
+
+.slide-to-activate-story-disabled-states {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  max-width: $slide-story-max-width;
+  width: 100%;
+}
+
+.slide-to-activate-story-widths {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  max-width: 100%;
+  overflow-x: hidden;
+  touch-action: none;
+  width: 100%;
+
+  &__toast {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xsm;
+  }
+
+  &__item {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xsm;
+    max-width: 100%;
+    width: min(var(--slide-demo-width, #{$slide-story-max-width}), 100%);
+
+    .slide-to-activate-story {
+      max-width: none;
+    }
+
+    .#{$px}-slide-to-activate__label {
+      font-size: calc(#{$font-size-label-medium} * var(--slide-demo-label-scale, 1));
+    }
+  }
+}
+
+.slide-to-activate-story-held-demo {
+  max-width: $slide-story-max-width;
+
+  .#{$px}-slide-to-activate__thumb-icon--held {
+    color: $highlight-blue;
+    filter: drop-shadow(0 0 4px rgba($highlight-blue, 0.55));
+    transform: scale(1.55) rotate(28deg);
+  }
+
+  .#{$px}-slide-to-activate__thumb--held .#{$px}-slide-to-activate__thumb-face {
+    background-color: $highlight-blue;
+    border-color: $highlight-blue;
+    box-shadow:
+      0 0 0 3px rgba($highlight-blue, 0.35),
+      0 0 0 6px rgba($highlight-blue, 0.15);
+    color: $pure-white;
+    transform: scale(1.08);
+  }
+
+  .slide-to-activate-story {
+    max-width: none;
+  }
+}

package/dist/scss/components/Toast/_toast.scss

@@ -10,6 +10,9 @@
   grid-template-areas: 'title action';
   grid-template-columns: auto max-content;
   padding: $spacing-xsm $spacing-sm;
+  // Viewport is pointer-events: none so empty space doesn't block the page; re-enable on
+  // each toast so actions stay clickable (including when DismissableLayer sets body to none).
+  pointer-events: auto;
 
   &__content {
     display: flex;
@@ -89,12 +92,8 @@
   max-width: 100vw;
   outline: none;
   padding: $spacing-lg;
-
-  // Radix UI DismissableLayer sets pointer-events: none on document.body when
-  // any dialog is open, and only restores auto on its own layer elements. This
-  // viewport is a portal into body (not a DismissableLayer), so it must opt
-  // back in explicitly to remain interactive while a modal is open.
-  pointer-events: auto;
+  // Pass clicks through empty viewport space; individual toasts re-enable pointer events.
+  pointer-events: none;
   position: fixed;
   z-index: 99999;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.277.0",
+  "version": "1.278.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"