@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,5 +1,6 @@
 import * as template_u1 from '@esportsplus/template';
 import { type Renderable } from '@esportsplus/template';
+import '../card/scss/index.scss';
 import './scss/index.scss';
 declare const _default: {
     (): Renderable<any>;
@@ -7,7 +8,7 @@ declare const _default: {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -713,18 +714,20 @@ declare const _default: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
-        actions?: Renderable<unknown>;
-        leading?: Renderable<unknown>;
-        subtitle?: string;
-        title: string;
+        after: Renderable<unknown>;
+        before: Renderable<unknown>;
     }>(attributes: T): Renderable<any>;
     <T extends Renderable<any>>(content: T): Renderable<any>;
     (attributes: {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -1430,18 +1433,20 @@ declare const _default: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
-        actions?: Renderable<unknown>;
-        leading?: Renderable<unknown>;
-        subtitle?: string;
-        title: string;
+        after: Renderable<unknown>;
+        before: Renderable<unknown>;
     }, content?: Renderable<any>): Renderable<any>;
     bind(context: {
         attributes?: Partial<{
             class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
             onconnect?: ((element: HTMLElement) => void) | undefined;
             ondisconnect?: ((element: HTMLElement) => void) | undefined;
-            onrender?: ((element: HTMLElement) => void) | undefined;
+            onfirstpaint?: ((element: HTMLElement) => void) | undefined;
             ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
             style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         } & {
@@ -2147,11 +2152,13 @@ declare const _default: {
             onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+        } & {
+            onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
         } & Record<PropertyKey, unknown> & {
-            actions?: Renderable<unknown>;
-            leading?: Renderable<unknown>;
-            subtitle?: string;
-            title: string;
+            after: Renderable<unknown>;
+            before: Renderable<unknown>;
         }> | undefined;
         content?: Renderable<any>;
     }): any;

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

@@ -1,98 +1,58 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
+import scrollbar from '../../css-utilities/scrollbar/index.js';
+import '../card/scss/index.scss';
 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'>`);
+const template_1k9qcfo2 = template_u1.template(`<div class='card sticky-header'><div class='sticky-header-scroll --scrollbar' role='region' tabindex='0'><div aria-hidden='true' class='sticky-header-spacer'></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-before'></div><div class='sticky-header-after'>`);
 class ReactiveObject_1k9qcfo0 extends reactivity_u0.ReactiveObject {
-    #condensed = this[reactivity_u0.SIGNAL](false);
+    #progress = this[reactivity_u0.SIGNAL](0);
     constructor() {
         super(null);
     }
-    get condensed() {
-        return reactivity_u0.read(this.#condensed);
+    get progress() {
+        return reactivity_u0.read(this.#progress);
     }
-    set condensed(_v0) {
-        reactivity_u0.write(this.#condensed, _v0);
+    set progress(_v0) {
+        reactivity_u0.write(this.#progress, _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);
+const SWAP = 0.5;
+let uid = 0;
+function fallback(fade) {
+    let range = 0, state = new ReactiveObject_1k9qcfo0();
+    return {
+        after: { inert: () => state.progress < SWAP },
+        before: { inert: () => state.progress >= SWAP },
+        root: {
+            onconnect: (element) => {
+                range = parseFloat(getComputedStyle(element).getPropertyValue('--sticky-header-range'));
+            },
+            style: () => `--sticky-header-progress: ${state.progress}`
+        },
+        scroll: {
+            ...fade,
+            onscroll: function () {
+                fade.onscroll?.call(this);
+                state.progress = Math.min(1, this.scrollTop / range);
+            }
         }
-        render(position);
-    }
+    };
+}
+export default component(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 (() => {
-        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;
+        let root_1k9qcfo1 = template_1k9qcfo2(), element_1k9qcfo3 = root_1k9qcfo1.firstChild, element_1k9qcfo4 = element_1k9qcfo3.firstElementChild, element_1k9qcfo5 = element_1k9qcfo4.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling, element_1k9qcfo6 = element_1k9qcfo5.nextElementSibling;
+        template_u1.slot(element_1k9qcfo4, content, 2);
+        template_u1.slot(element_1k9qcfo5, before, 1);
+        template_u1.slot(element_1k9qcfo6, after, 1);
+        template_u1.setProperties(element_1k9qcfo6, legacy?.after);
+        template_u1.setProperty(element_1k9qcfo5, 'id', id);
+        template_u1.setProperties(element_1k9qcfo5, legacy?.before);
+        template_u1.setProperty(element_1k9qcfo4, 'aria-labelledby', id);
+        template_u1.setProperties(element_1k9qcfo4, legacy?.scroll ?? fade);
         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);
+        template_u1.setProperties(element_1k9qcfo3, legacy?.root);
         return root_1k9qcfo1;
     })();
 });

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

@@ -1,2 +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}}
+@layer components{.sticky-header-bar{position:absolute;inset:0}.sticky-header-after,.sticky-header-before,.sticky-header-edge,.sticky-header-plate{position:absolute;inset:0 0 auto}.sticky-header-bar{border-radius:inherit;pointer-events:none}@property --sticky-header-progress{syntax:"<number>";inherits:true;initial-value:0}@property --sticky-header-range{syntax:"<length>";inherits:true;initial-value:0}.sticky-header{--background-default:var(--color-white-300);--border-color-default:var(--color-border-300);--border-radius:var(--border-radius-600);--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 / .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);--gutter:var(--size-400);--max-height:320px;--padding-top:12px;--sticky-header-range:max(64px, var(--travel) * 3);--travel:calc(var(--expanded-height) - var(--compact-height))}.sticky-header-bar{--lifted:clamp(0, var(--sticky-header-progress) / .12, 1);--offset:calc(var(--travel) * var(--sticky-header-progress))}.sticky-header-after{--reveal:clamp(0, (var(--sticky-header-progress) - .55) / .35, 1)}.sticky-header{timeline-scope:--sticky-header}.sticky-header-bar{overflow:clip}.sticky-header-after{height:var(--compact-height);opacity:var(--reveal);padding:0 var(--gutter);translate:0 calc((1 - var(--reveal)) * 6px);align-items:center;display:flex}.sticky-header-after :is(a,button,input,label,select,textarea,[tabindex]),.sticky-header-before :is(a,button,input,label,select,textarea,[tabindex]){pointer-events:auto}.sticky-header-before{opacity:clamp(0, 1 - var(--sticky-header-progress) / .45, 1);padding:var(--padding-top) var(--gutter) 0;scale:calc(1 - .05 * var(--sticky-header-progress));transform-origin:0 0;translate:0 calc(var(--offset) * -1)}.sticky-header-edge{opacity:var(--lifted);translate:0 calc(var(--expanded-height) - var(--offset))}.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-plate{background:var(--background);height:var(--expanded-height);translate:0 calc(var(--offset) * -1)}.sticky-header-scroll{border-radius:inherit;max-height:var(--max-height);scroll-padding-top:calc(var(--compact-height) + 10px);scroll-timeline:--sticky-header y;outline:none}.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-spacer{height:var(--expanded-height)}@supports (timeline-scope:none){.sticky-header-after,.sticky-header-bar,.sticky-header-before{animation-duration:1ms;animation-fill-mode:both;animation-range:0 var(--sticky-header-range);animation-timing-function:linear;animation-timeline:--sticky-header}.sticky-header-after{animation-name:sticky-header-after}.sticky-header-bar{animation-name:sticky-header-progress}.sticky-header-before{animation-name:sticky-header-before}}@keyframes sticky-header-after{0%,50%{visibility:hidden}}@keyframes sticky-header-before{50%,to{visibility:hidden}}@keyframes sticky-header-progress{0%{--sticky-header-progress:0}to{--sticky-header-progress:1}}}
 /*$vite$:1*/

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

@@ -0,0 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import '../frame/scss/index.scss';
+import './scss/index.scss';
+declare const STORY_TOGGLE: unique symbol;
+type A = Attributes & {
+    [STORY_TOGGLE]?: Attributes;
+    duration?: number;
+    label?: string;
+    state?: State;
+    stories: Renderable<unknown>[];
+};
+type State = {
+    index: number;
+    paused: boolean;
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly toggle: typeof STORY_TOGGLE;
+}>;
+export default _default;
+export type { State as StoryState };

package/build/components/story/index.js

@@ -0,0 +1,253 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { drag, INTERACTIVE } from '../../shared/drag.js';
+import pause from '@esportsplus/ui/svg/pause.svg';
+import play from '@esportsplus/ui/svg/play.svg';
+import '../frame/scss/index.scss';
+import './scss/index.scss';
+const template_1ugnadq3 = template_u1.template(`<div aria-roledescription='stories' class='story' role='region' tabindex='0'><div aria-hidden='true' class='story-bars'></div><div class='story-header'><span class='story-count'></span><button class='story-toggle ' type='button'><svg aria-hidden='true' class='story-pause'><use /></svg><svg aria-hidden='true' class='story-play'><use /></svg></button></div><div class='story-track '><!--$--><p class='story-sr'></p></div><div class='story-zones'><button aria-label='Previous story' class='story-zone' tabindex='-1' type='button'></button><button aria-label='Next story' class='story-zone' tabindex='-1' type='button'>`);
+const template_1ugnadqg = template_u1.template(`<span class='story-bar  '><span class='story-fill'>`);
+const template_1ugnadqk = template_u1.template(`<div aria-roledescription='story' class='story-slide frame frame--slide  ' role='group'>`);
+class ReactiveObject_1ugnadq0 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_1ugnadq1 extends reactivity_u0.ReactiveObject {
+    #dragging = this[reactivity_u0.SIGNAL](false);
+    #held = this[reactivity_u0.SIGNAL](false);
+    #hidden = this[reactivity_u0.SIGNAL](false);
+    #manual = this[reactivity_u0.SIGNAL](false);
+    #offset = this[reactivity_u0.SIGNAL](0);
+    #pressing = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get dragging() {
+        return reactivity_u0.read(this.#dragging);
+    }
+    set dragging(_v0) {
+        reactivity_u0.write(this.#dragging, _v0);
+    }
+    get held() {
+        return reactivity_u0.read(this.#held);
+    }
+    set held(_v1) {
+        reactivity_u0.write(this.#held, _v1);
+    }
+    get hidden() {
+        return reactivity_u0.read(this.#hidden);
+    }
+    set hidden(_v2) {
+        reactivity_u0.write(this.#hidden, _v2);
+    }
+    get manual() {
+        return reactivity_u0.read(this.#manual);
+    }
+    set manual(_v3) {
+        reactivity_u0.write(this.#manual, _v3);
+    }
+    get offset() {
+        return reactivity_u0.read(this.#offset);
+    }
+    set offset(_v4) {
+        reactivity_u0.write(this.#offset, _v4);
+    }
+    get pressing() {
+        return reactivity_u0.read(this.#pressing);
+    }
+    set pressing(_v5) {
+        reactivity_u0.write(this.#pressing, _v5);
+    }
+}
+const STORY_TOGGLE = Symbol.for('@esportsplus/ui/story.toggle');
+const HOLD = 200;
+const CONTROLS = `.story-slide :is(${INTERACTIVE}, [tabindex])`;
+const LOCK = 6;
+function template({ duration, label = 'Stories', state = new ReactiveObject_1ugnadq0(), stories, ...attributes }) {
+    let bound = this?.attributes, count = stories.length, dragged = false, fills = [], hold, press = null, view = new ReactiveObject_1ugnadq1();
+    let gesture = drag({
+        begin: () => {
+            let ways = [];
+            if (state.index < count - 1) {
+                ways.push({ axis: 'x', sign: -1 });
+            }
+            if (state.index > 0) {
+                ways.push({ axis: 'x', sign: 1 });
+            }
+            return ways;
+        },
+        capture: () => {
+            clearTimeout(hold);
+            dragged = true;
+            view.dragging = true;
+            view.held = false;
+        },
+        move: (element, { x }) => {
+            view.offset = x / element.offsetWidth;
+        },
+        release: (_, { x }, dismiss) => {
+            view.dragging = false;
+            view.offset = 0;
+            if (dismiss) {
+                go(x < 0 ? 1 : -1);
+            }
+        }
+    });
+    function go(step) {
+        view.manual = true;
+        if (step < 0 && state.index === 0) {
+            for (let animation of fills[0]?.getAnimations() ?? []) {
+                animation.currentTime = 0;
+            }
+            return;
+        }
+        state.index = (state.index + step) % 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 settle() {
+        clearTimeout(hold);
+        press = null;
+        view.pressing = false;
+    }
+    return (() => {
+        let root_1ugnadq2 = template_1ugnadq3(), element_1ugnadq4 = root_1ugnadq2.firstChild, element_1ugnadq5 = element_1ugnadq4.firstElementChild, element_1ugnadq6 = element_1ugnadq5.nextElementSibling.firstElementChild, element_1ugnadq7 = element_1ugnadq6.nextElementSibling, element_1ugnadq8 = element_1ugnadq7.firstElementChild.firstElementChild, element_1ugnadq9 = element_1ugnadq7.firstElementChild.nextElementSibling.firstElementChild, element_1ugnadqa = element_1ugnadq5.nextElementSibling.nextElementSibling, element_1ugnadqb = element_1ugnadqa.firstChild, element_1ugnadqc = element_1ugnadqa.firstElementChild, element_1ugnadqd = element_1ugnadqa.nextElementSibling.firstElementChild, element_1ugnadqe = element_1ugnadqd.nextElementSibling;
+        template_u1.slot(element_1ugnadq5, stories.map((_, i) => {
+            let root_1ugnadqf = template_1ugnadqg(), element_1ugnadqh = root_1ugnadqf.firstChild, element_1ugnadqi = element_1ugnadqh.firstElementChild;
+            template_u1.delegate(element_1ugnadqi, 'animationend', () => {
+                if (i !== state.index) {
+                    return;
+                }
+                view.manual = false;
+                state.index = (i + 1) % count;
+            });
+            template_u1.onconnect(element_1ugnadqi, (element) => {
+                fills[i] = element;
+            });
+            template_u1.setList(element_1ugnadqh, 'class', () => i < state.index && 'story-bar--done');
+            template_u1.setList(element_1ugnadqh, 'class', () => i === state.index && '--active');
+            return root_1ugnadqf;
+        }), 1);
+        new template_u1.EffectSlot(element_1ugnadq6, () => `${state.index + 1} / ${count}`, 1);
+        template_u1.slot(element_1ugnadqb, stories.map((story, i) => {
+            let root_1ugnadqj = template_1ugnadqk(), element_1ugnadql = root_1ugnadqj.firstChild;
+            template_u1.slot(element_1ugnadql, story, 1);
+            template_u1.setProperty(element_1ugnadql, 'aria-label', `${i + 1} of ${count}`);
+            template_u1.setList(element_1ugnadql, 'class', () => state.index === i && '--active');
+            template_u1.setList(element_1ugnadql, 'class', () => view.dragging && 'story-slide--dragging');
+            template_u1.setList(element_1ugnadql, 'style', `--n: ${i}`);
+            template_u1.setProperty(element_1ugnadql, 'aria-hidden', () => String(state.index !== i));
+            template_u1.setProperty(element_1ugnadql, 'inert', () => state.index !== i);
+            return root_1ugnadqj;
+        }));
+        new template_u1.EffectSlot(element_1ugnadqc, () => `Story ${state.index + 1} of ${count}`, 1);
+        template_u1.delegate(element_1ugnadqe, 'click', (e) => e.detail === 0 && go(1));
+        template_u1.delegate(element_1ugnadqd, 'click', (e) => e.detail === 0 && go(-1));
+        template_u1.setProperty(element_1ugnadqc, 'aria-live', () => view.manual ? 'polite' : 'off');
+        template_u1.setList(element_1ugnadqa, 'class', () => (view.held || state.paused) && 'story-track--dimmed');
+        template_u1.setList(element_1ugnadqa, 'style', () => `--i: ${state.index - view.offset}`);
+        template_u1.setProperty(element_1ugnadq9, 'href', template_u1.interpolate(["#", (play)]));
+        template_u1.setProperty(element_1ugnadq8, 'href', template_u1.interpolate(["#", (pause)]));
+        template_u1.setProperty(element_1ugnadq7, 'aria-label', () => state.paused ? 'Play' : 'Pause');
+        template_u1.setList(element_1ugnadq7, 'class', () => (view.held || state.paused) && 'story-toggle--paused');
+        template_u1.setProperties(element_1ugnadq7, bound?.[STORY_TOGGLE]);
+        template_u1.setProperties(element_1ugnadq7, attributes[STORY_TOGGLE]);
+        template_u1.delegate(element_1ugnadq7, 'click', () => {
+            state.paused = !state.paused;
+        });
+        template_u1.delegate(element_1ugnadq7, 'keydown', (e) => {
+            if (e.key !== ' ' && e.key !== 'Enter') {
+                keydown(e);
+            }
+        });
+        template_u1.delegate(element_1ugnadq7, 'pointerdown', () => { });
+        template_u1.delegate(element_1ugnadq7, 'pointerup', () => { });
+        template_u1.setProperty(element_1ugnadq4, 'aria-label', label);
+        template_u1.setProperties(element_1ugnadq4, bound);
+        template_u1.setProperties(element_1ugnadq4, attributes);
+        template_u1.setList(element_1ugnadq4, 'class', () => (view.pressing || state.paused || view.hidden) && 'story--paused');
+        template_u1.delegate(element_1ugnadq4, 'contextmenu', (e) => {
+            e.preventDefault();
+        });
+        template_u1.ondisconnect(element_1ugnadq4, () => {
+            clearTimeout(hold);
+        });
+        template_u1.ondocument(element_1ugnadq4, 'visibilitychange', () => {
+            view.hidden = document.hidden;
+        });
+        template_u1.delegate(element_1ugnadq4, 'keydown', keydown);
+        template_u1.delegate(element_1ugnadq4, 'pointercancel', (e) => {
+            gesture.onpointercancel(e);
+            settle();
+            view.held = false;
+        });
+        template_u1.delegate(element_1ugnadq4, 'pointerdown', (e) => {
+            if (e.button !== 0 || e.target.closest(CONTROLS)) {
+                return;
+            }
+            dragged = false;
+            gesture.onpointerdown(e);
+            e.currentTarget.setPointerCapture(e.pointerId);
+            press = { moved: false, pointer: e.pointerId, x: e.clientX, y: e.clientY };
+            view.pressing = true;
+            hold = setTimeout(() => {
+                view.held = true;
+            }, HOLD);
+        });
+        template_u1.delegate(element_1ugnadq4, 'pointermove', (e) => {
+            gesture.onpointermove(e);
+            if (press && press.pointer === e.pointerId && Math.hypot(e.clientX - press.x, e.clientY - press.y) >= LOCK) {
+                press.moved = true;
+            }
+        });
+        template_u1.delegate(element_1ugnadq4, 'pointerup', (e) => {
+            let current = press;
+            gesture.onpointerup(e);
+            settle();
+            if (!current || current.pointer !== e.pointerId || dragged) {
+                return;
+            }
+            if (view.held) {
+                view.held = false;
+                return;
+            }
+            if (current.moved) {
+                return;
+            }
+            let box = e.currentTarget.getBoundingClientRect();
+            go(e.clientX < box.left + box.width / 3 ? -1 : 1);
+        });
+        template_u1.setList(element_1ugnadq4, 'style', duration !== undefined && `--duration: ${duration}ms`);
+        return root_1ugnadq2;
+    })();
+}
+export default component(template, { toggle: STORY_TOGGLE });

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

@@ -0,0 +1,2 @@
+@layer components{.story-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.story-pause,.story-play{filter:blur(4px);opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.story-pause,.story-play{transition:none}}.story-toggle:not(.story-toggle--paused) .story-pause,.story-toggle--paused .story-play{filter:blur();opacity:1;scale:1}.story{--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;--duration:4s;--fill-color:var(--color-text-500);--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--height:480px;--icon-swap-duration:.3s;--icon-swap-timing-function:var(--spring);--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)}.story-slide.frame{--opacity:1}.story{background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--color);height:var(--height);touch-action:pan-y;-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:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.story--paused{--play-state:paused}.story-bar{background:var(--bar-color);height:var(--bar-height);border-radius:999px;flex:1;overflow:hidden}.story-bar--done{--scale:1}.story-bar.--active{--fill-animation:story-fill var(--duration) linear forwards var(--play-state,running)}.story-bars{gap:4px;padding:12px 12px 0;display:flex}.story-count{color:var(--muted-color);font-variant-numeric:tabular-nums;font-size:12px}.story-fill{animation:var(--fill-animation,none);background:var(--fill-color);height:100%;transform:scaleX(var(--scale,0));transform-origin:0;border-radius:999px;display:block}.story-header{justify-content:space-between;align-items:center;height:44px;padding:0 16px;display:flex}.story-pause,.story-play{grid-area:1/1;width:16px;height:16px}.story-slide{min-height:0;overflow:hidden}.story-slide--dragging.frame{transition:none}.story-sr{margin:0}.story-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-toggle:active{scale:.96}.story-toggle:focus-visible{outline:2px solid var(--focus-ring-color)}.story-toggle:hover{color:var(--color)}.story-track{z-index:1;flex:1;min-height:0;transition:opacity .2s ease-out;position:relative}.story-track--dimmed{opacity:var(--dim-opacity)}.story-zone{background:0 0;border:0;outline:none;flex:1;padding:0}.story-zone:last-child{flex:2}.story-zones{display:flex;position:absolute;inset:60px 0 0}@media (prefers-reduced-motion:reduce){.story-toggle{transition:color .15s ease-out}}@keyframes story-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}}
+/*$vite$:1*/

package/build/components/surface-field/engine.d.ts

@@ -0,0 +1,65 @@
+type Camera = {
+    x: number;
+    y: number;
+    zoom: number;
+};
+type Link = {
+    motion: 'bounce' | 'loop' | 'still';
+    points: number[];
+    speed: number;
+    width: number;
+};
+type Rgb = [number, number, number];
+type Scheduler = {
+    cancel(handle: number): void;
+    clear(handle: number): void;
+    frame(callback: () => void): number;
+    now(): number;
+    timer(callback: () => void, ms: number): number;
+};
+type Settings = {
+    base: number;
+    breathe: number;
+    brightness: number;
+    connected: boolean;
+    gap: number;
+    lineRadius: number;
+    pointerPush: number;
+    radius: number;
+    ripplePush: number;
+    still: boolean;
+    surfacePadding: number;
+    tint: number;
+    wander: boolean;
+};
+type Shape = {
+    active: boolean;
+    ellipse: boolean;
+    height: number;
+    id: string;
+    radius: number;
+    rotation: number;
+    width: number;
+    x: number;
+    y: number;
+};
+declare const engine: (canvas: HTMLCanvasElement | OffscreenCanvas, scheduler: Scheduler) => {
+    camera(next: Camera | null): void;
+    cancel(id: number): void;
+    configure(next: Settings): void;
+    dispose(): void;
+    flush(): void;
+    links(next: Link[]): void;
+    pointer(id: number, x: number, y: number, inside: boolean): void;
+    press(id: number, x: number, y: number): void;
+    recolor(nextBase: Rgb, nextAccent: Rgb): void;
+    release(id: number): void;
+    resize(width: number, height: number, dpr: number): void;
+    ripple(x: number, y: number): void;
+    surfaces(next: Shape[]): void;
+    visible(next: boolean): void;
+};
+declare const scheduler: () => Scheduler;
+export default engine;
+export { scheduler };
+export type { Camera, Link, Rgb, Settings, Shape };