@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/tasklist/index.js

@@ -0,0 +1,116 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import checkbox from '../checkbox/index.js';
+import { TASKLIST_CHECKBOX } from './constants.js';
+import './scss/index.scss';
+const template_0bgmsag1 = template_u1.template(`<li class='tasklist-item'><label class='tasklist-row'><!--$--><span class='tasklist-content'><span class='tasklist-label'>`);
+const template_0bgmsag7 = template_u1.template(`<span class='tasklist-description'>`);
+const template_0bgmsaga = template_u1.template(`<ul class='tasklist'>`);
+function checked(item) {
+    return item.querySelector('.checkbox-tag').checked;
+}
+async function finished(animations) {
+    let promises = [];
+    for (let i = 0, n = animations.length; i < n; i++) {
+        promises.push(animations[i].finished.catch(() => { }));
+    }
+    for (let i = 0, n = promises.length; i < n; i++) {
+        await promises[i];
+    }
+}
+function move(item) {
+    let list = item.parentElement, reference = null;
+    if (!checked(item)) {
+        let last = null;
+        for (let child of list.children) {
+            if (child === item) {
+                return;
+            }
+            if (!checked(child)) {
+                last = child;
+            }
+            else if (!pending(child)) {
+                break;
+            }
+        }
+        reference = last ? last.nextElementSibling : list.firstElementChild;
+    }
+    if (reference === item || (reference === null && list.lastElementChild === item)) {
+        return;
+    }
+    let items = [...list.children], first = items.map((element) => element.getBoundingClientRect().top);
+    if (typeof list.moveBefore === 'function') {
+        list.moveBefore(item, reference);
+    }
+    else {
+        let focused = document.activeElement;
+        list.insertBefore(item, reference);
+        if (focused && item.contains(focused)) {
+            focused.focus({ preventScroll: true });
+        }
+    }
+    for (let i = 0, n = items.length; i < n; i++) {
+        items[i].style.transform = '';
+        items[i].style.transition = 'none';
+    }
+    let last = items.map((element) => element.getBoundingClientRect().top);
+    for (let i = 0, n = items.length; i < n; i++) {
+        let offset = first[i] - last[i];
+        if (offset) {
+            items[i].style.transform = `translateY(${offset}px)`;
+        }
+    }
+    list.getBoundingClientRect();
+    for (let i = 0, n = items.length; i < n; i++) {
+        items[i].style.transform = '';
+        items[i].style.transition = '';
+    }
+    item.classList.add('--moving');
+    void finished(item.getAnimations()).then(() => {
+        if (!item.getAnimations().length) {
+            item.classList.remove('--moving');
+        }
+    });
+}
+function pending(item) {
+    return item.classList.contains('--checking') || item.classList.contains('--unchecking');
+}
+function row(task, reorder, attributes) {
+    let sequence = 0;
+    return (() => {
+        let root_0bgmsag0 = template_0bgmsag1(), element_0bgmsag2 = root_0bgmsag0.firstChild, element_0bgmsag3 = element_0bgmsag2.firstElementChild.firstChild, element_0bgmsag4 = element_0bgmsag2.firstElementChild.firstElementChild.firstElementChild, element_0bgmsag5 = element_0bgmsag2.firstElementChild.firstElementChild;
+        template_u1.delegate(element_0bgmsag2, 'change', async function (event) {
+            let id = ++sequence, value = event.target.checked;
+            task.checked = value;
+            this.classList.remove('--checking', '--unchecking');
+            this.classList.add(value ? '--checking' : '--unchecking');
+            await finished(this.getAnimations({ subtree: true }));
+            if (id !== sequence) {
+                return;
+            }
+            this.classList.remove('--checking', '--unchecking');
+            if (reorder) {
+                move(this);
+            }
+        });
+        template_u1.slot(element_0bgmsag3, checkbox.call({ attributes }, { class: 'tasklist-checkbox', [checkbox.input]: { checked: !!task.checked } }));
+        template_u1.slot(element_0bgmsag4, task.label, 1);
+        template_u1.slot(element_0bgmsag5, task.description && (() => {
+            let root_0bgmsag6 = template_0bgmsag7(), element_0bgmsag8 = root_0bgmsag6.firstChild;
+            template_u1.slot(element_0bgmsag8, task.description, 1);
+            return root_0bgmsag6;
+        })(), 2);
+        return root_0bgmsag0;
+    })();
+}
+export default component(function ({ reorder = true, tasks, ...attributes }) {
+    return (() => {
+        let root_0bgmsag9 = template_0bgmsaga(), element_0bgmsagb = root_0bgmsag9.firstChild;
+        template_u1.setProperties(element_0bgmsagb, attributes);
+        template_u1.slot(element_0bgmsagb, (reorder ? [
+            ...tasks.filter((task) => !task.checked),
+            ...tasks.filter((task) => task.checked)
+        ] : tasks).map((task) => row(task, reorder, attributes[TASKLIST_CHECKBOX])), 1);
+        return root_0bgmsag9;
+    })();
+}, { checkbox: TASKLIST_CHECKBOX });

package/build/components/tasklist/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.tasklist{--background:transparent;--border-radius:var(--border-radius-300);--check-duration:.28s;--description-color:var(--color-text-300);--description-color-checked:var(--color-border-500);--description-font-size:var(--font-size-300);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-out:cubic-bezier(.22, 1, .36, 1);--font-size:var(--font-size-400);--gap:var(--size-100);--gap-horizontal:var(--size-300);--label-color:var(--color-text-500);--label-color-checked:var(--color-text-300);--line-height:var(--size-500);--move-duration:.5s;--move-timing-function:linear(0, .109, .322, .536, .71, .835, .916, .965, .991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);--nudge-distance:8px;--nudge-duration:.3s;--padding-horizontal:var(--size-200);--padding-vertical:var(--size-100);--pop-duration:.34s;--pop-scale:1.08;--strike-duration:.38s;--strike-color:currentColor;--strike-width:1.5px}.tasklist .tasklist-checkbox{--background-active:var(--color-primary-400);--border-color-active:var(--color-primary-400);--border-color-default:var(--color-border-500);--border-width:var(--border-width-400);--size:var(--line-height);--transition-duration:var(--check-duration)}.tasklist--plan{--background-hover:color-mix(in oklch, var(--color-text-500) 3%, transparent);--border-radius:var(--border-radius-400);--check-duration:.15s;--description-font-size:var(--font-size-100);--font-size:var(--font-size-200);--gap:2px;--gap-horizontal:10px;--grip-color:var(--color-border-300);--grip-size:12px;--hover-duration:.15s;--index-color:var(--color-border-500);--index-font-family:"Geist Mono", ui-monospace, monospace;--index-font-size:var(--font-size-100);--label-font-weight:var(--font-weight-500);--nudge-distance:0px;--off-opacity:.45;--padding-horizontal:var(--size-100);--pop-scale:1;--strike-color:var(--color-border-400);--strike-duration:.2s;--strike-width:1px}.tasklist--plan .tasklist-checkbox{--background-active:var(--color-text-500);--border-color-active:var(--color-text-500);--border-color-default:var(--color-border-400);--border-radius:5px;--border-width:1px;--border-width-offset-hover:0px;--box-shadow-active:none;--size:16px}@media (prefers-reduced-motion:reduce){.tasklist{--check-duration:0s;--move-duration:0s;--nudge-duration:0s;--pop-duration:0s;--strike-duration:0s}}.tasklist{gap:var(--gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.tasklist-content{min-width:0}.tasklist-description{color:var(--description-color);font-size:var(--description-font-size);transition:color var(--strike-duration) var(--ease-in-out);display:block}.tasklist-item{background:var(--background);border-radius:var(--border-radius);transition:transform var(--move-duration) var(--move-timing-function);position:relative}.tasklist-item.--checking .tasklist-checkbox{animation:tasklist-pop var(--pop-duration) var(--ease-out)}.tasklist-item.--checking .tasklist-description,.tasklist-item.--checking .tasklist-label{transition-delay:var(--check-duration)}.tasklist-item.--checking .tasklist-row{animation:tasklist-nudge var(--nudge-duration) var(--ease-out) calc(var(--check-duration) + var(--strike-duration))}.tasklist-item.--moving{z-index:1}.tasklist-item.--unchecking .checkbox-check svg,.tasklist-item.--unchecking .tasklist-checkbox{transition-delay:var(--strike-duration)}.tasklist-item:has(.checkbox-tag:checked) .tasklist-description{color:var(--description-color-checked)}.tasklist-item:has(.checkbox-tag:checked) .tasklist-label{background-size:100% var(--strike-width);color:var(--label-color-checked)}.tasklist-label{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(var(--strike-color), var(--strike-color));background-position:0 55%;background-repeat:no-repeat;background-size:0% var(--strike-width);color:var(--label-color);transition:background-size var(--strike-duration) var(--ease-in-out), color var(--strike-duration) var(--ease-in-out)}.tasklist-row{cursor:pointer;font-size:var(--font-size);align-items:flex-start;gap:var(--gap-horizontal);line-height:var(--line-height);padding:var(--padding-vertical) var(--padding-horizontal);-webkit-user-select:none;user-select:none;display:flex}.tasklist--plan{counter-reset:tasklist}.tasklist--plan .tasklist-description{margin-top:2px}.tasklist--plan .tasklist-item{counter-increment:tasklist;transition:background-color var(--hover-duration) var(--ease-in-out), opacity var(--strike-duration) var(--ease-in-out), transform var(--move-duration) var(--move-timing-function)}.tasklist--plan .tasklist-item:has(.checkbox-tag:checked) .tasklist-description{color:var(--description-color)}.tasklist--plan .tasklist-item:has(.checkbox-tag:checked) .tasklist-label{background-size:0% var(--strike-width);color:var(--label-color)}.tasklist--plan .tasklist-item:not(:has(.checkbox-tag:checked)){opacity:var(--off-opacity)}.tasklist--plan .tasklist-item:not(:has(.checkbox-tag:checked)) .tasklist-label{background-size:100% var(--strike-width)}.tasklist--plan .tasklist-item:hover{--background:var(--background-hover)}.tasklist--plan .tasklist-label{font-weight:var(--label-font-weight)}.tasklist--plan .tasklist-label:before{color:var(--index-color);content:counter(tasklist, decimal-leading-zero);font-family:var(--index-font-family);font-size:var(--index-font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-400);margin-right:6px}.tasklist--plan .tasklist-row:before{background:var(--grip-color);content:"";flex:0 0 var(--grip-size);height:var(--grip-size);margin-top:calc((var(--line-height) - var(--grip-size)) / 2);opacity:0;transition:opacity var(--hover-duration) var(--ease-in-out);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat}@media (hover:hover){.tasklist--plan .tasklist-row:hover:before{opacity:1}}.tasklist--plan .tasklist-checkbox{margin-top:calc((var(--line-height) - var(--size)) / 2)}@keyframes tasklist-nudge{35%{transform:translateX(var(--nudge-distance))}70%{transform:translateX(calc(var(--nudge-distance) / -4))}}@keyframes tasklist-pop{40%{transform:scale(var(--pop-scale))}}}
+/*$vite$:1*/

package/build/components/text-animate/index.d.ts

@@ -0,0 +1,30 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    accessible?: boolean;
+    animation?: Animation;
+    by?: By;
+    delay?: number;
+    duration?: number;
+    once?: boolean;
+    startOnView?: boolean;
+    state?: State;
+};
+type Animation = 'blurIn' | 'blurInDown' | 'blurInUp' | 'fadeIn' | 'scaleDown' | 'scaleUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'slideUp';
+type By = 'character' | 'line' | 'text' | 'word';
+type State = {
+    show: boolean;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends string>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: string | undefined): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: string | undefined;
+    }): any;
+};
+export default _default;
+export type { Animation as TextAnimateAnimation, By as TextAnimateBy, State as TextAnimateState };

package/build/components/text-animate/index.js

@@ -0,0 +1,97 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1lnerv42 = template_u1.template(`<span class='text-animate-word'>`);
+const template_1lnerv45 = template_u1.template(`<span class='text-animate-segment'>`);
+const template_1lnerv48 = template_u1.template(`<span class='text-animate  '><!--$--><span class='text-animate-segments'>`);
+const template_1lnerv4d = template_u1.template(`<span class='text-animate-sr'>`);
+class ReactiveObject_1lnerv40 extends reactivity_u0.ReactiveObject {
+    #show = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get show() {
+        return reactivity_u0.read(this.#show);
+    }
+    set show(_v0) {
+        reactivity_u0.write(this.#show, _v0);
+    }
+}
+function characters(text) {
+    let i = 0;
+    return segments(text, 'word').map((part) => {
+        let chars = [...part];
+        if (!part.trim()) {
+            i += chars.length;
+            return part;
+        }
+        return (() => {
+            let root_1lnerv41 = template_1lnerv42(), element_1lnerv43 = root_1lnerv41.firstChild;
+            template_u1.slot(element_1lnerv43, chars.map((char) => segment(char, i++)), 1);
+            return root_1lnerv41;
+        })();
+    });
+}
+function segment(text, i) {
+    return (() => {
+        let root_1lnerv44 = template_1lnerv45(), element_1lnerv46 = root_1lnerv44.firstChild;
+        template_u1.setList(element_1lnerv46, 'style', `--i: ${i}`);
+        template_u1.slot(element_1lnerv46, text, 1);
+        return root_1lnerv44;
+    })();
+}
+function segments(text, by) {
+    if (by === 'line') {
+        return text.split('\n');
+    }
+    if (by === 'text') {
+        return [text];
+    }
+    return text.split(/(\s+)/).filter(Boolean);
+}
+export default component(function ({ accessible = true, animation = 'fadeIn', by = 'word', delay = 0, duration = 0.3, once = false, startOnView = true, state = new ReactiveObject_1lnerv40(), ...attributes }, content) {
+    let frame = 0, observer, parts = by === 'character' ? [] : segments(content, by), total = by === 'character' ? [...content].length : parts.length;
+    return (() => {
+        let root_1lnerv47 = template_1lnerv48(), element_1lnerv49 = root_1lnerv47.firstChild, element_1lnerv4a = element_1lnerv49.firstChild, element_1lnerv4b = element_1lnerv49.firstElementChild;
+        template_u1.setList(element_1lnerv49, 'class', template_u1.interpolate(["text-animate--", (animation)]));
+        template_u1.setList(element_1lnerv49, 'class', template_u1.interpolate(["text-animate--", (by)]));
+        template_u1.setList(element_1lnerv49, 'style', `--delay: ${delay}s; --segments: ${total}; --stagger: ${duration / Math.max(1, total)}s;`);
+        template_u1.setProperties(element_1lnerv49, this?.attributes);
+        template_u1.setProperties(element_1lnerv49, attributes);
+        template_u1.setList(element_1lnerv49, 'class', () => state.show && '--show');
+        template_u1.onconnect(element_1lnerv49, (element) => {
+            if (!startOnView) {
+                frame = requestAnimationFrame(() => {
+                    frame = requestAnimationFrame(() => state.show = true);
+                });
+                return;
+            }
+            observer = new IntersectionObserver((entries) => {
+                let entry = entries[entries.length - 1];
+                if (entry.isIntersecting) {
+                    state.show = true;
+                    if (once) {
+                        observer?.disconnect();
+                    }
+                }
+                else if (!once) {
+                    state.show = false;
+                }
+            });
+            observer.observe(element);
+        });
+        template_u1.ondisconnect(element_1lnerv49, () => {
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+        });
+        template_u1.slot(element_1lnerv4a, accessible && (() => {
+            let root_1lnerv4c = template_1lnerv4d(), element_1lnerv4e = root_1lnerv4c.firstChild;
+            template_u1.slot(element_1lnerv4e, content, 1);
+            return root_1lnerv4c;
+        })());
+        template_u1.setProperty(element_1lnerv4b, 'aria-hidden', accessible && 'true');
+        template_u1.slot(element_1lnerv4b, by === 'character' ? characters(content) : parts.map(segment), 1);
+        return root_1lnerv47;
+    })();
+});

package/build/components/text-animate/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.text-animate{--blur:10px;--delay:0s;--distance:20px;--ease:cubic-bezier(.23, 1, .32, 1);--filter-duration:.3s;--hidden-filter:blur(0);--hidden-scale:1;--hidden-x:0;--hidden-y:0;--opacity-duration:.3s;--scale-duration:.3s;--scale-ease:var(--ease);--segments:1;--stagger:0s;--translate-duration:.3s;white-space:pre-wrap;display:block}.text-animate-segment{filter:var(--hidden-filter);opacity:0;scale:var(--hidden-scale);transition:filter var(--filter-duration) var(--ease), opacity var(--opacity-duration) var(--ease), scale var(--scale-duration) var(--scale-ease), translate var(--translate-duration) var(--ease);transition-delay:calc((var(--segments) - 1 - var(--i)) * var(--stagger));translate:var(--hidden-x) var(--hidden-y);white-space:pre;display:inline-block}.text-animate-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.text-animate-word{white-space:nowrap;display:inline-block}.text-animate--blurIn{--hidden-filter:blur(var(--blur))}.text-animate--blurInDown{--hidden-filter:blur(var(--blur));--hidden-y:calc(var(--distance) * -1);--opacity-duration:.4s}.text-animate--blurInUp{--hidden-filter:blur(var(--blur));--hidden-y:var(--distance);--opacity-duration:.4s}.text-animate--fadeIn,.text-animate--slideUp{--hidden-y:var(--distance)}.text-animate--line .text-animate-segment{display:block}.text-animate--scaleDown{--hidden-scale:1.5}.text-animate--scaleDown,.text-animate--scaleUp{--scale-duration:.95s;--scale-ease:linear(0, .133, .422, .739, .996, 1.153, 1.217, 1.204, 1.148, 1.078, 1.017, .975, .955, .953, .963, .978, .992, 1.003, 1.009, 1.011, 1.009, 1.006, 1.003, 1, .998, .998, .998, .998, .999, 1, 1)}.text-animate--scaleUp{--hidden-scale:.5}.text-animate--slideDown{--hidden-y:calc(var(--distance) * -1)}.text-animate--slideLeft{--hidden-x:var(--distance)}.text-animate--slideRight{--hidden-x:calc(var(--distance) * -1)}.text-animate.--show .text-animate-segment{filter:blur();opacity:1;transition-delay:calc(var(--delay) + var(--i) * var(--stagger));translate:0;scale:1}@media (prefers-reduced-motion:reduce){.text-animate-segment{filter:none;transition:opacity var(--opacity-duration) var(--ease);translate:0;scale:1}}}
+/*$vite$:1*/

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

@@ -0,0 +1,13 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+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 TextProgressState };

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

@@ -0,0 +1,114 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_06fx22a2 = template_u1.template(`<span class='text-progress-roll'><span class='text-progress-strip'>`);
+const template_06fx22a5 = template_u1.template(`<span>`);
+const template_06fx22a8 = template_u1.template(`<div aria-valuemax='100' aria-valuemin='0' class='text-progress ' role='progressbar'><span aria-hidden='true' class='text-progress-labels'><span class='text-progress-label'><span class='text-progress-track'></span><span class='text-progress-ink'></span></span><span class='text-progress-done'><svg class='text-progress-check' fill='none' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' pathLength='1' stroke='currentColor' stroke-dasharray='1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' /></svg></span></span><span aria-hidden='true' class='text-progress-percent'><!--$--><!--$--><span>%</span></span><span aria-live='polite' class='text-progress-sr'>`);
+class ReactiveObject_06fx22a0 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);
+    }
+}
+const DAMPING = 20;
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const REST = 0.01;
+const STIFFNESS = 90;
+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 reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function roll(strip, index) {
+    return (() => {
+        let root_06fx22a1 = template_06fx22a2(), element_06fx22a3 = root_06fx22a1.firstChild.firstElementChild;
+        template_u1.setList(element_06fx22a3, 'style', () => `translate: 0 ${-index() * 10}%`);
+        template_u1.slot(element_06fx22a3, strip.map((digit) => {
+            let root_06fx22a4 = template_06fx22a5(), element_06fx22a6 = root_06fx22a4.firstChild;
+            template_u1.slot(element_06fx22a6, digit, 1);
+            return root_06fx22a4;
+        }), 1);
+        return root_06fx22a1;
+    })();
+}
+export default ({ doneLabel = 'Done', label, state = new ReactiveObject_06fx22a0(), ...attributes }) => {
+    let frame = 0, ink, position = clamp(state.value), stop, 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);
+        }
+        if (ink) {
+            ink.style.clipPath = clip(position);
+        }
+    }
+    return (() => {
+        let root_06fx22a7 = template_06fx22a8(), element_06fx22a9 = root_06fx22a7.firstChild, element_06fx22aa = element_06fx22a9.firstElementChild.firstElementChild.firstElementChild, element_06fx22ab = element_06fx22aa.nextElementSibling, element_06fx22ac = element_06fx22a9.firstElementChild.firstElementChild.nextElementSibling, element_06fx22ad = element_06fx22a9.firstElementChild.nextElementSibling.firstChild, element_06fx22ae = element_06fx22ad.nextSibling, element_06fx22af = element_06fx22a9.firstElementChild.nextElementSibling.nextElementSibling;
+        template_u1.setProperty(element_06fx22a9, 'aria-label', label);
+        template_u1.setProperty(element_06fx22a9, 'aria-valuenow', percent);
+        template_u1.setProperty(element_06fx22a9, 'aria-valuetext', () => done() ? doneLabel : `${percent()}%`);
+        template_u1.setList(element_06fx22a9, 'class', () => done() && '--done');
+        template_u1.setProperties(element_06fx22a9, attributes);
+        template_u1.onconnect(element_06fx22a9, (element) => {
+            ink = element.querySelector('.text-progress-ink') ?? undefined;
+            stop = effect(() => {
+                target = clamp(state.value);
+                if (reduced()) {
+                    cancelAnimationFrame(frame);
+                    frame = 0;
+                    position = target;
+                    velocity = 0;
+                    if (ink) {
+                        ink.style.clipPath = clip(position);
+                    }
+                    return;
+                }
+                if (!frame) {
+                    time = performance.now();
+                    frame = requestAnimationFrame(step);
+                }
+            });
+        });
+        template_u1.ondisconnect(element_06fx22a9, () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+            stop?.();
+        });
+        template_u1.slot(element_06fx22aa, label, 1);
+        template_u1.setList(element_06fx22ab, 'style', `clip-path: ${clip(position)}`);
+        template_u1.slot(element_06fx22ab, label, 1);
+        template_u1.slot(element_06fx22ac, doneLabel, 2);
+        template_u1.slot(element_06fx22ad, roll(TENS, () => Math.floor((percent() % 100) / 10)));
+        template_u1.slot(element_06fx22ae, roll(DIGITS, () => percent() % 10));
+        new template_u1.EffectSlot(element_06fx22af, () => done() ? doneLabel : '', 1);
+        return root_06fx22a7;
+    })();
+};

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

@@ -0,0 +1,2 @@
+@layer components {.text-progress{--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;--track-color:oklch(from var(--color-text-500) l c h / .2)}.text-progress--blue{--color:var(--color-blue-400);--track-color:oklch(from var(--color-blue-400) l c h / .2)}.text-progress--large{--check-size:22px;--done-gap:8px;--font-size:var(--font-size-600);--part-gap:14px;--part-height:32px}.text-progress{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}.text-progress-check{height:var(--check-size);width:var(--check-size);flex-shrink:0}.text-progress-check path{stroke-dashoffset:1px;transition:stroke-dashoffset 0s var(--ease-in-out) .15s}.text-progress-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}.text-progress-ink{position:absolute;inset:0}.text-progress-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}.text-progress-labels{display:grid}.text-progress-percent{color:var(--muted-color);font-variant-numeric:tabular-nums;transition:filter .3s var(--ease-out), opacity .3s var(--ease-out);display:flex}.text-progress-roll{width:1ch;height:1lh;display:inline-block;position:relative;overflow:hidden}.text-progress-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.text-progress-strip{transition:translate .3s var(--ease-out);white-space:pre;inset-inline:0;flex-direction:column;display:flex;position:absolute;top:0}.text-progress-strip span{height:1lh}.text-progress-track{color:var(--track-color)}.text-progress.--done .text-progress-check path{stroke-dashoffset:0;transition-duration:.3s}.text-progress.--done .text-progress-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}.text-progress.--done .text-progress-label{filter:blur(4px);opacity:0;transition-duration:.2s;translate:0 -4px}.text-progress.--done .text-progress-percent{filter:blur(4px);opacity:0;transition-duration:.2s}@media (prefers-reduced-motion:reduce){.text-progress-check path,.text-progress-strip,.text-progress.--done .text-progress-check path{transition:none}.text-progress-done,.text-progress.--done .text-progress-label{translate:0}}}
+/*$vite$:1*/