@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/toast/scss/index.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/anchor';
 @use 'variables';
 
 // Hovered or holding focus, the stack fans out and every clock stops.
@@ -30,7 +30,7 @@ $open: ':is(:hover, :focus-within)';
         @extend %anchor--ne;
     }
 
-    @each $placement in shared.$anchor-placements {
+    @each $placement in anchor.$placements {
         &--#{$placement} {
             @extend %anchor--#{$placement};
         }
@@ -42,6 +42,44 @@ $open: ':is(:hover, :focus-within)';
         translate: 0 calc(var(--toast-anchor-height) / -2);
     }
 
+    &--e {
+        > .toast {
+            --stack-translate: calc(var(--stack-shift) * -1) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);
+            transform-origin: right;
+        }
+
+        > .toaster-overflow {
+            translate: calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * -1) 0;
+        }
+    }
+
+    // Side stacks recede sideways, back from their edge, the way overlay's do: every toast is as wide as the
+    // next, so the overlay's own shift applies, and back toasts are centered on the front one and trimmed to its
+    // height.
+    &--e,
+    &--w {
+        height: var(--toast-frontmost-height);
+
+        > .toast {
+            --stack-shift: calc(var(--depth) * var(--stack-peek) + (1 - var(--toast-scale)) * var(--stack-span));
+        }
+
+        > .toast.toast--behind {
+            clip-path: inset(calc((100% - var(--toast-frontmost-height)) / 2) calc(var(--toast-bleed) * -1));
+        }
+
+        // Its count runs down the strip it shows beside the stack. Physical sides: in vertical writing its logical
+        // ones turn with the text.
+        > .toaster-overflow {
+            bottom: auto;
+            height: calc(var(--toast-frontmost-height) * pow(var(--stack-scale), var(--toast-limit)));
+            left: 0;
+            right: 0;
+            top: calc(var(--toast-frontmost-height) * (1 - pow(var(--stack-scale), var(--toast-limit))) / 2);
+            writing-mode: vertical-rl;
+        }
+    }
+
     &--n {
         inset: var(--margin-vertical) auto auto 50%;
         translate: -50% 0;
@@ -60,6 +98,28 @@ $open: ':is(:hover, :focus-within)';
         translate: -50% 0;
     }
 
+    &--s,
+    &--se,
+    &--sw {
+        > .toast {
+            --stack-translate: 0 calc(var(--stack-shift) * -1);
+            bottom: 0;
+            top: auto;
+            transform-origin: bottom;
+        }
+
+        > .toast.toast--behind {
+            clip-path: inset(calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1) calc(100% - var(--toast-frontmost-height)));
+        }
+
+        > .toaster-overflow {
+            align-items: flex-start;
+            bottom: 0;
+            top: auto;
+        }
+    }
+
+
     &--se {
         inset: auto var(--margin-horizontal) var(--margin-vertical) auto;
     }
@@ -73,6 +133,17 @@ $open: ':is(:hover, :focus-within)';
         translate: 0 calc(var(--toast-anchor-height) / -2);
     }
 
+    &--w {
+        > .toast {
+            --stack-translate: var(--stack-shift) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);
+            transform-origin: left;
+        }
+
+        > .toaster-overflow {
+            align-items: flex-start;
+            translate: calc((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) 0;
+        }
+    }
 
     // Scoped under the toaster to outrank consumer pairings like '.card { position: relative }'. The slot it stands
     // in is its 'translate', a swipe (and the way in or out) its 'transform', so the two compose.
@@ -106,6 +177,10 @@ $open: ':is(:hover, :focus-within)';
         opacity: 0;
     }
 
+    > .toast.toast--timed {
+        animation: toast-timer var(--toast-duration) linear forwards;
+    }
+
     // Stands one card further back than the limit, reaching past the last visible layer far enough for its count.
     // Unscaled so its text stays legible: narrowed by the scale that depth would have instead.
     > .toaster-overflow {
@@ -126,81 +201,6 @@ $open: ':is(:hover, :focus-within)';
         z-index: calc(9999 - var(--toast-limit));
     }
 
-    &--s,
-    &--se,
-    &--sw {
-        > .toast {
-            --stack-translate: 0 calc(var(--stack-shift) * -1);
-            bottom: 0;
-            top: auto;
-            transform-origin: bottom;
-        }
-
-        > .toast.toast--behind {
-            clip-path: inset(calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1) calc(100% - var(--toast-frontmost-height)));
-        }
-
-        > .toaster-overflow {
-            align-items: flex-start;
-            bottom: 0;
-            top: auto;
-        }
-    }
-
-    // Side stacks recede sideways, back from their edge, the way overlay's do: every toast is as wide as the
-    // next, so the overlay's own shift applies, and back toasts are centered on the front one and trimmed to its
-    // height.
-    &--e,
-    &--w {
-        height: var(--toast-frontmost-height);
-
-        > .toast {
-            --stack-shift: calc(var(--depth) * var(--stack-peek) + (1 - var(--toast-scale)) * var(--stack-span));
-        }
-
-        > .toast.toast--behind {
-            clip-path: inset(calc((100% - var(--toast-frontmost-height)) / 2) calc(var(--toast-bleed) * -1));
-        }
-
-        // Its count runs down the strip it shows beside the stack. Physical sides: in vertical writing its logical
-        // ones turn with the text.
-        > .toaster-overflow {
-            bottom: auto;
-            height: calc(var(--toast-frontmost-height) * pow(var(--stack-scale), var(--toast-limit)));
-            left: 0;
-            right: 0;
-            top: calc(var(--toast-frontmost-height) * (1 - pow(var(--stack-scale), var(--toast-limit))) / 2);
-            writing-mode: vertical-rl;
-        }
-    }
-
-    &--e {
-        > .toast {
-            --stack-translate: calc(var(--stack-shift) * -1) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);
-            transform-origin: right;
-        }
-
-        > .toaster-overflow {
-            translate: calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * -1) 0;
-        }
-    }
-
-    &--w {
-        > .toast {
-            --stack-translate: var(--stack-shift) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);
-            transform-origin: left;
-        }
-
-        > .toaster-overflow {
-            align-items: flex-start;
-            translate: calc((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) 0;
-        }
-    }
-
-    > .toast.toast--timed {
-        animation: toast-timer var(--toast-duration) linear forwards;
-    }
-
     // Only the front toast's clock runs, and none while the stack is open or a toast is being swiped.
     &#{$open} > .toast,
     > .toast.toast--behind,
@@ -228,10 +228,6 @@ $open: ':is(:hover, :focus-within)';
         }
     }
 
-    > .toast.toast--swiping {
-        transition: none;
-    }
-
     // Leaving plays out from wherever the toast stands, toward its edge; its clock stays stopped where it ended so
     // anything counting down on it holds still as it goes.
     > .toast.toast--ending {
@@ -239,12 +235,6 @@ $open: ':is(:hover, :focus-within)';
         pointer-events: none;
     }
 
-    > .toast.toast--ending.toast--timed {
-        animation:
-            toast-timer var(--toast-duration) linear forwards paused,
-            toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards;
-    }
-
     // Swiped away, it is thrown on until it has left the screen, whole, rather than fading out on the way.
     > .toast.toast--ending.toast--flung {
         animation-name: toast-fling;
@@ -253,6 +243,16 @@ $open: ':is(:hover, :focus-within)';
     > .toast.toast--ending.toast--flung.toast--timed {
         animation-name: toast-timer, toast-fling;
     }
+
+    > .toast.toast--ending.toast--timed {
+        animation:
+            toast-timer var(--toast-duration) linear forwards paused,
+            toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards;
+    }
+
+    > .toast.toast--swiping {
+        transition: none;
+    }
 }
 
 // Entering, from beyond the edge the toaster is pinned to.

package/src/components/toast/scss/variables.scss

@@ -1,36 +1,3 @@
-// Placed like overlay, extending the same anchor placements and stack variables: 'toaster--n' is top center,
-// 'toaster--ne' top right, and so on round; unplaced, it sits top right.
-.toaster {
-    --margin-horizontal: var(--size-500);
-    --margin-vertical: var(--size-500);
-    --stack-peek: var(--size-300);
-    --stack-scale: 0.94;
-    // Written by the toaster: the newest toast's height, live toasts, the front one's height, how many the limit
-    // keeps out of the collapsed stack, the limit itself, and every live toast's height summed.
-    --toast-anchor-height: 0px;
-    --toast-count: 0;
-    // The way the expanded list grows from the front toast.
-    --toast-direction: 1;
-    --toast-frontmost-height: 0px;
-    --toast-gap: var(--size-300);
-    --toast-hidden: 0;
-    --toast-limit: 3;
-    // How far the overflow card reaches past the last visible layer: room for its line of text.
-    --toast-overflow-peek: 24px;
-    --toast-stack-height: 0px;
-    --toast-transition-duration: 0.4s;
-    --toast-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-    --toast-width: 360px;
-
-
-    &--s,
-    &--se,
-    &--sw {
-        --toast-direction: -1;
-    }
-}
-
-
 // Prefixed where it is the toast's own: the consumer's classes (e.g. '.card') share the element and its variables.
 .toast {
     // Collapsed layer: toasts past the limit wait, unseen, in the last visible one.
@@ -48,8 +15,8 @@
     --toast-content-opacity: 1;
     // Written by the toast: its duration, and the same in whole seconds for a countdown in its content.
     --toast-duration: 0ms;
-    --toast-exit-duration: 0.3s;
-    --toast-exit-timing-function: var(--toast-transition-timing-function);
+    --toast-exit-duration: var(--duration-slow-exit);
+    --toast-exit-timing-function: var(--easing-spring);
     --toast-expanded-y: calc((var(--toast-offset-y) + var(--toast-index) * var(--toast-gap)) * var(--toast-direction));
     --toast-height: 0px;
     --toast-index: 0;
@@ -65,16 +32,49 @@
     }
 
     &-close.button {
-        --background-default: var(--color-white-300);
-        --background-hover: var(--color-grey-400);
+        --background-default: var(--surface-background-default);
+        --background-hover: var(--surface-background-hover);
         --border-radius: 999px;
-        --box-shadow-default: 0 0 0 var(--border-width-400) var(--color-border-400);
+        --box-shadow-default: 0 0 0 var(--border-width-400) var(--surface-border-hover);
         --color-default: var(--color-text-300);
         --color-hover: var(--color-text-500);
-        --icon-size: 10px;
+        --icon-size: var(--size-200);
         --offset: calc(var(--size-200) * -1);
         --padding-horizontal: 0px;
         --padding-vertical: 0px;
         --size: var(--size-500);
     }
 }
+
+
+// Placed like overlay, extending the same anchor placements and stack variables: 'toaster--n' is top center,
+// 'toaster--ne' top right, and so on round; unplaced, it sits top right.
+.toaster {
+    --margin-horizontal: var(--size-500);
+    --margin-vertical: var(--size-500);
+    --stack-peek: var(--size-300);
+    --stack-scale: 0.94;
+    // Written by the toaster: the newest toast's height, live toasts, the front one's height, how many the limit
+    // keeps out of the collapsed stack, the limit itself, and every live toast's height summed.
+    --toast-anchor-height: 0px;
+    --toast-count: 0;
+    // The way the expanded list grows from the front toast.
+    --toast-direction: 1;
+    --toast-frontmost-height: 0px;
+    --toast-gap: var(--size-300);
+    --toast-hidden: 0;
+    --toast-limit: 3;
+    // How far the overflow card reaches past the last visible layer: room for its line of text.
+    --toast-overflow-peek: 24px;
+    --toast-stack-height: 0px;
+    --toast-transition-duration: var(--duration-slow);
+    --toast-transition-timing-function: var(--easing-spring-bounce);
+    --toast-width: 360px;
+
+
+    &--s,
+    &--se,
+    &--sw {
+        --toast-direction: -1;
+    }
+}

package/src/components/tooltip/menu.ts

@@ -262,8 +262,11 @@ function createMenu(context = false) {
                 enabled(node)[0]?.button?.focus();
             }
 
+            // Reduced motion keeps the fades, so '--open-duration' stays set while the reveal clips snap.
             function instant() {
-                return !root.panel || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0;
+                return !root.panel
+                    || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0
+                    || matchMedia('(prefers-reduced-motion: reduce)').matches;
             }
 
             function open(focus = true) {

package/src/components/tooltip/scss/_east.scss

@@ -1,14 +1,4 @@
 @mixin east($active) {
-    &--en,
-    &--es {
-        left: calc(100% + var(--spacer) - var(--offset));
-        position: absolute;
-
-        #{$active} {
-            translate: var(--offset);
-        }
-    }
-
     &--e {
         bottom: 50%;
         left: calc(100% + var(--spacer) - var(--offset));
@@ -26,6 +16,16 @@
         transform-origin: top left;
     }
 
+    &--en,
+    &--es {
+        left: calc(100% + var(--spacer) - var(--offset));
+        position: absolute;
+
+        #{$active} {
+            translate: var(--offset);
+        }
+    }
+
     &--es {
         bottom: 0;
         transform-origin: bottom left;