@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/sortable/scss/index.scss

@@ -1,50 +1,128 @@
+@use '/shared';
 @use 'variables';
 
+// Typed, so the drop can transition them; not inherited, so a write per frame restyles the copy alone.
+@property --sortable-angle {
+    inherits: false;
+    initial-value: 0deg;
+    syntax: '<angle>';
+}
+
+@property --sortable-x {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --sortable-y {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
 .sortable {
     > * {
-        -webkit-touch-callout: none;
+        @extend %drag-item;
     }
 
-    // Stays in the container (so selectors like '.toolbar > button' keep matching) but is lifted out of
-    // flow with 'position: fixed'; the placeholder holds its slot.
-    > .--dragging {
-        cursor: grabbing;
+    // The dragged item stays in the list as its own placeholder: its contents fade out behind a dashed outline while
+    // it moves through the list. Leaving the class drops the transition, so they are back at once on landing.
+    > .sortable-item--held {
+        background: var(--placeholder-background);
+        border-color: transparent;
+        box-shadow: none;
+        color: transparent;
+        outline: var(--placeholder-border-width) dashed var(--placeholder-border-color);
+        outline-offset: calc(var(--placeholder-border-width) * -1);
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            color var(--transition-duration) var(--transition-timing-function);
+
+        > * {
+            opacity: 0;
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+        }
+    }
+
+    // Shows again at once under the fading copy: its own transitions, or its contents', would ease it back in after the
+    // copy has gone. Important, since they can come from any rule.
+    > .sortable-item--revealing,
+    > .sortable-item--revealing * {
+        transition: none !important;
+    }
+
+
+    // The copy following the pointer, a popover in the top layer: fixed at the box the item was picked up from,
+    // then moved by the pointer's offset and the swing, which JS writes every frame.
+    &-drag {
+        @extend %reset-popover;
+        animation: var(--drag-animation);
+        border-radius: var(--sortable-radius);
+        box-shadow: var(--drag-box-shadow);
+        box-sizing: border-box;
+        height: var(--sortable-height);
+        left: var(--sortable-left);
+        scale: var(--drag-scale);
+        top: var(--sortable-top);
+        transform: translate3d(var(--sortable-x), var(--sortable-y), 0) rotate(var(--sortable-angle));
+        transform-origin: var(--sortable-origin);
         transition:
             box-shadow var(--transition-duration) var(--transition-timing-function),
             scale var(--transition-duration) var(--transition-timing-function);
+        width: var(--sortable-width);
         will-change: transform;
-        z-index: var(--drag-z-index);
 
-        &:not(.--dropping) {
-            animation: var(--drag-animation);
-            box-shadow: var(--drag-box-shadow);
-            scale: var(--drag-scale);
+        @starting-style {
+            box-shadow: none;
+            scale: 1;
         }
-    }
 
-    &.--active {
-        user-select: none;
-    }
+        // The copy takes the box the item was picked up from.
+        > * {
+            box-sizing: border-box;
+            height: 100%;
+            margin: 0;
+            width: 100%;
+        }
 
+        // Shrinks onto the item, settling the lift, the swing and any animation on the way, then blurs and fades out
+        // over it for the last quarter, as the item shows again under it. The fade eases plainly: the drop's
+        // overshoot would clamp it at 0.
+        &--dropping {
+            animation: none;
+            box-shadow: none;
+            filter: blur(var(--drop-blur));
+            opacity: 0;
+            scale: 1;
+            transition:
+                --sortable-angle var(--drop-duration) var(--drop-easing),
+                --sortable-x var(--drop-duration) var(--drop-easing),
+                --sortable-y var(--drop-duration) var(--drop-easing),
+                box-shadow var(--drop-duration) var(--drop-easing),
+                filter calc(var(--drop-duration) / 4) ease-out calc(var(--drop-duration) * 0.75),
+                height var(--drop-duration) var(--drop-easing),
+                opacity calc(var(--drop-duration) / 4) ease-out calc(var(--drop-duration) * 0.75),
+                rotate var(--drop-duration) var(--drop-easing),
+                scale var(--drop-duration) var(--drop-easing),
+                translate var(--drop-duration) var(--drop-easing),
+                width var(--drop-duration) var(--drop-easing);
+        }
+    }
 
-    // Nested anywhere inside an item; only rendered while that item is held. The dragged item is
-    // 'position: fixed', so this covers it without the item needing its own positioning.
+    // Nested anywhere inside an item; shown only in the copy, which it covers.
     &-overlay {
+        @extend %layer;
         align-items: center;
         background: inherit;
-        border-radius: inherit;
         display: none;
-        inset: 0;
         justify-content: center;
         opacity: 0;
-        pointer-events: none;
-        position: absolute;
         transition:
             display var(--overlay-transition-duration) allow-discrete,
             opacity var(--overlay-transition-duration) var(--transition-timing-function);
         z-index: 1;
 
-        .sortable > .--dragging & {
+        .sortable-drag & {
             display: flex;
             opacity: 1;
 
@@ -53,27 +131,18 @@
             }
         }
 
-        .sortable > .--dropping & {
+        .sortable-drag--dropping & {
             opacity: 0;
         }
     }
+}
 
-    &-placeholder {
-        background: var(--placeholder-background);
-        border: var(--placeholder-border-width) dashed var(--placeholder-border-color);
-        border-radius: var(--radius);
-        box-sizing: border-box;
-        flex: none;
-        pointer-events: none;
-        transition:
-            opacity var(--transition-duration) var(--transition-timing-function),
-            scale var(--transition-duration) var(--transition-timing-function);
 
-        @starting-style {
-            opacity: 0;
-            scale: 0.9;
-        }
-    }
+// Grabbing wherever the pointer goes while an item is carried, over whatever sets its own cursor; released as it
+// drops. JS marks the root for as long.
+:root.sortable-grabbing,
+:root.sortable-grabbing * {
+    cursor: grabbing !important;
 }
 
 
@@ -276,7 +345,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .sortable > .--dragging:not(.--dropping) {
+    .sortable-drag {
         animation: none;
     }
 }

package/src/components/sortable/scss/variables.scss

@@ -2,11 +2,16 @@
     --drag-animation: none;
     --drag-box-shadow: var(--box-shadow-400);
     --drag-scale: 1.06;
-    --drag-z-index: 9999;
+    --drop-blur: 4px;
+    --drop-duration: 0.26s;
+    --drop-easing: cubic-bezier(0.34, 1.3, 0.64, 1);
     --overlay-transition-duration: 0.16s;
     --placeholder-background: transparent;
     --placeholder-border-color: var(--color-border-500);
     --placeholder-border-width: var(--border-width-400);
+    // Read once per drag (JS): how the items around the placeholder slide when it moves.
+    --shift-duration: 0.22s;
+    --shift-easing: cubic-bezier(0.2, 0, 0, 1);
     // Read once per drag by the swing spring (JS): lean limit, velocity → lean gain (deg per px/s),
     // spring pull and friction. Lower damping relative to stiffness means more wobble before rest.
     --swing-angle: 8deg;
@@ -56,4 +61,10 @@
             --drag-animation: #{$animation};
         }
     }
+
+    // After the swing presets, which set the same variables on the same element.
+    @media (prefers-reduced-motion: reduce) {
+        --shift-duration: 0s;
+        --swing-angle: 0deg;
+    }
 }

package/src/components/sticky-header/index.ts

@@ -1,104 +1,62 @@
 import { reactive } from '@esportsplus/reactivity';
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import scrollbar from '~/css-utilities/scrollbar';
+import '~/components/card/scss/index.scss';
 import './scss/index.scss';
 
 
-const DAMPING = 44;
-const MASS = 0.6;
-const REST = 0.0005;
-const STEP = 1 / 120;
-const STIFFNESS = 240;
+// Past the midpoint the sides swap which one is inert, so the faded one can't be focused, clicked or read twice.
+const SWAP = 0.5;
 
 
-export default component<Attributes & {
-    actions?: Renderable<unknown>;
-    leading?: Renderable<unknown>;
-    subtitle?: string;
-    title: string;
-}>(
-    function({ actions, leading, subtitle, title, ...attributes }, content) {
-        let frame = 0,
-            last = 0,
-            position = 0,
-            range = 0,
-            root: HTMLElement | undefined,
-            state = reactive({ condensed: false }),
-            target = 0,
-            velocity = 0;
+let uid = 0;
 
-        function measure(bar: HTMLElement) {
-            let travel = Math.max(1, bar.offsetHeight - parseFloat(getComputedStyle(bar).minHeight));
 
-            // Condense over at least 64px so short headers don't snap shut on the first wheel tick.
-            range = Math.max(64, travel * 3);
-        }
+// Engines without scroll-driven animations get the progress and the swap from scroll events instead of the timeline.
+function fallback(fade: ReturnType<typeof scrollbar.fade>) {
+    let range = 0,
+        state = reactive({ progress: 0 });
 
-        function render(progress: number) {
-            root?.style.setProperty('--progress', `${progress}`);
+    return {
+        after: { inert: () => state.progress < SWAP },
+        before: { inert: () => state.progress >= SWAP },
+        root: {
+            onconnect: (element: HTMLElement) => {
+                range = parseFloat(getComputedStyle(element).getPropertyValue('--sticky-header-range'));
+            },
+            style: () => `--sticky-header-progress: ${state.progress}`
+        },
+        scroll: {
+            ...fade,
+            onscroll: function(this: HTMLElement) {
+                fade.onscroll?.call(this);
+                state.progress = Math.min(1, this.scrollTop / range);
+            }
         }
+    };
+}
 
-        function tick(now: number) {
-            let elapsed = Math.min((now - last) / 1000, 1 / 30);
-
-            last = now;
 
-            // Fixed substeps keep the overdamped spring stable when frames drop.
-            for (let i = 0, n = Math.ceil(elapsed / STEP); i < n; i++) {
-                velocity += ((-STIFFNESS * (position - target)) - (DAMPING * velocity)) / MASS * STEP;
-                position += velocity * STEP;
-            }
-
-            if (Math.abs(position - target) < REST && Math.abs(velocity) < REST) {
-                frame = 0;
-                position = target;
-                velocity = 0;
-            }
-            else {
-                frame = requestAnimationFrame(tick);
-            }
-
-            render(position);
-        }
+export default component<Attributes & {
+    after: Renderable<unknown>;
+    before: Renderable<unknown>;
+}>(
+    function({ after, before, ...attributes }, content) {
+        let fade = scrollbar.fade(),
+            id = `sticky-header-${++uid}`,
+            legacy = typeof CSS === 'undefined' || CSS.supports('timeline-scope: none') ? null : fallback(fade);
 
         return html`
-            <div
-                class='sticky-header'
-                ${attributes}
-                ${{
-                    class: () => state.condensed && '--condensed',
-                    onconnect: (element: HTMLElement) => {
-                        root = element;
-                        measure(element.querySelector('.sticky-header-bar') as HTMLElement);
-                    },
-                    ondisconnect: () => {
-                        cancelAnimationFrame(frame);
-                        frame = 0;
-                    }
-                }}
-            >
+            <div class='card sticky-header' ${attributes} ${legacy?.root}>
                 <div
-                    aria-label='${title}'
-                    class='sticky-header-scroll'
+                    aria-labelledby='${id}'
+                    class='sticky-header-scroll --scrollbar'
                     role='region'
                     tabindex='0'
-                    onscroll='${(event: Event) => {
-                        target = Math.min(1, Math.max(0, (event.currentTarget as HTMLElement).scrollTop / range));
-                        state.condensed = target >= 1;
-
-                        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
-                            position = target;
-                            velocity = 0;
-                            render(position);
-                        }
-                        else if (!frame) {
-                            last = performance.now();
-                            frame = requestAnimationFrame(tick);
-                        }
-                    }}'
+                    ${legacy?.scroll ?? fade}
                 >
                     <div aria-hidden='true' class='sticky-header-spacer'></div>
                     ${content}
-                    <div aria-hidden='true' class='sticky-header-fade'></div>
                 </div>
 
                 <header class='sticky-header-bar'>
@@ -107,18 +65,11 @@ export default component<Attributes & {
                     <div aria-hidden='true' class='sticky-header-edge sticky-header-edge--fade'></div>
                     <div aria-hidden='true' class='sticky-header-edge sticky-header-edge--line'></div>
 
-                    <div class='sticky-header-row'>
-                        ${leading ? html`<div class='sticky-header-slot'>${leading}</div>` : ''}
-
-                        <div class='sticky-header-titles'>
-                            <div class='sticky-header-expanded'>
-                                <h2 class='sticky-header-title'>${title}</h2>
-                                ${subtitle ? html`<p class='sticky-header-subtitle'>${subtitle}</p>` : ''}
-                            </div>
-                            <span aria-hidden='true' class='sticky-header-compact'>${title}</span>
-                        </div>
-
-                        ${actions ? html`<div class='sticky-header-slot sticky-header-slot--actions'>${actions}</div>` : ''}
+                    <div class='sticky-header-before' id='${id}' ${legacy?.before}>
+                        ${before}
+                    </div>
+                    <div class='sticky-header-after' ${legacy?.after}>
+                        ${after}
                     </div>
                 </header>
             </div>

package/src/components/sticky-header/scss/index.scss

@@ -1,44 +1,48 @@
-@use '/lib';
+@use '/shared';
 @use 'variables';
 
+// The scroller's timeline is scoped to the whole header so the bar, its sibling, can run on it.
 .sticky-header {
-    --lifted: clamp(0, var(--progress) / 0.12, 1);
-    --offset: calc(var(--travel) * var(--progress));
-
-    background: var(--background);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    overflow: hidden;
-    position: relative;
+    timeline-scope: --sticky-header;
 
 
+    // Covers the whole card and clips to its corners, since the card itself can't clip without losing its shadow;
+    // the plate slides up past the top and the edges hang below the header.
     &-bar {
-        @include lib.position(absolute, top);
-        height: var(--expanded-height);
-        min-height: var(--compact-height);
-        pointer-events: none;
+        @extend %layer;
+        overflow: clip;
     }
 
-    &-compact {
-        --reveal: clamp(0, (var(--progress) - 0.55) / 0.35, 1);
-
-        color: var(--title-compact-color);
-        font-size: var(--title-compact-font-size);
-        font-weight: var(--font-weight-500);
-        inset: 3px 0 auto 0;
-        line-height: 1.4;
+    &-after {
+        @extend %absolute-top;
+        align-items: center;
+        display: flex;
+        height: var(--compact-height);
         opacity: var(--reveal);
-        overflow: hidden;
-        position: absolute;
-        text-overflow: ellipsis;
+        padding: 0 var(--gutter);
         translate: 0 calc((1 - var(--reveal)) * 6px);
-        white-space: nowrap;
+    }
+
+    // Only controls take the pointer, so wheel and touch over the rest of the bar still scroll the panel.
+    &-after,
+    &-before {
+        :is(a, button, input, label, select, textarea, [tabindex]) {
+            pointer-events: auto;
+        }
+    }
+
+    &-before {
+        @extend %absolute-top;
+        opacity: clamp(0, 1 - var(--sticky-header-progress) / 0.45, 1);
+        padding: var(--padding-top) var(--gutter) 0;
+        scale: calc(1 - 0.05 * var(--sticky-header-progress));
+        transform-origin: left top;
+        translate: 0 calc(var(--offset) * -1);
     }
 
     // Edges ride the bottom of the shrinking bar and only appear once content slides underneath.
     &-edge {
-        @include lib.position(absolute, top);
+        @extend %absolute-top;
         opacity: var(--lifted);
         translate: 0 calc(var(--expanded-height) - var(--offset));
 
@@ -58,45 +62,20 @@
         }
     }
 
-    &-expanded {
-        opacity: clamp(0, 1 - var(--progress) / 0.45, 1);
-        scale: calc(1 - 0.05 * var(--progress));
-        transform-origin: left top;
-        translate: 0 calc(var(--offset) * -1);
-    }
-
-    &-fade {
-        background: linear-gradient(transparent, var(--background));
-        bottom: 0;
-        height: 24px;
-        margin-top: -24px;
-        pointer-events: none;
-        position: sticky;
-    }
-
     // Sliding a solid plate up reads the same as scaling it, without the per-frame raster.
     &-plate {
-        @include lib.position(absolute, top);
+        @extend %absolute-top;
         background: var(--background);
         height: var(--expanded-height);
         translate: 0 calc(var(--offset) * -1);
     }
 
-    &-row {
-        @include lib.position(absolute, top);
-        align-items: flex-start;
-        display: flex;
-        gap: 10px;
-        padding: var(--padding-top) var(--padding-horizontal) 0;
-    }
-
     &-scroll {
+        border-radius: inherit;
         max-height: var(--max-height);
         outline: none;
-        overflow-y: auto;
-        overscroll-behavior-y: contain;
         scroll-padding-top: calc(var(--compact-height) + 10px);
-        scrollbar-gutter: stable;
+        scroll-timeline: --sticky-header y;
 
         &:focus-visible {
             background: oklch(from var(--focus-color) l c h / 0.06);
@@ -104,46 +83,57 @@
         }
     }
 
-    &-slot {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        height: var(--slot-height);
-        pointer-events: auto;
+    &-spacer {
+        height: var(--expanded-height);
+    }
+
 
-        &--actions {
-            gap: 6px;
+    // Scroll-linked, not eased: the scroll itself is the motion. The sides swap at the midpoint, where both are
+    // faded out, and hiding the faded one keeps it out of the tab order, the pointer and the accessibility tree.
+    @supports (timeline-scope: none) {
+        &-after,
+        &-bar,
+        &-before {
+            animation-duration: 1ms;
+            animation-fill-mode: both;
+            animation-range: 0 var(--sticky-header-range);
+            animation-timeline: --sticky-header;
+            animation-timing-function: linear;
+        }
+
+        &-after {
+            animation-name: sticky-header-after;
+        }
+
+        &-bar {
+            animation-name: sticky-header-progress;
+        }
+
+        &-before {
+            animation-name: sticky-header-before;
         }
     }
+}
 
-    &-spacer {
-        height: var(--expanded-height);
+
+@keyframes sticky-header-after {
+    0%, 50% {
+        visibility: hidden;
     }
+}
 
-    &-subtitle {
-        color: var(--subtitle-color);
-        font-size: var(--subtitle-font-size);
-        line-height: 1.35;
-        margin-top: 2px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+@keyframes sticky-header-before {
+    50%, 100% {
+        visibility: hidden;
     }
+}
 
-    &-title {
-        color: var(--title-color);
-        font-size: var(--title-font-size);
-        font-weight: var(--font-weight-500);
-        letter-spacing: -0.03em;
-        line-height: 1.2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+@keyframes sticky-header-progress {
+    from {
+        --sticky-header-progress: 0;
     }
 
-    &-titles {
-        flex: 1;
-        min-width: 0;
-        position: relative;
+    to {
+        --sticky-header-progress: 1;
     }
 }

package/src/components/sticky-header/scss/variables.scss

@@ -1,22 +1,46 @@
+// Registered so the bar's scroll-driven animation interpolates it, and every piece of the bar reads the one value.
+@property --sticky-header-progress {
+    inherits: true;
+    initial-value: 0;
+    syntax: '<number>';
+}
+
+// Registered so it computes to pixels, which the scroll-event fallback reads back.
+@property --sticky-header-range {
+    inherits: true;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+// Surface comes from '.card'.
 .sticky-header {
-    --background: var(--color-white-300);
-    --border-color: var(--color-border-300);
+    --background-default: var(--color-white-300);
+    --border-color-default: var(--color-border-300);
     --border-radius: var(--border-radius-600);
-    --box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 4px 10px -8px oklch(from var(--color-black-300) l c h / 0.45);
+    --border-width: 0px;
+    --box-shadow-default:
+        0 0 0 var(--border-width-400) var(--border-color),
+        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
+        0 4px 10px -8px oklch(from var(--color-black-300) l c h / 0.45);
     --compact-height: 48px;
     --edge-shadow: 0 6px 16px -10px oklch(from var(--color-black-300) l c h / 0.4);
     --expanded-height: 68px;
     --focus-color: var(--color-blue-300);
+    // Its own name: the global per-element reset would swallow '--padding-horizontal' on the bar's children.
+    --gutter: var(--size-400);
     --max-height: 320px;
-    --padding-horizontal: var(--size-400);
     --padding-top: 12px;
-    --progress: 0;
-    --slot-height: 24px;
-    --subtitle-color: var(--color-text-300);
-    --subtitle-font-size: 11.5px;
-    --title-color: var(--color-text-500);
-    --title-compact-color: var(--color-text-400);
-    --title-compact-font-size: 13px;
-    --title-font-size: 20px;
+    // Condense over at least 64px so short headers don't snap shut on the first wheel tick.
+    --sticky-header-range: max(64px, var(--travel) * 3);
     --travel: calc(var(--expanded-height) - var(--compact-height));
+
+    // Derived here rather than on the root, so they follow the progress animated on the bar.
+    &-bar {
+        --lifted: clamp(0, var(--sticky-header-progress) / 0.12, 1);
+        --offset: calc(var(--travel) * var(--sticky-header-progress));
+    }
+
+    &-after {
+        --reveal: clamp(0, (var(--sticky-header-progress) - 0.55) / 0.35, 1);
+    }
 }