@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/pagination/dots.js

@@ -0,0 +1,110 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+const template_01hmmm73 = template_u1.template(`<div aria-label='Pages' class='pagination pagination--dots ' role='group'><!--$--><span aria-hidden='true' class='pagination-pill'>`);
+const template_01hmmm78 = template_u1.template(`<button class='pagination-dot' type='button'><span class='pagination-mark'>`);
+const template_01hmmm7b = template_u1.template(`<span class='pagination-fill'>`);
+class ReactiveObject_01hmmm70 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_01hmmm71 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 DOTS_DOT = Symbol.for('@esportsplus/ui/pagination.dots.dot');
+const SETTLE = { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+function template({ autoplay, count, onelapsed, onpage, state = new ReactiveObject_01hmmm70(), ...attributes }) {
+    let fill, local = new ReactiveObject_01hmmm71(), settle;
+    effect(() => {
+        let active = Math.min(Math.max(Math.round(state.progress), 0), count - 1);
+        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;
+            }
+            if (!target.isConnected) {
+                countdown.cancel();
+                return;
+            }
+            let from = getComputedStyle(target).transform;
+            countdown.cancel();
+            settle = target.animate([{ transform: from }, { transform: 'scaleX(1)' }], SETTLE);
+        });
+    });
+    onCleanup(() => settle?.cancel());
+    return (() => {
+        let root_01hmmm72 = template_01hmmm73(), element_01hmmm74 = root_01hmmm72.firstChild, element_01hmmm75 = element_01hmmm74.firstChild, element_01hmmm76 = element_01hmmm74.firstElementChild;
+        template_u1.slot(element_01hmmm75, Array.from({ length: count }, (_, i) => {
+            let root_01hmmm77 = template_01hmmm78(), element_01hmmm79 = root_01hmmm77.firstChild;
+            template_u1.setProperty(element_01hmmm79, 'aria-current', () => state.active === i && 'page');
+            template_u1.setProperty(element_01hmmm79, 'aria-label', `Page ${i + 1} of ${count}`);
+            template_u1.delegate(element_01hmmm79, 'click', () => onpage?.(i));
+            template_u1.setList(element_01hmmm79, 'style', `--index: ${i};`);
+            template_u1.setProperties(element_01hmmm79, this?.attributes?.[DOTS_DOT]);
+            template_u1.setProperties(element_01hmmm79, attributes[DOTS_DOT]);
+            return root_01hmmm77;
+        }));
+        template_u1.slot(element_01hmmm76, autoplay && (() => {
+            let root_01hmmm7a = template_01hmmm7b(), element_01hmmm7c = root_01hmmm7a.firstChild;
+            template_u1.onconnect(element_01hmmm7c, (el) => { fill = el; });
+            return root_01hmmm7a;
+        })(), 1);
+        template_u1.setList(element_01hmmm74, 'class', autoplay && 'pagination--dots-autoplay');
+        template_u1.setList(element_01hmmm74, 'style', () => `--count: ${count}; --progress: ${state.progress};`);
+        template_u1.setProperties(element_01hmmm74, this?.attributes);
+        template_u1.setProperties(element_01hmmm74, attributes);
+        template_u1.onconnect(element_01hmmm74, () => {
+            local.connected = true;
+        });
+        template_u1.ondisconnect(element_01hmmm74, () => {
+            local.connected = false;
+        });
+        return root_01hmmm72;
+    })();
+}
+export default component(template, { dot: DOTS_DOT });

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

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

package/build/components/pagination/index.js

@@ -1,12 +1,14 @@
 import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import icon from '../icon/index.js';
-import next from './svg/arrow-right.svg';
-import previous from './svg/arrow-left.svg';
+import next from '@esportsplus/ui/svg/arrow-right.svg';
+import previous from '@esportsplus/ui/svg/arrow-left.svg';
+import dots from './dots.js';
+import '../button/scss/index.scss';
 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'>`);
+const template_0rssf9r2 = 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_0rssf9r9 = template_u1.template(`<button class='button pagination-page ' type='button'>`);
 class ReactiveObject_0rssf9r0 extends reactivity_u0.ReactiveObject {
     #page = this[reactivity_u0.SIGNAL](1);
     constructor() {
@@ -19,19 +21,6 @@ class ReactiveObject_0rssf9r0 extends reactivity_u0.ReactiveObject {
         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 = [];
@@ -54,23 +43,12 @@ function pages(page, siblings, 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);
-            }
-        });
+const plain = ({ onchange, siblings = 1, state: api = new ReactiveObject_0rssf9r0(), total, ...attributes }) => {
+    let cells = pages(api.page, siblings, total).map((value) => reactivity_u0.reactive({ value }));
+    effect(() => pages(api.page, siblings, total), (values) => {
+        for (let i = 0, n = values.length; i < n; i++) {
+            cells[i].value = values[i];
+        }
     });
     function go(page) {
         page = Math.min(Math.max(page, 1), total);
@@ -80,30 +58,29 @@ export default ({ onchange, siblings = 1, state: api = new ReactiveObject_0rssf9
         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;
+        let root_0rssf9r1 = template_0rssf9r2(), element_0rssf9r3 = root_0rssf9r1.firstChild, element_0rssf9r4 = element_0rssf9r3.firstElementChild, element_0rssf9r5 = element_0rssf9r4.firstChild, element_0rssf9r6 = element_0rssf9r4.nextElementSibling, element_0rssf9r7 = element_0rssf9r6.nextElementSibling;
+        template_u1.slot(element_0rssf9r5, icon({ 'aria-hidden': 'true' }, previous));
+        template_u1.slot(element_0rssf9r6, cells.map((cell) => {
+            let root_0rssf9r8 = template_0rssf9r9(), element_0rssf9ra = root_0rssf9r8.firstChild;
+            new template_u1.EffectSlot(element_0rssf9ra, () => cell.value === DOTS ? '...' : cell.value, 1);
+            template_u1.setProperty(element_0rssf9ra, 'aria-current', () => cell.value === api.page ? 'page' : 'false');
+            template_u1.setProperty(element_0rssf9ra, 'aria-hidden', () => String(cell.value === DOTS));
+            template_u1.setList(element_0rssf9ra, 'class', () => cell.value === DOTS ? 'pagination-page--dots' : cell.value === api.page && '--active');
+            template_u1.delegate(element_0rssf9ra, 'click', () => cell.value !== DOTS && go(cell.value));
+            template_u1.setProperty(element_0rssf9ra, 'tabindex', () => cell.value === DOTS ? -1 : 0);
+            return root_0rssf9r8;
+        }), 1);
+        template_u1.slot(element_0rssf9r7, icon({ 'aria-hidden': 'true' }, next), 2);
+        template_u1.setProperty(element_0rssf9r7, 'aria-disabled', () => String(api.page >= total));
+        template_u1.setList(element_0rssf9r7, 'class', () => api.page >= total && '--disabled');
+        template_u1.delegate(element_0rssf9r7, 'click', () => go(api.page + 1));
+        template_u1.setProperty(element_0rssf9r4, 'aria-disabled', () => String(api.page <= 1));
+        template_u1.setList(element_0rssf9r4, 'class', () => api.page <= 1 && '--disabled');
+        template_u1.delegate(element_0rssf9r4, 'click', () => go(api.page - 1));
+        template_u1.setProperties(element_0rssf9r3, attributes);
+        return root_0rssf9r1;
     })();
 };
+const pagination = Object.assign(plain, { dots });
+export default pagination;

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

@@ -1,2 +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}}
+@layer components{.pagination-fill{position:absolute;inset:0}.pagination{--gap:var(--size-300);--size:32px}.pagination--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;--step:calc(var(--dot-size) + var(--dot-gap));--track-color:var(--pill-color);--transition-duration:.15s;--transition-timing-function:ease-out}.pagination--dots-autoplay{--track-color:oklch(from var(--pill-color) l c h / .4)}.pagination--dots-large{--dot-gap:8px;--dot-size:8px;--pill-width:28px}.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-dot{--mark-scale:none;--near:clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1)}.pagination-dot:active{--mark-scale:var(--pressed-scale)}@media (hover:hover){.pagination-dot:hover{--dot-color:var(--dot-color-hover)}}.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.--active{--box-shadow:var(--box-shadow-100)}.pagination-page--dots{--background-hover:transparent;--background-pressed:transparent;--color-hover:var(--color-default)}.pagination-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)))}.pagination-dot{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}.pagination-dot:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}.pagination-fill{background:var(--pill-color);transform-origin:0}.pagination-mark{background:var(--dot-color);height:var(--dot-size);scale:var(--mark-scale);transition:background-color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);border-radius:999px;width:100%}.pagination-pill{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){.pagination-mark{transition:background-color var(--transition-duration) var(--transition-timing-function);scale:none}}.pagination{align-items:center;gap:var(--gap);justify-content:space-between;width:100%;display:flex}.pagination--dots{contain:layout;height:var(--height);width:calc((var(--count) - 1) * var(--step) + var(--pill-width));flex:none;display:block;position:relative}.pagination-control,.pagination-page{border:var(--border-width) solid var(--border-color);height:var(--size)}.pagination-control{gap:var(--size-100)}.pagination-control.--disabled{opacity:.64;pointer-events:none}.pagination-page{font-variant:tabular-nums;min-width:var(--size)}.pagination-page--dots{cursor:default;pointer-events:none}.pagination-pages{align-items:center;gap:var(--size-100);display:flex}}
 /*$vite$:1*/

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

@@ -1,4 +1,5 @@
 import { type Attributes } from '@esportsplus/template';
+import text from './text.js';
 import './scss/index.scss';
 type A = Attributes & {
     label?: string;
@@ -10,6 +11,10 @@ type A = Attributes & {
 type State = {
     value: number;
 };
-export default _default;
-declare function _default({ label, percent, state, status, value, ...attributes }: A): DocumentFragment | Text;
+declare function bar({ label, percent, state, status, value, ...attributes }: A): DocumentFragment | Text;
+declare const progress: typeof bar & {
+    text: typeof text;
+};
+export default progress;
 export type { State as ProgressState };
+export type { ProgressTextState } from './text.js';

package/build/components/progress/index.js

@@ -1,5 +1,6 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
+import text from './text.js';
 import './scss/index.scss';
 const template_11w7dyi1 = template_u1.template(`<div class='progress'><!--$--><div aria-valuemax='100' aria-valuemin='0' class='progress-track' role='progressbar'><div class='progress-indicator'>`);
 const template_11w7dyi7 = template_u1.template(`<div class='progress-header'><span class='progress-label'>`);
@@ -8,30 +9,33 @@ const template_11w7dyie = template_u1.template(`<div class='progress-status'>`);
 function clamp(value) {
     return Math.min(100, Math.max(0, value || 0));
 }
-export default ({ label, percent = true, state, status, value = 0, ...attributes }) => {
-    let s = state ?? reactivity_u0.reactive({ value });
+function bar({ label, percent = true, state, status, value = 0, ...attributes }) {
+    state ??= reactivity_u0.reactive({ value });
+    let current = () => clamp(state.value), rounded = () => Math.round(current());
     return (() => {
         let root_11w7dyi0 = template_11w7dyi1(), element_11w7dyi2 = root_11w7dyi0.firstChild, element_11w7dyi3 = element_11w7dyi2.firstChild, element_11w7dyi4 = element_11w7dyi2.firstElementChild, element_11w7dyi5 = element_11w7dyi4.firstElementChild;
-        template_u1.setProperties(element_11w7dyi2, attributes);
         template_u1.slot(element_11w7dyi3, label && (() => {
             let root_11w7dyi6 = template_11w7dyi7(), element_11w7dyi8 = root_11w7dyi6.firstChild.firstElementChild, element_11w7dyi9 = root_11w7dyi6.firstChild;
             template_u1.slot(element_11w7dyi8, label, 1);
             template_u1.slot(element_11w7dyi9, percent && (() => {
                 let root_11w7dyia = template_11w7dyib(), element_11w7dyic = root_11w7dyia.firstChild;
-                new template_u1.EffectSlot(element_11w7dyic, () => `${Math.round(clamp(s.value))}%`, 1);
+                new template_u1.EffectSlot(element_11w7dyic, () => `${rounded()}%`, 1);
                 return root_11w7dyia;
             })(), 2);
             return root_11w7dyi6;
         })());
-        template_u1.setProperty(element_11w7dyi4, 'aria-label', label ?? 'Progress');
-        template_u1.setProperty(element_11w7dyi4, 'aria-valuenow', () => Math.round(clamp(s.value)));
-        template_u1.setProperty(element_11w7dyi4, 'aria-valuetext', () => status ? status(clamp(s.value)) : `${Math.round(clamp(s.value))}%`);
-        template_u1.setList(element_11w7dyi5, 'style', () => `translate: ${clamp(s.value) - 100}% 0`);
         template_u1.slot(element_11w7dyi2, status && (() => {
             let root_11w7dyid = template_11w7dyie(), element_11w7dyif = root_11w7dyid.firstChild;
-            new template_u1.EffectSlot(element_11w7dyif, () => status(clamp(s.value)), 1);
+            new template_u1.EffectSlot(element_11w7dyif, () => status(current()), 1);
             return root_11w7dyid;
         })(), 2);
+        template_u1.setList(element_11w7dyi5, 'style', () => `translate: ${current() - 100}% 0`);
+        template_u1.setProperty(element_11w7dyi4, 'aria-label', label ?? 'Progress');
+        template_u1.setProperty(element_11w7dyi4, 'aria-valuenow', rounded);
+        template_u1.setProperty(element_11w7dyi4, 'aria-valuetext', () => status ? status(current()) : `${rounded()}%`);
+        template_u1.setProperties(element_11w7dyi2, attributes);
         return root_11w7dyi0;
     })();
-};
+}
+const progress = Object.assign(bar, { text });
+export default progress;

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

@@ -1,2 +1,2 @@
-@layer components {.progress{--color:var(--color-text-500);--duration:.15s;--ease:cubic-bezier(.4, 0, .2, 1);--font-size:calc(var(--font-size-400) * .875);--height:6px;--indicator-color:var(--color-text-500);--muted-color:var(--color-text-300);--status-font-size:12px;--track-color:var(--color-grey-500);color:var(--color);font-size:var(--font-size);flex-direction:column;gap:8px;width:100%;display:flex}.progress-header{justify-content:space-between;align-items:baseline;display:flex}.progress-indicator{background:var(--indicator-color);height:100%;transition:translate var(--duration) var(--ease);width:100%}.progress-percent{color:var(--muted-color);font-variant-numeric:tabular-nums}.progress-status{color:var(--muted-color);font-size:var(--status-font-size)}.progress-track{background:var(--track-color);height:var(--height);border-radius:999px;width:100%;position:relative;overflow:hidden}@media (prefers-reduced-motion:reduce){.progress-indicator{transition:none}}}
+@layer components{.progress-text-ink{position:absolute;inset:0}.progress-text-strip{position:absolute;inset:0 0 auto}.progress-text-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.progress-text-check{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;stroke-dasharray:1;stroke-dashoffset:1px}.progress-text{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);align-items:center;gap:var(--part-gap);line-height:var(--part-height);display:inline-flex;position:relative}.progress-text-check{height:var(--check-size);stroke-dashoffset:var(--check-offset);stroke-width:3px;transition:stroke-dashoffset var(--check-duration) var(--ease-in-out) .15s;width:var(--check-size);flex-shrink:0}.progress-text-done{filter:blur(4px);align-items:center;gap:var(--done-gap);opacity:0;pointer-events:none;transition:filter .15s var(--ease-out), opacity .15s var(--ease-out), translate .15s var(--ease-out);white-space:nowrap;grid-area:1/1;display:flex;translate:0 4px}.progress-text-done.--done{filter:none;opacity:1;pointer-events:auto;transition:filter .3s var(--ease-out) .1s, opacity .3s var(--ease-out) .1s, translate .3s var(--ease-out) .1s;translate:0}.progress-text-label{transition:filter .3s var(--ease-out), opacity .3s var(--ease-out), translate .3s var(--ease-out);white-space:nowrap;grid-area:1/1;position:relative}.progress-text-label.--done{filter:blur(4px);opacity:0;transition-duration:.2s;translate:0 -4px}.progress-text-labels{display:grid}.progress-text-percent{color:var(--muted-color);font-variant-numeric:tabular-nums;transition:filter .3s var(--ease-out), opacity .3s var(--ease-out);display:flex}.progress-text-percent.--done{filter:blur(4px);opacity:0;transition-duration:.2s}.progress-text-roll{width:1ch;height:1lh;display:inline-block;position:relative;overflow:hidden}.progress-text-strip{transition:translate .3s var(--ease-out);white-space:pre;flex-direction:column;display:flex}.progress-text-strip span{height:1lh}.progress-text-track{color:var(--track-color)}@media (prefers-reduced-motion:reduce){.progress-text-check,.progress-text-strip{transition:none}.progress-text-done,.progress-text-label.--done{translate:0}}.progress{--color:var(--color-text-500);--duration:.15s;--ease:cubic-bezier(.4, 0, .2, 1);--font-size:calc(var(--font-size-400) * .875);--height:6px;--indicator-color:var(--color-text-500);--muted-color:var(--color-text-300);--status-font-size:12px;--track-color:var(--color-grey-500)}.progress-text{--check-duration:0s;--check-offset:1;--check-size:16px;--color:var(--color-text-500);--done-gap:6px;--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-out:cubic-bezier(.23, 1, .32, 1);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--muted-color:var(--color-text-300);--part-gap:10px;--part-height:24px;--pour-duration:.4s;--track-color:oklch(from var(--color-text-500) l c h / .2)}@media (prefers-reduced-motion:reduce){.progress-text{--pour-duration:0s}}.progress-text--blue{--color:var(--color-blue-400);--track-color:oklch(from var(--color-blue-400) l c h / .2)}.progress-text--done{--check-duration:.3s;--check-offset:0}.progress-text--large{--check-size:22px;--done-gap:8px;--font-size:var(--font-size-600);--part-gap:14px;--part-height:32px}.progress{color:var(--color);font-size:var(--font-size);flex-direction:column;gap:8px;width:100%;display:flex}.progress-header{justify-content:space-between;align-items:baseline;display:flex}.progress-indicator{background:var(--indicator-color);height:100%;transition:translate var(--duration) var(--ease);width:100%}.progress-percent{color:var(--muted-color);font-variant-numeric:tabular-nums}.progress-status{color:var(--muted-color);font-size:var(--status-font-size)}.progress-track{background:var(--track-color);height:var(--height);border-radius:999px;width:100%;position:relative;overflow:hidden}@media (prefers-reduced-motion:reduce){.progress-indicator{transition:none}}}
 /*$vite$:1*/

package/build/components/progress/text.d.ts

@@ -0,0 +1,12 @@
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    doneLabel?: string;
+    label: string;
+    state?: State;
+};
+type State = {
+    value: number;
+};
+export default _default;
+declare function _default({ doneLabel, label, state, ...attributes }: A): DocumentFragment | Text;
+export type { State as ProgressTextState };

package/build/components/progress/text.js

@@ -0,0 +1,124 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import { timing } from '../../shared/animation.js';
+import check from '@esportsplus/ui/svg/check.svg';
+const template_0mhdqo93 = template_u1.template(`<span class='progress-text-roll'><span class='progress-text-strip'>`);
+const template_0mhdqo96 = template_u1.template(`<span>`);
+const template_0mhdqo99 = template_u1.template(`<div aria-valuemax='100' aria-valuemin='0' class='progress-text ' role='progressbar'><span aria-hidden='true' class='progress-text-labels'><span class='progress-text-label '><span class='progress-text-track'></span><span class='progress-text-ink'></span></span><span class='progress-text-done '><svg class='progress-text-check'><use /></svg></span></span><span aria-hidden='true' class='progress-text-percent '><!--$--><!--$--><span>%</span></span><span aria-live='polite' class='progress-text-sr'>`);
+class ReactiveObject_0mhdqo90 extends reactivity_u0.ReactiveObject {
+    #value = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+class ReactiveObject_0mhdqo91 extends reactivity_u0.ReactiveObject {
+    #position;
+    constructor(_p0) {
+        super(null);
+        this.#position = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get position() {
+        return reactivity_u0.read(this.#position);
+    }
+    set position(_v0) {
+        reactivity_u0.write(this.#position, _v0);
+    }
+}
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const RATIO = 1.054;
+const REST = 0.01;
+const TENS = [' ', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+function clamp(value) {
+    return Math.min(100, Math.max(0, value));
+}
+function clip(value) {
+    return `inset(0 ${Math.max(0, 100 - value).toFixed(2)}% 0 0)`;
+}
+function roll(strip, index) {
+    return (() => {
+        let root_0mhdqo92 = template_0mhdqo93(), element_0mhdqo94 = root_0mhdqo92.firstChild.firstElementChild;
+        template_u1.slot(element_0mhdqo94, strip.map((digit) => {
+            let root_0mhdqo95 = template_0mhdqo96(), element_0mhdqo97 = root_0mhdqo95.firstChild;
+            template_u1.slot(element_0mhdqo97, digit, 1);
+            return root_0mhdqo95;
+        }), 1);
+        template_u1.setList(element_0mhdqo94, 'style', () => `translate: 0 ${-index() * 10}%`);
+        return root_0mhdqo92;
+    })();
+}
+export default ({ doneLabel = 'Done', label, state = new ReactiveObject_0mhdqo90(), ...attributes }) => {
+    let damping = 0, frame = 0, ink = new ReactiveObject_0mhdqo91(clamp(state.value)), position = ink.position, stiffness = 0, target = position, time = 0, velocity = 0;
+    function done() {
+        return percent() >= 100;
+    }
+    function percent() {
+        return Math.round(clamp(state.value));
+    }
+    function step(now) {
+        let elapsed = Math.min(64, now - time);
+        time = now;
+        for (let i = 0; i < elapsed; i++) {
+            velocity += (stiffness * (target - position) - damping * velocity) / 1000;
+            position += velocity / 1000;
+        }
+        if (Math.abs(velocity) < REST && Math.abs(target - position) < REST) {
+            frame = 0;
+            position = target;
+            velocity = 0;
+        }
+        else {
+            frame = requestAnimationFrame(step);
+        }
+        ink.position = position;
+    }
+    return (() => {
+        let root_0mhdqo98 = template_0mhdqo99(), element_0mhdqo9a = root_0mhdqo98.firstChild, element_0mhdqo9b = element_0mhdqo9a.firstElementChild.firstElementChild, element_0mhdqo9c = element_0mhdqo9b.firstElementChild, element_0mhdqo9d = element_0mhdqo9c.nextElementSibling, element_0mhdqo9e = element_0mhdqo9b.nextElementSibling, element_0mhdqo9f = element_0mhdqo9e.firstElementChild.firstElementChild, element_0mhdqo9g = element_0mhdqo9a.firstElementChild.nextElementSibling, element_0mhdqo9h = element_0mhdqo9g.firstChild, element_0mhdqo9i = element_0mhdqo9h.nextSibling, element_0mhdqo9j = element_0mhdqo9g.nextElementSibling;
+        template_u1.slot(element_0mhdqo9c, label, 1);
+        template_u1.slot(element_0mhdqo9d, label, 1);
+        template_u1.slot(element_0mhdqo9e, doneLabel, 2);
+        template_u1.slot(element_0mhdqo9h, roll(TENS, () => Math.floor((percent() % 100) / 10)));
+        template_u1.slot(element_0mhdqo9i, roll(DIGITS, () => percent() % 10));
+        new template_u1.EffectSlot(element_0mhdqo9j, () => done() && doneLabel, 1);
+        template_u1.setList(element_0mhdqo9g, 'class', () => done() && '--done');
+        template_u1.setProperty(element_0mhdqo9f, 'href', template_u1.interpolate(["#", (check)]));
+        template_u1.setList(element_0mhdqo9e, 'class', () => done() && '--done');
+        template_u1.setList(element_0mhdqo9d, 'style', () => `clip-path: ${clip(ink.position)}`);
+        template_u1.setList(element_0mhdqo9b, 'class', () => done() && '--done');
+        template_u1.setProperty(element_0mhdqo9a, 'aria-label', label);
+        template_u1.setProperty(element_0mhdqo9a, 'aria-valuenow', percent);
+        template_u1.setProperty(element_0mhdqo9a, 'aria-valuetext', () => done() ? doneLabel : `${percent()}%`);
+        template_u1.setList(element_0mhdqo9a, 'class', () => done() && 'progress-text--done');
+        template_u1.setProperties(element_0mhdqo9a, attributes);
+        template_u1.onconnect(element_0mhdqo9a, (element) => {
+            effect(() => {
+                target = clamp(state.value);
+                if (frame) {
+                    return;
+                }
+                let pour = timing(getComputedStyle(element), 'pour');
+                if (!pour) {
+                    position = target;
+                    velocity = 0;
+                    ink.position = position;
+                    return;
+                }
+                damping = 8000 / pour.duration;
+                stiffness = (damping / (2 * RATIO)) ** 2;
+                time = performance.now();
+                frame = requestAnimationFrame(step);
+            });
+        });
+        template_u1.ondisconnect(element_0mhdqo9a, () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+        });
+        return root_0mhdqo98;
+    })();
+};

package/build/components/pull-to-refresh/index.d.ts

@@ -1,3 +1,4 @@
+import * as template_u1 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 import './scss/index.scss';
 type A = Attributes & {
@@ -10,17 +11,8 @@ type State = {
     refreshing: boolean;
 };
 declare const PULL_TO_REFRESH_SCROLLER: unique symbol;
-declare const _default: {
-    (): Renderable<any>;
-    <T extends A>(attributes: T): Renderable<any>;
-    <T extends Renderable<unknown>>(content: T): Renderable<any>;
-    (attributes: A, content?: Renderable<unknown>): Renderable<any>;
-    bind(context: {
-        attributes?: Partial<A> | undefined;
-        content?: Renderable<unknown>;
-    }): any;
-} & {
+declare const _default: template_u1.Factory<A, Renderable<unknown>, Renderable<any>, {
     readonly scroller: typeof PULL_TO_REFRESH_SCROLLER;
-};
+}>;
 export default _default;
 export type { State };