@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/onboarding-checklist/index.js

@@ -1,196 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { untrack } from '@esportsplus/reactivity';
-import accordion from '../accordion/index.js';
-import checkbox, { factory } from '../checkbox/index.js';
-import './scss/index.scss';
-const template_0w6v5475 = template_u1.template(`<li class='onboarding-checklist-task'><div class='onboarding-checklist-row'><label class='onboarding-checklist-toggle'></label><button class='onboarding-checklist-summary' type='button'><span class='onboarding-checklist-title'><!--$--><span class='onboarding-checklist-strike' aria-hidden='true'></span></span><svg aria-hidden='true' class='onboarding-checklist-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4 6 4 4 4-4' />`);
-const template_0w6v547b = template_u1.template(`<div class='onboarding-checklist-body'><p class='onboarding-checklist-description'></p><button class='button onboarding-checklist-action' type='button'><span class='onboarding-checklist-action-label'></span><span class='onboarding-checklist-action-label onboarding-checklist-action-label--done'><!--$--><span>Done`);
-const template_0w6v547h = template_u1.template(`<svg aria-hidden='true' class='onboarding-checklist-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' />`);
-const template_0w6v547j = template_u1.template(`<section aria-label='Get started' class='onboarding-checklist'><header class='onboarding-checklist-header'><div class='onboarding-checklist-heading'><h2 class='onboarding-checklist-heading-title'>Get started</h2><p class='onboarding-checklist-heading-count'></p></div><div aria-label='Setup progress' aria-valuemax='100' aria-valuemin='0' class='onboarding-checklist-ring' role='progressbar'><svg aria-hidden='true' viewBox='0 0 48 48'><circle class='onboarding-checklist-ring-track' cx='24' cy='24' fill='none' r='20' stroke-width='4' /><circle class='onboarding-checklist-ring-fill' cx='24' cy='24' fill='none' pathLength='1' r='20' stroke-linecap='round' stroke-width='4' /></svg><span class='onboarding-checklist-ring-value'><!--$--><span>%</span></span></div></header><!--$--><!--$--><p class='onboarding-checklist-live' aria-live='polite'>`);
-const template_0w6v547s = template_u1.template(`<ul class='onboarding-checklist-list'>`);
-const template_0w6v547v = template_u1.template(`<div class='onboarding-checklist-celebration'><h3 class='onboarding-checklist-celebration-title'>You're all set</h3><p class='onboarding-checklist-celebration-note'> Your workspace is ready. You can find these steps again any time in Settings. </p><div class='onboarding-checklist-celebration-actions'><button class='button onboarding-checklist-action' type='button'> Dismiss `);
-class ReactiveObject_0w6v5470 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
-class ReactiveObject_0w6v5471 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](true);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
-class ReactiveObject_0w6v5472 extends reactivity_u0.ReactiveObject {
-    #active;
-    #done;
-    constructor(_p0, _p1) {
-        super(null);
-        this.#active = this[reactivity_u0.SIGNAL](_p0);
-        this.#done = this[reactivity_u0.SIGNAL](_p1);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-    get done() {
-        return reactivity_u0.read(this.#done);
-    }
-    set done(_v1) {
-        reactivity_u0.write(this.#done, _v1);
-    }
-}
-class ReactiveObject_0w6v5473 extends reactivity_u0.ReactiveObject {
-    #announcement = this[reactivity_u0.SIGNAL]('');
-    #shown;
-    constructor(_p0) {
-        super(null);
-        this.#shown = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get announcement() {
-        return reactivity_u0.read(this.#announcement);
-    }
-    set announcement(_v0) {
-        reactivity_u0.write(this.#announcement, _v0);
-    }
-    get shown() {
-        return reactivity_u0.read(this.#shown);
-    }
-    set shown(_v1) {
-        reactivity_u0.write(this.#shown, _v1);
-    }
-}
-const CELEBRATE_AFTER = 700;
-const ONBOARDING_CHECKLIST_TASK = Symbol.for('@esportsplus/ui/onboarding-checklist.task');
-const STIFFNESS = (2 * Math.PI / 0.6) ** 2;
-const DAMPING = 2 * Math.sqrt(STIFFNESS);
-function check() {
-    return template_0w6v547h();
-}
-function template({ done = [], ondismiss, open = [], state, tasks, ...attributes }) {
-    let celebration = new ReactiveObject_0w6v5470(), count = tasks.filter((task) => done.includes(task.id)).length, defaults = this?.attributes, frame = 0, list = new ReactiveObject_0w6v5471(), prefix = `onboarding-checklist-${Math.random().toString(36).slice(2, 8)}`, rows = tasks.map((task) => new ReactiveObject_0w6v5472(open.includes(task.id), done.includes(task.id))), s = state || reactivity_u0.reactive({ celebrating: false, count }), timer, ui = new ReactiveObject_0w6v5473(count / tasks.length), velocity = 0;
-    s.count = count;
-    function celebrate() {
-        clearTimeout(timer);
-        if (s.count !== tasks.length) {
-            return;
-        }
-        timer = setTimeout(() => {
-            celebration.active = true;
-            list.active = false;
-            s.celebrating = true;
-            ui.announcement = 'All tasks complete. You\'re all set.';
-        }, CELEBRATE_AFTER);
-    }
-    function ring() {
-        cancelAnimationFrame(frame);
-        let previous = performance.now(), target = s.count / tasks.length;
-        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            ui.shown = target;
-            velocity = 0;
-            return;
-        }
-        function step(now) {
-            let dt = Math.min((now - previous) / 1000, 1 / 30);
-            previous = now;
-            velocity += (STIFFNESS * (target - ui.shown) - DAMPING * velocity) * dt;
-            ui.shown += velocity * dt;
-            if (Math.abs(target - ui.shown) < 0.0005 && Math.abs(velocity) < 0.001) {
-                ui.shown = target;
-                velocity = 0;
-                return;
-            }
-            frame = requestAnimationFrame(step);
-        }
-        frame = requestAnimationFrame(step);
-    }
-    function row(task, index) {
-        let id = `${prefix}-${index}`, state = rows[index];
-        return (() => {
-            let root_0w6v5474 = template_0w6v5475(), element_0w6v5476 = root_0w6v5474.firstChild, element_0w6v5477 = element_0w6v5476.firstElementChild.firstElementChild, element_0w6v5478 = element_0w6v5477.nextElementSibling, element_0w6v5479 = element_0w6v5478.firstElementChild.firstChild;
-            template_u1.setProperties(element_0w6v5476, defaults?.[ONBOARDING_CHECKLIST_TASK]);
-            template_u1.setProperties(element_0w6v5476, attributes[ONBOARDING_CHECKLIST_TASK]);
-            template_u1.setList(element_0w6v5476, 'class', () => `${state.done ? '--done' : ''} ${state.active ? '--open' : ''}`);
-            template_u1.slot(element_0w6v5477, checkbox({
-                class: 'onboarding-checklist-checkbox',
-                [factory.input]: {
-                    'aria-label': task.title,
-                    checked: () => state.done,
-                    onchange: (e) => toggle(index, e.target.checked)
-                }
-            }), 1);
-            template_u1.setProperty(element_0w6v5478, 'aria-controls', id);
-            template_u1.setProperty(element_0w6v5478, 'aria-expanded', () => String(state.active));
-            template_u1.delegate(element_0w6v5478, 'click', () => {
-                state.active = !state.active;
-            });
-            template_u1.slot(element_0w6v5479, task.title);
-            template_u1.slot(element_0w6v5476, accordion({ class: 'onboarding-checklist-details', id, state }, (() => {
-                let root_0w6v547a = template_0w6v547b(), element_0w6v547c = root_0w6v547a.firstChild.firstElementChild, element_0w6v547d = element_0w6v547c.nextElementSibling, element_0w6v547e = element_0w6v547d.firstElementChild, element_0w6v547f = element_0w6v547e.nextElementSibling, element_0w6v547g = element_0w6v547f.firstChild;
-                template_u1.slot(element_0w6v547c, task.description, 1);
-                template_u1.setProperty(element_0w6v547d, 'aria-disabled', () => String(state.done));
-                template_u1.delegate(element_0w6v547d, 'click', () => {
-                    if (!state.done) {
-                        toggle(index, true);
-                    }
-                });
-                template_u1.setProperty(element_0w6v547e, 'aria-hidden', () => String(state.done));
-                template_u1.slot(element_0w6v547e, task.action, 1);
-                template_u1.setProperty(element_0w6v547f, 'aria-hidden', () => String(!state.done));
-                template_u1.slot(element_0w6v547g, check());
-                return root_0w6v547a;
-            })()), 2);
-            return root_0w6v5474;
-        })();
-    }
-    function toggle(index, value) {
-        rows[index].done = value;
-        s.count = rows.filter((row) => row.done).length;
-        ui.announcement = `${tasks[index].title} ${value ? 'done' : 'not done'}. ${s.count} of ${tasks.length} complete.`;
-        ring();
-        celebrate();
-    }
-    return (() => {
-        let root_0w6v547i = template_0w6v547j(), element_0w6v547k = root_0w6v547i.firstChild, element_0w6v547l = element_0w6v547k.firstElementChild.firstElementChild.firstElementChild.nextElementSibling, element_0w6v547m = element_0w6v547k.firstElementChild.firstElementChild.nextElementSibling, element_0w6v547n = element_0w6v547m.firstElementChild.nextElementSibling.firstChild, element_0w6v547o = element_0w6v547k.firstChild.nextSibling, element_0w6v547p = element_0w6v547o.nextSibling, element_0w6v547q = element_0w6v547k.firstElementChild.nextElementSibling;
-        template_u1.setProperties(element_0w6v547k, defaults);
-        template_u1.setProperties(element_0w6v547k, attributes);
-        template_u1.setList(element_0w6v547k, 'class', () => s.celebrating && '--celebrating');
-        template_u1.onconnect(element_0w6v547k, () => untrack(celebrate));
-        template_u1.ondisconnect(element_0w6v547k, () => {
-            cancelAnimationFrame(frame);
-            clearTimeout(timer);
-        });
-        new template_u1.EffectSlot(element_0w6v547l, () => `${s.count} of ${tasks.length} complete`, 1);
-        template_u1.setProperty(element_0w6v547m, 'aria-valuenow', () => Math.round(s.count / tasks.length * 100));
-        template_u1.setList(element_0w6v547m, 'style', () => `--progress: ${ui.shown};`);
-        new template_u1.EffectSlot(element_0w6v547n, () => Math.round(ui.shown * 100));
-        template_u1.slot(element_0w6v547o, accordion({ class: 'onboarding-checklist-collapse', state: list }, (() => {
-            let root_0w6v547r = template_0w6v547s(), element_0w6v547t = root_0w6v547r.firstChild;
-            template_u1.slot(element_0w6v547t, tasks.map(row), 1);
-            return root_0w6v547r;
-        })()));
-        template_u1.slot(element_0w6v547p, accordion({ class: 'onboarding-checklist-collapse', state: celebration }, (() => {
-            let root_0w6v547u = template_0w6v547v(), element_0w6v547w = root_0w6v547u.firstChild.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild;
-            template_u1.delegate(element_0w6v547w, 'click', () => ondismiss?.());
-            return root_0w6v547u;
-        })()));
-        new template_u1.EffectSlot(element_0w6v547q, () => ui.announcement, 1);
-        return root_0w6v547i;
-    })();
-}
-export default Object.assign(template, { task: ONBOARDING_CHECKLIST_TASK });

package/build/components/onboarding-checklist/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.onboarding-checklist{--accent:var(--color-text-500);--accent-contrast:var(--color-white-300);--background:var(--color-grey-400);--box-shadow:0 0 0 1px 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);--color-muted:var(--color-text-300);--ease:cubic-bezier(.23, 1, .32, 1);--focus-ring:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--font-size-title:calc(var(--font-size-400) * .9375);--foreground:var(--color-text-500);--hover:oklch(from var(--color-text-500) l c h / .04);--pressed:oklch(from var(--color-text-500) l c h / .06);--radius:20px;--ring-track:oklch(from var(--color-text-500) l c h / .1);--width:min(400px, 100%);background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--foreground);font-size:var(--font-size);width:var(--width);display:block;overflow:hidden}.onboarding-checklist-action{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:16px;--padding-vertical:0px;font-size:var(--font-size);font-weight:var(--font-weight-500);outline:0 solid var(--focus-ring);outline-offset:2px;-webkit-user-select:none;user-select:none;border-radius:999px;height:36px;display:grid}.onboarding-checklist-action:focus-visible{outline-width:2px}.onboarding-checklist-action:active{scale:.96}.--done .onboarding-checklist-action{--background-default:var(--pressed);--color-default:var(--color-muted);cursor:default;scale:1}.onboarding-checklist-action-label{grid-area:1/1;justify-content:center;align-items:center;gap:6px;transition:filter .2s ease-out,opacity .2s ease-out;display:flex}.--done .onboarding-checklist-action-label,.onboarding-checklist-action-label--done{filter:blur(4px);opacity:0}.--done .onboarding-checklist-action-label--done{filter:none;opacity:1}.onboarding-checklist-action-label--done .onboarding-checklist-icon{filter:blur(4px);opacity:0;transition:filter .3s var(--ease), opacity .3s var(--ease), scale .3s var(--ease);scale:.25}.--done .onboarding-checklist-action-label--done .onboarding-checklist-icon{filter:none;opacity:1;scale:1}.onboarding-checklist-body{filter:blur(4px);opacity:0;flex-direction:column;align-items:flex-start;gap:12px;padding:0 12px 16px 44px;transition:filter .15s ease-out,opacity .15s ease-out,translate .15s ease-out;display:flex;translate:0 -4px}.accordion.--active>.accordion-content>.onboarding-checklist-body{filter:none;opacity:1;transition-duration:.25s;translate:0}.onboarding-checklist-celebration{flex-direction:column;align-items:flex-start;gap:4px;padding:4px 20px 20px;display:flex}.onboarding-checklist-celebration-actions{margin-top:12px}.onboarding-checklist-celebration-note{color:var(--color-muted);text-wrap:pretty;line-height:20px}.onboarding-checklist-celebration-title{color:var(--foreground);font-size:calc(var(--font-size-400) * 1.0625);font-weight:var(--font-weight-600);letter-spacing:-.01em}.--celebrating .onboarding-checklist-celebration>*{animation:onboarding-checklist-enter .4s var(--ease) both}.--celebrating .onboarding-checklist-celebration>:nth-child(2){animation-delay:.2s}.--celebrating .onboarding-checklist-celebration>:nth-child(3){animation-delay:.28s}.--celebrating .onboarding-checklist-celebration>:first-child{animation-delay:.12s}.onboarding-checklist-checkbox{--background-active:var(--accent);--border-color-active:var(--accent);--border-color-default:oklch(from var(--color-muted) l c h / .6);--border-color-hover:var(--color-muted);--border-radius:6px;--border-width:1.5px;--border-width-offset-hover:0px;--box-shadow-active:none;--check-size:75%;--check-stroke-width:3;--focus-color:var(--focus-ring);--indicator-color-default:var(--accent-contrast);--size:20px;--transition-duration:.15s;--transition-timing-function:ease-out;transition-property:background,border-color,scale}.onboarding-checklist-toggle:active .onboarding-checklist-checkbox{scale:.96}.onboarding-checklist-chevron{color:var(--color-muted);height:16px;transition:rotate .2s var(--ease);flex-shrink:0;width:16px}.--open .onboarding-checklist-chevron{rotate:180deg}.onboarding-checklist-collapse,.onboarding-checklist-details{transition:grid-template-rows .2s var(--ease)}.onboarding-checklist-collapse.--active,.onboarding-checklist-details.--active{transition-duration:.3s}.onboarding-checklist-description{color:var(--color-muted);text-wrap:pretty;line-height:20px}.onboarding-checklist-details.--active{transition-duration:.25s}.onboarding-checklist-header{justify-content:space-between;align-items:center;gap:16px;padding:20px 20px 12px;display:flex}.onboarding-checklist-heading{flex-direction:column;gap:2px;min-width:0;display:flex}.onboarding-checklist-heading-count{color:var(--color-muted);font-variant-numeric:tabular-nums}.onboarding-checklist-heading-title{color:var(--foreground);font-size:calc(var(--font-size-400) * 1.125);font-weight:var(--font-weight-600);letter-spacing:-.01em}.onboarding-checklist-list{margin:0;padding:0 8px 8px;list-style:none}.onboarding-checklist-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.onboarding-checklist-icon{width:16px;height:16px}.onboarding-checklist-ring{flex-shrink:0;place-items:center;width:48px;height:48px;display:grid;position:relative}.onboarding-checklist-ring svg{position:absolute;inset:0;rotate:-90deg}.onboarding-checklist-ring-fill{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--progress))}.onboarding-checklist-ring-track{stroke:var(--ring-track)}.onboarding-checklist-ring-value{font-size:calc(var(--font-size-400) * .6875);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500);position:relative}.onboarding-checklist-ring-value span{color:var(--color-muted)}.onboarding-checklist-row{align-items:center;display:flex}.onboarding-checklist-strike{transform-origin:0;height:1px;transition:scale .15s var(--ease);background:currentColor;width:100%;position:absolute;top:50%;left:0;scale:0 1}.--done .onboarding-checklist-strike{transition-duration:.3s;scale:1}.onboarding-checklist-summary{color:inherit;cursor:pointer;font:inherit;outline:0 solid var(--focus-ring);text-align:left;background:0 0;border:0;border-radius:10px;flex:1 1 0;justify-content:space-between;align-items:center;gap:12px;min-width:0;height:48px;padding:0 12px 0 4px;transition:background-color .15s ease-out;display:flex}.onboarding-checklist-summary:active{background:var(--pressed)}.onboarding-checklist-summary:focus-visible{outline-width:2px}@media (hover:hover){.onboarding-checklist-summary:hover:not(:active){background:var(--hover)}}.onboarding-checklist-title{color:var(--foreground);font-size:var(--font-size-title);text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:color .2s ease-out;position:relative;overflow:hidden}.--done .onboarding-checklist-title{color:var(--color-muted)}.onboarding-checklist-toggle{cursor:pointer;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid;position:relative}@media (prefers-reduced-motion:reduce){.onboarding-checklist-action-label--done .onboarding-checklist-icon,.onboarding-checklist-body{filter:none;translate:0;scale:1}.onboarding-checklist-chevron,.onboarding-checklist-collapse,.onboarding-checklist-details,.onboarding-checklist-strike{transition:none}.--celebrating .onboarding-checklist-celebration>*{animation-name:onboarding-checklist-fade}.onboarding-checklist-checkbox{transition-property:background,border-color}}@keyframes onboarding-checklist-enter{0%{filter:blur(4px);opacity:0;translate:0 6px}}@keyframes onboarding-checklist-fade{0%{opacity:0}}}
-/*$vite$:1*/

package/build/components/page-dots/index.d.ts

@@ -1,24 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [PAGE_DOTS_DOT]?: Attributes;
-    autoplay?: number;
-    count: number;
-    onelapsed?: (active: number) => void;
-    onpage?: (index: number) => void;
-    state?: State;
-};
-type State = {
-    active: number;
-    progress: number;
-    running: boolean;
-};
-declare const PAGE_DOTS_DOT: unique symbol;
-declare function template(this: {
-    attributes?: Partial<A>;
-} | void, { autoplay, count, onelapsed, onpage, state, ...attributes }: A): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly dot: typeof PAGE_DOTS_DOT;
-};
-export default _default;
-export type { State };

package/build/components/page-dots/index.js

@@ -1,116 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_1b0apwb3 = template_u1.template(`<div aria-label='Pages' class='page-dots ' role='group'><!--$--><span aria-hidden='true' class='page-dots-pill'>`);
-const template_1b0apwb8 = template_u1.template(`<button class='page-dots-dot' type='button'><span class='page-dots-mark'>`);
-const template_1b0apwbb = template_u1.template(`<span class='page-dots-fill'>`);
-class ReactiveObject_1b0apwb0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](0);
-    #progress = this[reactivity_u0.SIGNAL](0);
-    #running = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-    get progress() {
-        return reactivity_u0.read(this.#progress);
-    }
-    set progress(_v1) {
-        reactivity_u0.write(this.#progress, _v1);
-    }
-    get running() {
-        return reactivity_u0.read(this.#running);
-    }
-    set running(_v2) {
-        reactivity_u0.write(this.#running, _v2);
-    }
-}
-class ReactiveObject_1b0apwb1 extends reactivity_u0.ReactiveObject {
-    #connected = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get connected() {
-        return reactivity_u0.read(this.#connected);
-    }
-    set connected(_v0) {
-        reactivity_u0.write(this.#connected, _v0);
-    }
-}
-const PAGE_DOTS_DOT = Symbol.for('@esportsplus/ui/page-dots.dot');
-const SETTLE = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
-function template({ autoplay, count, onelapsed, onpage, state = new ReactiveObject_1b0apwb0(), ...attributes }) {
-    let element, fill, local = new ReactiveObject_1b0apwb1(), settle, stops = [
-        effect(() => {
-            let active = Math.min(Math.max(Math.round(state.progress), 0), count - 1);
-            element?.style.setProperty('--progress', String(state.progress));
-            if (state.active !== active) {
-                state.active = active;
-            }
-        }),
-        effect((cleanup) => {
-            let active = state.active, running = local.connected && state.running;
-            if (!autoplay || !fill || !running) {
-                return;
-            }
-            let target = fill;
-            settle?.cancel();
-            let countdown = target.animate([{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }], { duration: autoplay, easing: 'linear' });
-            countdown.onfinish = () => onelapsed?.(active);
-            cleanup(() => {
-                countdown.onfinish = null;
-                if (countdown.playState !== 'running') {
-                    return;
-                }
-                let from = getComputedStyle(target).transform;
-                countdown.cancel();
-                settle = target.animate([{ transform: from }, { transform: 'scaleX(1)' }], SETTLE);
-            });
-        })
-    ];
-    onCleanup(() => {
-        settle?.cancel();
-        for (let i = 0, n = stops.length; i < n; i++) {
-            stops[i]();
-        }
-    });
-    return (() => {
-        let root_1b0apwb2 = template_1b0apwb3(), element_1b0apwb4 = root_1b0apwb2.firstChild, element_1b0apwb5 = element_1b0apwb4.firstChild, element_1b0apwb6 = element_1b0apwb4.firstElementChild;
-        template_u1.setList(element_1b0apwb4, 'class', autoplay && 'page-dots--autoplay');
-        template_u1.setList(element_1b0apwb4, 'style', `--count: ${count}; --progress: ${state.progress};`);
-        template_u1.setProperties(element_1b0apwb4, this?.attributes);
-        template_u1.setProperties(element_1b0apwb4, attributes);
-        template_u1.onconnect(element_1b0apwb4, () => {
-            local.connected = true;
-        });
-        template_u1.ondisconnect(element_1b0apwb4, () => {
-            local.connected = false;
-        });
-        template_u1.onrender(element_1b0apwb4, (el) => {
-            element = el;
-        });
-        template_u1.slot(element_1b0apwb5, Array.from({ length: count }, (_, i) => {
-            let root_1b0apwb7 = template_1b0apwb8(), element_1b0apwb9 = root_1b0apwb7.firstChild;
-            template_u1.setProperty(element_1b0apwb9, 'aria-current', () => state.active === i && 'page');
-            template_u1.setProperty(element_1b0apwb9, 'aria-label', `Page ${i + 1} of ${count}`);
-            template_u1.delegate(element_1b0apwb9, 'click', () => onpage?.(i));
-            template_u1.setList(element_1b0apwb9, 'style', `--index: ${i};`);
-            template_u1.setProperties(element_1b0apwb9, this?.attributes?.[PAGE_DOTS_DOT]);
-            template_u1.setProperties(element_1b0apwb9, attributes[PAGE_DOTS_DOT]);
-            return root_1b0apwb7;
-        }));
-        template_u1.slot(element_1b0apwb6, autoplay && (() => {
-            let root_1b0apwba = template_1b0apwbb(), element_1b0apwbc = root_1b0apwba.firstChild;
-            template_u1.onrender(element_1b0apwbc, (el) => { fill = el; });
-            return root_1b0apwba;
-        })(), 1);
-        return root_1b0apwb2;
-    })();
-}
-export default Object.assign(template, { dot: PAGE_DOTS_DOT });

package/build/components/page-dots/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.page-dots{--color:var(--color-text-500);--dot-color:oklch(from var(--color) l c h / .2);--dot-color-hover:oklch(from var(--color) l c h / .35);--dot-gap:6px;--dot-size:6px;--focus-color:var(--color);--height:32px;--pill-color:var(--color);--pill-width:20px;--pressed-scale:.96;--track-color:var(--pill-color);--transition-duration:.15s;--transition-timing-function:ease-out}.page-dots--autoplay{--track-color:oklch(from var(--pill-color) l c h / .4)}.page-dots--large{--dot-gap:8px;--dot-size:8px;--pill-width:28px}.page-dots{--step:calc(var(--dot-size) + var(--dot-gap));contain:layout;height:var(--height);width:calc((var(--count) - 1) * var(--step) + var(--pill-width));flex:none;position:relative}.page-dots-dot{--near:clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1);box-sizing:content-box;cursor:pointer;inset-block:0;left:calc(var(--index) * var(--step) + (var(--pill-width) - var(--dot-size)) * clamp(0, var(--index) - var(--progress), 1));margin:0 0 0 calc(var(--dot-gap) / -2);padding:0 calc(var(--dot-gap) / 2);touch-action:manipulation;width:calc(var(--dot-size) + (var(--pill-width) - var(--dot-size)) * var(--near));background:0 0;border:0;border-radius:999px;outline:none;align-items:center;display:flex;position:absolute}.page-dots-dot:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}.page-dots-dot:active .page-dots-mark{scale:var(--pressed-scale)}@media (hover:hover){.page-dots-dot:hover .page-dots-mark{background:var(--dot-color-hover)}}.page-dots-fill{background:var(--pill-color);transform-origin:0;position:absolute;inset:0}.page-dots-mark{background:var(--dot-color);height:var(--dot-size);transition:background-color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);border-radius:999px;width:100%}.page-dots-pill{--k:clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));--t:clamp(0, var(--progress) - var(--k), 1);--lead-t:clamp(0, var(--t) / .6, 1);--trail-t:clamp(0, (var(--t) - .4) / .6, 1);--lead:calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));--trail:calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)));background:var(--track-color);height:var(--dot-size);pointer-events:none;translate:calc(var(--k) * var(--step) + var(--step) * var(--trail)) -50%;width:calc(var(--pill-width) + var(--step) * (var(--lead) - var(--trail)));border-radius:999px;position:absolute;top:50%;left:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.page-dots-mark{transition:background-color var(--transition-duration) var(--transition-timing-function)}.page-dots-dot:active .page-dots-mark{scale:none}}}
-/*$vite$:1*/

package/build/components/pagination/svg/arrow-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m10 4-4 4 4 4M6 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/build/components/pagination/svg/arrow-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6 4 4 4-4 4M2 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/build/components/password/constants.d.ts

@@ -1,2 +0,0 @@
-declare const PASSWORD_INPUT: unique symbol;
-export { PASSWORD_INPUT };

package/build/components/password/constants.js

@@ -1,2 +0,0 @@
-const PASSWORD_INPUT = Symbol.for('@esportsplus/ui/password.input');
-export { PASSWORD_INPUT };

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

@@ -1,22 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import input from '../input/index.js';
-import { PASSWORD_INPUT } from './constants.js';
-import './scss/index.scss';
-type A = Attributes & {
-    [PASSWORD_INPUT]?: Omit<Parameters<typeof input>[0], 'state'>;
-};
-type State = {
-    active: boolean;
-    capslock: boolean;
-    error: string;
-    visible: boolean;
-};
-declare function template(this: {
-    attributes?: A;
-} | void, { state, ...attributes }?: A & {
-    state?: State;
-}): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly input: typeof PASSWORD_INPUT;
-};
-export default _default;

package/build/components/password/index.js

@@ -1,74 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import input from '../input/index.js';
-import { PASSWORD_INPUT } from './constants.js';
-import './scss/index.scss';
-const template_1y936ck2 = template_u1.template(`<div class='password'><div class='password-field'><!--$--><div class='password-key' aria-hidden='true'><span class='password-key-light'></span><svg viewBox='0 0 12 10'><path d='M6 1 2 5h2v1.5h4V5h2L6 1Z' /><path d='M4 8.75h4' /></svg></div><button class='password-toggle' type='button'><svg class='password-toggle-show' viewBox='0 0 16 16' aria-hidden='true'><path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' /><circle cx='8' cy='8' r='2' /></svg><svg class='password-toggle-hide' viewBox='0 0 16 16' aria-hidden='true'><path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z' /><circle cx='8' cy='8' r='2' /><path d='m2.5 2.5 11 11' /></svg></button></div><div class='password-warning'><span aria-hidden='true'>Caps Lock is on</span><span class='password-warning-live' aria-live='polite'>`);
-class ReactiveObject_1y936ck0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    #capslock = this[reactivity_u0.SIGNAL](false);
-    #error = this[reactivity_u0.SIGNAL]('');
-    #visible = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-    get capslock() {
-        return reactivity_u0.read(this.#capslock);
-    }
-    set capslock(_v1) {
-        reactivity_u0.write(this.#capslock, _v1);
-    }
-    get error() {
-        return reactivity_u0.read(this.#error);
-    }
-    set error(_v2) {
-        reactivity_u0.write(this.#error, _v2);
-    }
-    get visible() {
-        return reactivity_u0.read(this.#visible);
-    }
-    set visible(_v3) {
-        reactivity_u0.write(this.#visible, _v3);
-    }
-}
-function template({ state = new ReactiveObject_1y936ck0(), ...attributes } = {}) {
-    let read = (e) => {
-        state.capslock = e.getModifierState('CapsLock');
-    }, warning = () => state.active && state.capslock;
-    return (() => {
-        let root_1y936ck1 = template_1y936ck2(), element_1y936ck3 = root_1y936ck1.firstChild, element_1y936ck4 = element_1y936ck3.firstElementChild.firstChild, element_1y936ck5 = element_1y936ck3.firstElementChild.firstElementChild.nextElementSibling, element_1y936ck6 = element_1y936ck3.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling;
-        template_u1.setProperties(element_1y936ck3, this?.attributes);
-        template_u1.setProperties(element_1y936ck3, attributes);
-        template_u1.setList(element_1y936ck3, 'class', [
-            () => state.active && '--active',
-            () => warning() && '--capslock'
-        ]);
-        template_u1.delegate(element_1y936ck3, 'keydown', read);
-        template_u1.delegate(element_1y936ck3, 'keyup', read);
-        template_u1.delegate(element_1y936ck3, 'pointerdown', read);
-        template_u1.slot(element_1y936ck4, input.call({ attributes: this?.attributes?.[PASSWORD_INPUT] }, {
-            autocomplete: 'current-password',
-            ...attributes[PASSWORD_INPUT],
-            state,
-            type: () => state.visible ? 'text' : 'password'
-        }));
-        template_u1.setProperty(element_1y936ck5, 'aria-label', () => state.visible ? 'Hide password' : 'Show password');
-        template_u1.setProperty(element_1y936ck5, 'aria-pressed', () => String(state.visible));
-        template_u1.setList(element_1y936ck5, 'class', () => state.visible && '--visible');
-        template_u1.delegate(element_1y936ck5, 'click', () => {
-            state.visible = !state.visible;
-        });
-        template_u1.delegate(element_1y936ck5, 'pointerdown', (e) => {
-            e.preventDefault();
-        });
-        new template_u1.EffectSlot(element_1y936ck6, () => warning() ? 'Caps Lock is on' : '', 1);
-        return root_1y936ck1;
-    })();
-}
-export default Object.assign(template, { input: PASSWORD_INPUT });

package/build/components/password/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.password{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-default);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--key-background:var(--color-white-400);--key-border-color:var(--color-border-400);--key-color:var(--color-text-300);--key-height:22px;--key-light-color:var(--key-border-color);--key-light-color-active:var(--color-green-400);--key-width:30px;--toggle-background-hover:var(--color-grey-400);--toggle-color:var(--color-text-300);--toggle-color-hover:var(--color-text-500);--toggle-size:32px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1);--transition-timing-function-spring:cubic-bezier(.34, 1.3, .64, 1);--warning-color:var(--color-text-300);--warning-font-size:var(--font-size-300);--warning-height:20px}.password:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover)}.password.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active)}.password.--capslock{--key-light-color:var(--key-light-color-active)}.password{gap:var(--size-100);width:100%;min-width:0;display:grid}.password-field{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:background var(--transition-duration) ease-out, border-color var(--transition-duration) ease-out, box-shadow var(--transition-duration) ease-out;position:relative}.password-field .input{--background:transparent;--border-width:0px;padding-right:calc(var(--toggle-size) + var(--key-width) + var(--size-300));outline:none}.password-key{background:var(--key-background);border:1px solid var(--key-border-color);box-shadow:0 2px 0 0 var(--key-border-color);filter:blur(3px);height:var(--key-height);inset:0 calc(var(--toggle-size) + 8px) 0 auto;opacity:0;pointer-events:none;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--key-width);border-radius:5px;flex-direction:column;justify-content:space-between;margin:auto 0;padding:3px 4px;display:flex;position:absolute;transform:translate(8px)}.password-key svg{color:var(--key-color);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1px;align-self:center;width:11px;height:9px}.password-key-light{background:var(--key-light-color);border-radius:50%;width:4px;height:4px;transition:background-color .3s ease-out,box-shadow .3s ease-out}.password-toggle{border-radius:calc(var(--border-radius) - 2px);color:var(--toggle-color);cursor:pointer;height:var(--toggle-size);touch-action:manipulation;transition:background-color var(--transition-duration) ease-out, color var(--transition-duration) ease-out, scale var(--transition-duration) ease-out;width:var(--toggle-size);place-items:center;margin:auto 0;display:grid;position:absolute;inset:0 4px 0 auto}.password-toggle:hover{background:var(--toggle-background-hover);color:var(--toggle-color-hover)}.password-toggle:active{scale:.96}.password-toggle:focus-visible{outline:2px solid var(--toggle-color-hover)}.password-toggle svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;height:16px;transition:filter .3s var(--transition-timing-function), opacity .3s var(--transition-timing-function), scale .3s var(--transition-timing-function);grid-area:1/1;width:16px}.password-toggle:not(.--visible) .password-toggle-hide,.password-toggle.--visible .password-toggle-show{filter:blur(4px);opacity:0;scale:.25}.password-warning{color:var(--warning-color);font-size:var(--warning-font-size);height:var(--warning-height);line-height:var(--warning-height);position:relative}.password-warning>span:first-child{filter:blur(2px);opacity:0;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);position:absolute;inset:0;transform:translateY(-2px)}.password-warning-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.password.--capslock .password-key{filter:none;opacity:1;transition-duration:.35s;transition-timing-function:var(--transition-timing-function-spring);transform:none}.password.--capslock .password-key-light{box-shadow:0 0 4px 1px color-mix(in oklch, var(--key-light-color) 55%, transparent)}.password.--capslock .password-warning>span:first-child{filter:none;opacity:1;transition-duration:.2s;transform:none}@media (prefers-reduced-motion:reduce){.password .password-key,.password .password-toggle svg,.password .password-warning>span:first-child{transition-property:opacity}}}
-/*$vite$:1*/

package/build/components/plan-card/index.d.ts

@@ -1,36 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [PLAN_CARD_APPROVE]?: Attributes;
-    [PLAN_CARD_VIEW]?: Attributes;
-    autoApprove?: number;
-    description?: Renderable<unknown>;
-    icon?: Renderable<unknown>;
-    onapprove?: (auto: boolean) => void;
-    ondownload?: VoidFunction;
-    onexpand?: VoidFunction;
-    onkeydown?: never;
-    onview?: VoidFunction;
-    peek?: number;
-    state?: State;
-    title: string;
-    todos: Todo[];
-};
-type State = {
-    approved: boolean;
-    countdown: number;
-    expanded: boolean;
-};
-type Todo = {
-    done?: boolean;
-    label: string;
-};
-declare const PLAN_CARD_APPROVE: unique symbol;
-declare const PLAN_CARD_VIEW: unique symbol;
-declare const planCard: ({ autoApprove, description, icon, onapprove, ondownload, onexpand, onview, peek, state, title, todos, ...attributes }: A) => DocumentFragment | Text;
-declare const _default: typeof planCard & {
-    readonly approve: typeof PLAN_CARD_APPROVE;
-    readonly view: typeof PLAN_CARD_VIEW;
-};
-export default _default;
-export type { State, Todo };