@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/tooltip/scss/_group.scss

@@ -0,0 +1,164 @@
+@use '/tokens';
+
+.tooltip-group {
+    display: inline-flex;
+    position: relative;
+    z-index: 0;
+
+    @include tokens.state(active) {
+        z-index: 9;
+
+        > .tooltip-group-content > .tooltip-group-box {
+            filter: blur(0);
+            opacity: 1;
+            scale: 1;
+            transition:
+                filter var(--group-open-duration) var(--group-timing-function) var(--group-delay),
+                opacity var(--group-open-duration) var(--group-timing-function) var(--group-delay),
+                scale var(--group-open-duration) var(--group-timing-function) var(--group-delay),
+                translate var(--group-open-duration) var(--group-timing-function) var(--group-delay);
+            translate: 0;
+        }
+    }
+
+    &.--gliding {
+        > .tooltip-group-content {
+            transition:
+                height var(--group-glide-duration) var(--group-glide-timing-function),
+                translate var(--group-glide-duration) var(--group-glide-timing-function),
+                width var(--group-glide-duration) var(--group-glide-timing-function);
+        }
+
+        .tooltip-group-layer {
+            transition:
+                filter var(--group-swap-duration) var(--group-timing-function),
+                opacity var(--group-swap-duration) var(--group-timing-function),
+                translate var(--group-swap-duration) var(--group-timing-function);
+        }
+    }
+
+
+    &-box {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        color: var(--color);
+        filter: blur(var(--group-blur));
+        font-size: var(--font-size);
+        font-weight: var(--font-weight);
+        inset: 0;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        scale: var(--group-scale);
+        transition:
+            filter var(--group-close-duration) var(--group-timing-function),
+            opacity var(--group-close-duration) var(--group-timing-function),
+            scale var(--group-close-duration) var(--group-timing-function),
+            translate var(--group-close-duration) var(--group-timing-function);
+    }
+
+    // Physical insets: the anchor comes from 'offsetLeft/offsetTop', which are physical too.
+    &-content {
+        height: var(--group-height);
+        pointer-events: none;
+        position: absolute;
+        transition: none;
+        width: var(--group-width);
+        z-index: 9;
+
+        &--e,
+        &--w {
+            --group-axis-x: 0;
+            --group-axis-y: 1;
+            top: 0;
+            translate: 0 calc(var(--group-y) - 50%);
+        }
+
+        &--n,
+        &--s {
+            --group-axis-x: 1;
+            --group-axis-y: 0;
+            left: 0;
+            translate: calc(var(--group-x) - 50%) 0;
+        }
+
+        &--e {
+            left: calc(100% + var(--spacer));
+
+            > .tooltip-group-box {
+                transform-origin: left center;
+                translate: calc(var(--group-rise) * -1) 0;
+            }
+        }
+
+        &--n {
+            bottom: calc(100% + var(--spacer));
+
+            > .tooltip-group-box {
+                transform-origin: center bottom;
+                translate: 0 var(--group-rise);
+            }
+        }
+
+        &--s {
+            top: calc(100% + var(--spacer));
+
+            > .tooltip-group-box {
+                transform-origin: center top;
+                translate: 0 calc(var(--group-rise) * -1);
+            }
+        }
+
+        &--w {
+            right: calc(100% + var(--spacer));
+
+            > .tooltip-group-box {
+                transform-origin: right center;
+                translate: var(--group-rise) 0;
+            }
+        }
+    }
+
+    // Root 'transition: inherit' would hand layers the pop transition and slide them in on open.
+    &-layer {
+        --group-shift: var(--group-swap-shift);
+        filter: blur(var(--group-swap-blur));
+        left: 50%;
+        max-width: var(--max-width);
+        opacity: 0;
+        padding-block: var(--padding-vertical);
+        padding-inline: var(--padding-horizontal);
+        position: absolute;
+        top: 50%;
+        transition: none;
+        translate:
+            calc(-50% + var(--group-shift) * var(--group-axis-x))
+            calc(-50% + var(--group-shift) * var(--group-axis-y));
+        white-space: nowrap;
+        width: max-content;
+
+        &.--active {
+            --group-shift: 0px;
+            filter: blur(0);
+            opacity: 1;
+        }
+
+        &.--before {
+            --group-shift: calc(var(--group-swap-shift) * -1);
+        }
+    }
+}
+
+
+// Only the fades remain. The extra specificity beats the defaults in 'variables.scss'.
+@media (prefers-reduced-motion: reduce) {
+    .tooltip-group > .tooltip-group-content {
+        --group-blur: 0px;
+        --group-glide-duration: 0s;
+        --group-rise: 0px;
+        --group-scale: 1;
+        --group-swap-blur: 0px;
+        --group-swap-shift: 0px;
+    }
+}

package/src/components/tooltip/scss/_north.scss

@@ -1,23 +1,23 @@
 @mixin north($active) {
     &--ne,
     &--nw {
-        bottom: calc(100% - var(--spacer));
+        bottom: calc(100% + var(--spacer) - var(--offset));
         position: absolute;
 
         #{$active} {
-            transform: translateY(calc(var(--spacer) * -2));
+            translate: 0 calc(var(--offset) * -1);
         }
     }
 
     &--n {
-        bottom: calc(100% - var(--spacer));
+        bottom: calc(100% + var(--spacer) - var(--offset));
         position: absolute;
         right: 50%;
-        transform: translateX(50%);
         transform-origin: center bottom;
+        translate: 50%;
 
         #{$active} {
-            transform: translate(50%, calc(var(--spacer) * -2)) scale(1);
+            translate: 50% calc(var(--offset) * -1);
         }
     }
 

package/src/components/tooltip/scss/_south.scss

@@ -2,22 +2,22 @@
     &--se,
     &--sw {
         position: absolute;
-        top: calc(100% - var(--spacer));
+        top: calc(100% + var(--spacer) - var(--offset));
 
         #{$active} {
-            transform: translateY(calc(var(--spacer) * 2));
+            translate: 0 var(--offset);
         }
     }
 
     &--s {
         position: absolute;
         right: 50%;
-        top: calc(100% - var(--spacer));
-        transform: translateX(50%);
+        top: calc(100% + var(--spacer) - var(--offset));
         transform-origin: center top;
+        translate: 50%;
 
         #{$active} {
-            transform: translate(50%, calc(var(--spacer) * 2));
+            translate: 50% var(--offset);
         }
     }
 

package/src/components/tooltip/scss/_west.scss

@@ -2,22 +2,22 @@
     &--wn,
     &--ws {
         position: absolute;
-        right: calc(100% - var(--spacer));
+        right: calc(100% + var(--spacer) - var(--offset));
 
         #{$active} {
-            transform: translateX(calc(var(--spacer) * -2));
+            translate: calc(var(--offset) * -1);
         }
     }
 
     &--w {
         bottom: 50%;
         position: absolute;
-        right: calc(100% - var(--spacer));
-        transform: translateY(50%);
+        right: calc(100% + var(--spacer) - var(--offset));
         transform-origin: center right;
+        translate: 0 50%;
 
         #{$active} {
-            transform: translate(calc(var(--spacer) * -2), 50%) scale(1);
+            translate: calc(var(--offset) * -1) 50%;
         }
     }
 

package/src/components/tooltip/scss/index.scss

@@ -2,6 +2,7 @@
 @use '/tokens';
 @use 'center' as *;
 @use 'east' as *;
+@use 'group';
 @use 'north' as *;
 @use 'south' as *;
 @use 'west' as *;
@@ -13,23 +14,26 @@
     z-index: 0;
 
     @include tokens.state(active) {
-        // Add invisible box to increase activation/hover area
-        &.tooltip--box {
-            $size: calc(100% + var(--spacer) * 3);
-
-            &::before {
-                @include lib.position(absolute, center);
-                content: '';
-                height: $size;
-                width: $size;
-                z-index: -1;
-            }
+        // Cone from the pointer to the tooltip, computed by 'tooltip.onhover'; other
+        // tooltips never set the variables, so the pseudo-element stays empty.
+        // clip-path also clips hit-testing, so only the cone keeps it open. Lowest layer
+        // so it never intercepts clicks meant for the tooltip, including morph (-2).
+        &::before {
+            background: var(--safe-color);
+            clip-path: var(--safe-area);
+            content: '';
+            height: var(--safe-height);
+            left: var(--safe-left);
+            position: absolute;
+            top: var(--safe-top);
+            width: var(--safe-width);
+            z-index: -3;
         }
 
         // Rotate arrow only if parent tooltip is active
         :not(.tooltip) .tooltip-arrow,
         > .tooltip-arrow {
-            transform: rotate(var(--rotate)) scaleX(-1);
+            scale: -1 1;
         }
     }
 
@@ -37,12 +41,35 @@
         z-index: 9;
     }
 
+    &--context {
+        cursor: inherit;
+    }
 
-    &-arrow {
-        margin: 0 -1px;
-        transform: rotate(var(--rotate));
+    // Morph tooltips (-2) sit behind the trigger. A child can't paint under its parent's own
+    // background, so repaint that background above them; the label still paints on top.
+    // Shares '.button::after' (its shadow layer) when the trigger is a button.
+    // Gooey join between trigger and tooltip while the morph runs; 'morph()' injects the filter
+    // and toggles the class.
+    &.--morphing {
+        filter: url(#tooltip-morph-goo);
     }
 
+    &:has(> .tooltip-content--morph, > .tooltip-message--morph, > :not(.tooltip) > .tooltip-content--morph, > :not(.tooltip) > .tooltip-message--morph)::after {
+        background: inherit;
+        border-radius: inherit;
+        content: '';
+        display: block;
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: -1;
+    }
+
+
+    &-arrow {
+        margin-inline: -1px;
+        rotate: var(--rotate);
+    }
 
     &-content,
     &-message {
@@ -53,9 +80,11 @@
         min-width: var(--min-width);
         opacity: 0;
         overflow: hidden;
+        scale: var(--scale);
         transition:
             opacity var(--transition-duration) var(--transition-timing-function),
-            transform var(--transition-duration) var(--transition-timing-function);
+            scale var(--transition-duration) var(--transition-timing-function),
+            translate var(--transition-duration) var(--transition-timing-function);
         width: var(--width);
         z-index: 9;
 
@@ -66,6 +95,7 @@
 
         #{$active} {
             opacity: 1;
+            scale: 1;
         }
 
         #{$not-active} {
@@ -75,11 +105,159 @@
         }
 
 
+        &--context {
+            position: absolute;
+        }
+
         @include center($active);
         @include east($active);
         @include north($active);
         @include south($active);
         @include west($active);
+
+
+        // Opening reveals from the corner slightly ahead of the scale settling; closing runs both
+        // back on one shorter duration. The open state swaps durations through variables rather
+        // than redeclaring 'transition', so the reduced-motion override below still wins.
+        &--corner {
+            --corner-clip-duration: var(--corner-close-duration);
+            --corner-duration: var(--corner-close-duration);
+            clip-path: inset(var(--corner-inset) round var(--border-radius));
+            transition:
+                clip-path var(--corner-clip-duration) var(--corner-clip-timing-function),
+                opacity var(--corner-duration) var(--transition-timing-function),
+                scale var(--corner-duration) var(--transition-timing-function),
+                translate var(--corner-duration) var(--transition-timing-function);
+
+            #{$active} {
+                --corner-clip-duration: var(--corner-open-clip-duration);
+                --corner-duration: var(--corner-open-duration);
+                clip-path: inset(calc(var(--corner-bleed) * -1) round calc(var(--border-radius) + var(--corner-bleed)));
+            }
+        }
+
+        // Closing drops the delays so items leave together.
+        &--stagger {
+            > * {
+                opacity: 0;
+                transition:
+                    opacity var(--transition-duration) var(--transition-timing-function),
+                    translate var(--transition-duration) var(--transition-timing-function);
+                translate: 0 calc(var(--stagger-offset) * -1);
+            }
+
+            #{$active} {
+                > * {
+                    opacity: 1;
+                    transition-delay: calc(var(--stagger-index, 0) * var(--stagger-delay));
+                    translate: 0;
+                }
+            }
+
+            @for $i from 1 through 12 {
+                > :nth-child(#{$i}) {
+                    --stagger-index: #{$i - 1};
+                }
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            &--corner,
+            &--grow,
+            &--stagger,
+            &--stagger > *,
+            &--zoom {
+                transition-duration: 0s;
+            }
+        }
+
+
+        // Grows out of the trigger: 'morph()' seeds the trigger's box as clip-path insets, then the
+        // clip springs out to the tooltip's own box. Content never moves; the shape reveals it.
+        &--morph {
+            // Closing: collapse onto the trigger, overshoot it as a blob, settle to its exact box.
+            animation: tooltip-morph-close var(--morph-close-duration) linear;
+            background: transparent;
+            // The overshooting clip would reveal the shadow around the box mid-spring.
+            box-shadow: none;
+            clip-path: inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));
+            // Lets the background layer reach back to the trigger; clip-path does the clipping.
+            overflow: visible;
+            // Blurs the content. The background layer is one flat colour overhanging the clip by three
+            // blur radii, so within the clip only text and media visibly blur; the container stays
+            // crisp and flat. (A backdrop-filter overlay instead paints its blur as an unclipped
+            // rectangle, squaring the corners mid-morph.)
+            filter: blur(var(--morph-blur));
+            // Always fully opaque; only blur animates. Visibility hides it at rest instead (behind
+            // a transparent trigger, or before the first open when there's no clip yet), switching
+            // off only once the close has finished.
+            opacity: 1;
+            // Closing: content blurs quickly as the shape starts to shrink.
+            transition:
+                filter var(--morph-close-duration) cubic-bezier(0.16, 1, 0.3, 1),
+                visibility 0s linear var(--morph-close-duration);
+            visibility: hidden;
+            // Below the trigger's repainted background, see '.tooltip:has(...)::after'.
+            z-index: -2;
+
+            // Background spanning the tooltip, the trigger and the close's landing overshoot, so the
+            // clip has something to show wherever it goes. It also overhangs every side by three blur
+            // radii: the content blur samples past the tooltip's edge, and reading transparency there
+            // would soften and lighten the edges until the blur settles. The overhang is clipped away.
+            &::before {
+                background: var(--background);
+                content: '';
+                inset:
+                    min(calc(var(--morph-blur) * -3), calc(var(--morph-top) - var(--morph-land)))
+                    min(calc(var(--morph-blur) * -3), calc(var(--morph-right) - var(--morph-land)))
+                    min(calc(var(--morph-blur) * -3), calc(var(--morph-bottom) - var(--morph-land)))
+                    min(calc(var(--morph-blur) * -3), calc(var(--morph-left) - var(--morph-land)));
+                position: absolute;
+                z-index: -1;
+            }
+
+            #{$active} {
+                animation: none;
+                clip-path: inset(0 round var(--border-radius));
+                filter: none;
+                // Visibility isn't transitioned here so the shape shows instantly; it starts hidden
+                // behind the trigger, so there's nothing to fade in. Content starts focusing as it
+                // emerges and is sharp as the menu settles.
+                transition:
+                    clip-path var(--morph-open-duration) var(--morph-timing-function),
+                    filter var(--morph-open-duration) var(--morph-focus-timing-function);
+                visibility: visible;
+            }
+        }
+    }
+
+    // Grow unfolds away from the trigger, so its axis follows the direction: vertical for
+    // north/south (the default), horizontal for east/west. Corner collapses onto the edge or
+    // corner nearest the trigger, matching each direction's 'transform-origin'.
+    @each $base in 'content', 'message' {
+        @each $direction, $inset in (
+            'c': 46%,
+            'e': 46% 92% 46% 0,
+            'en': 0 92% 92% 0,
+            'es': 92% 92% 0 0,
+            'n': 92% 46% 0 46%,
+            'ne': 92% 0 0 92%,
+            'nw': 92% 92% 0 0,
+            's': 0 46% 92% 46%,
+            'se': 0 0 92% 92%,
+            'sw': 0 92% 92% 0,
+            'w': 46% 0 46% 92%,
+            'wn': 0 0 92% 92%,
+            'ws': 92% 0 0 92%
+        ) {
+            &-#{$base}--corner.tooltip-#{$base}--#{$direction} {
+                --corner-inset: #{$inset};
+            }
+        }
+
+        &-#{$base}--grow:is(.tooltip-#{$base}--e, .tooltip-#{$base}--en, .tooltip-#{$base}--es, .tooltip-#{$base}--w, .tooltip-#{$base}--wn, .tooltip-#{$base}--ws) {
+            --scale: 0 1;
+        }
     }
 
     &-message {
@@ -88,8 +266,43 @@
         cursor: auto;
         font-size: var(--font-size);
         font-weight: var(--font-weight);
-        padding: var(--padding-vertical) var(--padding-horizontal);
+        padding-block: var(--padding-vertical);
+        padding-inline: var(--padding-horizontal);
         pointer-events: none;
         white-space: nowrap;
     }
 }
+
+
+// Shrinks straight onto the trigger (every edge together) until it's a blob '--morph-land'
+// larger than the trigger on every side, holds there, then settles into the trigger's exact box.
+// The hold matters: without it, edges still arriving (the travel differs per direction) overlap
+// with the final shrink, so it never reads as having landed.
+@keyframes tooltip-morph-close {
+    0% {
+        animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
+        clip-path: inset(0 round var(--border-radius));
+    }
+    55% {
+        clip-path: inset(
+            calc(var(--morph-top) - var(--morph-land))
+            calc(var(--morph-right) - var(--morph-land))
+            calc(var(--morph-bottom) - var(--morph-land))
+            calc(var(--morph-left) - var(--morph-land))
+            round calc(var(--morph-radius) + var(--morph-land))
+        );
+    }
+    80% {
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        clip-path: inset(
+            calc(var(--morph-top) - var(--morph-land))
+            calc(var(--morph-right) - var(--morph-land))
+            calc(var(--morph-bottom) - var(--morph-land))
+            calc(var(--morph-left) - var(--morph-land))
+            round calc(var(--morph-radius) + var(--morph-land))
+        );
+    }
+    100% {
+        clip-path: inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));
+    }
+}

package/src/components/tooltip/scss/variables.scss

@@ -1,4 +1,7 @@
 .tooltip {
+    // Set a translucent color to review the safe area shape.
+    --safe-color: transparent;
+
     &-content,
     &-message {
         --background: var(--background-default);
@@ -7,8 +10,84 @@
         --box-shadow: var(--box-shadow-400);
         --max-width: calc(90vw - (var(--size-700) * 2));
         --min-width: auto;
+        --offset: calc(var(--spacer) * 2);
+        --scale: 1;
         --spacer: var(--size-300);
         --width: auto;
+
+        // Unfolds out of the trigger-side corner while scaling up (beUI's animated dropdown); the
+        // corner follows the direction, see the direction overrides in 'index.scss'.
+        &--corner {
+            // Covers the '--box-shadow-400' extent so the resting clip doesn't cut the shadow.
+            --corner-bleed: 24px;
+            --corner-clip-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+            --corner-close-duration: 0.26s;
+            --corner-open-clip-duration: 0.32s;
+            --corner-open-duration: 0.36s;
+            --offset: 0px;
+            --scale: 0.96;
+            --transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+
+        // Unfolds away from the trigger along one axis with a slight overshoot (Material menus,
+        // Codinhood's 'growDown'); the axis follows the direction.
+        &--grow {
+            --offset: 0px;
+            --scale: 1 0;
+            --transition-duration: 0.24s;
+            --transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
+        }
+
+        &--morph {
+            --morph-blur: 4px;
+            --morph-close-duration: 0.16s;
+            // Starts clearing as soon as content emerges from behind the trigger, settling with the shape.
+            --morph-focus-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+            --morph-land:2px;
+            --morph-open-duration: 0.12s;
+            --morph-timing-function: cubic-bezier(0.2, 0, 0, 1);
+            // Motion comes from the morph, not the slide/scale.
+            --offset: 0px;
+            --scale: 1;
+        }
+
+        &--scale {
+            --offset: var(--spacer);
+            --scale: 0.88;
+        }
+
+        &--scale-spring {
+            --offset: var(--spacer);
+            --scale: 0.88;
+            --transition-duration: 0.24s;
+            --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+
+        &--spring {
+            --offset: calc(var(--spacer) * 3);
+            --scale: 0.96;
+            --transition-duration: 0.24s;
+            --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+
+        // Options cascade in one after another (select and command menus).
+        &--stagger {
+            --offset: 4px;
+            --scale: 0.98;
+            --stagger-delay: 0.025s;
+            --stagger-offset: 6px;
+            --transition-duration: 0.15s;
+            --transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        // The Radix / shadcn / Headless UI dropdown and select default: fade, 95% scale and an 8px slide
+        // from the trigger side, quick in and quicker out.
+        &--zoom {
+            --offset: 8px;
+            --scale: 0.95;
+            --transition-duration: 0.15s;
+            --transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        }
     }
 
     &-arrow {
@@ -24,3 +103,29 @@
         --padding-vertical: var(--size-300);
     }
 }
+
+
+.tooltip-group-content {
+    --background: var(--color-black-400);
+    --border-radius: var(--border-radius-400);
+    --box-shadow: var(--box-shadow-400);
+    --color: var(--color-white-400);
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-400);
+    --group-blur: 7px;
+    --group-close-duration: 0.128s;
+    --group-delay: 0s;
+    --group-glide-duration: 0.4s;
+    --group-glide-timing-function: cubic-bezier(0.22, 1.12, 0.36, 1);
+    --group-open-duration: 0.16s;
+    --group-rise: 4px;
+    --group-scale: 0.94;
+    --group-swap-blur: 3px;
+    --group-swap-duration: 0.14s;
+    --group-swap-shift: 10px;
+    --group-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --max-width: calc(90vw - (var(--size-700) * 2));
+    --padding-horizontal: var(--size-300);
+    --padding-vertical: var(--size-300);
+    --spacer: var(--size-300);
+}