@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/accordion/index.js

@@ -1,8 +1,9 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
+import more from './more.js';
 import './scss/index.scss';
-const template_u2 = template_u0.template(`<div class='accordion' ><div class='accordion-content'>`);
+const template_04mlrpv2 = template_u1.template(`<div class='accordion'><div class='accordion-content'>`);
 class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -15,13 +16,15 @@ class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#active, _v0);
     }
 }
-export default component(function ({ state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
+const base = component(function ({ state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
     return (() => {
-        let root_u1 = template_u2(), element_u3 = root_u1.firstChild, element_u4 = element_u3.firstElementChild;
-        template_u0.setProperties(element_u3, attributes);
-        template_u0.setList(element_u3, 'class', () => state.active && '--active');
-        template_u0.setProperty(element_u3, 'inert', () => !state.active);
-        template_u0.slot(element_u4, content, 1);
-        return root_u1;
+        let root_04mlrpv1 = template_04mlrpv2(), element_04mlrpv3 = root_04mlrpv1.firstChild, element_04mlrpv4 = element_04mlrpv3.firstElementChild;
+        template_u1.setProperties(element_04mlrpv3, attributes);
+        template_u1.setList(element_04mlrpv3, 'class', () => state.active && '--active');
+        template_u1.setProperty(element_04mlrpv3, 'inert', () => !state.active);
+        template_u1.slot(element_04mlrpv4, content, 1);
+        return root_04mlrpv1;
     })();
 });
+const accordion = Object.assign(base, { more });
+export default accordion;

package/build/components/accordion/more.d.ts

@@ -0,0 +1,20 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+declare const MORE_TRIGGER: unique symbol;
+type A = Attributes & {
+    [MORE_TRIGGER]?: Attributes;
+    label?: string;
+    less?: Renderable<unknown>;
+    lines?: number;
+    maxHeight?: number;
+    more?: Renderable<unknown>;
+    onconnect?: never;
+    ondisconnect?: never;
+    state?: {
+        active: boolean;
+    };
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly trigger: typeof MORE_TRIGGER;
+}>;
+export default _default;

package/build/components/accordion/more.js

@@ -0,0 +1,76 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_1u70dx03 = template_u1.template(`<div class='accordion-more   '><div class='accordion-more-content'><div class='accordion-more-body'></div></div><button class='accordion-more-trigger' type='button'><span class='accordion-more-trigger-label'><span></span><span></span></span><svg class='accordion-more-trigger-icon' aria-hidden='true' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' />`);
+class ReactiveObject_1u70dx00 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);
+    }
+}
+class ReactiveObject_1u70dx01 extends reactivity_u0.ReactiveObject {
+    #clamped = this[reactivity_u0.SIGNAL](false);
+    #height = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get clamped() {
+        return reactivity_u0.read(this.#clamped);
+    }
+    set clamped(_v0) {
+        reactivity_u0.write(this.#clamped, _v0);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v1) {
+        reactivity_u0.write(this.#height, _v1);
+    }
+}
+const MORE_TRIGGER = Symbol.for('@esportsplus/ui/accordion.more.trigger');
+export default component(({ label = 'Expanded content', less = 'Show less', lines = 3, maxHeight = 320, more = 'Show more', state = new ReactiveObject_1u70dx00(), ...attributes }, content) => {
+    let id = `accordion-more-${crypto.randomUUID()}`, measured = new ReactiveObject_1u70dx01(), observer, scrollable = () => state.active && measured.height > maxHeight;
+    return (() => {
+        let root_1u70dx02 = template_1u70dx03(), element_1u70dx04 = root_1u70dx02.firstChild, element_1u70dx05 = element_1u70dx04.firstElementChild, element_1u70dx06 = element_1u70dx05.firstElementChild, element_1u70dx07 = element_1u70dx05.nextElementSibling, element_1u70dx08 = element_1u70dx07.firstElementChild.firstElementChild, element_1u70dx09 = element_1u70dx08.nextElementSibling;
+        template_u1.setList(element_1u70dx04, 'class', () => state.active && '--active');
+        template_u1.setList(element_1u70dx04, 'class', () => measured.clamped && '--clamped');
+        template_u1.setList(element_1u70dx04, 'class', () => scrollable() && '--scrollable');
+        template_u1.setProperties(element_1u70dx04, attributes);
+        template_u1.onconnect(element_1u70dx04, (element) => {
+            let body = element.querySelector('.accordion-more-body');
+            observer = new ResizeObserver(() => {
+                let computed = getComputedStyle(body), height = body.offsetHeight, line = parseFloat(computed.lineHeight) || parseFloat(computed.fontSize) * 1.2;
+                measured.clamped = height > Math.ceil(line * lines);
+                measured.height = height;
+            });
+            observer.observe(body);
+        });
+        template_u1.ondisconnect(element_1u70dx04, () => {
+            observer?.disconnect();
+        });
+        template_u1.setList(element_1u70dx04, 'style', () => `${measured.height ? `--height: ${measured.height}px; ` : ''}--lines: ${lines}; --max-height: ${maxHeight}px;`);
+        template_u1.setProperty(element_1u70dx05, 'id', id);
+        template_u1.setProperty(element_1u70dx05, 'aria-label', () => scrollable() && label);
+        template_u1.setProperty(element_1u70dx05, 'role', () => scrollable() && 'region');
+        template_u1.setProperty(element_1u70dx05, 'tabindex', () => scrollable() && '0');
+        template_u1.slot(element_1u70dx06, content, 1);
+        template_u1.setProperty(element_1u70dx07, 'aria-controls', id);
+        template_u1.setProperties(element_1u70dx07, attributes[MORE_TRIGGER]);
+        template_u1.setProperty(element_1u70dx07, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.setProperty(element_1u70dx07, 'disabled', () => !measured.clamped);
+        template_u1.delegate(element_1u70dx07, 'click', () => {
+            state.active = !state.active;
+        });
+        template_u1.setProperty(element_1u70dx08, 'aria-hidden', () => state.active && 'true');
+        template_u1.slot(element_1u70dx08, more, 1);
+        template_u1.setProperty(element_1u70dx09, 'aria-hidden', () => !state.active && 'true');
+        template_u1.slot(element_1u70dx09, less, 1);
+        return root_1u70dx02;
+    })();
+}, { trigger: MORE_TRIGGER });

package/build/components/accordion/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion:not(.--active){grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}}
+@layer components {@property --accordion-more-fade{syntax:"<length>";inherits:false;initial-value:0}.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion:not(.--active){grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}.accordion-more{--fade-size:2lh;--focus-color:var(--color-blue-400);--transition-duration:.48s;--transition-timing-function:cubic-bezier(.22, 1, .36, 1);--trigger-transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);gap:var(--size-300);flex-direction:column;display:flex}.accordion-more-content{--accordion-more-fade:0px;height:min(var(--height,100vh), var(--lines) * 1lh);-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);mask-image:linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);transition:--accordion-more-fade calc(var(--transition-duration) / 2) var(--transition-timing-function), height var(--transition-duration) var(--transition-timing-function);overflow:hidden}.accordion-more-content:focus-visible{border-radius:var(--border-radius-300);outline:var(--border-width-400) solid var(--focus-color);outline-offset:var(--size-100)}.accordion-more.--clamped:not(.--active) .accordion-more-content{--accordion-more-fade:var(--fade-size)}.accordion-more.--active .accordion-more-content{height:min(var(--height,var(--max-height)), var(--max-height))}.accordion-more.--scrollable .accordion-more-content{overscroll-behavior:contain;overflow-y:auto}.accordion-more-trigger{border:var(--border-width-400) solid color-mix(in srgb, currentColor 16%, transparent);color:inherit;cursor:pointer;font:inherit;font-size:var(--font-size-300);align-self:flex-start;align-items:center;gap:var(--size-200);padding:var(--size-100) var(--size-300) var(--size-100) var(--size-400);background:0 0;border-radius:999px;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}.accordion-more-trigger:hover{background:color-mix(in srgb, currentColor 6%, transparent);border-color:color-mix(in srgb, currentColor 28%, transparent)}.accordion-more-trigger:focus-visible{outline:var(--border-width-400) solid var(--focus-color);outline-offset:var(--size-100)}.accordion-more-trigger:disabled{opacity:0;pointer-events:none;visibility:hidden}.accordion-more-trigger-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;height:12px;transition:rotate .4s var(--trigger-transition-timing-function);width:12px}.accordion-more-trigger-label{display:grid}.accordion-more-trigger-label>span{transition:opacity .2s, translate .32s var(--trigger-transition-timing-function);grid-area:1/1}.accordion-more-trigger-label>span:last-child{opacity:0;translate:0 50%}.accordion-more.--active .accordion-more-trigger-icon{rotate:180deg}.accordion-more.--active .accordion-more-trigger-label>span:first-child{opacity:0;translate:0 -50%}.accordion-more.--active .accordion-more-trigger-label>span:last-child{opacity:1;translate:0}@media (prefers-reduced-motion:reduce){.accordion,.accordion-more-content,.accordion-more-trigger-icon,.accordion-more-trigger-label>span{transition:none}}}
 /*$vite$:1*/

package/build/components/anchor/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical) * 2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal) * 2);transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
+@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical) * 2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal) * 2);transition:opacity var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;translate:50%}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
 /*$vite$:1*/

package/build/components/announcement-banner/index.d.ts

@@ -0,0 +1,33 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [ANNOUNCEMENT_BANNER_CONTENT]?: Attributes;
+    [ANNOUNCEMENT_BANNER_DISMISS]?: Attributes;
+    icon?: Renderable<unknown>;
+    label?: string;
+    link?: {
+        href: string;
+        label: string;
+    };
+    ondismiss?: () => void;
+    state?: State;
+};
+type State = {
+    open: boolean;
+};
+declare const ANNOUNCEMENT_BANNER_CONTENT: unique symbol;
+declare const ANNOUNCEMENT_BANNER_DISMISS: unique symbol;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+} & {
+    readonly content: typeof ANNOUNCEMENT_BANNER_CONTENT;
+    readonly dismiss: typeof ANNOUNCEMENT_BANNER_DISMISS;
+};
+export default _default;

package/build/components/announcement-banner/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 './scss/index.scss';
+const template_0ei75f92 = template_u1.template(`<div class='announcement-banner'><div class='announcement-banner-clip'><section class='announcement-banner-content' tabindex='-1'><!--$--><p class='announcement-banner-text'></p><!--$--><button aria-label='Dismiss announcement' class='button announcement-banner-dismiss' type='button'><svg viewBox='0 0 16 16'><path d='m4.5 4.5 7 7M11.5 4.5l-7 7' />`);
+const template_0ei75f9a = template_u1.template(`<span aria-hidden='true' class='announcement-banner-icon'>`);
+const template_0ei75f9d = template_u1.template(`<a class='announcement-banner-link'>`);
+class ReactiveObject_0ei75f90 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+}
+const ANNOUNCEMENT_BANNER_CONTENT = Symbol.for('@esportsplus/ui/announcement-banner.content');
+const ANNOUNCEMENT_BANNER_DISMISS = Symbol.for('@esportsplus/ui/announcement-banner.dismiss');
+export default Object.assign(component(function ({ icon, label = 'Announcement', link, ondismiss, state = new ReactiveObject_0ei75f90(), ...attributes }, content) {
+    let opened = false, returning = false;
+    return (() => {
+        let root_0ei75f91 = template_0ei75f92(), element_0ei75f93 = root_0ei75f91.firstChild, element_0ei75f94 = element_0ei75f93.firstElementChild.firstElementChild, element_0ei75f95 = element_0ei75f94.firstChild, element_0ei75f96 = element_0ei75f94.firstElementChild, element_0ei75f97 = element_0ei75f95.nextSibling.nextSibling, element_0ei75f98 = element_0ei75f96.nextElementSibling;
+        template_u1.setProperties(element_0ei75f93, this?.attributes);
+        template_u1.setProperties(element_0ei75f93, attributes);
+        template_u1.setList(element_0ei75f93, 'class', () => {
+            if (state.open) {
+                opened = true;
+            }
+            else if (opened) {
+                returning = true;
+            }
+            return `${state.open ? '--active' : ''} ${returning ? 'announcement-banner--returning' : ''}`;
+        });
+        template_u1.setProperty(element_0ei75f94, 'aria-label', label);
+        template_u1.setProperty(element_0ei75f94, 'inert', () => !state.open);
+        template_u1.setProperties(element_0ei75f94, this?.attributes?.[ANNOUNCEMENT_BANNER_CONTENT]);
+        template_u1.setProperties(element_0ei75f94, attributes[ANNOUNCEMENT_BANNER_CONTENT]);
+        template_u1.slot(element_0ei75f95, icon && (() => {
+            let root_0ei75f99 = template_0ei75f9a(), element_0ei75f9b = root_0ei75f99.firstChild;
+            template_u1.slot(element_0ei75f9b, icon, 1);
+            return root_0ei75f99;
+        })());
+        template_u1.slot(element_0ei75f96, content, 1);
+        template_u1.slot(element_0ei75f97, link && (() => {
+            let root_0ei75f9c = template_0ei75f9d(), element_0ei75f9e = root_0ei75f9c.firstChild;
+            template_u1.setProperty(element_0ei75f9e, 'href', link.href);
+            template_u1.slot(element_0ei75f9e, link.label, 1);
+            return root_0ei75f9c;
+        })());
+        template_u1.delegate(element_0ei75f98, 'click', () => {
+            state.open = false;
+            ondismiss?.();
+        });
+        template_u1.setProperties(element_0ei75f98, this?.attributes?.[ANNOUNCEMENT_BANNER_DISMISS]);
+        template_u1.setProperties(element_0ei75f98, attributes[ANNOUNCEMENT_BANNER_DISMISS]);
+        return root_0ei75f91;
+    })();
+}), { content: ANNOUNCEMENT_BANNER_CONTENT, dismiss: ANNOUNCEMENT_BANNER_DISMISS });

package/build/components/announcement-banner/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.announcement-banner{--announcement-banner-background:var(--color-text-500);--announcement-banner-color:var(--color-white-300);--announcement-banner-drawer:cubic-bezier(.32, .72, 0, 1);--announcement-banner-ease:cubic-bezier(.23, 1, .32, 1);--announcement-banner-font-size:14px;--announcement-banner-height:44px;--announcement-banner-icon-size:16px}.announcement-banner--blue{--announcement-banner-background:var(--color-blue-400)}.announcement-banner--purple{--announcement-banner-background:var(--color-purple-400)}.announcement-banner{transition:grid-template-rows .24s var(--announcement-banner-drawer) 80ms;grid-template-rows:0fr;display:grid}.announcement-banner-clip{min-height:0;overflow:hidden}.announcement-banner-content{background:var(--announcement-banner-background);color:var(--announcement-banner-color);filter:blur(2px);font-size:var(--announcement-banner-font-size);height:var(--announcement-banner-height);opacity:0;transition:filter .12s var(--announcement-banner-ease), opacity .12s var(--announcement-banner-ease);outline:none;flex-wrap:nowrap;align-items:center;gap:10px;padding-inline:16px 6px;display:flex;translate:0 -100%}.announcement-banner-dismiss.button{--background-default:transparent;--background-hover:color-mix(in oklab, var(--announcement-banner-color) 15%, transparent);--border-radius:999px;--color-default:color-mix(in oklab, var(--announcement-banner-color) 70%, transparent);--color-hover:var(--announcement-banner-color);--padding-horizontal:0px;--padding-vertical:0px;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;flex-shrink:0;width:32px;height:32px;margin-inline-start:auto;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out}.announcement-banner-dismiss.button:before{content:"";border-radius:999px;position:absolute;inset:-4px}.announcement-banner-dismiss.button:active{scale:.96}.announcement-banner-dismiss.button:focus-visible{outline:2px solid var(--announcement-banner-color)}.announcement-banner-dismiss.button svg{fill:none;height:var(--announcement-banner-icon-size);stroke:currentColor;stroke-linecap:round;stroke-width:1.5px;width:var(--announcement-banner-icon-size)}.announcement-banner-icon{flex-shrink:0;display:flex}.announcement-banner-icon svg{fill:none;height:var(--announcement-banner-icon-size);stroke:currentColor;stroke-linejoin:round;stroke-width:1.5px;width:var(--announcement-banner-icon-size)}.announcement-banner-link{border-radius:var(--border-radius-100);color:inherit;font-weight:var(--font-weight-500);text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklab, var(--announcement-banner-color) 40%, transparent);-webkit-text-decoration-color:color-mix(in oklab, var(--announcement-banner-color) 40%, transparent);text-decoration-color:color-mix(in oklab, var(--announcement-banner-color) 40%, transparent);text-underline-offset:3px;outline:none;flex-shrink:0;transition:text-decoration-color .15s ease-out}.announcement-banner-link:hover{-webkit-text-decoration-color:var(--announcement-banner-color);-webkit-text-decoration-color:var(--announcement-banner-color);text-decoration-color:var(--announcement-banner-color)}.announcement-banner-link:focus-visible{outline:2px solid var(--announcement-banner-color);outline-offset:2px}.announcement-banner-text{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;width:auto;min-width:0;margin:0;overflow:hidden}.announcement-banner--returning .announcement-banner-content{translate:0}.announcement-banner.--active{transition:grid-template-rows .28s var(--announcement-banner-drawer);grid-template-rows:1fr}.announcement-banner.--active .announcement-banner-content{filter:blur();opacity:1;transition:filter .2s var(--announcement-banner-ease), opacity .2s var(--announcement-banner-ease), translate .28s var(--announcement-banner-drawer);translate:0}.announcement-banner.--active.announcement-banner--returning .announcement-banner-content{transition:filter .2s var(--announcement-banner-ease) .12s, opacity .2s var(--announcement-banner-ease) .12s}@media (prefers-reduced-motion:reduce){.announcement-banner,.announcement-banner.--active{transition:none}.announcement-banner .announcement-banner-content,.announcement-banner.--active .announcement-banner-content,.announcement-banner.--active.announcement-banner--returning .announcement-banner-content{filter:none;transition:opacity .2s var(--announcement-banner-ease);translate:0}.announcement-banner-dismiss.button{transition:background-color .15s ease-out,color .15s ease-out}.announcement-banner-dismiss.button:active{scale:1}}}
+/*$vite$:1*/

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

@@ -0,0 +1,12 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type State = {
+    savedAt: number | null;
+    status: Status;
+};
+type Status = 'saved' | 'saving' | 'unsaved';
+export default _default;
+declare function _default({ state, ...attributes }: Attributes & {
+    state?: State;
+}): DocumentFragment | Text;
+export type { State, Status };

package/build/components/autosave/index.js

@@ -0,0 +1,140 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1lhdjr55 = template_u1.template(`<div class='autosave'><span aria-hidden='true' class='autosave-icon'><span class='autosave-dot' style='--i: 0;'></span><span class='autosave-dot' style='--i: 1;'></span><span class='autosave-dot' style='--i: 2;'></span><svg class='autosave-check' viewBox='0 0 16 16'><path d='M3.75 8.25l2.75 2.75 5.75-6' pathLength='1' /></svg></span><span class='autosave-label'></span><span aria-live='polite' class='autosave-announcement'>`);
+const template_1lhdjr5a = template_u1.template(`<span>`);
+class ReactiveObject_1lhdjr50 extends reactivity_u0.ReactiveObject {
+    #savedAt;
+    #status;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#savedAt = this[reactivity_u0.SIGNAL](_p0);
+        this.#status = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get savedAt() {
+        return reactivity_u0.read(this.#savedAt);
+    }
+    set savedAt(_v0) {
+        reactivity_u0.write(this.#savedAt, _v0);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v1) {
+        reactivity_u0.write(this.#status, _v1);
+    }
+}
+class ReactiveObject_1lhdjr51 extends reactivity_u0.ReactiveObject {
+    #now;
+    constructor(_p0) {
+        super(null);
+        this.#now = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get now() {
+        return reactivity_u0.read(this.#now);
+    }
+    set now(_v0) {
+        reactivity_u0.write(this.#now, _v0);
+    }
+}
+class ReactiveObject_1lhdjr52 extends reactivity_u0.ReactiveObject {
+    #phase = this[reactivity_u0.SIGNAL]('');
+    #text = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get phase() {
+        return reactivity_u0.read(this.#phase);
+    }
+    set phase(_v0) {
+        reactivity_u0.write(this.#phase, _v0);
+    }
+    get text() {
+        return reactivity_u0.read(this.#text);
+    }
+    set text(_v1) {
+        reactivity_u0.write(this.#text, _v1);
+    }
+}
+class ReactiveObject_1lhdjr53 extends reactivity_u0.ReactiveObject {
+    #phase = this[reactivity_u0.SIGNAL]('');
+    #text = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get phase() {
+        return reactivity_u0.read(this.#phase);
+    }
+    set phase(_v0) {
+        reactivity_u0.write(this.#phase, _v0);
+    }
+    get text() {
+        return reactivity_u0.read(this.#text);
+    }
+    set text(_v1) {
+        reactivity_u0.write(this.#text, _v1);
+    }
+}
+const MINUTE = 60_000;
+function text({ savedAt, status }, now) {
+    if (status === 'saving') {
+        return 'Saving';
+    }
+    if (status === 'unsaved') {
+        return 'Unsaved changes';
+    }
+    if (savedAt === null) {
+        return 'Saved';
+    }
+    let ago = now - savedAt;
+    if (ago < 45_000) {
+        return 'Saved just now';
+    }
+    if (ago < 60 * MINUTE) {
+        return `Saved ${Math.max(1, Math.floor(ago / MINUTE))} min ago`;
+    }
+    return `Saved at ${new Date(savedAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
+}
+export default ({ state = new ReactiveObject_1lhdjr50(null, 'saved'), ...attributes }) => {
+    let clock = new ReactiveObject_1lhdjr51(Date.now()), current = 0, slots = [
+        new ReactiveObject_1lhdjr52(),
+        new ReactiveObject_1lhdjr53()
+    ], stopLabel = effect(() => text(state, clock.now), (value, previous) => {
+        if (previous === undefined) {
+            slots[current].text = value;
+            return;
+        }
+        if (value === previous) {
+            return;
+        }
+        slots[current].phase = 'exit';
+        current = current === 0 ? 1 : 0;
+        slots[current].phase = 'enter';
+        slots[current].text = value;
+    }), stopTick = effect(() => {
+        if (state.status !== 'saved' || state.savedAt === null) {
+            return;
+        }
+        let timer = setInterval(() => clock.now = Date.now(), MINUTE / 2);
+        onCleanup(() => clearInterval(timer));
+    });
+    onCleanup(() => {
+        stopLabel();
+        stopTick();
+    });
+    return (() => {
+        let root_1lhdjr54 = template_1lhdjr55(), element_1lhdjr56 = root_1lhdjr54.firstChild, element_1lhdjr57 = element_1lhdjr56.firstElementChild.nextElementSibling, element_1lhdjr58 = element_1lhdjr57.nextElementSibling;
+        template_u1.setProperties(element_1lhdjr56, attributes);
+        template_u1.setProperty(element_1lhdjr56, 'data-status', () => state.status);
+        template_u1.slot(element_1lhdjr57, slots.map((slot) => {
+            let root_1lhdjr59 = template_1lhdjr5a(), element_1lhdjr5b = root_1lhdjr59.firstChild;
+            template_u1.setProperty(element_1lhdjr5b, 'aria-hidden', () => slot.phase === 'exit' ? 'true' : 'false');
+            template_u1.setProperty(element_1lhdjr5b, 'data-phase', () => slot.phase);
+            new template_u1.EffectSlot(element_1lhdjr5b, () => slot.text, 1);
+            return root_1lhdjr59;
+        }), 1);
+        new template_u1.EffectSlot(element_1lhdjr58, () => state.status === 'saved' && state.savedAt !== null ? 'All changes saved' : '', 1);
+        return root_1lhdjr54;
+    })();
+};

package/build/components/autosave/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.autosave{--blur:3px;--check-color:var(--color-text-500);--check-delay:.12s;--check-duration:.35s;--check-stroke-width:1.6;--color:var(--color-text-300);--dot-gap:calc(var(--icon-size) * .3125);--dot-size:calc(var(--icon-size) / 4);--enter-duration:.22s;--exit-duration:.12s;--font-size:var(--font-size-300);--gap:.5rem;--icon-size:1.25em;--move-duration:.4s;--pulse-duration:1s;--pulse-stagger:.16s;--shift:3px;--timing-function:cubic-bezier(.23, 1, .32, 1);--width:11em;color:var(--color);font-size:var(--font-size);align-items:center;gap:var(--gap);white-space:nowrap;width:var(--width);flex-shrink:0;display:flex}.autosave-announcement{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.autosave-check{fill:none;opacity:0;height:100%;stroke:var(--check-color);stroke-dasharray:1;stroke-dashoffset:1px;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--check-stroke-width);transition:opacity var(--exit-duration) var(--timing-function), stroke-dashoffset var(--exit-duration) var(--timing-function);width:100%;position:absolute;inset:0}.autosave-dot{height:var(--dot-size);opacity:0;transition:opacity var(--move-duration) var(--timing-function), scale var(--move-duration) var(--timing-function), translate var(--move-duration) var(--timing-function);width:var(--dot-size);position:absolute;scale:.5}.autosave-dot:before{content:"";background:currentColor;border-radius:100%;width:100%;height:100%;display:block}.autosave-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0;place-items:center;display:grid;position:relative}.autosave-label{flex:1;min-width:0;display:grid}.autosave-label [data-phase=enter]{animation:autosave-enter var(--enter-duration) var(--timing-function) both}.autosave-label [data-phase=exit]{animation:autosave-exit var(--exit-duration) var(--timing-function) both;opacity:0}.autosave-label span{grid-area:1/1}.autosave[data-status=saved] .autosave-check{opacity:1;stroke-dashoffset:0;transition:opacity var(--check-duration) var(--timing-function) var(--check-delay), stroke-dashoffset var(--check-duration) var(--timing-function) var(--check-delay)}.autosave[data-status=saving] .autosave-dot{opacity:1;scale:1;translate:calc((var(--i) - 1) * var(--dot-gap))}.autosave[data-status=saving] .autosave-dot:before{animation:autosave-pulse var(--pulse-duration) ease-in-out calc(var(--i) * var(--pulse-stagger)) infinite}.autosave[data-status=unsaved] .autosave-dot:nth-child(2){opacity:1;scale:1.5}@media (prefers-reduced-motion:reduce){.autosave-check,.autosave-dot,.autosave[data-status=saved] .autosave-check{transition:none}.autosave-label [data-phase],.autosave[data-status=saving] .autosave-dot:before{animation:none}}@keyframes autosave-enter{0%{filter:blur(var(--blur));opacity:0;translate:0 var(--shift)}}@keyframes autosave-exit{0%{opacity:1}to{filter:blur(var(--blur));opacity:0;translate:0 calc(var(--shift) * -1)}}@keyframes autosave-pulse{0%,to{opacity:.25}40%{opacity:1}}}
+/*$vite$:1*/

package/build/components/back-to-top/index.d.ts

@@ -0,0 +1,16 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    showAfter?: number;
+    state?: State;
+    target?: HTMLElement | (() => HTMLElement | null | undefined);
+};
+type State = {
+    jump: number;
+    visible: boolean;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { showAfter, state, target, ...attributes }: A): DocumentFragment | Text;
+export default template;
+export type { State };

package/build/components/back-to-top/index.js

@@ -0,0 +1,182 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_04ywhwe2 = template_u1.template(`<button aria-label='Back to top' class='back-to-top ' type='button'><svg aria-hidden='true' class='back-to-top-ring' fill='none' viewBox='0 0 44 44'><circle class='back-to-top-track' cx='22' cy='22' r='20.5' /><circle class='back-to-top-progress' cx='22' cy='22' pathLength='1' r='20.5' /></svg><svg aria-hidden='true' class='back-to-top-arrow' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' viewBox='0 0 16 16'><path d='M8 12.5v-9M4 7l4-4 4 4' />`);
+class ReactiveObject_04ywhwe0 extends reactivity_u0.ReactiveObject {
+    #jump = this[reactivity_u0.SIGNAL](0);
+    #visible = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get jump() {
+        return reactivity_u0.read(this.#jump);
+    }
+    set jump(_v0) {
+        reactivity_u0.write(this.#jump, _v0);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v1) {
+        reactivity_u0.write(this.#visible, _v1);
+    }
+}
+const ARRIVE = { duration: 300, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+const LIFT = { duration: 400, easing: 'cubic-bezier(0.4, 0, 0.6, 1)', fill: 'forwards' };
+const TRIP = { x1: 0.65, x2: 0.35, y1: 0, y2: 1 };
+const EASE = bezier(TRIP);
+function bezier({ x1, x2, y1, y2 }) {
+    let ax = 1 - 3 * x2 + 3 * x1, ay = 1 - 3 * y2 + 3 * y1, bx = 3 * x2 - 6 * x1, by = 3 * y2 - 6 * y1, cx = 3 * x1, cy = 3 * y1;
+    return (x) => {
+        let high = 1, low = 0, t = x;
+        for (let i = 0; i < 20; i++) {
+            let current = ((ax * t + bx) * t + cx) * t;
+            if (Math.abs(current - x) < 1e-5) {
+                break;
+            }
+            if (current < x) {
+                low = t;
+            }
+            else {
+                high = t;
+            }
+            t = (low + high) / 2;
+        }
+        return ((ay * t + by) * t + cy) * t;
+    };
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function template({ showAfter = 0.12, state = new ReactiveObject_04ywhwe0(), target, ...attributes }) {
+    let arrow, cleanup, frame = 0, jump = state.jump, launched = false, lift, pending, ring, returning = false, scroller, timeline, trip = 0;
+    function go() {
+        let from = top();
+        launch();
+        stop();
+        if (reduced()) {
+            write(0);
+            return;
+        }
+        let duration = Math.min(900, 450 + from / 4), source = scroller ?? window, start = performance.now();
+        function abort() {
+            stop();
+            returning = false;
+            land(true);
+        }
+        function step(now) {
+            let t = Math.min((now - start) / duration, 1);
+            write(from * (1 - EASE(t)));
+            if (t < 1) {
+                trip = requestAnimationFrame(step);
+            }
+            else {
+                stop();
+            }
+        }
+        pending = { abort, source };
+        returning = true;
+        source.addEventListener('touchstart', abort, { once: true, passive: true });
+        source.addEventListener('wheel', abort, { once: true, passive: true });
+        trip = requestAnimationFrame(step);
+    }
+    function land(animate) {
+        if (!launched || !arrow) {
+            return;
+        }
+        launched = false;
+        lift?.cancel();
+        lift = undefined;
+        if (animate && !reduced()) {
+            arrow.animate([
+                { filter: 'blur(2px)', opacity: 0, transform: 'translateY(10px)' },
+                { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0px)' }
+            ], ARRIVE);
+        }
+    }
+    function launch() {
+        if (launched || !arrow) {
+            return;
+        }
+        launched = true;
+        lift = arrow.animate([
+            { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0px)' },
+            { filter: 'blur(2px)', opacity: 0, transform: 'translateY(-20px)' }
+        ], reduced() ? { ...LIFT, duration: 0 } : LIFT);
+    }
+    function onscroll() {
+        if (!frame) {
+            frame = requestAnimationFrame(read);
+        }
+    }
+    function read() {
+        frame = 0;
+        let room = scroller
+            ? scroller.scrollHeight - scroller.clientHeight
+            : document.documentElement.scrollHeight - innerHeight, p = room > 0 ? Math.min(1, Math.max(0, top() / room)) : 0;
+        if (!timeline) {
+            ring?.style.setProperty('stroke-dashoffset', String(1 - p));
+        }
+        if (returning) {
+            if (p > 0) {
+                return;
+            }
+            returning = false;
+        }
+        state.visible = p > showAfter;
+        if (p <= showAfter) {
+            land(false);
+        }
+    }
+    function stop() {
+        cancelAnimationFrame(trip);
+        trip = 0;
+        if (!pending) {
+            return;
+        }
+        pending.source.removeEventListener('touchstart', pending.abort);
+        pending.source.removeEventListener('wheel', pending.abort);
+        pending = undefined;
+    }
+    function top() {
+        return scroller ? scroller.scrollTop : scrollY;
+    }
+    function write(value) {
+        (scroller ?? window).scrollTo({ behavior: 'instant', top: value });
+    }
+    onCleanup(effect(() => {
+        if (state.jump === jump) {
+            return;
+        }
+        jump = state.jump;
+        go();
+    }));
+    return (() => {
+        let root_04ywhwe1 = template_04ywhwe2(), element_04ywhwe3 = root_04ywhwe1.firstChild;
+        template_u1.setList(element_04ywhwe3, 'class', () => state.visible && '--active');
+        template_u1.setProperties(element_04ywhwe3, this?.attributes);
+        template_u1.setProperties(element_04ywhwe3, attributes);
+        template_u1.delegate(element_04ywhwe3, 'click', go);
+        template_u1.onconnect(element_04ywhwe3, (el) => {
+            let source = typeof target === 'function' ? target() : target;
+            arrow = el.querySelector('.back-to-top-arrow') ?? undefined;
+            ring = el.querySelector('.back-to-top-progress') ?? undefined;
+            scroller = source ?? undefined;
+            if (ring && typeof ScrollTimeline === 'function') {
+                timeline = ring.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { fill: 'both', timeline: new ScrollTimeline({ axis: 'block', source: scroller ?? document.documentElement }) });
+            }
+            (scroller ?? window).addEventListener('scroll', onscroll, { passive: true });
+            cleanup = () => (scroller ?? window).removeEventListener('scroll', onscroll);
+            read();
+        });
+        template_u1.ondisconnect(element_04ywhwe3, () => {
+            cancelAnimationFrame(frame);
+            cleanup?.();
+            stop();
+            timeline?.cancel();
+        });
+        return root_04ywhwe1;
+    })();
+}
+export default template;

package/build/components/back-to-top/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.back-to-top{--background:var(--color-white-300);--box-shadow:0 0 0 var(--border-width-400) 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);--color:var(--color-text-500);--enter-duration:.25s;--enter-timing-function:cubic-bezier(.23, 1, .32, 1);--exit-duration:.15s;--focus-color:var(--color);--hidden-blur:4px;--hidden-scale:.85;--hover-lift:-2px;--offset:var(--size-500);--pressed-scale:.96;--ring-color:var(--color);--ring-width:1.5;--size:44px;--track-color:var(--color-border-300);--transition-duration:.15s;--transition-timing-function:ease-out;--z-index:10}.back-to-top--dark{--background:var(--color-text-500);--color:var(--color-white-300);--track-color:oklch(from var(--color-white-300) l c h / .2)}.back-to-top{background:var(--background);box-shadow:var(--box-shadow);color:var(--color);cursor:pointer;filter:blur(var(--hidden-blur));height:var(--size);opacity:0;transform:scale(var(--hidden-scale));transition:filter var(--exit-duration) var(--enter-timing-function), opacity var(--exit-duration) var(--enter-timing-function), scale var(--transition-duration) var(--transition-timing-function), transform var(--exit-duration) var(--enter-timing-function), visibility 0s linear var(--exit-duration);visibility:hidden;width:var(--size);border:0;border-radius:999px;outline:none;place-items:center;padding:0;display:grid;position:relative;overflow:hidden}.back-to-top.--active{filter:blur();opacity:1;transition:filter var(--enter-duration) var(--enter-timing-function), opacity var(--enter-duration) var(--enter-timing-function), scale var(--transition-duration) var(--transition-timing-function), transform var(--enter-duration) var(--enter-timing-function), visibility 0s;visibility:visible;transform:none}.back-to-top:active{scale:var(--pressed-scale)}.back-to-top:focus-visible{outline:var(--border-width-500) solid var(--focus-color);outline-offset:2px}.back-to-top-arrow{height:16px;transition:translate var(--transition-duration) var(--transition-timing-function);grid-area:1/1;width:16px}.back-to-top-progress,.back-to-top-track{stroke-width:var(--ring-width)}.back-to-top-progress{stroke:var(--ring-color);stroke-dasharray:1;stroke-dashoffset:1px;stroke-linecap:round}.back-to-top-ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;rotate:-90deg}.back-to-top-track{stroke:var(--track-color)}.back-to-top--fixed{bottom:var(--offset);right:var(--offset);z-index:var(--z-index);position:fixed}@media (hover:hover){.back-to-top:hover .back-to-top-arrow{translate:0 var(--hover-lift)}}@media (prefers-reduced-motion:reduce){.back-to-top,.back-to-top.--active{transition:none}.back-to-top:active{scale:none}.back-to-top-arrow{transition:none}}}
+/*$vite$:1*/