@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/sticky-header/index.js

@@ -0,0 +1,98 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1k9qcfo2 = template_u1.template(`<div class='sticky-header'><div class='sticky-header-scroll' role='region' tabindex='0'><div aria-hidden='true' class='sticky-header-spacer'></div><!--$--><div aria-hidden='true' class='sticky-header-fade'></div></div><header class='sticky-header-bar'><div aria-hidden='true' class='sticky-header-plate'></div><div aria-hidden='true' class='sticky-header-edge sticky-header-edge--shadow'></div><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'><!--$--><div class='sticky-header-titles'><div class='sticky-header-expanded'><h2 class='sticky-header-title'></h2></div><span aria-hidden='true' class='sticky-header-compact'>`);
+const template_1k9qcfoc = template_u1.template(`<div class='sticky-header-slot'>`);
+const template_1k9qcfof = template_u1.template(`<p class='sticky-header-subtitle'>`);
+const template_1k9qcfoi = template_u1.template(`<div class='sticky-header-slot sticky-header-slot--actions'>`);
+class ReactiveObject_1k9qcfo0 extends reactivity_u0.ReactiveObject {
+    #condensed = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get condensed() {
+        return reactivity_u0.read(this.#condensed);
+    }
+    set condensed(_v0) {
+        reactivity_u0.write(this.#condensed, _v0);
+    }
+}
+const DAMPING = 44;
+const MASS = 0.6;
+const REST = 0.0005;
+const STEP = 1 / 120;
+const STIFFNESS = 240;
+export default component(function ({ actions, leading, subtitle, title, ...attributes }, content) {
+    let frame = 0, last = 0, position = 0, range = 0, root, state = new ReactiveObject_1k9qcfo0(), target = 0, velocity = 0;
+    function measure(bar) {
+        let travel = Math.max(1, bar.offsetHeight - parseFloat(getComputedStyle(bar).minHeight));
+        range = Math.max(64, travel * 3);
+    }
+    function render(progress) {
+        root?.style.setProperty('--progress', `${progress}`);
+    }
+    function tick(now) {
+        let elapsed = Math.min((now - last) / 1000, 1 / 30);
+        last = now;
+        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);
+    }
+    return (() => {
+        let root_1k9qcfo1 = template_1k9qcfo2(), element_1k9qcfo3 = root_1k9qcfo1.firstChild, element_1k9qcfo4 = element_1k9qcfo3.firstElementChild, element_1k9qcfo5 = element_1k9qcfo4.firstChild.nextSibling, element_1k9qcfo6 = element_1k9qcfo4.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstChild, element_1k9qcfo7 = element_1k9qcfo4.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.firstElementChild.firstElementChild, element_1k9qcfo8 = element_1k9qcfo4.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.firstElementChild, element_1k9qcfo9 = element_1k9qcfo8.nextElementSibling, element_1k9qcfoa = element_1k9qcfo4.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_1k9qcfo3, attributes);
+        template_u1.setList(element_1k9qcfo3, 'class', () => state.condensed && '--condensed');
+        template_u1.onconnect(element_1k9qcfo3, (element) => {
+            root = element;
+            measure(element.querySelector('.sticky-header-bar'));
+        });
+        template_u1.ondisconnect(element_1k9qcfo3, () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+        });
+        template_u1.setProperty(element_1k9qcfo4, 'aria-label', title);
+        template_u1.on(element_1k9qcfo4, 'scroll', (event) => {
+            target = Math.min(1, Math.max(0, event.currentTarget.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);
+            }
+        });
+        template_u1.slot(element_1k9qcfo5, content);
+        template_u1.slot(element_1k9qcfo6, leading ? (() => {
+            let root_1k9qcfob = template_1k9qcfoc(), element_1k9qcfod = root_1k9qcfob.firstChild;
+            template_u1.slot(element_1k9qcfod, leading, 1);
+            return root_1k9qcfob;
+        })() : '');
+        template_u1.slot(element_1k9qcfo7, title, 1);
+        template_u1.slot(element_1k9qcfo8, subtitle ? (() => {
+            let root_1k9qcfoe = template_1k9qcfof(), element_1k9qcfog = root_1k9qcfoe.firstChild;
+            template_u1.slot(element_1k9qcfog, subtitle, 1);
+            return root_1k9qcfoe;
+        })() : '', 2);
+        template_u1.slot(element_1k9qcfo9, title, 1);
+        template_u1.slot(element_1k9qcfoa, actions ? (() => {
+            let root_1k9qcfoh = template_1k9qcfoi(), element_1k9qcfoj = root_1k9qcfoh.firstChild;
+            template_u1.slot(element_1k9qcfoj, actions, 1);
+            return root_1k9qcfoh;
+        })() : '', 2);
+        return root_1k9qcfo1;
+    })();
+});

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

@@ -0,0 +1,2 @@
+@layer components {.sticky-header{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:var(--border-radius-600);--box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 4px 10px -8px oklch(from var(--color-black-300) l c h / .45);--compact-height:48px;--edge-shadow:0 6px 16px -10px oklch(from var(--color-black-300) l c h / .4);--expanded-height:68px;--focus-color:var(--color-blue-300);--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;--travel:calc(var(--expanded-height) - var(--compact-height));--lifted:clamp(0, var(--progress) / .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);position:relative;overflow:hidden}.sticky-header-bar{height:var(--expanded-height);min-height:var(--compact-height);pointer-events:none;position:absolute;inset:0 0 auto}.sticky-header-compact{--reveal:clamp(0, (var(--progress) - .55) / .35, 1);color:var(--title-compact-color);font-size:var(--title-compact-font-size);font-weight:var(--font-weight-500);opacity:var(--reveal);text-overflow:ellipsis;translate:0 calc((1 - var(--reveal)) * 6px);white-space:nowrap;line-height:1.4;position:absolute;inset:3px 0 auto;overflow:hidden}.sticky-header-edge{opacity:var(--lifted);translate:0 calc(var(--expanded-height) - var(--offset));position:absolute;inset:0 0 auto}.sticky-header-edge--fade{background:linear-gradient(var(--background), transparent);height:20px}.sticky-header-edge--line{background:var(--border-color);height:1px}.sticky-header-edge--shadow{box-shadow:var(--edge-shadow);height:1px}.sticky-header-expanded{opacity:clamp(0, 1 - var(--progress) / .45, 1);scale:calc(1 - .05 * var(--progress));transform-origin:0 0;translate:0 calc(var(--offset) * -1)}.sticky-header-fade{background:linear-gradient(transparent, var(--background));pointer-events:none;height:24px;margin-top:-24px;position:sticky;bottom:0}.sticky-header-plate{background:var(--background);height:var(--expanded-height);translate:0 calc(var(--offset) * -1);position:absolute;inset:0 0 auto}.sticky-header-row{padding:var(--padding-top) var(--padding-horizontal) 0;align-items:flex-start;gap:10px;display:flex;position:absolute;inset:0 0 auto}.sticky-header-scroll{max-height:var(--max-height);overscroll-behavior-y:contain;scroll-padding-top:calc(var(--compact-height) + 10px);scrollbar-gutter:stable;outline:none;overflow-y:auto}.sticky-header-scroll:focus-visible{background:oklch(from var(--focus-color) l c h/.06);box-shadow:inset 0 0 0 1px var(--focus-color)}.sticky-header-slot{height:var(--slot-height);pointer-events:auto;flex-shrink:0;align-items:center;display:flex}.sticky-header-slot--actions{gap:6px}.sticky-header-spacer{height:var(--expanded-height)}.sticky-header-subtitle{color:var(--subtitle-color);font-size:var(--subtitle-font-size);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;line-height:1.35;overflow:hidden}.sticky-header-title{color:var(--title-color);font-size:var(--title-font-size);font-weight:var(--font-weight-500);letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;overflow:hidden}.sticky-header-titles{flex:1;min-width:0;position:relative}}
+/*$vite$:1*/

package/build/components/sticky-stack/index.d.ts

@@ -0,0 +1,33 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [STICKY_STACK_CARD]?: Attributes;
+    [STICKY_STACK_DOT]?: Attributes;
+    items: Item[];
+    label: string;
+    state?: State;
+};
+type Item = {
+    text: Renderable<unknown>;
+    title: string;
+};
+type State = {
+    active: number;
+};
+declare const STICKY_STACK_CARD: unique symbol;
+declare const STICKY_STACK_DOT: unique symbol;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<unknown>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<unknown>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<unknown>;
+    }): any;
+} & {
+    readonly card: typeof STICKY_STACK_CARD;
+    readonly dot: typeof STICKY_STACK_DOT;
+};
+export default _default;
+export type { Item, State };

package/build/components/sticky-stack/index.js

@@ -0,0 +1,184 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1g3h60x2 = template_u1.template(`<div class='sticky-stack'><div class='sticky-stack-scroller' role='region' tabindex='0'><div class='sticky-stack-track'><div class='sticky-stack-header'></div></div></div><nav aria-label='Jump to card' class='sticky-stack-nav'>`);
+const template_1g3h60x9 = template_u1.template(`<article class='sticky-stack-card'><span class='sticky-stack-number'></span><div class='sticky-stack-body'><h3 class='sticky-stack-title'></h3><p class='sticky-stack-text'></p></div><div aria-hidden='true' class='sticky-stack-shade'>`);
+const template_1g3h60xf = template_u1.template(`<button class='sticky-stack-dot' type='button'><span class='sticky-stack-bar'><span class='sticky-stack-fill'>`);
+class ReactiveObject_1g3h60x0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const STICKY_STACK_CARD = Symbol.for('@esportsplus/ui/sticky-stack.card');
+const STICKY_STACK_DOT = Symbol.for('@esportsplus/ui/sticky-stack.dot');
+function covered(layout, i, s) {
+    let [start, end] = cover(layout, i);
+    return Math.min(Math.max((s - start) / (end - start), 0), 1);
+}
+function cover(layout, i) {
+    return [
+        natural(layout, i + 1) - top(layout, i) - layout.card,
+        natural(layout, i + 1) - top(layout, i + 1)
+    ];
+}
+function depth(layout, i, last, s) {
+    let value = 0;
+    for (let j = i; j < last; j++) {
+        value += covered(layout, j, s);
+    }
+    return value;
+}
+function measure(root) {
+    let computed = getComputedStyle(root), read = (name) => parseFloat(computed.getPropertyValue(name));
+    return {
+        card: read('--card-height'),
+        dim: read('--dim-per-card'),
+        first: read('--first-top'),
+        gap: read('--card-gap'),
+        header: read('--header-height'),
+        max: read('--max-dim'),
+        scale: read('--scale-per-card'),
+        step: read('--step')
+    };
+}
+function natural(layout, i) {
+    return layout.header + i * (layout.card + layout.gap);
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function timeline(element, points, range, source, frame) {
+    let offsets = [...new Set([0, range, ...points].map((s) => Math.min(Math.max(s, 0), range)))].sort((a, b) => a - b);
+    return element.animate(offsets.map((s) => ({ ...frame(s), offset: s / range })), { fill: 'both', timeline: source });
+}
+function top(layout, i) {
+    return layout.first + i * layout.step;
+}
+export default Object.assign(component(function ({ items, label, state = new ReactiveObject_1g3h60x0(), ...attributes }, heading) {
+    let animations = [], cards = [], dots = [], fills = [], frame = 0, last = items.length - 1, layout, scroller, shades = [];
+    function goTo(i) {
+        if (!layout || !scroller) {
+            return;
+        }
+        scroller.scrollTo({
+            behavior: reduced() ? 'auto' : 'smooth',
+            top: i === 0 ? 0 : natural(layout, i) - top(layout, i)
+        });
+    }
+    function onscroll() {
+        if (!frame) {
+            frame = requestAnimationFrame(update);
+        }
+    }
+    function scrollDriven() {
+        if (!layout || !scroller || typeof ScrollTimeline !== 'function') {
+            return;
+        }
+        let range = scroller.scrollHeight - scroller.clientHeight;
+        if (range <= 0) {
+            return;
+        }
+        let l = layout, motion = !reduced(), source = new ScrollTimeline({ axis: 'block', source: scroller });
+        for (let i = 0; i <= last; i++) {
+            if (i > 0) {
+                animations.push(timeline(fills[i], cover(l, i - 1), range, source, (s) => ({ transform: `scaleY(${covered(l, i - 1, s)})` })));
+            }
+            if (!motion) {
+                continue;
+            }
+            let cap = l.max / l.dim, points = [];
+            for (let j = i; j < last; j++) {
+                points.push(...cover(l, j));
+            }
+            let j = i + Math.floor(cap);
+            if (j < last) {
+                let [start, end] = cover(l, j);
+                points.push(start + (cap % 1) * (end - start));
+            }
+            animations.push(timeline(cards[i], points, range, source, (s) => ({ transform: `scale(${1 - depth(l, i, last, s) * l.scale})` })), timeline(shades[i], points, range, source, (s) => ({ opacity: Math.min(depth(l, i, last, s) * l.dim, l.max) })));
+        }
+    }
+    function update() {
+        frame = 0;
+        if (!layout || !scroller) {
+            return;
+        }
+        let front = 0, s = scroller.scrollTop;
+        for (let i = 0; i < last; i++) {
+            if (covered(layout, i, s) >= 0.5) {
+                front++;
+            }
+        }
+        if (front !== state.active) {
+            dots[state.active]?.removeAttribute('aria-current');
+            state.active = front;
+        }
+        dots[front]?.setAttribute('aria-current', 'step');
+        if (animations.length) {
+            return;
+        }
+        let motion = !reduced();
+        for (let i = 0; i <= last; i++) {
+            let d = depth(layout, i, last, s);
+            cards[i].style.transform = motion ? `scale(${1 - d * layout.scale})` : '';
+            fills[i].style.transform = `scaleY(${i === 0 ? 1 : covered(layout, i - 1, s)})`;
+            shades[i].style.opacity = motion ? String(Math.min(d * layout.dim, layout.max)) : '0';
+        }
+    }
+    return (() => {
+        let root_1g3h60x1 = template_1g3h60x2(), element_1g3h60x3 = root_1g3h60x1.firstChild, element_1g3h60x4 = element_1g3h60x3.firstElementChild, element_1g3h60x5 = element_1g3h60x4.firstElementChild, element_1g3h60x6 = element_1g3h60x5.firstElementChild, element_1g3h60x7 = element_1g3h60x4.nextElementSibling;
+        template_u1.setProperties(element_1g3h60x3, this?.attributes);
+        template_u1.setProperties(element_1g3h60x3, attributes);
+        template_u1.onconnect(element_1g3h60x3, (root) => {
+            cards = [...root.querySelectorAll('.sticky-stack-card')];
+            dots = [...root.querySelectorAll('.sticky-stack-dot')];
+            fills = [...root.querySelectorAll('.sticky-stack-fill')];
+            layout = measure(root);
+            shades = [...root.querySelectorAll('.sticky-stack-shade')];
+            scrollDriven();
+            update();
+        });
+        template_u1.ondisconnect(element_1g3h60x3, () => {
+            cancelAnimationFrame(frame);
+            for (let i = 0, n = animations.length; i < n; i++) {
+                animations[i].cancel();
+            }
+            animations = [];
+        });
+        template_u1.setProperty(element_1g3h60x4, 'aria-label', label);
+        template_u1.onrender(element_1g3h60x4, (el) => {
+            scroller = el;
+        });
+        template_u1.on(element_1g3h60x4, 'scroll', onscroll);
+        template_u1.setList(element_1g3h60x5, 'style', `--last: ${last};`);
+        template_u1.slot(element_1g3h60x6, heading, 1);
+        template_u1.slot(element_1g3h60x5, items.map((item, i) => {
+            let root_1g3h60x8 = template_1g3h60x9(), element_1g3h60xa = root_1g3h60x8.firstChild, element_1g3h60xb = element_1g3h60xa.firstElementChild, element_1g3h60xc = element_1g3h60xb.nextElementSibling.firstElementChild, element_1g3h60xd = element_1g3h60xc.nextElementSibling;
+            template_u1.setList(element_1g3h60xa, 'style', `--index: ${i};`);
+            template_u1.setProperties(element_1g3h60xa, this?.attributes?.[STICKY_STACK_CARD]);
+            template_u1.setProperties(element_1g3h60xa, attributes[STICKY_STACK_CARD]);
+            template_u1.slot(element_1g3h60xb, String(i + 1).padStart(2, '0'), 1);
+            template_u1.slot(element_1g3h60xc, item.title, 1);
+            template_u1.slot(element_1g3h60xd, item.text, 1);
+            return root_1g3h60x8;
+        }), 2);
+        template_u1.slot(element_1g3h60x7, items.map((item, i) => {
+            let root_1g3h60xe = template_1g3h60xf(), element_1g3h60xg = root_1g3h60xe.firstChild, element_1g3h60xh = element_1g3h60xg.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_1g3h60xg, 'aria-label', `${i + 1}. ${item.title}`);
+            template_u1.delegate(element_1g3h60xg, 'click', () => goTo(i));
+            template_u1.setProperties(element_1g3h60xg, this?.attributes?.[STICKY_STACK_DOT]);
+            template_u1.setProperties(element_1g3h60xg, attributes[STICKY_STACK_DOT]);
+            template_u1.setList(element_1g3h60xh, 'style', `transform: scaleY(${i === 0 ? 1 : 0});`);
+            return root_1g3h60xe;
+        }), 1);
+        return root_1g3h60x1;
+    })();
+}), { card: STICKY_STACK_CARD, dot: STICKY_STACK_DOT });

package/build/components/sticky-stack/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.sticky-stack{--background:var(--color-grey-400);--bar-color:var(--color-border-300);--bar-height:28px;--bar-width:3px;--box-shadow:0 0 0 var(--border-width-400) oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--card-background:var(--color-white-300);--card-border-radius:var(--border-radius-700);--card-gap:80px;--card-height:280px;--card-padding:var(--size-600);--color:var(--color-text-500);--dim-per-card:.12;--fill-color:var(--color);--first-top:20px;--focus-color:var(--color);--header-height:112px;--max-dim:.4;--muted-color:var(--color-text-300);--pressed-scale:.96;--radius:24px;--scale-per-card:.04;--shade-color:var(--color-black-500);--step:14px;--transition-duration:.15s;--transition-timing-function:ease-out;--viewport-height:480px;--width:min(480px, 100%)}.sticky-stack--compact{--card-gap:56px;--card-height:200px;--header-height:88px;--step:10px;--viewport-height:360px}.sticky-stack--flat{--dim-per-card:0;--max-dim:0;--scale-per-card:0}.sticky-stack{gap:var(--size-200);width:var(--width);display:flex}.sticky-stack-bar{background:var(--bar-color);height:var(--bar-height);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--bar-width);border-radius:999px;overflow:hidden}.sticky-stack-body{gap:var(--size-200);flex-direction:column;display:flex}.sticky-stack-card{background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--box-shadow);box-sizing:border-box;color:var(--color);height:var(--card-height);padding:var(--card-padding);top:calc(var(--first-top) + var(--index) * var(--step));transform-origin:top;will-change:transform;flex-direction:column;justify-content:space-between;display:flex;position:sticky}.sticky-stack-card+.sticky-stack-card{margin-top:var(--card-gap)}.sticky-stack-dot{cursor:pointer;touch-action:manipulation;height:40px;transition:scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;border-radius:999px;outline:none;justify-content:center;align-items:center;width:24px;padding:0;display:flex}.sticky-stack-dot:active{scale:var(--pressed-scale)}.sticky-stack-dot:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}@media (hover:hover){.sticky-stack-dot:hover .sticky-stack-bar{scale:1.5 1}}.sticky-stack-fill{background:var(--fill-color);transform-origin:top;width:100%;height:100%;display:block}.sticky-stack-header{gap:var(--size-100);height:var(--header-height);padding:0 var(--size-200);flex-direction:column;justify-content:center;display:flex}.sticky-stack-nav{flex-direction:column;justify-content:center;display:flex}.sticky-stack-number{color:var(--muted-color);font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;font-size:14px}.sticky-stack-scroller{background:var(--background);border-radius:var(--radius);box-sizing:border-box;height:var(--viewport-height);overscroll-behavior:contain;min-width:0;padding:0 var(--size-400);scrollbar-width:none;outline:none;flex:1;overflow-y:auto}.sticky-stack-scroller::-webkit-scrollbar{display:none}.sticky-stack-scroller:focus-visible{outline:var(--border-width-500) solid var(--focus-color);outline-offset:2px}.sticky-stack-shade{background:var(--shade-color);border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:0}.sticky-stack-text{color:var(--muted-color);text-wrap:pretty;margin:0;font-size:15px;line-height:1.625}.sticky-stack-title{font-size:var(--font-size-600);font-weight:var(--font-weight-600);letter-spacing:-.025em;text-wrap:balance;margin:0}.sticky-stack-track{padding-bottom:calc(var(--viewport-height) - var(--card-height) - var(--first-top) - var(--last) * var(--step))}@media (prefers-reduced-motion:reduce){.sticky-stack-bar,.sticky-stack-dot{transition:none}.sticky-stack-card{will-change:auto}}}
+/*$vite$:1*/

package/build/components/story-progress/index.d.ts

@@ -0,0 +1,26 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const STORY_PROGRESS_TOGGLE: unique symbol;
+type A = Attributes & {
+    [STORY_PROGRESS_TOGGLE]?: Attributes;
+    duration?: number;
+    label?: string;
+    state?: State;
+    stories: Story[];
+};
+type State = {
+    index: number;
+    paused: boolean;
+};
+type Story = {
+    caption: string;
+    value: string;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { duration, label, state, stories, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly toggle: typeof STORY_PROGRESS_TOGGLE;
+};
+export default _default;
+export type { State as StoryProgressState, Story as StoryProgressStory };

package/build/components/story-progress/index.js

@@ -0,0 +1,196 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1iqg61i3 = template_u1.template(`<div aria-roledescription='stories' class='story-progress' role='region' tabindex='0'><div aria-hidden='true' class='story-progress-bars'></div><div class='story-progress-header'><span class='story-progress-count'></span><button class='story-progress-toggle ' type='button'><svg aria-hidden='true' class='story-progress-pause' fill='currentColor' viewBox='0 0 16 16'><rect height='10' rx='1' width='2.5' x='4' y='3' /><rect height='10' rx='1' width='2.5' x='9.5' y='3' /></svg><svg aria-hidden='true' class='story-progress-play' fill='currentColor' viewBox='0 0 16 16'><path d='M5.5 3.4v9.2a.6.6 0 0 0 .9.5l7-4.6a.6.6 0 0 0 0-1L6.4 2.9a.6.6 0 0 0-.9.5Z' /></svg></button></div><div class='story-progress-stories '><!--$--><p class='story-progress-sr'></p></div><div class='story-progress-zones'><button aria-label='Previous story' tabindex='-1' type='button'></button><button aria-label='Next story' tabindex='-1' type='button'>`);
+const template_1iqg61ie = template_u1.template(`<span class='story-progress-bar'><span class='story-progress-fill'>`);
+const template_1iqg61ih = template_u1.template(`<div aria-hidden='true' class='story-progress-story '><span class='story-progress-value'></span><span class='story-progress-caption'>`);
+class ReactiveObject_1iqg61i0 extends reactivity_u0.ReactiveObject {
+    #index = this[reactivity_u0.SIGNAL](0);
+    #paused = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v0) {
+        reactivity_u0.write(this.#index, _v0);
+    }
+    get paused() {
+        return reactivity_u0.read(this.#paused);
+    }
+    set paused(_v1) {
+        reactivity_u0.write(this.#paused, _v1);
+    }
+}
+class ReactiveObject_1iqg61i1 extends reactivity_u0.ReactiveObject {
+    #held = this[reactivity_u0.SIGNAL](false);
+    #hidden = this[reactivity_u0.SIGNAL](false);
+    #manual = this[reactivity_u0.SIGNAL](false);
+    #pressing = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get held() {
+        return reactivity_u0.read(this.#held);
+    }
+    set held(_v0) {
+        reactivity_u0.write(this.#held, _v0);
+    }
+    get hidden() {
+        return reactivity_u0.read(this.#hidden);
+    }
+    set hidden(_v1) {
+        reactivity_u0.write(this.#hidden, _v1);
+    }
+    get manual() {
+        return reactivity_u0.read(this.#manual);
+    }
+    set manual(_v2) {
+        reactivity_u0.write(this.#manual, _v2);
+    }
+    get pressing() {
+        return reactivity_u0.read(this.#pressing);
+    }
+    set pressing(_v3) {
+        reactivity_u0.write(this.#pressing, _v3);
+    }
+}
+const STORY_PROGRESS_TOGGLE = Symbol.for('@esportsplus/ui/story-progress.toggle');
+const DURATION = 4000;
+const HOLD = 200;
+function template({ duration = DURATION, label = 'Stories', state = new ReactiveObject_1iqg61i0(), stories, ...attributes }) {
+    let bound = this?.attributes, count = stories.length, fills = [], hold, stopPause, stopTimer, timer, view = new ReactiveObject_1iqg61i1();
+    function go(step) {
+        view.manual = true;
+        state.index = (state.index + step + count) % count;
+    }
+    function keydown(e) {
+        if (e.key === 'ArrowRight') {
+            go(1);
+        }
+        else if (e.key === 'ArrowLeft') {
+            go(-1);
+        }
+        else if (e.key === ' ' && !e.repeat) {
+            state.paused = !state.paused;
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+    }
+    function paused() {
+        return view.pressing || state.paused || view.hidden;
+    }
+    function release(navigate, e) {
+        clearTimeout(hold);
+        view.pressing = false;
+        if (view.held) {
+            view.held = false;
+            return;
+        }
+        if (!navigate || !e) {
+            return;
+        }
+        let box = e.currentTarget.getBoundingClientRect();
+        go(e.clientX < box.left + box.width / 2 ? -1 : 1);
+    }
+    return (() => {
+        let root_1iqg61i2 = template_1iqg61i3(), element_1iqg61i4 = root_1iqg61i2.firstChild, element_1iqg61i5 = element_1iqg61i4.firstElementChild, element_1iqg61i6 = element_1iqg61i5.nextElementSibling.firstElementChild, element_1iqg61i7 = element_1iqg61i6.nextElementSibling, element_1iqg61i8 = element_1iqg61i5.nextElementSibling.nextElementSibling, element_1iqg61i9 = element_1iqg61i8.firstChild, element_1iqg61ia = element_1iqg61i8.firstElementChild, element_1iqg61ib = element_1iqg61i8.nextElementSibling.firstElementChild, element_1iqg61ic = element_1iqg61ib.nextElementSibling;
+        template_u1.setProperty(element_1iqg61i4, 'aria-label', label);
+        template_u1.setProperties(element_1iqg61i4, bound);
+        template_u1.setProperties(element_1iqg61i4, attributes);
+        template_u1.onconnect(element_1iqg61i4, (element) => {
+            fills = Array.from(element.querySelectorAll('.story-progress-fill'));
+            stopTimer = effect(() => {
+                let fill = fills[state.index];
+                timer?.cancel();
+                if (!fill) {
+                    return;
+                }
+                let animation = fill.animate([{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }], { duration, easing: 'linear', fill: 'forwards' });
+                if (paused()) {
+                    animation.pause();
+                }
+                animation.onfinish = () => {
+                    view.manual = false;
+                    state.index = (state.index + 1) % count;
+                };
+                timer = animation;
+            });
+            stopPause = effect(() => {
+                let stop = paused();
+                if (!timer) {
+                    return;
+                }
+                if (stop) {
+                    timer.pause();
+                }
+                else if (timer.playState === 'paused') {
+                    timer.play();
+                }
+            });
+        });
+        template_u1.delegate(element_1iqg61i4, 'contextmenu', (e) => {
+            e.preventDefault();
+        });
+        template_u1.ondisconnect(element_1iqg61i4, () => {
+            clearTimeout(hold);
+            stopPause?.();
+            stopTimer?.();
+            timer?.cancel();
+        });
+        template_u1.ondocument(element_1iqg61i4, 'visibilitychange', () => {
+            view.hidden = document.hidden;
+        });
+        template_u1.delegate(element_1iqg61i4, 'keydown', keydown);
+        template_u1.delegate(element_1iqg61i4, 'pointercancel', () => release(false));
+        template_u1.delegate(element_1iqg61i4, 'pointerdown', (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            e.currentTarget.setPointerCapture(e.pointerId);
+            view.pressing = true;
+            hold = setTimeout(() => {
+                view.held = true;
+            }, HOLD);
+        });
+        template_u1.delegate(element_1iqg61i4, 'pointerup', (e) => release(true, e));
+        template_u1.slot(element_1iqg61i5, stories.map((_, i) => {
+            let root_1iqg61id = template_1iqg61ie(), element_1iqg61if = root_1iqg61id.firstChild.firstElementChild;
+            template_u1.setList(element_1iqg61if, 'style', () => `transform: scaleX(${i < state.index ? 1 : 0})`);
+            return root_1iqg61id;
+        }), 1);
+        new template_u1.EffectSlot(element_1iqg61i6, () => `${state.index + 1} / ${count}`, 1);
+        template_u1.setProperty(element_1iqg61i7, 'aria-label', () => state.paused ? 'Play' : 'Pause');
+        template_u1.setList(element_1iqg61i7, 'class', () => (view.held || state.paused) && '--paused');
+        template_u1.setProperties(element_1iqg61i7, bound?.[STORY_PROGRESS_TOGGLE]);
+        template_u1.setProperties(element_1iqg61i7, attributes[STORY_PROGRESS_TOGGLE]);
+        template_u1.delegate(element_1iqg61i7, 'click', () => {
+            state.paused = !state.paused;
+        });
+        template_u1.delegate(element_1iqg61i7, 'keydown', (e) => {
+            if (e.key !== ' ' && e.key !== 'Enter') {
+                keydown(e);
+            }
+        });
+        template_u1.delegate(element_1iqg61i7, 'pointerdown', () => { });
+        template_u1.delegate(element_1iqg61i7, 'pointerup', () => { });
+        template_u1.setList(element_1iqg61i8, 'class', () => (view.held || state.paused) && '--dimmed');
+        template_u1.slot(element_1iqg61i9, stories.map((story, i) => {
+            let root_1iqg61ig = template_1iqg61ih(), element_1iqg61ii = root_1iqg61ig.firstChild, element_1iqg61ij = element_1iqg61ii.firstElementChild, element_1iqg61ik = element_1iqg61ij.nextElementSibling;
+            template_u1.setList(element_1iqg61ii, 'class', () => state.index === i && '--active');
+            template_u1.slot(element_1iqg61ij, story.value, 1);
+            template_u1.slot(element_1iqg61ik, story.caption, 1);
+            return root_1iqg61ig;
+        }));
+        template_u1.setProperty(element_1iqg61ia, 'aria-live', () => view.manual ? 'polite' : 'off');
+        new template_u1.EffectSlot(element_1iqg61ia, () => `${stories[state.index].value}. ${stories[state.index].caption}`, 1);
+        template_u1.delegate(element_1iqg61ib, 'click', (e) => e.detail === 0 && go(-1));
+        template_u1.delegate(element_1iqg61ic, 'click', (e) => e.detail === 0 && go(1));
+        return root_1iqg61i2;
+    })();
+}
+export default Object.assign(template, { toggle: STORY_PROGRESS_TOGGLE });

package/build/components/story-progress/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.story-progress{--background:var(--color-grey-400);--bar-color:oklch(from var(--color-text-500) l c h / .15);--bar-height:3px;--box-shadow:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--color:var(--color-text-500);--dim-opacity:.6;--ease-out:cubic-bezier(.23, 1, .32, 1);--fill-color:var(--color-text-500);--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--height:480px;--max-width:320px;--muted-color:var(--color-text-300);--radius:24px;--spring:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1);--value-font-size:72px;background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--color);height:var(--height);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:min(var(--max-width), 100%);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.story-progress:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.story-progress-bar{background:var(--bar-color);height:var(--bar-height);border-radius:999px;flex:1;overflow:hidden}.story-progress-bars{gap:4px;padding:12px 12px 0;display:flex}.story-progress-caption{color:var(--muted-color);text-wrap:pretty;font-size:15px}.story-progress-count{color:var(--muted-color);font-variant-numeric:tabular-nums;font-size:12px}.story-progress-fill{background:var(--fill-color);transform-origin:0;border-radius:999px;height:100%;display:block}.story-progress-header{justify-content:space-between;align-items:center;height:44px;padding:0 16px;display:flex}.story-progress-pause,.story-progress-play{height:16px;transition:filter .3s var(--spring), opacity .3s var(--spring), scale .3s var(--spring);grid-area:1/1;width:16px}.story-progress-play,.story-progress-toggle.--paused .story-progress-pause{filter:blur(4px);opacity:0;scale:.25}.story-progress-toggle.--paused .story-progress-play{filter:blur();opacity:1;scale:1}.story-progress-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:0;position:absolute;overflow:hidden}.story-progress-stories{flex:1;transition:opacity .2s ease-out;position:relative}.story-progress-stories.--dimmed{opacity:var(--dim-opacity)}.story-progress-story{filter:blur(4px);opacity:0;transition:filter .15s var(--ease-out), opacity .15s var(--ease-out);flex-direction:column;justify-content:flex-end;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.story-progress-story.--active{filter:blur();opacity:1;transition:filter .25s var(--ease-out), opacity .25s var(--ease-out)}.story-progress-toggle{color:var(--muted-color);cursor:pointer;background:0 0;border:0;border-radius:999px;outline:none;place-items:center;width:40px;height:40px;margin-right:-8px;padding:0;transition:color .15s ease-out,scale .15s ease-out;display:grid}.story-progress-toggle:active{scale:.96}.story-progress-toggle:focus-visible{outline:2px solid var(--focus-ring-color)}.story-progress-toggle:hover{color:var(--color)}.story-progress-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;letter-spacing:-.025em;font-weight:500;line-height:1}.story-progress-zones{display:flex;position:absolute;inset:60px 0 0}.story-progress-zones button{background:0 0;border:0;outline:none;flex:1;padding:0}@media (prefers-reduced-motion:reduce){.story-progress-play,.story-progress-toggle.--paused .story-progress-pause,.story-progress-story{filter:none}.story-progress-pause,.story-progress-play{transition:opacity .3s var(--spring)}.story-progress-toggle{transition:color .15s ease-out}}}
+/*$vite$:1*/