@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/button/hold.js

@@ -0,0 +1,117 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { check } from './icons.js';
+import faces from './faces.js';
+const template_05dwb0w2 = template_u1.template(`<button class='button button--feedback button--hold' type='button'><!--$--><span aria-hidden='true' class='button-fill'></span></button><span class='button-status' role='status' aria-live='polite'>`);
+class ReactiveObject_05dwb0w0 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);
+    }
+}
+export default component(({ action, disabled = false, duration = 1800, release = 2.5, success = 'Confirmed', timeout = 1600, tolerance = 10, ...attributes }, content) => {
+    let animation, fill, origin, state = new ReactiveObject_05dwb0w0('idle'), timer;
+    function commit() {
+        state.status = 'success';
+        navigator.vibrate?.(14);
+        action();
+        if (timeout > 0) {
+            timer = setTimeout(reset, timeout);
+        }
+    }
+    function drain() {
+        origin = undefined;
+        if (state.status !== 'holding' || !animation) {
+            return;
+        }
+        state.status = 'releasing';
+        animation.updatePlaybackRate(-release);
+    }
+    function press() {
+        if (disabled || !fill || state.status === 'holding' || state.status === 'success') {
+            return;
+        }
+        if (!animation) {
+            animation = fill.animate([{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }], { duration, easing: 'linear', fill: 'both' });
+            animation.onfinish = () => {
+                if (state.status === 'holding') {
+                    commit();
+                }
+                else if (state.status === 'releasing') {
+                    reset();
+                }
+            };
+        }
+        else {
+            animation.updatePlaybackRate(1);
+            animation.play();
+        }
+        state.status = 'holding';
+    }
+    function reset() {
+        animation?.cancel();
+        animation = undefined;
+        clearTimeout(timer);
+        origin = undefined;
+        state.status = 'idle';
+    }
+    return (() => {
+        let root_05dwb0w1 = template_05dwb0w2(), element_05dwb0w3 = root_05dwb0w1.firstChild, element_05dwb0w4 = element_05dwb0w3.firstChild, element_05dwb0w5 = element_05dwb0w3.firstElementChild, element_05dwb0w6 = element_05dwb0w3.nextSibling;
+        template_u1.setProperty(element_05dwb0w3, 'aria-description', `Press and hold for ${duration / 1000} seconds to confirm`);
+        template_u1.setProperties(element_05dwb0w3, attributes);
+        template_u1.setProperty(element_05dwb0w3, 'aria-disabled', () => (disabled || state.status === 'success') && 'true');
+        template_u1.on(element_05dwb0w3, 'blur', drain);
+        template_u1.delegate(element_05dwb0w3, 'contextmenu', (e) => e.preventDefault());
+        template_u1.ondisconnect(element_05dwb0w3, reset);
+        template_u1.delegate(element_05dwb0w3, 'keydown', (e) => {
+            if (e.key === 'Escape') {
+                drain();
+                return;
+            }
+            if (e.repeat || (e.key !== ' ' && e.key !== 'Enter')) {
+                return;
+            }
+            e.preventDefault();
+            press();
+        });
+        template_u1.delegate(element_05dwb0w3, 'keyup', (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                drain();
+            }
+        });
+        template_u1.delegate(element_05dwb0w3, 'pointercancel', drain);
+        template_u1.delegate(element_05dwb0w3, 'pointerdown', function (e) {
+            if (e.button !== 0) {
+                return;
+            }
+            this.setPointerCapture(e.pointerId);
+            origin = { x: e.clientX, y: e.clientY };
+            press();
+        });
+        template_u1.delegate(element_05dwb0w3, 'pointermove', (e) => {
+            if (origin && Math.hypot(e.clientX - origin.x, e.clientY - origin.y) > tolerance) {
+                drain();
+            }
+        });
+        template_u1.delegate(element_05dwb0w3, 'pointerup', drain);
+        template_u1.slot(element_05dwb0w4, faces(() => state.status === 'success' ? 'success' : 'idle', [
+            { content, key: 'idle' },
+            { content: success, icon: check, key: 'success' }
+        ]));
+        template_u1.onconnect(element_05dwb0w5, (element) => fill = element);
+        template_u1.slot(element_05dwb0w5, faces(() => state.status === 'success' ? 'success' : 'idle', [
+            { content, key: 'idle' },
+            { content: success, icon: check, key: 'success' }
+        ]), 1);
+        new template_u1.EffectSlot(element_05dwb0w6, () => state.status === 'success' ? success : '', 1);
+        return root_05dwb0w1;
+    })();
+});

package/build/components/button/icons.d.ts

@@ -0,0 +1,6 @@
+declare const alert: () => DocumentFragment | Text;
+declare const check: () => DocumentFragment | Text;
+declare const copy: () => DocumentFragment | Text;
+declare const cross: () => DocumentFragment | Text;
+declare const spinner: () => DocumentFragment | Text;
+export { alert, check, copy, cross, spinner };

package/build/components/button/icons.js

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+const template_1re76ll0 = template_u1.template(`<svg class='button-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.75' /><path d='M6 3.75V6.25M6 8.25V8.26' />`);
+const template_1re76ll1 = template_u1.template(`<svg class='button-icon button-icon--draw' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 12 12'><path d='M2.5 6.25L4.75 8.5L9.5 3.5' pathLength='1' />`);
+const template_1re76ll2 = template_u1.template(`<svg class='button-icon' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1.25' viewBox='0 0 12 12'><rect height='6.75' rx='1.25' width='6.75' x='4' y='4' /><path d='M8 2.5V2.25C8 1.56 7.44 1 6.75 1H2.25C1.56 1 1 1.56 1 2.25V6.75C1 7.44 1.56 8 2.25 8H2.5' />`);
+const template_1re76ll3 = template_u1.template(`<svg class='button-icon button-icon--draw' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'><path d='M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5' pathLength='1' />`);
+const template_1re76ll4 = template_u1.template(`<svg class='button-icon button-icon--spin' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 12 12'><circle cx='6' cy='6' opacity='0.2' r='4.75' /><path d='M10.75 6A4.75 4.75 0 0 0 6 1.25' />`);
+const alert = () => template_1re76ll0();
+const check = () => template_1re76ll1();
+const copy = () => template_1re76ll2();
+const cross = () => template_1re76ll3();
+const spinner = () => template_1re76ll4();
+export { alert, check, copy, cross, spinner };

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

@@ -0,0 +1,14 @@
+import copy from './copy.js';
+import fan from './fan.js';
+import hold from './hold.js';
+import kbd from './kbd.js';
+import loading from './loading.js';
+import './scss/index.scss';
+declare const button: {
+    copy: typeof copy;
+    fan: typeof fan;
+    hold: typeof hold;
+    kbd: typeof kbd;
+    loading: typeof loading;
+};
+export default button;

package/build/components/button/index.js

@@ -0,0 +1,8 @@
+import copy from './copy.js';
+import fan from './fan.js';
+import hold from './hold.js';
+import kbd from './kbd.js';
+import loading from './loading.js';
+import './scss/index.scss';
+const button = { copy, fan, hold, kbd, loading };
+export default button;

package/build/components/button/kbd.d.ts

@@ -0,0 +1,15 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+declare const KBD_KEY: unique symbol;
+type A = Attributes & {
+    [KBD_KEY]?: Attributes;
+    keys: string[];
+    ontrigger?: () => void;
+    onwindowblur?: never;
+    onwindowkeydown?: never;
+    onwindowkeyup?: never;
+};
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly key: typeof KBD_KEY;
+}>;
+export default _default;

package/build/components/button/kbd.js

@@ -0,0 +1,106 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import plus from './svg/plus.svg';
+const template_1g09exi1 = template_u1.template(`<kbd class='button-kbd'>`);
+const template_1g09exi4 = template_u1.template(`<!--$--><kbd class='button button--kbd'>`);
+const KBD_KEY = Symbol.for('@esportsplus/ui/button.kbd.key');
+const KEYS = {
+    alt: ['alt', '⌥'],
+    ctrl: ['control', '⌃'],
+    down: ['arrowdown', '↓'],
+    enter: ['enter', '↵'],
+    escape: ['escape', 'esc'],
+    left: ['arrowleft', '←'],
+    meta: ['meta', '⌘'],
+    right: ['arrowright', '→'],
+    shift: ['shift', '⇧'],
+    space: [' ', '␣'],
+    up: ['arrowup', '↑']
+};
+function held(keys) {
+    for (let i = 0, n = keys.length; i < n; i++) {
+        if (!keys[i].keyboard && !keys[i].pointer) {
+            return false;
+        }
+    }
+    return true;
+}
+function parse(name) {
+    let [key, legend] = KEYS[name.toLowerCase()] ?? [name.toLowerCase(), name.length === 1 ? name.toUpperCase() : name];
+    return reactivity_u0.reactive({ code: '', key, keyboard: false, legend, pointer: false });
+}
+export default component(({ keys: names, ontrigger, ...attributes }) => {
+    let keys = names.map(parse);
+    const press = (key, source) => {
+        let down = key.keyboard || key.pointer;
+        key[source] = true;
+        if (down || !held(keys)) {
+            return false;
+        }
+        ontrigger?.();
+        return true;
+    };
+    const release = () => {
+        for (let i = 0, n = keys.length; i < n; i++) {
+            keys[i].keyboard = false;
+        }
+    };
+    return (() => {
+        let root_1g09exi0 = template_1g09exi1(), element_1g09exi2 = root_1g09exi0.firstChild;
+        template_u1.setProperties(element_1g09exi2, attributes);
+        template_u1.onwindow(element_1g09exi2, 'blur', release);
+        template_u1.onwindow(element_1g09exi2, 'keydown', (e) => {
+            if (!e.key) {
+                return;
+            }
+            let name = e.key.toLowerCase();
+            for (let i = 0, n = keys.length; i < n; i++) {
+                let key = keys[i];
+                if (key.key !== name) {
+                    continue;
+                }
+                key.code = e.code;
+                if (press(key, 'keyboard')) {
+                    e.preventDefault();
+                }
+                break;
+            }
+        });
+        template_u1.onwindow(element_1g09exi2, 'keyup', (e) => {
+            let name = e.key?.toLowerCase();
+            if (name === 'meta') {
+                release();
+                return;
+            }
+            for (let i = 0, n = keys.length; i < n; i++) {
+                let key = keys[i];
+                if (key.code === e.code || key.key === name) {
+                    key.keyboard = false;
+                }
+            }
+        });
+        template_u1.slot(element_1g09exi2, keys.map((key, i) => {
+            let root_1g09exi3 = template_1g09exi4(), element_1g09exi5 = root_1g09exi3.firstChild, element_1g09exi6 = element_1g09exi5.nextSibling;
+            template_u1.slot(element_1g09exi5, i > 0 && icon({ 'aria-hidden': true, class: 'button-kbd-plus' }, plus));
+            template_u1.setProperties(element_1g09exi6, attributes[KBD_KEY]);
+            template_u1.setList(element_1g09exi6, 'class', () => key.keyboard || key.pointer ? '--active' : '');
+            template_u1.delegate(element_1g09exi6, 'pointercancel', () => {
+                key.pointer = false;
+            });
+            template_u1.delegate(element_1g09exi6, 'pointerdown', () => {
+                press(key, 'pointer');
+            });
+            template_u1.on(element_1g09exi6, 'pointerleave', () => {
+                key.pointer = false;
+            });
+            template_u1.delegate(element_1g09exi6, 'pointerup', () => {
+                key.pointer = false;
+            });
+            template_u1.slot(element_1g09exi6, key.legend, 1);
+            return root_1g09exi3;
+        }), 1);
+        return root_1g09exi0;
+    })();
+}, { key: KBD_KEY });

package/build/components/button/loading.d.ts

@@ -0,0 +1,22 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    action: () => unknown;
+    error?: string;
+    onclick?: never;
+    ondisconnect?: never;
+    pending?: string;
+    success?: string;
+    timeout?: number;
+};
+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;

package/build/components/button/loading.js

@@ -0,0 +1,60 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { alert, check, spinner } from './icons.js';
+import faces from './faces.js';
+const template_1r23jnf2 = template_u1.template(`<button class='button button--feedback' type='button'></button><span class='button-status' role='status' aria-live='polite'>`);
+class ReactiveObject_1r23jnf0 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);
+    }
+}
+export default component(({ action, error = 'Try again', pending, success = 'Done', timeout = 1400, ...attributes }, content) => {
+    let run = 0, state = new ReactiveObject_1r23jnf0('idle'), timer;
+    return (() => {
+        let root_1r23jnf1 = template_1r23jnf2(), element_1r23jnf3 = root_1r23jnf1.firstChild, element_1r23jnf4 = element_1r23jnf3.nextSibling;
+        template_u1.setProperties(element_1r23jnf3, attributes);
+        template_u1.setProperty(element_1r23jnf3, 'aria-busy', () => state.status === 'pending' && 'true');
+        template_u1.setProperty(element_1r23jnf3, 'aria-disabled', () => state.status === 'pending' && 'true');
+        template_u1.ondisconnect(element_1r23jnf3, () => {
+            clearTimeout(timer);
+            run++;
+        });
+        template_u1.delegate(element_1r23jnf3, 'click', async (e) => {
+            e.preventDefault();
+            if (state.status === 'pending') {
+                return;
+            }
+            let id = ++run, status = 'success';
+            clearTimeout(timer);
+            state.status = 'pending';
+            try {
+                await action();
+            }
+            catch {
+                status = 'error';
+            }
+            if (id !== run) {
+                return;
+            }
+            state.status = status;
+            timer = setTimeout(() => state.status = 'idle', timeout);
+        });
+        template_u1.slot(element_1r23jnf3, faces(() => state.status, [
+            { content, key: 'idle' },
+            { content: pending ?? content, icon: spinner, key: 'pending' },
+            { content: success, icon: check, key: 'success', tone: 'success' },
+            { content: error, icon: alert, key: 'error', tone: 'error' }
+        ]), 1);
+        new template_u1.EffectSlot(element_1r23jnf4, () => state.status === 'success' ? success : state.status === 'error' ? error : '', 1);
+        return root_1r23jnf1;
+    })();
+});

package/build/components/button/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.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--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.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:max(0px, var(--padding-vertical) - var(--border-width)) 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--flat:after{display:none}.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%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.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}}
+@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}}}
 /*$vite$:1*/

package/build/components/button/svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

package/build/components/card/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:max(0px, var(--padding-vertical) - var(--border-width)) 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}}
+@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}}
 /*$vite$:1*/

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

@@ -0,0 +1,31 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [CARD_INPUT_FIELD]?: FieldAttributes;
+    [CARD_INPUT_SUBMIT]?: Attributes;
+    note?: Renderable<unknown>;
+    onvalid?: (card: Card) => void;
+    state?: State;
+    submit?: Renderable<unknown>;
+};
+type Brand = 'amex' | 'discover' | 'mastercard' | 'unknown' | 'visa';
+type Card = {
+    brand: Brand;
+    expiry: string;
+    last4: string;
+    name: string;
+};
+type D = Attributes & Pick<A, typeof CARD_INPUT_FIELD | typeof CARD_INPUT_SUBMIT>;
+type Field = 'cvc' | 'expiry' | 'name' | 'number';
+type FieldAttributes = Parameters<typeof input>[0];
+type State = Record<Field, string>;
+declare const CARD_INPUT_FIELD: unique symbol;
+declare const CARD_INPUT_SUBMIT: unique symbol;
+declare const _default: ((this: {
+    attributes?: D;
+} | void, { note, onvalid, state, submit, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly field: typeof CARD_INPUT_FIELD;
+    readonly submit: typeof CARD_INPUT_SUBMIT;
+};
+export default _default;