@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/command/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.card{--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;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed)}.card{background:var(--background);border-radius:var(--border-radius);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), max-height var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.card: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}.modal{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--scale:1;--translateY:var(--margin-vertical)}.modal--alert{--backdrop:#0000001a;--blur:4px;--scale:.95;--transition-duration:.1s;--transition-timing-function:ease;--translateY:0px}.modal--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:8px}.modal--fade{--translateY:0px}.modal--scale{--scale:.92;--translateY:0px}.modal--sheet{--translateY:100%}.modal--spring{--scale:.8;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--translateY:0px}:where(dialog.modal){color:inherit;background:0 0;border:0;max-width:100%;max-height:100%;padding:0}dialog.modal{position:fixed}.modal{transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);margin:auto}.modal:not(.--active){opacity:0;pointer-events:none;scale:var(--scale);translate:0 var(--translateY)}.modal:not(.--active)::backdrop{opacity:0}.modal:not(.--active) input[type=password]{display:none}.modal::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.modal--alert::backdrop,.modal--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.modal--sheet{transform-origin:bottom;margin-block-end:0}.modal--sheet:not(.--active){opacity:1}.modal-frame{transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%}.modal-frame:not(.--active){display:none}@media (prefers-reduced-motion:reduce){.modal,.modal::backdrop{transition:none}}.command{--background-default:var(--color-white-400);--border-color-default:var(--color-border-300);--border-radius:var(--border-radius-700);--border-width:var(--border-width-400);--box-shadow-default:var(--box-shadow-600);--heading-height:36px;--height:408px;--max-width:600px;--padding:var(--size-200);--padding-horizontal:var(--padding);--padding-vertical:var(--padding);--row-height:36px}.command-footer{--background:var(--color-grey-300);--color:var(--color-text-300)}.command-highlight{--background:var(--color-grey-500)}.command-match{--background:oklch(from var(--color-yellow-300) l c h / .4)}.command-search{--background:oklch(from var(--color-grey-500) l c h / .5);--color:var(--color-text-300);--height:36px}.command{border:var(--border-width) solid var(--border-color);height:min(var(--height), 76svh);flex-direction:column;margin:12svh auto auto}.command[open]{display:flex}.command-empty{color:var(--color-text-300);font-size:var(--font-size-300);padding-top:var(--size-800);text-align:center}.command-empty b{color:var(--color-text-500);font-weight:var(--font-weight-500)}.command-footer{background:var(--background);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-top:var(--border-width) solid var(--color-border-300);color:var(--color);font-size:var(--font-size-200);font-weight:var(--font-weight-500);align-items:center;gap:var(--size-200);margin:var(--size-200) calc(var(--border-width) - var(--padding)) calc(var(--border-width) - var(--padding));min-height:44px;padding:0 var(--size-400);flex:none;display:flex}.command-footer kbd{background:var(--color-white-300);border:var(--border-width) solid var(--color-border-400);border-radius:var(--border-radius-300);font-family:inherit;font-size:var(--font-size-200);min-width:22px;height:22px;padding:0 var(--size-100);justify-content:center;align-items:center;display:inline-flex}.command-footer span+kbd{margin-left:var(--size-300)}.command-group-label{color:var(--color-text-300);font-size:var(--font-size-200);font-weight:var(--font-weight-500);height:var(--heading-height);padding:0 var(--size-300) var(--size-100);align-items:flex-end;display:flex}.command-highlight{background:var(--background);border-radius:var(--border-radius-400);height:var(--row-height);opacity:0;pointer-events:none;transform:translateY(calc(var(--heading-height) * var(--group,1) + var(--row-height) * var(--row,0)));transition:opacity var(--transition-duration) var(--transition-timing-function), transform .28s cubic-bezier(.34, 1.24, .64, 1);position:absolute;top:0;left:0;right:0}.command-highlight.--active{opacity:1}.command-item{border-radius:var(--border-radius-400);color:oklch(from var(--color-text-500) l c h/.8);cursor:pointer;font-size:var(--font-size-300);font-weight:var(--font-weight-500);align-items:center;gap:var(--size-300);height:var(--row-height);padding:0 var(--size-300);transition:color var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);z-index:1;text-decoration:none;display:flex;position:relative}.command-item:active{transform:scale(.985)}.command-item-icon{color:var(--color-text-300);flex:none;transition:transform .24s cubic-bezier(.34,1.24,.64,1);display:flex}.command-item-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.command-item.--active{color:var(--color-text-500)}.command-item.--active .command-item-icon{transform:translate(2px)}.command-list{position:relative}.command-match{background:var(--background);border-radius:var(--border-radius-100);color:inherit}.command-results{flex:auto;min-height:0;overflow:hidden auto}.command-search{background:var(--background);border:var(--border-width) solid var(--color-border-300);border-radius:var(--border-radius-400);cursor:text;align-items:center;gap:var(--size-300);height:var(--height);padding:0 var(--size-300);flex:none;display:flex}.command-search-icon{color:var(--color);flex:none;width:14px;height:14px;position:relative}.command-search-icon:after,.command-search-icon:before{content:"";position:absolute}.command-search-icon:after{transform-origin:bottom;background:currentColor;border-radius:1px;width:1.5px;height:5px;bottom:0;right:1px;transform:rotate(-45deg)}.command-search-icon:before{border:1.5px solid;border-radius:50%;width:10px;height:10px;top:0;left:0}.command-search>.input{--padding-horizontal:0px;--padding-vertical:0px;outline:none;font-family:inherit}.command-search>.input::placeholder{color:var(--color-text-300);opacity:.6}}
+@layer components{.command-label,.command-trigger-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.command,.command-trigger{--raised: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)}.command{--close-duration:.1s;--color:var(--color-text-500);--color-muted:var(--color-text-300);--count-fade:48px;--dialog-backdrop:color-mix(in srgb, var(--color-text-500) 10%, transparent);--dialog-background:var(--color-white-300);--dialog-border-radius:var(--border-radius-600);--dialog-offset:20vh;--dialog-scale:.98;--dialog-width:600px;--divider-color:var(--color-border-300);--font-size:calc(var(--font-size-400) * .875);--footer-height:44px;--input-mask:none;--kbd-icon-size:12px;--label-font-size:var(--font-size-200);--list-max-height:min(320px, 50vh);--open-duration:.15s;--option-background:var(--color-grey-400);--option-border-radius:var(--border-radius-400);--option-height:36px;--search-height:48px;--tab-height:32px;--timing-function:cubic-bezier(.23, 1, .32, 1)}.command--centered{--dialog-offset:auto}.command-dialog.overlay{--backdrop:var(--dialog-backdrop);--margin-horizontal:var(--size-400);--max-width:var(--dialog-width);--scale:var(--dialog-scale);--transition-duration:var(--open-duration);--transition-timing-function:var(--timing-function)}.command-dialog.overlay:not(.--active){--transition-duration:var(--close-duration)}.command-highlight.highlight{--background-active:var(--option-background);--glide-duration:.3s}.command-input.input{--color-default:var(--color);--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;--size:0px}.command-kbd-icon.icon{--size:var(--kbd-icon-size)}.command-option-icon.icon{--color:var(--color-muted)}.command-option-icon.icon.--active{--color:inherit}.command-search:has(.command-count){--input-mask:linear-gradient(to right, #000 calc(100% - var(--count-fade)), transparent)}.command-tab.button{--border-radius:var(--border-radius-400);--color-active:var(--color);--color-default:var(--color-muted);--color-hover:var(--color);--font-size:calc(var(--font-size-400) * .875);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px}.command-tabs-highlight.highlight{--background-active:var(--option-background);--glide-duration:.4s}.command-trigger.button{--background-default:var(--color-white-400);--border-radius:var(--border-radius-400);--box-shadow-default:var(--raised);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:calc(var(--font-size-400) * .875);--gap-horizontal:var(--size-100);--line-height:24px;--padding-horizontal:6px;--padding-vertical:6px;--transition-duration:.15s;--transition-timing-function:ease-out;--width:240px}@media (prefers-reduced-motion:reduce){.command-dialog.overlay{--scale:1}}.command{display:contents}.command-count{color:var(--color-muted);font-size:var(--label-font-size);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.command-dialog.overlay{background:var(--dialog-background);border-radius:var(--dialog-border-radius);box-shadow:var(--raised);color:var(--color);margin-block:var(--dialog-offset) auto;transform-origin:top;overflow:hidden}.command-empty{color:var(--color-muted);font-size:var(--font-size);padding:var(--size-700) var(--size-400);text-align:center;margin-block:auto}.command-footer{border-top:var(--border-width-400) solid var(--divider-color);color:var(--color-muted);font-size:var(--label-font-size);align-items:center;gap:var(--size-400);height:var(--footer-height);padding-inline:var(--size-400);-webkit-user-select:none;user-select:none;flex-shrink:0;display:flex}.command-footer-hint{align-items:center;gap:var(--size-200);display:flex}.command-footer-hint:first-child{margin-inline-end:auto}.command-group-label{color:var(--color-muted);font-size:var(--label-font-size);font-weight:var(--font-weight-500);padding:var(--size-100) var(--size-300) calc(var(--size-100) / 2);text-transform:uppercase;-webkit-user-select:none;user-select:none}.command-input.input{height:100%;-webkit-mask-image:var(--input-mask);-webkit-mask-image:var(--input-mask);mask-image:var(--input-mask);outline:none}.command-input.input::placeholder{color:var(--color-muted)}.command-keys{gap:calc(var(--size-100) / 2);pointer-events:none;flex-shrink:0;display:flex}.command-label{color:var(--color);flex:auto;min-width:0}.command-label--filtered{color:var(--color-muted)}.command-list{max-height:var(--list-max-height);overscroll-behavior:contain;padding:calc(var(--size-100) / 2) calc(var(--size-100) / 2 + 2px);scroll-behavior:smooth;scroll-padding-block:calc(var(--size-100) / 2);width:100%;overflow-y:auto}@media (prefers-reduced-motion:reduce){.command-list{scroll-behavior:auto}}.command-list--empty{display:none}.command-match{color:var(--color)}.command-option{border-radius:var(--option-border-radius);cursor:pointer;font-size:var(--font-size);align-items:center;gap:var(--size-200);height:var(--option-height);padding-inline:var(--size-300);-webkit-user-select:none;user-select:none;display:flex}.command-option--inert{cursor:default}.command-panel{flex-direction:column;display:flex}.command-search{color:var(--color-muted);align-items:center;gap:var(--size-200);height:var(--search-height);padding-inline:var(--size-400);flex-shrink:0;display:flex}.command-tab.button{height:var(--tab-height);-webkit-user-select:none;user-select:none;flex-shrink:0}.command-tabs{--scrollbar-width:none;gap:var(--size-100);padding:0 var(--size-400) var(--size-300);scrollbar-width:none;flex-shrink:0;display:flex;overflow-x:auto}.command-trigger.button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.command-trigger.button:focus-visible{outline:var(--border-width-500) solid var(--color-text-500);outline-offset:var(--border-width-500)}.command-trigger.button[hidden]{display:none}.command-trigger-label{text-align:left;flex:auto}.command-view{flex-direction:column;display:flex}.command-views{border-top:var(--border-width-400) solid var(--divider-color);overflow:hidden}.command-views:has(>.frame--swap){height:var(--list-max-height)}@media (prefers-reduced-motion:reduce){.command-dialog.overlay,.command-dialog.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.command-trigger.button:active{scale:1}}}
 /*$vite$:1*/

package/build/components/container/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.container{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;gap:var(--gap-vertical) var(--gap-horizontal);margin-block:var(--margin-vertical);width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);flex-wrap:wrap;justify-content:flex-start;margin-inline:auto;display:flex;position:relative}}
+@layer components{.container{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;gap:var(--gap-vertical) var(--gap-horizontal);margin-block:var(--margin-vertical);width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);flex-wrap:wrap;justify-content:flex-start;margin-inline:auto;display:flex;position:relative}}
 /*$vite$:1*/

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

@@ -0,0 +1,23 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    error?: string;
+    label?: string;
+    onclick?: never;
+    ondisconnect?: never;
+    success?: string;
+    timeout?: number;
+    value: string | (() => string);
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/copy/index.js

@@ -0,0 +1,61 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import checkSvg from '@esportsplus/ui/svg/check.svg';
+import copySvg from '@esportsplus/ui/svg/copy.svg';
+import write from '../clipboard/write.js';
+import './scss/index.scss';
+const template_0z7mep82 = template_u1.template(`<svg aria-hidden='true' class='copy-icon copy-icon--check'><use />`);
+const template_0z7mep85 = template_u1.template(`<svg aria-hidden='true' class='copy-icon'><use />`);
+const template_0z7mep88 = template_u1.template(`<button class='copy' type='button'>`);
+class ReactiveObject_0z7mep80 extends reactivity_u0.ReactiveObject {
+    #status;
+    constructor(_p0) {
+        super(null);
+        this.#status = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v0) {
+        reactivity_u0.write(this.#status, _v0);
+    }
+}
+const check = () => {
+    let root_0z7mep81 = template_0z7mep82(), element_0z7mep83 = root_0z7mep81.firstChild.firstElementChild;
+    template_u1.setProperty(element_0z7mep83, 'href', template_u1.interpolate(["#", (checkSvg)]));
+    return root_0z7mep81;
+};
+const idle = () => {
+    let root_0z7mep84 = template_0z7mep85(), element_0z7mep86 = root_0z7mep84.firstChild.firstElementChild;
+    template_u1.setProperty(element_0z7mep86, 'href', template_u1.interpolate(["#", (copySvg)]));
+    return root_0z7mep84;
+};
+export default component(({ error = 'Copy failed', label = 'Copy', success = 'Copied', timeout = 3000, value, ...attributes }) => {
+    let request = 0, state = new ReactiveObject_0z7mep80('idle'), text = () => state.status === 'success' ? success : state.status === 'error' ? error : label, timer;
+    return (() => {
+        let root_0z7mep87 = template_0z7mep88(), element_0z7mep89 = root_0z7mep87.firstChild;
+        new template_u1.EffectSlot(element_0z7mep89, () => state.status === 'success' ? check() : idle(), 1);
+        template_u1.setProperties(element_0z7mep89, attributes);
+        template_u1.setProperty(element_0z7mep89, 'aria-label', text);
+        template_u1.ondisconnect(element_0z7mep89, () => {
+            request++;
+            clearTimeout(timer);
+        });
+        template_u1.delegate(element_0z7mep89, 'click', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            let current = ++request, copied = await write(typeof value === 'function' ? value() : value);
+            if (current !== request) {
+                return;
+            }
+            clearTimeout(timer);
+            state.status = copied ? 'success' : 'error';
+            timer = setTimeout(() => {
+                state.status = 'idle';
+            }, timeout);
+        });
+        template_u1.setProperty(element_0z7mep89, 'title', text);
+        return root_0z7mep87;
+    })();
+});

package/build/components/copy/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{.copy-icon--check{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;stroke-dasharray:1;stroke-dashoffset:1px}.copy{--background:var(--background-default);--background-default:transparent;--background-hover:var(--color-grey-400);--border-radius:6px;--color:var(--color-default);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--draw-duration:.28s;--draw-timing-function:ease;--icon-size:16px;--outline-color:var(--color-blue-400);--outline-width:2px;--size:28px;--transition-duration:.15s;--transition-timing-function:ease-out}.copy:hover{--background:var(--background-hover);--color:var(--color-hover)}.copy{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;height:var(--size);transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);width:var(--size);border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.copy:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:calc(var(--outline-width) * -1)}.copy-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.copy-icon--check{animation:copy-check-draw var(--draw-duration) var(--draw-timing-function) forwards;stroke-width:4px}@media (prefers-reduced-motion:reduce){.copy-icon--check{stroke-dashoffset:0;animation:none}}@keyframes copy-check-draw{to{stroke-dashoffset:0}}}
+/*$vite$:1*/

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

@@ -1,8 +1,9 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
+type Currency = 'EUR' | 'GBP' | 'IGNORE' | 'USD';
 export default _default;
-declare function _default({ currency, decimals, delay, max, prefix, startOnView, state: api, suffix, value, ...attributes }: Attributes & {
-    currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
+declare function _default({ currency, decimals, delay, max, prefix, startOnView, value, state: api, suffix, ...attributes }: Attributes & {
+    currency?: Currency;
     decimals?: number;
     delay?: number;
     max?: number;

package/build/components/counter/index.js

@@ -1,24 +1,13 @@
 import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import { onceVisible } from '../../shared/visible.js';
 import './scss/index.scss';
-const template_00nd5up3 = template_u1.template(`<div class='counter'>`);
-const template_00nd5up6 = template_u1.template(`<span class='counter-character counter-character--symbol'>`);
-const template_00nd5up9 = template_u1.template(`<div class='counter-character'><div class='counter-character-track'><span>9</span><!--$--><span>0`);
-const template_00nd5upd = template_u1.template(`<span>`);
+const template_00nd5up2 = template_u1.template(`<div class='counter'><!--$--><span class='counter-sr'><!--$--><!--$-->`);
+const template_00nd5up9 = template_u1.template(`<span aria-hidden='true' class='counter-character counter-character--symbol'>`);
+const template_00nd5upc = template_u1.template(`<div aria-hidden='true' class='counter-character'><div class='counter-character-track '><span class='counter-digit'>9</span><!--$--><span class='counter-digit'>0`);
+const template_00nd5upg = template_u1.template(`<span class='counter-digit'>`);
 class ReactiveObject_00nd5up0 extends reactivity_u0.ReactiveObject {
-    #value = this[reactivity_u0.SIGNAL](-1);
-    constructor() {
-        super(null);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-class ReactiveObject_00nd5up1 extends reactivity_u0.ReactiveObject {
     #started = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
@@ -30,26 +19,19 @@ class ReactiveObject_00nd5up1 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#started, _v0);
     }
 }
+const DIGIT = /\d/;
 let formatters = {};
-export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state: api = new ReactiveObject_00nd5up0(), suffix, value, ...attributes }) => {
-    let formatter = currency === 'IGNORE'
-        ? undefined
-        : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: currency || 'USD'
-        }), animation = new ReactiveObject_00nd5up1(), observer, render = new reactivity_u0.ReactiveArray(), stop = effect(() => {
-        let target = api.value === -1 ? value : api.value, started = animation.started;
-        let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length, values = target.toString().padStart(target.toString().length + padding, '1');
-        if (formatter) {
-            values = formatter.format(values);
-        }
-        else {
-            values = Number(values).toLocaleString([], {
-                minimumFractionDigits: 0,
-                maximumFractionDigits: decimals
-            });
-        }
-        values = values.split('');
+function formatter(currency, decimals) {
+    if (currency === 'IGNORE') {
+        return formatters[decimals] ??= new Intl.NumberFormat(undefined, { maximumFractionDigits: decimals });
+    }
+    return formatters[currency] ??= new Intl.NumberFormat(undefined, { currency, style: 'currency' });
+}
+export default ({ currency = 'USD', decimals = 2, delay, max, prefix, startOnView, value, state: api = reactivity_u0.reactive({ value }), suffix, ...attributes }) => {
+    let animation = new ReactiveObject_00nd5up0(), format = formatter(currency, decimals), render = new reactivity_u0.ReactiveArray(), timer;
+    effect(() => {
+        let started = animation.started, target = api.value;
+        let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length, values = format.format(Number(target.toString().padStart(target.toString().length + padding, '1'))).split('');
         if (prefix) {
             values.unshift(...prefix.split(''));
         }
@@ -57,9 +39,9 @@ export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state
             values.push(' ', ...suffix.split(''));
         }
         untrack(() => {
-            let remaining = values.filter((value) => !isNaN(parseInt(value, 10))).length;
+            let remaining = values.filter((value) => DIGIT.test(value)).length;
             for (let i = 0, n = values.length; i < n; i++) {
-                let previous = render[i], value = values[i], digit = !isNaN(parseInt(value, 10)), index = digit ? --remaining : 0;
+                let previous = render[i], value = values[i], digit = DIGIT.test(value), index = digit ? --remaining : 0;
                 if (digit && (!started || padding > 0)) {
                     padding--;
                     value = '0';
@@ -80,52 +62,38 @@ export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state
                 render.splice(values.length);
             }
         });
-    }), timer;
+    });
     function start() {
         timer = setTimeout(() => animation.started = true, delay ?? 1000);
     }
-    onCleanup(() => {
-        clearTimeout(timer);
-        observer?.disconnect();
-        stop();
-    });
+    onCleanup(() => clearTimeout(timer));
     return (() => {
-        let root_00nd5up2 = template_00nd5up3(), element_00nd5up4 = root_00nd5up2.firstChild;
-        template_u1.setProperties(element_00nd5up4, attributes);
-        template_u1.onconnect(element_00nd5up4, (element) => {
-            if (!startOnView) {
-                start();
-                return;
-            }
-            observer = new IntersectionObserver((entries) => {
-                if (!entries.some((entry) => entry.isIntersecting)) {
-                    return;
-                }
-                observer?.disconnect();
-                start();
-            });
-            observer.observe(element);
-        });
-        element_00nd5up4.appendChild(new template_u1.ArraySlot(render, function (character) {
+        let root_00nd5up1 = template_00nd5up2(), element_00nd5up3 = root_00nd5up1.firstChild, element_00nd5up4 = element_00nd5up3.firstChild, element_00nd5up5 = element_00nd5up3.firstElementChild.firstChild, element_00nd5up6 = element_00nd5up5.nextSibling, element_00nd5up7 = element_00nd5up3.firstElementChild;
+        element_00nd5up4.parentNode.insertBefore(new template_u1.ArraySlot(render, function (character) {
             if (!character.digit) {
                 return (() => {
-                    let root_00nd5up5 = template_00nd5up6(), element_00nd5up7 = root_00nd5up5.firstChild;
-                    new template_u1.EffectSlot(element_00nd5up7, () => character.value, 1);
-                    return root_00nd5up5;
+                    let root_00nd5up8 = template_00nd5up9(), element_00nd5upa = root_00nd5up8.firstChild;
+                    new template_u1.EffectSlot(element_00nd5upa, () => character.value, 1);
+                    return root_00nd5up8;
                 })();
             }
             return (() => {
-                let root_00nd5up8 = template_00nd5up9(), element_00nd5upa = root_00nd5up8.firstChild.firstElementChild, element_00nd5upb = element_00nd5upa.firstChild.nextSibling;
-                template_u1.setProperty(element_00nd5upa, 'data-roll', () => character.roll);
-                template_u1.setList(element_00nd5upa, 'style', () => `--index: ${character.index}; --value: ${character.value}`);
-                template_u1.slot(element_00nd5upb, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
-                    let root_00nd5upc = template_00nd5upd(), element_00nd5upe = root_00nd5upc.firstChild;
-                    template_u1.slot(element_00nd5upe, value, 1);
-                    return root_00nd5upc;
+                let root_00nd5upb = template_00nd5upc(), element_00nd5upd = root_00nd5upb.firstChild.firstElementChild, element_00nd5upe = element_00nd5upd.firstChild.nextSibling;
+                template_u1.slot(element_00nd5upe, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
+                    let root_00nd5upf = template_00nd5upg(), element_00nd5uph = root_00nd5upf.firstChild;
+                    template_u1.slot(element_00nd5uph, value, 1);
+                    return root_00nd5upf;
                 }));
-                return root_00nd5up8;
+                template_u1.setList(element_00nd5upd, 'class', () => character.roll && `counter-character-track--roll-${character.roll}`);
+                template_u1.setList(element_00nd5upd, 'style', () => `--index: ${character.index}; --value: ${character.value}`);
+                return root_00nd5upb;
             })();
-        }, true).fragment);
-        return root_00nd5up2;
+        }).fragment, element_00nd5up4);
+        template_u1.slot(element_00nd5up5, prefix);
+        new template_u1.EffectSlot(element_00nd5up6, () => format.format(api.value));
+        template_u1.slot(element_00nd5up7, suffix && ` ${suffix}`, 2);
+        template_u1.setProperties(element_00nd5up3, attributes);
+        template_u1.setProperties(element_00nd5up3, startOnView ? onceVisible(start) : { onconnect: start });
+        return root_00nd5up1;
     })();
 };

package/build/components/counter/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.counter{--blur:.05em;--font-size:clamp(2rem, 4vw + 1rem, 8rem);--font-weight:var(--font-weight-400);--mask-size:.24;--stagger:0s;--timing-function:linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);--transition-duration:2s}.counter--linear{--timing-function:linear;--transition-duration:1.2s}.counter--snap{--timing-function:cubic-bezier(.16, 1, .3, 1);--transition-duration:.64s}.counter--spring{--timing-function:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--transition-duration:1.2s}.counter--stagger{--stagger:80ms}.counter-character{--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter--ticker{--font-size:1em;--mask-size:.12;--stagger:60ms;--timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.9s}.counter--ticker .counter-character--symbol{--opacity:1;--scale:1}.counter{transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size) * var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:1lh;overflow:visible}.counter-character--fraction .counter-character-track span{flex-direction:column;align-items:end;padding:calc(.2lh - .2em) 0;display:flex}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-inline-end:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));display:grid}.counter-character-track span{transform-style:flat;height:1lh}@media (prefers-reduced-motion:no-preference){.counter--blur .counter-character-track{animation:var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}.counter--blur .counter-character-track[data-roll="1"]{animation-name:counter-blur-1}.counter--blur .counter-character-track[data-roll="2"]{animation-name:counter-blur-2}}.counter--ticker{gap:0}.counter--ticker .counter-character,.counter--ticker .counter-character-track span{color:inherit;background:0 0}@media (prefers-reduced-motion:reduce){.counter,.counter-character-track{transition:none}}@keyframes counter-blur-1{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}@keyframes counter-blur-2{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}}
+@layer components{.counter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.counter{--blur:.05em;--color:var(--color-black-400);--fill:initial;--font-size:1em;--font-weight:var(--font-weight-400);--roll-1-animation:none;--roll-2-animation:none;--stagger:0s;--timing-function:linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);--transition-duration:2s}.counter--blur{--roll-1-animation:counter-blur-1;--roll-2-animation:counter-blur-2}.counter--inherit{--color:currentColor}.counter--shade{--fill:linear-gradient(currentColor 50%, color-mix(in srgb, currentColor 45%, transparent))}.counter--snap{--timing-function:cubic-bezier(.16, 1, .3, 1);--transition-duration:.64s}.counter--spring{--timing-function:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--transition-duration:1.2s}.counter--ticker{--stagger:60ms;--timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.9s}.counter-character--symbol{--opacity:1;--scale:1}.counter{color:var(--color);transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);place-items:center;gap:2px;display:flex}.counter-character--symbol,.counter-digit{background:var(--fill,linear-gradient(currentColor, currentColor));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;display:grid;overflow:hidden}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-inline-end:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));display:grid}@media (prefers-reduced-motion:no-preference){.counter-character-track--roll-1{animation:var(--roll-1-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}.counter-character-track--roll-2{animation:var(--roll-2-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}}.counter-digit{height:1lh}.counter--ticker{gap:0}@media (prefers-reduced-motion:reduce){.counter,.counter-character-track{transition:none}}@keyframes counter-blur-1{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}@keyframes counter-blur-2{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}}
 /*$vite$:1*/

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

@@ -13,7 +13,12 @@ type A = {
     [DATALIST_SCROLLER]?: Attributes & {
         'aria-activedescendant'?: never;
         onconnect?: never;
+        ondragstart?: never;
         onkeydown?: never;
+        onpointercancel?: never;
+        onpointerdown?: never;
+        onpointermove?: never;
+        onpointerup?: never;
         onscroll?: never;
     };
     options: Record<number | string, Renderable<unknown>>;

package/build/components/datalist/index.js

@@ -3,9 +3,11 @@ import { component, on } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
 import form from '../form/index.js';
+import scrollbar from '../../css-utilities/scrollbar/index.js';
+import { observeSize } from '../../shared/resize.js';
 import './scss/index.scss';
-const template_0tf9kxv2 = template_u1.template(`<div class='datalist'><div class='datalist-lens' aria-hidden='true'></div><div class='datalist-scroller' role='listbox' tabindex='0'><div class='datalist-track'></div></div><input class='datalist-tag' />`);
-const template_0tf9kxv9 = template_u1.template(`<div class='datalist-option ' role='option'>`);
+const template_0tf9kxv3 = template_u1.template(`<div class='datalist'><div class='datalist-lens' aria-hidden='true'></div><div class='datalist-scroller --scrollbar-hidden' role='listbox' tabindex='0'><div class='datalist-track'></div></div><input class='datalist-tag' />`);
+const template_0tf9kxva = template_u1.template(`<div class='datalist-option ' role='option'>`);
 class ReactiveObject_0tf9kxv0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
     #selected;
@@ -33,6 +35,25 @@ class ReactiveObject_0tf9kxv0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#settled, _v2);
     }
 }
+class ReactiveObject_0tf9kxv1 extends reactivity_u0.ReactiveObject {
+    #half = this[reactivity_u0.SIGNAL](0);
+    #offset = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get half() {
+        return reactivity_u0.read(this.#half);
+    }
+    set half(_v0) {
+        reactivity_u0.write(this.#half, _v0);
+    }
+    get offset() {
+        return reactivity_u0.read(this.#offset);
+    }
+    set offset(_v1) {
+        reactivity_u0.write(this.#offset, _v1);
+    }
+}
 const DATALIST_LENS = Symbol.for('@esportsplus/ui/datalist.lens');
 const DATALIST_OPTION = Symbol.for('@esportsplus/ui/datalist.option');
 const DATALIST_SCROLLER = Symbol.for('@esportsplus/ui/datalist.scroller');
@@ -45,17 +66,23 @@ const STEPS = {
 };
 let uid = 0;
 export default component(function ({ options, selected, state = new ReactiveObject_0tf9kxv0(selected ?? Object.keys(options)[0]), ...attributes }) {
-    let keys = Object.keys(options), active = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false]))), height = 0, id = `datalist-${++uid}`, observer, previous, scroller, timer;
+    let keys = Object.keys(options), active = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false]))), drum = new ReactiveObject_0tf9kxv1(), height = 0, id = `datalist-${++uid}`, option, previous, scroller, timeline = typeof CSS !== 'undefined' && CSS.supports('animation-timeline: view()'), timer;
     function clamp(index) {
         return Math.min(Math.max(index, 0), keys.length - 1);
     }
     function measure() {
-        let option = scroller?.querySelector('.datalist-option');
         if (!scroller || !option) {
             return;
         }
-        height = option.offsetHeight;
-        scroller.style.setProperty('--half', `${scroller.clientHeight / 2 / height}`);
+        let next = option.offsetHeight;
+        if (next !== height) {
+            height = next;
+            scroller.scrollTo({ behavior: 'instant', top: clamp(keys.indexOf(String(state.selected))) * height });
+        }
+        if (!height || timeline) {
+            return;
+        }
+        drum.half = scroller.clientHeight / 2 / height;
         paint();
     }
     function onscroll() {
@@ -72,19 +99,19 @@ export default component(function ({ options, selected, state = new ReactiveObje
         timer = setTimeout(settle, SETTLE_DELAY);
     }
     function paint() {
-        scroller.style.setProperty('--offset', `${scroller.scrollTop / height}`);
+        if (timeline) {
+            return;
+        }
+        drum.offset = scroller.scrollTop / height;
     }
     function scrollTo(index) {
-        scroller?.scrollTo({
-            behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
-            top: clamp(index) * height
-        });
+        scroller?.scrollTo({ top: clamp(index) * height });
     }
     function settle() {
         clearTimeout(timer);
         state.settled = true;
     }
-    let stop = effect(() => {
+    effect(() => {
         let key = String(state.selected);
         untrack(() => {
             if (previous !== undefined) {
@@ -98,30 +125,40 @@ export default component(function ({ options, selected, state = new ReactiveObje
             }
         });
     });
-    onCleanup(() => {
-        clearTimeout(timer);
-        observer?.disconnect();
-        stop();
-    });
+    onCleanup(() => clearTimeout(timer));
     return (() => {
-        let root_0tf9kxv1 = template_0tf9kxv2(), element_0tf9kxv3 = root_0tf9kxv1.firstChild, element_0tf9kxv4 = element_0tf9kxv3.firstElementChild, element_0tf9kxv5 = element_0tf9kxv4.nextElementSibling, element_0tf9kxv6 = element_0tf9kxv5.firstElementChild, element_0tf9kxv7 = element_0tf9kxv5.nextElementSibling;
-        template_u1.setProperties(element_0tf9kxv3, this?.attributes);
-        template_u1.setProperties(element_0tf9kxv3, attributes);
-        template_u1.setProperties(element_0tf9kxv4, this?.attributes?.[DATALIST_LENS]);
-        template_u1.setProperties(element_0tf9kxv4, attributes[DATALIST_LENS]);
-        template_u1.setProperties(element_0tf9kxv5, this?.attributes?.[DATALIST_SCROLLER]);
-        template_u1.setProperties(element_0tf9kxv5, attributes[DATALIST_SCROLLER]);
-        template_u1.setProperty(element_0tf9kxv5, 'aria-activedescendant', () => `${id}-${keys.indexOf(String(state.selected))}`);
-        template_u1.onconnect(element_0tf9kxv5, (element) => {
+        let root_0tf9kxv2 = template_0tf9kxv3(), element_0tf9kxv4 = root_0tf9kxv2.firstChild, element_0tf9kxv5 = element_0tf9kxv4.firstElementChild, element_0tf9kxv6 = element_0tf9kxv5.nextElementSibling, element_0tf9kxv7 = element_0tf9kxv6.firstElementChild, element_0tf9kxv8 = element_0tf9kxv6.nextElementSibling;
+        template_u1.slot(element_0tf9kxv7, keys.map((key, index) => {
+            let root_0tf9kxv9 = template_0tf9kxva(), element_0tf9kxvb = root_0tf9kxv9.firstChild;
+            template_u1.slot(element_0tf9kxvb, options[key], 1);
+            template_u1.setList(element_0tf9kxvb, 'class', () => active[key] && '--active');
+            template_u1.setProperty(element_0tf9kxvb, 'id', template_u1.interpolate([(id), "-", (index)]));
+            template_u1.setList(element_0tf9kxvb, 'style', template_u1.interpolate(["--index: ", (index)]));
+            template_u1.setProperties(element_0tf9kxvb, this?.attributes?.[DATALIST_OPTION]);
+            template_u1.setProperties(element_0tf9kxvb, attributes[DATALIST_OPTION]);
+            template_u1.setProperty(element_0tf9kxvb, 'aria-selected', () => active[key] ? 'true' : 'false');
+            template_u1.delegate(element_0tf9kxvb, 'click', () => scrollTo(index));
+            template_u1.onconnect(element_0tf9kxvb, (element) => {
+                option ??= element;
+            });
+            return root_0tf9kxv9;
+        }), 1);
+        template_u1.setProperty(element_0tf9kxv8, 'name', attributes.name);
+        template_u1.onconnect(element_0tf9kxv8, form.input.onconnect(state));
+        template_u1.setProperty(element_0tf9kxv8, 'value', () => state.selected);
+        template_u1.setProperties(element_0tf9kxv6, this?.attributes?.[DATALIST_SCROLLER]);
+        template_u1.setProperties(element_0tf9kxv6, attributes[DATALIST_SCROLLER]);
+        template_u1.setProperties(element_0tf9kxv6, scrollbar.drag('vertical'));
+        template_u1.setProperties(element_0tf9kxv6, observeSize(measure));
+        template_u1.setProperty(element_0tf9kxv6, 'aria-activedescendant', () => {
+            let index = keys.indexOf(String(state.selected));
+            return index !== -1 && `${id}-${index}`;
+        });
+        template_u1.onconnect(element_0tf9kxv6, (element) => {
             scroller = element;
-            measure();
-            scroller.scrollTop = clamp(keys.indexOf(String(state.selected))) * height;
-            paint();
             on(element, 'scrollend', settle);
-            observer = new ResizeObserver(measure);
-            observer.observe(scroller);
         });
-        template_u1.delegate(element_0tf9kxv5, 'keydown', (e) => {
+        template_u1.delegate(element_0tf9kxv6, 'keydown', (e) => {
             let index = keys.indexOf(String(state.selected));
             if (e.key in STEPS) {
                 index += STEPS[e.key];
@@ -138,22 +175,12 @@ export default component(function ({ options, selected, state = new ReactiveObje
             e.preventDefault();
             scrollTo(index);
         });
-        template_u1.on(element_0tf9kxv5, 'scroll', onscroll);
-        template_u1.slot(element_0tf9kxv6, keys.map((key, index) => {
-            let root_0tf9kxv8 = template_0tf9kxv9(), element_0tf9kxva = root_0tf9kxv8.firstChild;
-            template_u1.setList(element_0tf9kxva, 'class', () => active[key] && '--active');
-            template_u1.setProperty(element_0tf9kxva, 'id', template_u1.interpolate([(id), "-", (index)]));
-            template_u1.setList(element_0tf9kxva, 'style', template_u1.interpolate(["--index: ", (index)]));
-            template_u1.setProperties(element_0tf9kxva, this?.attributes?.[DATALIST_OPTION]);
-            template_u1.setProperties(element_0tf9kxva, attributes[DATALIST_OPTION]);
-            template_u1.setProperty(element_0tf9kxva, 'aria-selected', () => active[key] ? 'true' : 'false');
-            template_u1.delegate(element_0tf9kxva, 'click', () => scrollTo(index));
-            template_u1.slot(element_0tf9kxva, options[key], 1);
-            return root_0tf9kxv8;
-        }), 1);
-        template_u1.setProperty(element_0tf9kxv7, 'name', attributes.name);
-        template_u1.onrender(element_0tf9kxv7, form.input.onrender(state));
-        template_u1.setProperty(element_0tf9kxv7, 'value', () => state.selected);
-        return root_0tf9kxv1;
+        template_u1.on(element_0tf9kxv6, 'scroll', onscroll);
+        template_u1.setList(element_0tf9kxv6, 'style', () => drum.half && `--half: ${drum.half}; --offset: ${drum.offset};`);
+        template_u1.setProperties(element_0tf9kxv5, this?.attributes?.[DATALIST_LENS]);
+        template_u1.setProperties(element_0tf9kxv5, attributes[DATALIST_LENS]);
+        template_u1.setProperties(element_0tf9kxv4, this?.attributes);
+        template_u1.setProperties(element_0tf9kxv4, attributes);
+        return root_0tf9kxv2;
     })();
 }, { lens: DATALIST_LENS, option: DATALIST_OPTION, scroller: DATALIST_SCROLLER });

package/build/components/datalist/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.datalist{--background:transparent;--border-radius:var(--border-radius-700);--color:var(--color-text-500);--focus-color:var(--color-border-500);--focus-width:2px;--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--height:calc(var(--item-height) * 5);--item-height:40px;--padding:var(--size-200);--perspective:704px;--width:224px}.datalist-lens{--background:var(--color-border-300);--border-radius:var(--border-radius-600)}.datalist-option{--opacity-falloff:.55;--rotate:38deg;--scale:1.14;--scale-falloff:.34}.datalist{background:var(--background);border-radius:var(--border-radius);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding);width:min(100%, var(--width));position:relative}.datalist-lens{top:50%;right:var(--padding);left:var(--padding);background:var(--background);border-radius:var(--border-radius);height:var(--item-height);pointer-events:none;position:absolute;transform:translateY(-50%)}.datalist-option{--t:clamp(-1, calc((var(--index) - var(--offset,0)) / var(--half,2.5)), 1);--t-abs:max(var(--t), var(--t) * -1);cursor:pointer;font-variant:tabular-nums;height:var(--item-height);opacity:calc(1 - var(--opacity-falloff) * var(--t-abs));scroll-snap-align:center;transform:scale(calc(var(--scale) - var(--scale-falloff) * var(--t-abs))) rotateX(calc(var(--rotate) * var(--t) * -1));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:none;display:flex}@media (prefers-reduced-motion:reduce){.datalist-option{opacity:1;transform:none}}.datalist-scroller{border-radius:var(--border-radius);height:var(--height);overscroll-behavior:contain;perspective:var(--perspective);scroll-snap-type:y mandatory;scrollbar-width:none;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%)}.datalist-scroller::-webkit-scrollbar{display:none}.datalist-scroller:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.datalist-track{padding-block:calc((var(--height) - var(--item-height)) / 2)}.datalist-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@layer components{.datalist-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.datalist{--background:transparent;--border-radius:var(--border-radius-700);--color:var(--color-text-500);--focus-color:var(--color-border-500);--focus-width:2px;--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--height:calc(var(--item-height) * 5);--item-height:40px;--opacity-falloff:.55;--padding:var(--size-200);--perspective:704px;--rotate:38deg;--scale:1.14;--scale-falloff:.34;--width:224px}.datalist-lens{--background:var(--color-border-300);--border-radius:var(--border-radius-600)}.datalist-option{--t:clamp(-1, calc((var(--index) - var(--offset,0)) / var(--half,2.5)), 1);--t-abs:max(var(--t), var(--t) * -1)}.datalist{background:var(--background);border-radius:var(--border-radius);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding);width:min(100%, var(--width));position:relative}.datalist-lens{top:50%;right:var(--padding);left:var(--padding);background:var(--background);border-radius:var(--border-radius);height:var(--item-height);pointer-events:none;position:absolute;translate:0 -50%}.datalist-option{cursor:pointer;font-variant-numeric:tabular-nums;height:var(--item-height);opacity:calc(1 - var(--opacity-falloff) * var(--t-abs));rotate:x calc(var(--rotate) * var(--t) * -1);scale:calc(var(--scale) - var(--scale-falloff) * var(--t-abs));scroll-snap-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}@supports (animation-timeline:view()){.datalist-option{animation:linear both datalist-drum;animation-timeline:view();animation-range:entry 50% exit 50%}}@media (prefers-reduced-motion:reduce){.datalist-option{opacity:1;animation:none;rotate:none;scale:none}}.datalist-scroller{border-radius:var(--border-radius);height:var(--height);overscroll-behavior:contain;perspective:var(--perspective);scroll-behavior:smooth;scroll-snap-type:y mandatory;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%)}@media (prefers-reduced-motion:reduce){.datalist-scroller{scroll-behavior:auto}}.datalist-scroller:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.datalist-track{padding-block:calc((var(--height) - var(--item-height)) / 2)}@keyframes datalist-drum{0%,to{opacity:calc(1 - var(--opacity-falloff));scale:calc(var(--scale) - var(--scale-falloff))}0%{rotate:x calc(var(--rotate) * -1)}50%{opacity:1;rotate:x 0deg;scale:var(--scale)}to{rotate:x var(--rotate)}}}
 /*$vite$:1*/

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

@@ -1,8 +1,10 @@
+import * as template_u1 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
-import '../tooltip/index.js';
+import '../card/scss/index.scss';
 import './scss/index.scss';
 type A = Attributes & {
     [DOCK_BUTTON]?: Attributes;
+    group?: boolean;
     items: Item[];
     label?: string;
     onlaunch?: (label: string) => void;
@@ -16,9 +18,8 @@ type Item = {
     };
 };
 declare const DOCK_BUTTON: unique symbol;
-declare const dock: ({ items, label, onlaunch, ...attributes }: A) => DocumentFragment | Text;
-declare const _default: typeof dock & {
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
     readonly button: typeof DOCK_BUTTON;
-};
+}>;
 export default _default;
 export type { Item };