@phillips/seldon 1.276.0 → 1.278.0

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.276.0",
+  "version": "1.278.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -66,13 +66,12 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.11",
-    "@types/dompurify": "^3.0.5",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.4.12",
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-class-names": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
@@ -84,14 +83,14 @@
     "react-intersection-observer": "^9.13.1",
     "react-remove-scroll": "^2.6.3",
     "react-transition-group": "^4.4.5",
-    "react-zoom-pan-pinch": "^3.6.1",
+    "react-zoom-pan-pinch": "^3.7.0",
     "usehooks-ts": "^3.1.0",
-    "uuid": "^11.1.0"
+    "uuid": "^14.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
     "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.15.0",
     "@figma/code-connect": "^0.2.1",
     "@playwright/test": "^1.58.2",
@@ -135,7 +134,7 @@
     "jsdom": "^26.1.0",
     "markdownlint-cli": "^0.41.0",
     "playwright": "^1.58.2",
-    "prettier": "3.3.3",
+    "prettier": "3.8.1",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",

package/dist/node_modules/uuid/dist/esm-browser/native.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),t={randomUUID:e};exports.default=t;

package/dist/node_modules/uuid/dist/esm-browser/native.js

@@ -1,4 +0,0 @@
-const o = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), t = { randomUUID: o };
-export {
-  t as default
-};

package/dist/node_modules/uuid/dist/esm-browser/rng.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});let e;const t=new Uint8Array(16);function o(){if(!e){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");e=crypto.getRandomValues.bind(crypto)}return e(t)}exports.default=o;

package/dist/node_modules/uuid/dist/esm-browser/rng.js

@@ -1,13 +0,0 @@
-let t;
-const e = new Uint8Array(16);
-function o() {
-  if (!t) {
-    if (typeof crypto > "u" || !crypto.getRandomValues)
-      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    t = crypto.getRandomValues.bind(crypto);
-  }
-  return t(e);
-}
-export {
-  o as default
-};

package/dist/node_modules/uuid/dist/esm-browser/v4.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./native.cjs"),n=require("./rng.cjs"),u=require("./stringify.cjs");function f(r,a,d){if(t.default.randomUUID&&!r)return t.default.randomUUID();r=r||{};const e=r.random??r.rng?.()??n.default();if(e.length<16)throw new Error("Random bytes length must be >= 16");return e[6]=e[6]&15|64,e[8]=e[8]&63|128,u.unsafeStringify(e)}exports.default=f;

package/dist/node_modules/uuid/dist/esm-browser/v4.js

@@ -1,15 +0,0 @@
-import n from "./native.js";
-import t from "./rng.js";
-import { unsafeStringify as e } from "./stringify.js";
-function g(f, m, a) {
-  if (n.randomUUID && !f)
-    return n.randomUUID();
-  f = f || {};
-  const r = f.random ?? f.rng?.() ?? t();
-  if (r.length < 16)
-    throw new Error("Random bytes length must be >= 16");
-  return r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, e(r);
-}
-export {
-  g as default
-};