@phillips/seldon 1.277.0 → 1.278.0

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.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"