@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,196 @@
+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

@@ -0,0 +1,2 @@
+@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/overlay/index.d.ts

@@ -1,4 +1,13 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: template_u0.Factory<template_u0.Attributes, template_u0.Renderable<any>, template_u0.Renderable<any>>;
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
 export default _default;

package/build/components/overlay/index.js

@@ -1,13 +1,13 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import './scss/index.scss';
-const template_u1h = template_u0.template(`<div class='overlay --scrollbar' >`);
+const template_0ip26l11 = template_u1.template(`<div class='overlay --scrollbar'>`);
 export default component(function (attributes, content) {
     return (() => {
-        let root_u1g = template_u1h(), element_u1i = root_u1g.firstChild;
-        template_u0.setProperties(element_u1i, this?.attributes);
-        template_u0.setProperties(element_u1i, attributes);
-        template_u0.slot(element_u1i, content, 1);
-        return root_u1g;
+        let root_0ip26l10 = template_0ip26l11(), element_0ip26l12 = root_0ip26l10.firstChild;
+        template_u1.setProperties(element_0ip26l12, this?.attributes);
+        template_u1.setProperties(element_0ip26l12, attributes);
+        template_u1.slot(element_0ip26l12, content, 1);
+        return root_0ip26l10;
     })();
 });

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,2 @@
+@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/index.d.ts

@@ -0,0 +1,11 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+export default _default;
+declare function _default({ onchange, siblings, state: api, total, ...attributes }: Attributes & {
+    onchange?: (page: number) => void;
+    siblings?: number;
+    state?: {
+        page: number;
+    };
+    total: number;
+}): DocumentFragment | Text;

package/build/components/pagination/index.js

@@ -0,0 +1,109 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import icon from '../icon/index.js';
+import next from './svg/arrow-right.svg';
+import previous from './svg/arrow-left.svg';
+import './scss/index.scss';
+const template_0rssf9r3 = template_u1.template(`<nav aria-label='Pagination' class='pagination'><button class='button pagination-control ' type='button'><!--$--> Previous </button><div class='pagination-pages'></div><button class='button pagination-control ' type='button'> Next `);
+const template_0rssf9ra = template_u1.template(`<button class='button pagination-page ' type='button'>`);
+class ReactiveObject_0rssf9r0 extends reactivity_u0.ReactiveObject {
+    #page = this[reactivity_u0.SIGNAL](1);
+    constructor() {
+        super(null);
+    }
+    get page() {
+        return reactivity_u0.read(this.#page);
+    }
+    set page(_v0) {
+        reactivity_u0.write(this.#page, _v0);
+    }
+}
+class ReactiveObject_0rssf9r1 extends reactivity_u0.ReactiveObject {
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+const DOTS = 0;
+function range(start, end) {
+    let values = [];
+    for (let i = start; i <= end; i++) {
+        values.push(i);
+    }
+    return values;
+}
+function pages(page, siblings, total) {
+    let slots = siblings * 2 + 5;
+    if (total <= slots) {
+        return range(1, total);
+    }
+    let edge = slots - 2, left = Math.max(page - siblings, 1), right = Math.min(page + siblings, total);
+    if (left <= 3) {
+        return [...range(1, edge), DOTS, total];
+    }
+    if (right >= total - 2) {
+        return [1, DOTS, ...range(total - edge + 1, total)];
+    }
+    return [1, DOTS, ...range(left, right), DOTS, total];
+}
+export default ({ onchange, siblings = 1, state: api = new ReactiveObject_0rssf9r0(), total, ...attributes }) => {
+    let render = new reactivity_u0.ReactiveArray(), stop = effect(() => {
+        let values = pages(api.page, siblings, total);
+        untrack(() => {
+            for (let i = 0, n = values.length; i < n; i++) {
+                if (render[i]) {
+                    render[i].value = values[i];
+                }
+                else {
+                    let cell = new ReactiveObject_0rssf9r1(values[i]);
+                    render.$set(i, cell);
+                }
+            }
+            if (render.$length > values.length) {
+                render.splice(values.length);
+            }
+        });
+    });
+    function go(page) {
+        page = Math.min(Math.max(page, 1), total);
+        if (page === api.page) {
+            return;
+        }
+        api.page = page;
+        onchange?.(page);
+    }
+    onCleanup(stop);
+    return (() => {
+        let root_0rssf9r2 = template_0rssf9r3(), element_0rssf9r4 = root_0rssf9r2.firstChild, element_0rssf9r5 = element_0rssf9r4.firstElementChild, element_0rssf9r6 = element_0rssf9r5.firstChild, element_0rssf9r7 = element_0rssf9r5.nextElementSibling, element_0rssf9r8 = element_0rssf9r7.nextElementSibling;
+        template_u1.setProperties(element_0rssf9r4, attributes);
+        template_u1.setProperty(element_0rssf9r5, 'aria-disabled', () => String(api.page <= 1));
+        template_u1.setList(element_0rssf9r5, 'class', () => api.page <= 1 ? '--disabled' : '');
+        template_u1.delegate(element_0rssf9r5, 'click', () => go(api.page - 1));
+        template_u1.slot(element_0rssf9r6, icon({ 'aria-hidden': 'true' }, previous));
+        element_0rssf9r7.appendChild(new template_u1.ArraySlot(render, function (cell) {
+            return (() => {
+                let root_0rssf9r9 = template_0rssf9ra(), element_0rssf9rb = root_0rssf9r9.firstChild;
+                template_u1.setProperty(element_0rssf9rb, 'aria-current', () => cell.value === api.page ? 'page' : 'false');
+                template_u1.setProperty(element_0rssf9rb, 'aria-hidden', () => String(cell.value === DOTS));
+                template_u1.setList(element_0rssf9rb, 'class', () => cell.value === DOTS ? 'pagination-page--dots' : cell.value === api.page ? '--active' : '');
+                template_u1.delegate(element_0rssf9rb, 'click', () => cell.value !== DOTS && go(cell.value));
+                template_u1.setProperty(element_0rssf9rb, 'tabindex', () => cell.value === DOTS ? -1 : 0);
+                new template_u1.EffectSlot(element_0rssf9rb, () => cell.value === DOTS ? '...' : cell.value, 1);
+                return root_0rssf9r9;
+            })();
+        }, true).fragment);
+        template_u1.setProperty(element_0rssf9r8, 'aria-disabled', () => String(api.page >= total));
+        template_u1.setList(element_0rssf9r8, 'class', () => api.page >= total ? '--disabled' : '');
+        template_u1.delegate(element_0rssf9r8, 'click', () => go(api.page + 1));
+        template_u1.slot(element_0rssf9r8, icon({ 'aria-hidden': 'true' }, next), 2);
+        return root_0rssf9r2;
+    })();
+};

package/build/components/pagination/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.button-fan{align-items:center;display:inline-flex;position:relative}.button-fan.--active{z-index:9}.button-fan.--active>.button-fan-options>.button-fan-option{--delay:calc(var(--i) * var(--stagger));opacity:1;pointer-events:auto;translate:0;scale:1}.button-fan.--active>.button-fan-options>.button-fan-option:active{scale:var(--option-pressed-scale)}.button-fan.--active>.button--fan .button-fan-swap>:first-child{opacity:0;rotate:var(--swap-rotate)}.button-fan.--active>.button--fan .button-fan-swap>:last-child{opacity:1;rotate:0deg}.button-fan-options{align-items:center;gap:var(--spacer);pointer-events:none;z-index:0;display:flex;position:absolute}.button-fan-swap{place-items:center;display:inline-grid}.button-fan-swap>*{transition:opacity var(--swap-spring-duration) var(--swap-spring), rotate var(--swap-spring-duration) var(--swap-spring);grid-area:1/1}.button-fan-swap>:last-child{opacity:0;rotate:calc(var(--swap-rotate) * -1)}.button-fan>.button-fan-options>.button-fan-option{--delay:calc((var(--n) - 1 - var(--i)) * var(--stagger));opacity:0;scale:var(--option-scale);transform-origin:var(--origin);transition:opacity var(--option-opacity-duration) ease-out var(--delay), scale var(--option-spring-duration) var(--option-spring) var(--delay), translate var(--option-spring-duration) var(--option-spring) var(--delay);translate:calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-x)) calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-y))}.button-fan>.button-fan-options>.button-fan-option:focus-visible,.button-fan>.button--fan:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.button-fan--e>.button-fan-options{padding-left:var(--spacer);flex-direction:row;inset:0 auto 0 100%}.button-fan--n>.button-fan-options{padding-bottom:var(--spacer);flex-direction:column-reverse;inset:auto 0 100%}.button-fan--s>.button-fan-options{padding-top:var(--spacer);flex-direction:column;inset:100% 0 auto}.button-fan--w>.button-fan-options{padding-right:var(--spacer);flex-direction:row-reverse;inset:0 100% 0 auto}@media (prefers-reduced-motion:reduce){.button-fan{--swap-rotate:0deg}.button-fan>.button-fan-options>.button-fan-option{transition:opacity .15s ease-out;translate:none;scale:1}.button-fan .button-fan-swap>*{transition:opacity .15s ease-out}}.button-kbd{align-items:center;gap:var(--gap);display:inline-flex}.button-kbd .button-kbd-plus{--size:var(--plus-size);color:var(--plus-color)}.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed: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-color-pressed:var(--border-color-default);--box-shadow:var(--box-shadow-default);--box-shadow-default:none}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--feedback{--draw-duration:.26s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--error-color:var(--color-red-400);--face-blur:3px;--face-duration:.4s;--face-gap:.375em;--face-offset:3px;--face-timing-function:cubic-bezier(.23, 1, .32, 1);--icon-size:.875em;--spin-duration:.85s;--success-color:var(--color-green-500)}.button--hold{--fill-background:var(--color);--fill-color:var(--background)}.button--kbd{--box-shadow-default:0 var(--kbd-depth) 0 var(--kbd-shadow-color);--kbd-depth:2px;--kbd-shadow-color:color-mix(in srgb, var(--background-default) 60%, black)}.button--kbd.--active,.button--kbd:not(.--active):active{--background:var(--background-active);--box-shadow:0 calc(var(--kbd-depth) - 1px) 0 var(--kbd-shadow-color)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button-fan{--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--option-opacity-duration:.2s;--option-pressed-scale:.92;--option-scale:.5;--option-spring:linear(0, .067, .221, .406, .586, .741, .862, .949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, .999, .998, .997, .997, .998, 1);--option-spring-duration:.6s;--spacer:var(--size-300);--stagger:30ms;--swap-rotate:90deg;--swap-spring:linear(0, .07, .228, .418, .602, .759, .88, .965, 1.019, 1.047, 1.058, 1.056, 1.048, 1.038, 1.027, 1.017, 1.009, 1.003, 1, .998, .997, .997, .997, .998, 1);--swap-spring-duration:.44s;--trigger-pressed-scale:.94}.button-fan--e{--direction-x:-1;--direction-y:0;--origin:left center}.button-fan--n{--direction-x:0;--direction-y:1;--origin:center bottom}.button-fan--s{--direction-x:0;--direction-y:-1;--origin:center top}.button-fan--w{--direction-x:1;--direction-y:0;--origin:right center}.button-kbd{--gap:var(--size-200);--plus-color:color-mix(in srgb, currentColor 60%, transparent);--plus-size:var(--size-300)}.text,.button{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.button{display:block}.button{background:var(--background);border-radius:var(--border-radius);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate:0}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}.button--fan{z-index:1}.button--fan:not(.--active):active{scale:var(--trigger-pressed-scale)}.button--feedback{-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.button--flat:after{display:none}.button--hold{isolation:isolate;overflow:hidden}.button--kbd.--active,.button--kbd:not(.--active):active{translate:0 1px}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;translate:50% 50%}.button--processing *{opacity:0}@keyframes button--processing{0%{rotate:0deg}to{rotate:360deg}}.button--skeleton{animation:var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes button--skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--tactile:not(.--active):active{translate:0 1px}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + .5lh) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + .5lh) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + .5lh) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.button-face{filter:blur(var(--face-blur));align-items:center;gap:var(--face-gap);opacity:0;transition:filter var(--face-duration) var(--face-timing-function), opacity var(--face-duration) var(--face-timing-function), translate var(--face-duration) var(--face-timing-function);translate:0 var(--face-offset);grid-area:1/1;display:inline-flex}.button-face.--active{filter:blur();opacity:1;translate:0}.button-face.--active .button-icon--draw path{stroke-dashoffset:0}.button-face[data-tone=error] .button-icon{color:var(--error-color)}.button-face[data-tone=success] .button-icon{color:var(--success-color)}.button-faces{place-items:center;display:grid}.button-fill{background:var(--fill-background);border-radius:inherit;clip-path:inset(0 100% 0 0);color:var(--fill-color);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.button-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.button-icon--draw path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.button-icon--spin{animation:button--processing var(--spin-duration) infinite linear}.button-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.button--skeleton,.button-icon--spin{animation:none}.button-face,.button-icon--draw path{transition:none}}.pagination{--gap:var(--size-300);--size:32px}.pagination-control,.pagination-page{--background-hover:var(--color-grey-400);--background-pressed:var(--color-grey-500);--border-color-default:var(--color-border-300);--border-radius:var(--border-radius-400);--border-width:var(--border-width-400);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px;--width:auto}.pagination-control{--background-default:var(--color-white-300);--box-shadow-default:var(--box-shadow-100);--color-default:var(--color-text-500)}.pagination-page{--background-active:var(--color-white-300);--border-color-active:var(--color-border-300);--border-color-default:transparent;--color-active:var(--color-text-500);--padding-horizontal:0px}.pagination-page--dots{--background-hover:transparent;--background-pressed:transparent;--color-hover:var(--color-default)}.pagination{align-items:center;gap:var(--gap);justify-content:space-between;width:100%;display:flex}.pagination-control,.pagination-page{border:var(--border-width) solid var(--border-color);height:var(--size)}.pagination-control{gap:var(--size-100)}.pagination-control .icon{--size:var(--size-400)}.pagination-page{font-variant:tabular-nums;min-width:var(--size)}.pagination-page.--active{--box-shadow:var(--box-shadow-100)}.pagination-page--dots{cursor:default;pointer-events:none}.pagination-pages{align-items:center;gap:var(--size-100);display:flex}}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

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

package/build/components/password/constants.js

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

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

@@ -0,0 +1,22 @@
+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;