@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/button/icons.js

@@ -1,12 +1,35 @@
 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();
+import alertSvg from '@esportsplus/ui/svg/circle-alert.svg';
+import checkSvg from '@esportsplus/ui/svg/check.svg';
+import closeSvg from '@esportsplus/ui/svg/close.svg';
+import copySvg from '@esportsplus/ui/svg/copy.svg';
+import spinnerSvg from '@esportsplus/ui/svg/spinner.svg';
+const template_1re76ll1 = template_u1.template(`<svg aria-hidden='true' class='button-icon'><use />`);
+const template_1re76ll4 = template_u1.template(`<svg aria-hidden='true' class='button-icon button-icon--draw'><use />`);
+const template_1re76llb = template_u1.template(`<svg aria-hidden='true' class='button-icon button-icon--spin'><use />`);
+const alert = () => {
+    let root_1re76ll0 = template_1re76ll1(), element_1re76ll2 = root_1re76ll0.firstChild.firstElementChild;
+    template_u1.setProperty(element_1re76ll2, 'href', template_u1.interpolate(["#", (alertSvg)]));
+    return root_1re76ll0;
+};
+const check = () => {
+    let root_1re76ll3 = template_1re76ll4(), element_1re76ll5 = root_1re76ll3.firstChild.firstElementChild;
+    template_u1.setProperty(element_1re76ll5, 'href', template_u1.interpolate(["#", (checkSvg)]));
+    return root_1re76ll3;
+};
+const copy = () => {
+    let root_1re76ll6 = template_1re76ll1(), element_1re76ll7 = root_1re76ll6.firstChild.firstElementChild;
+    template_u1.setProperty(element_1re76ll7, 'href', template_u1.interpolate(["#", (copySvg)]));
+    return root_1re76ll6;
+};
+const cross = () => {
+    let root_1re76ll8 = template_1re76ll4(), element_1re76ll9 = root_1re76ll8.firstChild.firstElementChild;
+    template_u1.setProperty(element_1re76ll9, 'href', template_u1.interpolate(["#", (closeSvg)]));
+    return root_1re76ll8;
+};
+const spinner = () => {
+    let root_1re76lla = template_1re76llb(), element_1re76llc = root_1re76lla.firstChild.firstElementChild;
+    template_u1.setProperty(element_1re76llc, 'href', template_u1.interpolate(["#", (spinnerSvg)]));
+    return root_1re76lla;
+};
 export { alert, check, copy, cross, spinner };

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

@@ -3,6 +3,9 @@ import fan from './fan.js';
 import hold from './hold.js';
 import kbd from './kbd.js';
 import loading from './loading.js';
+import morph from './morph.js';
+import sidebar from './sidebar.js';
+import split from './split.js';
 import './scss/index.scss';
 declare const button: {
     copy: typeof copy;
@@ -10,5 +13,8 @@ declare const button: {
     hold: typeof hold;
     kbd: typeof kbd;
     loading: typeof loading;
+    morph: typeof morph;
+    sidebar: typeof sidebar;
+    split: typeof split;
 };
 export default button;

package/build/components/button/index.js

@@ -3,6 +3,9 @@ import fan from './fan.js';
 import hold from './hold.js';
 import kbd from './kbd.js';
 import loading from './loading.js';
+import morph from './morph.js';
+import sidebar from './sidebar.js';
+import split from './split.js';
 import './scss/index.scss';
-const button = { copy, fan, hold, kbd, loading };
+const button = { copy, fan, hold, kbd, loading, morph, sidebar, split };
 export default button;

package/build/components/button/kbd.js

@@ -2,7 +2,7 @@ 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';
+import plus from '@esportsplus/ui/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');
@@ -33,7 +33,7 @@ function parse(name) {
 }
 export default component(({ keys: names, ontrigger, ...attributes }) => {
     let keys = names.map(parse);
-    const press = (key, source) => {
+    function press(key, source) {
         let down = key.keyboard || key.pointer;
         key[source] = true;
         if (down || !held(keys)) {
@@ -41,14 +41,34 @@ export default component(({ keys: names, ontrigger, ...attributes }) => {
         }
         ontrigger?.();
         return true;
-    };
-    const release = () => {
+    }
+    function 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.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.slot(element_1g09exi6, key.legend, 1);
+            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;
+            });
+            return root_1g09exi3;
+        }), 1);
         template_u1.setProperties(element_1g09exi2, attributes);
         template_u1.onwindow(element_1g09exi2, 'blur', release);
         template_u1.onwindow(element_1g09exi2, 'keydown', (e) => {
@@ -81,26 +101,6 @@ export default component(({ keys: names, ontrigger, ...attributes }) => {
                 }
             }
         });
-        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.js

@@ -21,6 +21,13 @@ export default component(({ action, error = 'Try again', pending, success = 'Don
     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.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);
         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');
@@ -48,13 +55,6 @@ export default component(({ action, error = 'Try again', pending, success = 'Don
             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/morph.d.ts

@@ -0,0 +1,22 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    [BUTTON_MORPH_CONTENT]?: Attributes;
+    label?: string;
+    onclick?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onsave: () => Promise<unknown>;
+    retryLabel?: string;
+    state?: State;
+    successFor?: number;
+};
+type State = {
+    status: Status;
+};
+type Status = 'error' | 'idle' | 'loading' | 'success';
+declare const BUTTON_MORPH_CONTENT: unique symbol;
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly content: typeof BUTTON_MORPH_CONTENT;
+}>;
+export default _default;

package/build/components/button/morph.js

@@ -0,0 +1,115 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import { timing } from '../../shared/animation.js';
+import check from '@esportsplus/ui/svg/check.svg';
+import spinner from '@esportsplus/ui/svg/spinner.svg';
+const template_06x0lxl2 = template_u1.template(`<button class='button button--morph' type='button'><span aria-hidden='true' class='button-morph-content'><span class='button-morph-text '></span><span class='button-morph-text '></span><svg class='button-morph-icon button-morph-icon--loading'><use class='button-morph-spinner' /></svg><svg class='button-morph-icon button-morph-icon--success'><use /></svg></span><span aria-live='polite' class='button-morph-live'>`);
+class ReactiveObject_06x0lxl0 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 ANNOUNCE = {
+    error: 'Couldn\'t save. Try again.',
+    idle: '',
+    loading: 'Saving',
+    success: 'Changes saved'
+};
+const BUTTON_MORPH_CONTENT = Symbol.for('@esportsplus/ui/button.morph.content');
+function busy(status) {
+    return status === 'loading' || status === 'success';
+}
+export default component(function ({ label = 'Save changes', onsave, retryLabel = 'Try again', state = new ReactiveObject_06x0lxl0('idle'), successFor = 1500, ...attributes }) {
+    let attempt = 0, morph, reset;
+    function resize(element, compact) {
+        let computed = getComputedStyle(element), from = computed.width, resize = timing(computed, 'morph-resize');
+        morph?.cancel();
+        element.style.width = compact ? 'var(--morph-height)' : '';
+        if (!resize) {
+            return;
+        }
+        morph = element.animate([{ width: from }, { width: computed.width }], resize);
+    }
+    async function save() {
+        if (busy(state.status)) {
+            return;
+        }
+        let id = ++attempt;
+        clearTimeout(reset);
+        state.status = 'loading';
+        try {
+            await onsave();
+            if (id !== attempt) {
+                return;
+            }
+            state.status = 'success';
+            reset = setTimeout(() => {
+                state.status = 'idle';
+            }, successFor);
+        }
+        catch {
+            if (id !== attempt) {
+                return;
+            }
+            state.status = 'error';
+        }
+    }
+    return (() => {
+        let root_06x0lxl1 = template_06x0lxl2(), element_06x0lxl3 = root_06x0lxl1.firstChild, element_06x0lxl4 = element_06x0lxl3.firstElementChild, element_06x0lxl5 = element_06x0lxl4.firstElementChild, element_06x0lxl6 = element_06x0lxl5.nextElementSibling, element_06x0lxl7 = element_06x0lxl6.nextElementSibling.firstElementChild, element_06x0lxl8 = element_06x0lxl6.nextElementSibling.nextElementSibling.firstElementChild, element_06x0lxl9 = element_06x0lxl4.nextElementSibling;
+        template_u1.slot(element_06x0lxl5, label, 1);
+        template_u1.slot(element_06x0lxl6, retryLabel, 1);
+        new template_u1.EffectSlot(element_06x0lxl9, () => ANNOUNCE[state.status], 1);
+        template_u1.setProperty(element_06x0lxl8, 'href', template_u1.interpolate(["#", (check)]));
+        template_u1.setProperty(element_06x0lxl7, 'href', template_u1.interpolate(["#", (spinner)]));
+        template_u1.setList(element_06x0lxl6, 'class', () => state.status === 'error' && '--active');
+        template_u1.setList(element_06x0lxl5, 'class', () => state.status === 'idle' && '--active');
+        template_u1.setProperties(element_06x0lxl4, this?.attributes?.[BUTTON_MORPH_CONTENT]);
+        template_u1.setProperties(element_06x0lxl4, attributes[BUTTON_MORPH_CONTENT]);
+        template_u1.setProperties(element_06x0lxl3, this?.attributes);
+        template_u1.setProperties(element_06x0lxl3, attributes);
+        template_u1.setProperty(element_06x0lxl3, 'aria-disabled', () => busy(state.status) ? 'true' : 'false');
+        template_u1.setProperty(element_06x0lxl3, 'aria-label', () => {
+            switch (state.status) {
+                case 'error':
+                    return retryLabel;
+                case 'loading':
+                    return 'Saving';
+                case 'success':
+                    return 'Saved';
+                default:
+                    return label;
+            }
+        });
+        template_u1.setList(element_06x0lxl3, 'class', () => `button--morph-${state.status}`);
+        template_u1.delegate(element_06x0lxl3, 'click', save);
+        template_u1.onconnect(element_06x0lxl3, (element) => {
+            let compact = busy(state.status);
+            if (compact) {
+                element.style.width = 'var(--morph-height)';
+            }
+            effect(() => {
+                let next = busy(state.status);
+                if (next !== compact) {
+                    compact = next;
+                    resize(element, next);
+                }
+            });
+        });
+        template_u1.ondisconnect(element_06x0lxl3, () => {
+            attempt++;
+            clearTimeout(reset);
+            morph?.cancel();
+        });
+        return root_06x0lxl1;
+    })();
+}, { content: BUTTON_MORPH_CONTENT });

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

@@ -1,2 +1,2 @@
-@layer components {.button-fan{align-items:center;display:inline-flex;position:relative}.button-fan.--active{z-index:9}.button-fan.--active>.button-fan-options>.button-fan-option{--delay:calc(var(--i) * var(--stagger));opacity:1;pointer-events:auto;translate:0;scale:1}.button-fan.--active>.button-fan-options>.button-fan-option:active{scale:var(--option-pressed-scale)}.button-fan.--active>.button--fan .button-fan-swap>:first-child{opacity:0;rotate:var(--swap-rotate)}.button-fan.--active>.button--fan .button-fan-swap>:last-child{opacity:1;rotate:0deg}.button-fan-options{align-items:center;gap:var(--spacer);pointer-events:none;z-index:0;display:flex;position:absolute}.button-fan-swap{place-items:center;display:inline-grid}.button-fan-swap>*{transition:opacity var(--swap-spring-duration) var(--swap-spring), rotate var(--swap-spring-duration) var(--swap-spring);grid-area:1/1}.button-fan-swap>:last-child{opacity:0;rotate:calc(var(--swap-rotate) * -1)}.button-fan>.button-fan-options>.button-fan-option{--delay:calc((var(--n) - 1 - var(--i)) * var(--stagger));opacity:0;scale:var(--option-scale);transform-origin:var(--origin);transition:opacity var(--option-opacity-duration) ease-out var(--delay), scale var(--option-spring-duration) var(--option-spring) var(--delay), translate var(--option-spring-duration) var(--option-spring) var(--delay);translate:calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-x)) calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-y))}.button-fan>.button-fan-options>.button-fan-option:focus-visible,.button-fan>.button--fan:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.button-fan--e>.button-fan-options{padding-left:var(--spacer);flex-direction:row;inset:0 auto 0 100%}.button-fan--n>.button-fan-options{padding-bottom:var(--spacer);flex-direction:column-reverse;inset:auto 0 100%}.button-fan--s>.button-fan-options{padding-top:var(--spacer);flex-direction:column;inset:100% 0 auto}.button-fan--w>.button-fan-options{padding-right:var(--spacer);flex-direction:row-reverse;inset:0 100% 0 auto}@media (prefers-reduced-motion:reduce){.button-fan{--swap-rotate:0deg}.button-fan>.button-fan-options>.button-fan-option{transition:opacity .15s ease-out;translate:none;scale:1}.button-fan .button-fan-swap>*{transition:opacity .15s ease-out}}.button-kbd{align-items:center;gap:var(--gap);display:inline-flex}.button-kbd .button-kbd-plus{--size:var(--plus-size);color:var(--plus-color)}.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--box-shadow:var(--box-shadow-default);--box-shadow-default:none}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--feedback{--draw-duration:.26s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--error-color:var(--color-red-400);--face-blur:3px;--face-duration:.4s;--face-gap:.375em;--face-offset:3px;--face-timing-function:cubic-bezier(.23, 1, .32, 1);--icon-size:.875em;--spin-duration:.85s;--success-color:var(--color-green-500)}.button--hold{--fill-background:var(--color);--fill-color:var(--background)}.button--kbd{--box-shadow-default:0 var(--kbd-depth) 0 var(--kbd-shadow-color);--kbd-depth:2px;--kbd-shadow-color:color-mix(in srgb, var(--background-default) 60%, black)}.button--kbd.--active,.button--kbd:not(.--active):active{--background:var(--background-active);--box-shadow:0 calc(var(--kbd-depth) - 1px) 0 var(--kbd-shadow-color)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button-fan{--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--option-opacity-duration:.2s;--option-pressed-scale:.92;--option-scale:.5;--option-spring:linear(0, .067, .221, .406, .586, .741, .862, .949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, .999, .998, .997, .997, .998, 1);--option-spring-duration:.6s;--spacer:var(--size-300);--stagger:30ms;--swap-rotate:90deg;--swap-spring:linear(0, .07, .228, .418, .602, .759, .88, .965, 1.019, 1.047, 1.058, 1.056, 1.048, 1.038, 1.027, 1.017, 1.009, 1.003, 1, .998, .997, .997, .997, .998, 1);--swap-spring-duration:.44s;--trigger-pressed-scale:.94}.button-fan--e{--direction-x:-1;--direction-y:0;--origin:left center}.button-fan--n{--direction-x:0;--direction-y:1;--origin:center bottom}.button-fan--s{--direction-x:0;--direction-y:-1;--origin:center top}.button-fan--w{--direction-x:1;--direction-y:0;--origin:right center}.button-kbd{--gap:var(--size-200);--plus-color:color-mix(in srgb, currentColor 60%, transparent);--plus-size:var(--size-300)}.text,.button{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.button{display:block}.button{background:var(--background);border-radius:var(--border-radius);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate:0}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}.button--fan{z-index:1}.button--fan:not(.--active):active{scale:var(--trigger-pressed-scale)}.button--feedback{-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.button--flat:after{display:none}.button--hold{isolation:isolate;overflow:hidden}.button--kbd.--active,.button--kbd:not(.--active):active{translate:0 1px}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;translate:50% 50%}.button--processing *{opacity:0}@keyframes button--processing{0%{rotate:0deg}to{rotate:360deg}}.button--skeleton{animation:var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes button--skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--tactile:not(.--active):active{translate:0 1px}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + .5lh) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + .5lh) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + .5lh) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.button-face{filter:blur(var(--face-blur));align-items:center;gap:var(--face-gap);opacity:0;transition:filter var(--face-duration) var(--face-timing-function), opacity var(--face-duration) var(--face-timing-function), translate var(--face-duration) var(--face-timing-function);translate:0 var(--face-offset);grid-area:1/1;display:inline-flex}.button-face.--active{filter:blur();opacity:1;translate:0}.button-face.--active .button-icon--draw path{stroke-dashoffset:0}.button-face[data-tone=error] .button-icon{color:var(--error-color)}.button-face[data-tone=success] .button-icon{color:var(--success-color)}.button-faces{place-items:center;display:grid}.button-fill{background:var(--fill-background);border-radius:inherit;clip-path:inset(0 100% 0 0);color:var(--fill-color);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.button-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.button-icon--draw path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.button-icon--spin{animation:button--processing var(--spin-duration) infinite linear}.button-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.button--skeleton,.button-icon--spin{animation:none}.button-face,.button-icon--draw path{transition:none}}}
+@layer components{.button--processing:before{position:absolute;bottom:50%;right:50%;translate:50% 50%}.button:after,.button-fill{position:absolute;inset:0}.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.button{--background:var(--background-active)}.button:not(.--active):hover{--background:var(--background-hover)}.button:not(.--active):active{--background:var(--background-pressed)}.button{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.button{--border-color:var(--border-color-active)}.button:not(.--active):hover{--border-color:var(--border-color-hover)}.button:not(.--active):active{--border-color:var(--border-color-pressed)}.button{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.button{--color:var(--color-active)}.button:not(.--active):hover{--color:var(--color-hover)}.button:not(.--active):active{--color:var(--color-pressed)}.button-status,.button-morph-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button-icon,.button-morph-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.button-icon--draw{stroke-dasharray:1;stroke-dashoffset:1px}.button-morph-icon{filter:blur(4px);opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.button-morph-icon{transition:none}}.button--morph-loading .button-morph-icon--loading,.button--morph-success .button-morph-icon--success{filter:blur();opacity:1;scale:1}.button-fill,.button:after{border-radius:inherit;pointer-events:none}.button:after{box-shadow:var(--box-shadow);content:"";transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1}.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);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.--text-truncate.button{display:block}.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-plus.icon{--size:var(--plus-size);color:var(--plus-color)}.button.button--morph{height:var(--morph-height);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;transition:background-color .2s ease-out,color .2s ease-out,scale .2s ease-out;display:inline-flex;overflow:hidden}.button.button--morph:active:not([aria-disabled=true]){scale:var(--morph-scale-pressed)}.button.button--morph:focus-visible{outline:2px solid var(--morph-focus-color);outline-offset:2px}.button.button--morph[aria-disabled=true]{cursor:default}@media (prefers-reduced-motion:reduce){.button.button--morph{transition:background-color .2s ease-out,color .2s ease-out}.button.button--morph:active:not([aria-disabled=true]){scale:1}}.button--morph-error{animation:button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) .15s}.button-morph-content{flex-shrink:0;place-items:center;display:grid}.button-morph-icon{height:var(--morph-icon-size);width:var(--morph-icon-size);grid-area:1/1}.button-morph-spinner{transform-box:view-box;transform-origin:50%;animation:.7s linear infinite button--processing}.button-morph-text{filter:blur(4px);opacity:0;white-space:nowrap;grid-area:1/1;transition:filter .15s ease-out,opacity .15s ease-out}.button-morph-text.--active{filter:blur();opacity:1;transition-duration:.2s}@keyframes button-morph-shake{0%,to{translate:0}20%{translate:-6px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}.button-sidebar[aria-expanded=false],.button-sidebar[aria-expanded=true]:focus-visible{--divider-x:var(--divider-travel)}.button-sidebar[aria-expanded=false]:focus-visible{--divider-x:0px}@media (hover:hover){.button-sidebar[aria-expanded=false]:hover{--divider-x:0px}.button-sidebar[aria-expanded=true]:hover{--divider-x:var(--divider-travel)}}.button-sidebar-divider{transform:translateX(var(--divider-x));transition:transform var(--divider-duration) ease}@media (prefers-reduced-motion:reduce){.button-sidebar-divider{transition:none}}.button-sidebar-icon.icon{--size:var(--icon-size)}.button-sidebar-icon.icon .button-sidebar-graphic{fill:none;overflow:hidden}.button-sidebar-shadow{opacity:var(--shadow-opacity)}.button-sidebar--right .button-sidebar-graphic{scale:-1 1}.button-split{isolation:isolate;align-items:stretch;display:inline-flex}.button-split-chevron{transition:rotate var(--chevron-duration) var(--chevron-timing-function)}.button-split-menu{display:flex}.button-split-menu>.tooltip-menu-panel:not(.tooltip-menu-panel--expand){left:auto;right:0}.button-split>.button-split-action{border-start-end-radius:0;border-end-end-radius:0}.button-split>.button-split-menu>.button-split-trigger{--padding-horizontal:var(--trigger-padding-horizontal);border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:calc(var(--border-width) * -1)}.button-split>.button-split-menu>.button-split-trigger[aria-expanded=true] .button-split-chevron{rotate:180deg}.button-split>.button-split-action:focus-visible,.button-split>.button-split-menu>.button-split-trigger:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset);z-index:1}@media (prefers-reduced-motion:reduce){.button-split-chevron{transition:none}}.button{--border-color-default:var(--background);--box-shadow:var(--box-shadow-default);--box-shadow-default:none}.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--hold-text{--fill-background:transparent;--fill-color:var(--color-primary-400)}.button--kbd{--background-active:var(--color-text-500);--background-default:var(--color-white-300);--border-radius:var(--border-radius-300);--box-shadow-default:0 0 0 var(--border-width-400) var(--kbd-border-color), inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);--color-active:var(--color-white-300);--color-default:var(--color-text-300);--font-size:calc(var(--font-size-300) * .95);--kbd-border-color:var(--color-border-300);--kbd-size:24px;--line-height:1;--padding-horizontal:6px;--padding-vertical:0px;--transition-duration:.3s;--transition-timing-function:ease-out}.button--kbd.--active,.button--kbd:not(.--active):active{--background:var(--background-active);--box-shadow:none;--color:var(--color-active);--transition-duration:0s}.button--morph{--background-default:var(--morph-background);--border-radius:999px;--color-default:var(--morph-color);--font-size:var(--morph-font-size);--font-weight:var(--font-weight-500);--icon-swap-duration:.3s;--icon-swap-timing-function:var(--morph-spring);--line-height:20px;--morph-background:var(--color-text-500);--morph-background-error:var(--color-red-500);--morph-color:var(--color-white-300);--morph-color-error:var(--color-white-300);--morph-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--morph-font-size:14px;--morph-height:40px;--morph-icon-size:16px;--morph-resize-duration:.3s;--morph-resize-easing:var(--morph-spring);--morph-scale-pressed:.96;--morph-shake-duration:.35s;--morph-shake-easing:ease-in-out;--morph-spring:linear(0, .057, .18, .321, .455, .573, .671, .75, .812, .86, .896, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--padding-horizontal:20px;--padding-vertical:0px}@media (prefers-reduced-motion:reduce){.button--morph{--morph-resize-duration:0s;--morph-shake-duration:0s}}.button--morph-error{--background-default:var(--morph-background-error);--color-default:var(--morph-color-error)}.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)}.button-sidebar{--divider-duration:.18s;--divider-travel:-12px;--divider-x:0px;--icon-size:var(--size-400);--shadow-opacity:.2}.button-split{--chevron-duration:.2s;--chevron-timing-function:cubic-bezier(.23, 1, .32, 1);--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--icon-size:var(--size-400);--trigger-padding-horizontal:var(--size-200)}.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: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), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate: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{min-height:var(--kbd-size);min-width:var(--kbd-size);font-family:inherit}.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%}.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{stroke-dashoffset:0}.button-face.button-face--error .button-icon{color:var(--error-color)}.button-face.button-face--success .button-icon{color:var(--success-color)}.button-faces{place-items:center;display:grid}.button-fill{background:var(--fill-background);clip-path:inset(0 100% 0 0);color:var(--fill-color);place-items:center;display:grid}.button-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.button-icon--draw{transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.button-icon--spin{animation:button--processing var(--spin-duration) infinite linear}:where(.button) :where(.icon){transition:color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}@media (prefers-reduced-motion:reduce){.button--skeleton,.button-icon--spin{animation:none}.button-face,.button-icon--draw{transition:none}.button--kbd.--active,.button--kbd:not(.--active):active{translate:none}}}
 /*$vite$:1*/

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

@@ -0,0 +1,18 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    'aria-expanded'?: never;
+    open: boolean | (() => boolean);
+    side?: 'left' | 'right' | (() => 'left' | 'right');
+};
+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/button/sidebar.js

@@ -0,0 +1,19 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_09lnm231 = template_u1.template(`<button class='button button-sidebar' type='button'><span aria-hidden='true' class='icon button-sidebar-icon'><svg class='button-sidebar-graphic' fill='none' focusable='false' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><defs><clipPath><rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' /></clipPath></defs><g class='button-sidebar-shadow'><path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' /><path d='M6.25 2.75v11' /></g><g><g class='button-sidebar-divider'><path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' /><path d='M6.25 2.75v11' /></g></g><rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' />`);
+let uid = 0;
+function read(value) {
+    return typeof value === 'function' ? value() : value;
+}
+export default component(({ open, side = 'left', ...attributes }) => {
+    let clip = `button-sidebar-${++uid}`;
+    return (() => {
+        let root_09lnm230 = template_09lnm231(), element_09lnm232 = root_09lnm230.firstChild, element_09lnm233 = element_09lnm232.firstElementChild.firstElementChild.firstElementChild.firstElementChild, element_09lnm234 = element_09lnm232.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling;
+        template_u1.setProperty(element_09lnm234, 'clip-path', `url(#${clip})`);
+        template_u1.setProperty(element_09lnm233, 'id', clip);
+        template_u1.setProperties(element_09lnm232, attributes);
+        template_u1.setProperty(element_09lnm232, 'aria-expanded', () => String(read(open)));
+        template_u1.setList(element_09lnm232, 'class', () => read(side) === 'right' && 'button-sidebar--right');
+        return root_09lnm230;
+    })();
+});

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

@@ -0,0 +1,23 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import type { A as MenuAttributes } from '../tooltip/menu.js';
+declare const SPLIT_ACTION: unique symbol;
+declare const SPLIT_ITEM: unique symbol;
+declare const SPLIT_PANEL: unique symbol;
+declare const SPLIT_TRIGGER: unique symbol;
+type A = Attributes & Pick<MenuAttributes, 'animate' | 'controller' | 'expand' | 'items' | 'onselect' | 'openOn' | 'state'> & {
+    [SPLIT_ACTION]?: Attributes;
+    [SPLIT_ITEM]?: Attributes;
+    [SPLIT_PANEL]?: Attributes;
+    [SPLIT_TRIGGER]?: Attributes & {
+        onclick?: never;
+    };
+    trigger?: Renderable<unknown>;
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly action: typeof SPLIT_ACTION;
+    readonly item: typeof SPLIT_ITEM;
+    readonly panel: typeof SPLIT_PANEL;
+    readonly trigger: typeof SPLIT_TRIGGER;
+}>;
+export default _default;

package/build/components/button/split.js

@@ -0,0 +1,41 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import tooltip from '../tooltip/index.js';
+import chevronSvg from '@esportsplus/ui/svg/chevron-down.svg';
+const template_0doex6n1 = template_u1.template(`<svg aria-hidden='true' class='button-icon button-split-chevron'><use />`);
+const template_0doex6n4 = template_u1.template(`<div class='button-split' role='group'><button class='button button-split-action' type='button'>`);
+const SPLIT_ACTION = Symbol.for('@esportsplus/ui/button.split.action');
+const SPLIT_ITEM = Symbol.for('@esportsplus/ui/button.split.item');
+const SPLIT_PANEL = Symbol.for('@esportsplus/ui/button.split.panel');
+const SPLIT_TRIGGER = Symbol.for('@esportsplus/ui/button.split.trigger');
+const chevron = () => {
+    let root_0doex6n0 = template_0doex6n1(), element_0doex6n2 = root_0doex6n0.firstChild.firstElementChild;
+    template_u1.setProperty(element_0doex6n2, 'href', template_u1.interpolate(["#", (chevronSvg)]));
+    return root_0doex6n0;
+};
+export default component(({ animate, controller, expand, items, onselect, openOn, state, trigger, ...attributes }, content) => {
+    return (() => {
+        let root_0doex6n3 = template_0doex6n4(), element_0doex6n5 = root_0doex6n3.firstChild, element_0doex6n6 = element_0doex6n5.firstElementChild;
+        template_u1.slot(element_0doex6n6, content, 1);
+        template_u1.slot(element_0doex6n5, tooltip.menu({
+            animate,
+            class: 'button-split-menu',
+            controller,
+            expand,
+            items,
+            onselect,
+            openOn,
+            state,
+            [tooltip.menu.item]: attributes[SPLIT_ITEM],
+            [tooltip.menu.panel]: attributes[SPLIT_PANEL],
+            [tooltip.menu.trigger]: {
+                'aria-label': 'More options',
+                ...attributes[SPLIT_TRIGGER],
+                class: ['button button-split-trigger', attributes[SPLIT_TRIGGER]?.class ?? []].flat()
+            }
+        }, trigger ?? chevron()), 2);
+        template_u1.setProperties(element_0doex6n6, attributes[SPLIT_ACTION]);
+        template_u1.setProperties(element_0doex6n5, attributes);
+        return root_0doex6n3;
+    })();
+}, { action: SPLIT_ACTION, item: SPLIT_ITEM, panel: SPLIT_PANEL, trigger: SPLIT_TRIGGER });

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

@@ -0,0 +1,19 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+type State = {
+    active: boolean;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;
+export type { State };

package/build/components/capslock/index.js

@@ -0,0 +1,39 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import capsLock from '@esportsplus/ui/svg/caps-lock.svg';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+const template_18k2iql2 = template_u1.template(`<div class='capslock text'><kbd aria-hidden='true' class='button button--kbd capslock-key'><span class='capslock-key-light'></span><svg class='capslock-key-icon'><use /></svg></kbd><span aria-hidden='true' class='capslock-text --flex-vertical'>Caps Lock On</span><span aria-live='polite' class='capslock-live --flex-vertical'>`);
+class ReactiveObject_18k2iql0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+export default component(function ({ state = new ReactiveObject_18k2iql0(), ...attributes } = {}) {
+    let read = (e) => {
+        if (!e.getModifierState) {
+            return;
+        }
+        state.active = e.getModifierState('CapsLock');
+    };
+    return (() => {
+        let root_18k2iql1 = template_18k2iql2(), element_18k2iql3 = root_18k2iql1.firstChild, element_18k2iql4 = element_18k2iql3.firstElementChild.firstElementChild.nextElementSibling.firstElementChild, element_18k2iql5 = element_18k2iql3.firstElementChild.nextElementSibling.nextElementSibling;
+        new template_u1.EffectSlot(element_18k2iql5, () => state.active && 'Caps Lock On', 1);
+        template_u1.setProperty(element_18k2iql4, 'href', template_u1.interpolate(["#", (capsLock)]));
+        template_u1.setProperties(element_18k2iql3, this?.attributes);
+        template_u1.setProperties(element_18k2iql3, attributes);
+        template_u1.setList(element_18k2iql3, 'class', () => state.active && '--active');
+        template_u1.onwindow(element_18k2iql3, 'keydown', read);
+        template_u1.onwindow(element_18k2iql3, 'keyup', read);
+        template_u1.onwindow(element_18k2iql3, 'pointerdown', read);
+        return root_18k2iql1;
+    })();
+});

package/build/components/capslock/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{.capslock-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.capslock{--font-size:var(--font-size-300);--gap-horizontal:var(--size-200);--icon-height:10px;--icon-width:12px;--light-color:var(--color-border-400);--light-color-active:var(--color-green-400);--light-inset:3px;--light-shadow:none;--light-size:4px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.capslock.--active{--light-color:var(--light-color-active);--light-shadow:0 0 4px 1px color-mix(in oklch, var(--light-color) 55%, transparent)}.capslock-key.button{--padding-horizontal:9px}.capslock{filter:blur(2px);opacity:0;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none}.capslock.--active{filter:none;opacity:1;transition-duration:.2s}.capslock:not(.--active){height:0}.capslock-key{pointer-events:none}.capslock-key-icon{height:var(--icon-height);width:var(--icon-width)}.capslock-key-light{background:var(--light-color);box-shadow:var(--light-shadow);height:var(--light-size);left:var(--light-inset);top:var(--light-inset);width:var(--light-size);border-radius:50%;transition:background-color .3s ease-out,box-shadow .3s ease-out;position:absolute}@media (prefers-reduced-motion:reduce){.capslock{transition-property:opacity}}}
+/*$vite$:1*/

package/build/components/card/expand.d.ts

@@ -0,0 +1,22 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import '../button/scss/index.scss';
+declare const EXPAND_TRIGGER: unique symbol;
+type A = Attributes & {
+    [EXPAND_TRIGGER]?: Attributes;
+    items: Item[];
+    state?: {
+        open: string | null;
+    };
+};
+type Item = {
+    detail: string;
+    id: string;
+    meta: string;
+    summary: string;
+    title: string;
+};
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly trigger: typeof EXPAND_TRIGGER;
+}>;
+export default _default;