@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/textarea/index.js

@@ -1,10 +1,9 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_u22 = template_u0.template(`<textarea class='textarea' >`);
+const template_1x5yfkx2 = template_u1.template(`<textarea class='textarea'>`);
 class ReactiveObject_1x5yfkx0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -24,8 +23,7 @@ class ReactiveObject_1x5yfkx0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#error, _v1);
     }
 }
-const OMIT = ['autoresize', 'state'];
-function autoresize({ height }) {
+function autoresize({ height }, oninput) {
     let attributes = {
         class: 'textarea--autoresize',
         style: `
@@ -39,29 +37,29 @@ function autoresize({ height }) {
     return {
         ...attributes,
         class: `${attributes.class} textarea--autoresize-fallback`,
-        oninput: (e) => {
+        oninput: function (e) {
             let element = e.target;
             element.style.setProperty('--content-height', '0px');
             element.style.setProperty('--content-height', `${element.scrollHeight}px`);
+            oninput?.call(this, e);
         }
     };
 }
-export default component(function (attributes) {
-    let state = attributes.state || new ReactiveObject_1x5yfkx0();
+export default component(function ({ autoresize: resize, state = new ReactiveObject_1x5yfkx0(), ...attributes }) {
+    attributes.value ??= '';
     return (() => {
-        let root_u21 = template_u22(), element_u23 = root_u21.firstChild;
-        template_u0.setProperties(element_u23, this?.attributes && omit(this.attributes, OMIT));
-        template_u0.setProperties(element_u23, omit(attributes, OMIT));
-        template_u0.setProperties(element_u23, attributes.autoresize && autoresize(attributes.autoresize));
-        template_u0.setList(element_u23, 'class', () => state.active && '--active');
-        template_u0.on(element_u23, 'focusin', () => {
+        let root_1x5yfkx1 = template_1x5yfkx2(), element_1x5yfkx3 = root_1x5yfkx1.firstChild;
+        template_u1.setProperties(element_1x5yfkx3, this?.attributes);
+        template_u1.setProperties(element_1x5yfkx3, attributes);
+        template_u1.setProperties(element_1x5yfkx3, resize && autoresize(resize, attributes.oninput ?? this?.attributes?.oninput));
+        template_u1.setList(element_1x5yfkx3, 'class', () => state.active && '--active');
+        template_u1.on(element_1x5yfkx3, 'focusin', () => {
             state.active = true;
         });
-        template_u0.on(element_u23, 'focusout', () => {
+        template_u1.on(element_1x5yfkx3, 'focusout', () => {
             state.active = false;
         });
-        template_u0.onrender(element_u23, form.input.onrender(state));
-        template_u0.setProperty(element_u23, 'value', attributes?.value || '');
-        return root_u21;
+        template_u1.onrender(element_1x5yfkx3, form.input.onrender(state));
+        return root_1x5yfkx1;
     })();
 });

package/build/components/textarea/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.textarea{--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-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--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);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.textarea:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.textarea:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.textarea.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.textarea{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-width:0;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);flex:auto;width:100%;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea--autoresize{field-sizing:content;height:auto;max-height:var(--max-height);min-height:var(--min-height);resize:none;overflow-y:auto}.textarea--autoresize-fallback{box-sizing:border-box;height:calc(var(--content-height,var(--min-height)) + 2 * var(--border-width))}}
+@layer components {.textarea{--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-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--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);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.textarea:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.textarea:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.textarea.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.textarea{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-width:0;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), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);flex:auto;width:100%;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea--autoresize{field-sizing:content;height:auto;max-height:var(--max-height);min-height:var(--min-height);resize:none;overflow-y:auto}.textarea--autoresize-fallback{box-sizing:border-box;height:calc(var(--content-height,var(--min-height)) + 2 * var(--border-width))}}
 /*$vite$:1*/

package/build/components/thumbnail/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.thumbnail{--background:transparent;--border-radius:var(--border-radius-300);--height:var(--size);--size:var(--size-700);--width:var(--size);background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width);background-position:50%;background-size:cover;position:relative}}
+@layer components {.thumbnail{--background:transparent;--border-radius:var(--border-radius-300);--height:var(--size);--size:var(--size-700);--width:var(--size)}.thumbnail--stack{--stack-gap:var(--border-width-500);--stack-overlap:calc(var(--width) / 4)}.thumbnail--status{--status-color:var(--color-green-400);--status-gap:var(--border-width-500);--status-size:calc(min(var(--height), var(--width)) * .3)}.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width);background-position:50%;background-size:cover;position:relative}.thumbnail--stack+.thumbnail--stack{margin-left:calc(var(--stack-overlap) * -1)}.thumbnail--stack:has(+.thumbnail--stack){--stack-cut:calc(var(--stack-radius) + var(--stack-gap));--stack-radius:min(var(--border-radius), var(--height) / 2, var(--width) / 2);--stack-x:calc(100% - var(--stack-overlap) + var(--stack-radius));-webkit-mask-composite:source-out, source-over, source-over, source-over, source-over;-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add;-webkit-mask-image:var(--status-mask,linear-gradient(#000 0 0)), linear-gradient(to right, transparent var(--stack-x), #000 0), linear-gradient(to right, transparent calc(100% - var(--stack-overlap) - var(--stack-gap)), #000 0), radial-gradient(circle at var(--stack-x) var(--stack-radius), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px)), radial-gradient(circle at var(--stack-x) calc(100% - var(--stack-radius)), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px));-webkit-mask-image:var(--status-mask,linear-gradient(#000 0 0)), linear-gradient(to right, transparent var(--stack-x), #000 0), linear-gradient(to right, transparent calc(100% - var(--stack-overlap) - var(--stack-gap)), #000 0), radial-gradient(circle at var(--stack-x) var(--stack-radius), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px)), radial-gradient(circle at var(--stack-x) calc(100% - var(--stack-radius)), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px));mask-image:var(--status-mask,linear-gradient(#000 0 0)), linear-gradient(to right, transparent var(--stack-x), #000 0), linear-gradient(to right, transparent calc(100% - var(--stack-overlap) - var(--stack-gap)), #000 0), radial-gradient(circle at var(--stack-x) var(--stack-radius), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px)), radial-gradient(circle at var(--stack-x) calc(100% - var(--stack-radius)), #000 calc(var(--stack-cut) - .5px), transparent calc(var(--stack-cut) + .5px));-webkit-mask-position:0 0,0 0,0,0 0,0 0;mask-position:0 0,0 0,0,0 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%, 100% 100%, 100% calc(100% - var(--stack-radius) * 2), 100% 100%, 100% 100%;-webkit-mask-size:100% 100%, 100% 100%, 100% calc(100% - var(--stack-radius) * 2), 100% 100%, 100% 100%;mask-size:100% 100%, 100% 100%, 100% calc(100% - var(--stack-radius) * 2), 100% 100%, 100% 100%}.thumbnail--status{--status-mask:radial-gradient(circle at calc(100% - var(--status-size) / 2) calc(100% - var(--status-size) / 2), #000 calc(var(--status-size) / 2 - .5px), transparent calc(var(--status-size) / 2 + .5px) calc(var(--status-size) / 2 + var(--status-gap) - .5px), #000 calc(var(--status-size) / 2 + var(--status-gap) + .5px));-webkit-mask-clip:no-clip;mask-clip:no-clip;-webkit-mask-image:var(--status-mask);-webkit-mask-image:var(--status-mask);mask-image:var(--status-mask)}.thumbnail--status:after{background:var(--status-color);content:"";height:calc(var(--status-size) + 1px);width:calc(var(--status-size) + 1px);border-radius:100%;position:absolute;bottom:-.5px;right:-.5px}}
 /*$vite$:1*/

package/build/components/toast/index.js

@@ -1,4 +1,4 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import clipboard from '../clipboard/index.js';
 import icon from '../icon/index.js';
@@ -13,11 +13,12 @@ import loading from './svg/loading.svg';
 import success from './svg/success.svg';
 import warning from './svg/warning.svg';
 import './scss/index.scss';
-const template_u25 = template_u0.template(`<div class='toast-description '>`);
-const template_u28 = template_u0.template(`<div class='toast-action button button--primary' >`);
-const template_u2b = template_u0.template(`<button class='toast-close' aria-label='Dismiss' >`);
-const template_u2e = template_u0.template(`<div ><div class='toast-content'><!--$--><div class='--flex-column --flex-fill'><div class='toast-title'></div></div><!--$-->`);
-const template_u2m = template_u0.template(`<div class='toaster ' >`);
+const template_1ali9cs2 = template_u1.template(`<svg aria-hidden='true' class='toast-countdown' viewBox='0 0 20 20'><circle class='toast-countdown-track' cx='10' cy='10' r='8' /><circle class='toast-countdown-ring' cx='10' cy='10' r='8' style=';' />`);
+const template_1ali9cs6 = template_u1.template(`<div><div class='toast-content'><!--$--><!--$--><div class='--flex-column --flex-fill'><div class='toast-title'></div></div><!--$-->`);
+const template_1ali9csf = template_u1.template(`<div class='toast-description '>`);
+const template_1ali9csi = template_u1.template(`<div class='toast-action button button--primary'>`);
+const template_1ali9csl = template_u1.template(`<button class='toast-close' aria-label='Dismiss'>`);
+const template_1ali9cso = template_u1.template(`<div class='toaster '>`);
 class ReactiveObject_1ali9cs0 extends reactivity_u0.ReactiveObject {
     #direction = this[reactivity_u0.SIGNAL]('');
     #x = this[reactivity_u0.SIGNAL](0);
@@ -46,6 +47,14 @@ class ReactiveObject_1ali9cs0 extends reactivity_u0.ReactiveObject {
 }
 const ICONS = { error, info, loading, success, warning };
 const dismiss = toast.dismiss;
+function countdown(toast) {
+    return (() => {
+        let root_1ali9cs1 = template_1ali9cs2(), element_1ali9cs3 = root_1ali9cs1.firstChild, element_1ali9cs4 = element_1ali9cs3.firstElementChild.nextElementSibling;
+        template_u1.setProperty(element_1ali9cs3, 'data-cycle', toast.cycle);
+        template_u1.setList(element_1ali9cs4, 'style', template_u1.interpolate(["animation-duration: ", (toast.duration), "ms"]));
+        return root_1ali9cs1;
+    })();
+}
 function row(toast, position) {
     let swipe = new ReactiveObject_1ali9cs0(), horizontal = position.endsWith('left') || position.endsWith('right'), pointerId = -1, pressed = false, startX = 0, startY = 0, swiping = false, top = position.startsWith('top');
     const finish = () => {
@@ -67,9 +76,9 @@ function row(toast, position) {
         }
     };
     return (() => {
-        let root_u2d = template_u2e(), element_u2f = root_u2d.firstChild, element_u2g = element_u2f.firstElementChild.firstChild, element_u2h = element_u2f.firstElementChild.firstElementChild.firstElementChild, element_u2i = element_u2f.firstElementChild.firstElementChild, element_u2j = element_u2g.nextSibling.nextSibling, element_u2k = element_u2f.firstElementChild;
-        template_u0.setList(element_u2f, 'class', () => `toast toast--${toast.type}${toast.status === 'starting' ? ' toast--starting' : toast.status === 'ending' ? ' toast--ending' : ''}${swipe.x !== 0 || swipe.y !== 0 ? ' toast--swiping' : ''}`);
-        template_u0.setList(element_u2f, 'style', () => {
+        let root_1ali9cs5 = template_1ali9cs6(), element_1ali9cs7 = root_1ali9cs5.firstChild, element_1ali9cs8 = element_1ali9cs7.firstElementChild.firstChild, element_1ali9cs9 = element_1ali9cs8.nextSibling, element_1ali9csa = element_1ali9cs7.firstElementChild.firstElementChild.firstElementChild, element_1ali9csb = element_1ali9cs7.firstElementChild.firstElementChild, element_1ali9csc = element_1ali9cs9.nextSibling.nextSibling, element_1ali9csd = element_1ali9cs7.firstElementChild;
+        template_u1.setList(element_1ali9cs7, 'class', () => `toast toast--${toast.type}${toast.status === 'starting' ? ' toast--starting' : toast.status === 'ending' ? ' toast--ending' : ''}${swipe.x !== 0 || swipe.y !== 0 ? ' toast--swiping' : ''}`);
+        template_u1.setList(element_1ali9cs7, 'style', () => {
             let item = buildVisibleToastLayout([...toasts]).items.find((i) => i.toast === toast), visibleIndex = item?.visibleIndex ?? 0, offsetY = item?.offsetY ?? 0;
             return `
                         --toast-index:${visibleIndex};
@@ -78,22 +87,22 @@ function row(toast, position) {
                         --toast-swipe-x:${swipe.x}px;
                         --toast-swipe-y:${swipe.y}px;`;
         });
-        template_u0.setProperty(element_u2f, 'data-swipe-direction', () => swipe.direction);
-        template_u0.onconnect(element_u2f, (el) => {
+        template_u1.setProperty(element_1ali9cs7, 'data-swipe-direction', () => swipe.direction);
+        template_u1.onconnect(element_1ali9cs7, (el) => {
             let observer = new ResizeObserver(() => { toast.height = el.offsetHeight; });
             el.__toastObserver = observer;
             observer.observe(el);
         });
-        template_u0.ondisconnect(element_u2f, (el) => {
+        template_u1.ondisconnect(element_1ali9cs7, (el) => {
             el.__toastObserver?.disconnect();
         });
-        template_u0.delegate(element_u2f, 'pointerdown', (e) => {
+        template_u1.delegate(element_1ali9cs7, 'pointerdown', (e) => {
             pointerId = e.pointerId;
             pressed = true;
             startX = e.clientX;
             startY = e.clientY;
         });
-        template_u0.delegate(element_u2f, 'pointermove', (e) => {
+        template_u1.delegate(element_1ali9cs7, 'pointermove', (e) => {
             if (!pressed) {
                 return;
             }
@@ -108,49 +117,50 @@ function row(toast, position) {
             swipe.x = x;
             swipe.y = y;
         });
-        template_u0.delegate(element_u2f, 'pointerup', finish);
-        template_u0.delegate(element_u2f, 'pointercancel', finish);
-        template_u0.slot(element_u2g, toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : '');
-        template_u0.slot(element_u2h, toast.title, 1);
-        template_u0.slot(element_u2i, toast.description && (() => {
-            let root_u24 = template_u25(), element_u26 = root_u24.firstChild;
-            template_u0.setList(element_u26, 'class', toast.type === 'error' && typeof toast.description === 'string' && toast.description.length > 180 && 'toast-description--clamp');
-            template_u0.slot(element_u26, toast.description, 1);
-            return root_u24;
+        template_u1.delegate(element_1ali9cs7, 'pointerup', finish);
+        template_u1.delegate(element_1ali9cs7, 'pointercancel', finish);
+        new template_u1.EffectSlot(element_1ali9cs8, () => toast.countdown && countdown(toast));
+        template_u1.slot(element_1ali9cs9, toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : '');
+        template_u1.slot(element_1ali9csa, toast.title, 1);
+        template_u1.slot(element_1ali9csb, toast.description && (() => {
+            let root_1ali9cse = template_1ali9csf(), element_1ali9csg = root_1ali9cse.firstChild;
+            template_u1.setList(element_1ali9csg, 'class', toast.type === 'error' && typeof toast.description === 'string' && toast.description.length > 180 && 'toast-description--clamp');
+            template_u1.slot(element_1ali9csg, toast.description, 1);
+            return root_1ali9cse;
         })(), 2);
-        template_u0.slot(element_u2j, toast.type === 'error' && typeof toast.description === 'string' && clipboard.onclick({
+        template_u1.slot(element_1ali9csc, toast.type === 'error' && typeof toast.description === 'string' && clipboard.copy({
             class: 'toast-copy button',
             value: String(toast.description)
         }, (state) => icon(state.copied ? check : copy)));
-        template_u0.slot(element_u2k, toast.action && (() => {
-            let root_u27 = template_u28(), element_u29 = root_u27.firstChild;
-            template_u0.delegate(element_u29, 'click', () => {
+        template_u1.slot(element_1ali9csd, toast.action && (() => {
+            let root_1ali9csh = template_1ali9csi(), element_1ali9csj = root_1ali9csh.firstChild;
+            template_u1.delegate(element_1ali9csj, 'click', () => {
                 toast.action?.onclick();
                 dismiss(toast.id);
             });
-            template_u0.slot(element_u29, toast.action?.label, 1);
-            return root_u27;
+            template_u1.slot(element_1ali9csj, toast.action?.label, 1);
+            return root_1ali9csh;
         })(), 2);
-        new template_u0.EffectSlot(element_u2f, () => toast.dismissible && (() => {
-            let root_u2a = template_u2b(), element_u2c = root_u2a.firstChild;
-            template_u0.delegate(element_u2c, 'click', () => dismiss(toast.id));
-            template_u0.slot(element_u2c, icon(close), 1);
-            return root_u2a;
+        new template_u1.EffectSlot(element_1ali9cs7, () => toast.dismissible && (() => {
+            let root_1ali9csk = template_1ali9csl(), element_1ali9csm = root_1ali9csk.firstChild;
+            template_u1.delegate(element_1ali9csm, 'click', () => dismiss(toast.id));
+            template_u1.slot(element_1ali9csm, icon(close), 1);
+            return root_1ali9csk;
         })(), 2);
-        return root_u2d;
+        return root_1ali9cs5;
     })();
 }
 const toaster = (options) => {
     let position = options?.position ?? 'top-right';
     return (() => {
-        let root_u2l = template_u2m(), element_u2n = root_u2l.firstChild;
-        template_u0.setList(element_u2n, 'class', () => state.active ? '--active' : '');
-        template_u0.setProperty(element_u2n, 'data-position', position);
-        template_u0.setList(element_u2n, 'style', () => `--toast-frontmost-height:${buildVisibleToastLayout([...toasts]).frontmostHeight}px;`);
-        template_u0.on(element_u2n, 'mouseenter', () => { state.active = true; });
-        template_u0.on(element_u2n, 'mouseleave', () => { state.active = false; });
-        element_u2n.appendChild(new template_u0.ArraySlot(toasts, (value) => row(value, position), true).fragment);
-        return root_u2l;
+        let root_1ali9csn = template_1ali9cso(), element_1ali9csp = root_1ali9csn.firstChild;
+        template_u1.setList(element_1ali9csp, 'class', () => state.active ? '--active' : '');
+        template_u1.setProperty(element_1ali9csp, 'data-position', position);
+        template_u1.setList(element_1ali9csp, 'style', () => `--toast-frontmost-height:${buildVisibleToastLayout([...toasts]).frontmostHeight}px;`);
+        template_u1.on(element_1ali9csp, 'mouseenter', () => { state.active = true; });
+        template_u1.on(element_1ali9csp, 'mouseleave', () => { state.active = false; });
+        element_1ali9csp.appendChild(new template_u1.ArraySlot(toasts, (value) => row(value, position), true).fragment);
+        return root_1ali9csn;
     })();
 };
 export default toaster;

package/build/components/toast/manager.d.ts

@@ -13,16 +13,20 @@ type Action = {
 };
 type Options = {
     action?: Action;
+    countdown?: boolean;
     description?: Renderable<unknown> | string;
     dismissible?: boolean;
     duration?: number;
     id?: string;
+    ondismiss?: () => void;
     priority?: 'low' | 'high';
 };
 type Status = 'ending' | 'starting' | 'visible';
 type Toast = {
     action?: Action;
+    countdown: boolean;
     createdAt: number;
+    cycle: number;
     description?: Renderable<unknown> | string;
     dismissible: boolean;
     duration: number;

package/build/components/toast/manager.js

@@ -21,7 +21,7 @@ const DURATIONS = {
     warning: 6000
 };
 const EXIT_DURATION = 300;
-let counter = 0, paused = false, timers = new Map();
+let callbacks = new Map(), counter = 0, paused = false, timers = new Map();
 function buildVisibleToastLayout(toasts) {
     let fullIndex = 0, fullOffsetY = 0, liveIndex = 0, liveOffsetY = 0, items = toasts.map((toast) => {
         let height = normalizeToastHeight(toast.height), item;
@@ -64,7 +64,9 @@ function clearTimer(id) {
 function create(type, title, options = {}) {
     let id = options.id ?? `toast-${++counter}`, toast = reactivity_u0.reactive({
         action: options.action,
+        countdown: options.countdown ?? false,
         createdAt: Date.now(),
+        cycle: 0,
         description: options.description,
         dismissible: options.dismissible ?? true,
         duration: options.duration ?? DURATIONS[type],
@@ -75,6 +77,9 @@ function create(type, title, options = {}) {
         title,
         type
     });
+    if (options.ondismiss) {
+        callbacks.set(id, options.ondismiss);
+    }
     toasts.push(toast);
     queueMicrotask(() => {
         if (toast.status === 'starting' && toasts.includes(toast)) {
@@ -94,6 +99,11 @@ function dismiss(id) {
     clearTimer(id);
     toast.status = 'ending';
     setTimeout(() => remove(id), EXIT_DURATION);
+    let callback = callbacks.get(id);
+    if (callback) {
+        callbacks.delete(id);
+        callback();
+    }
 }
 function normalizeToastHeight(height) {
     return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : 0;
@@ -110,6 +120,7 @@ function pause() {
 }
 function remove(id) {
     let index = toasts.findIndex((toast) => toast.id === id);
+    callbacks.delete(id);
     clearTimer(id);
     if (index !== -1) {
         toasts.splice(index, 1);
@@ -128,6 +139,7 @@ function schedule(toast) {
     if (toast.duration <= 0) {
         return;
     }
+    toast.cycle += 1;
     if (state.active) {
         timers.set(toast.id, {
             handle: undefined,
@@ -150,12 +162,18 @@ function update(id, options) {
     if (options.action !== undefined) {
         toast.action = options.action;
     }
+    if (options.countdown !== undefined) {
+        toast.countdown = options.countdown;
+    }
     if (options.description !== undefined) {
         toast.description = options.description;
     }
     if (options.dismissible !== undefined) {
         toast.dismissible = options.dismissible;
     }
+    if (options.ondismiss !== undefined) {
+        callbacks.set(id, options.ondismiss);
+    }
     if (options.priority !== undefined) {
         toast.priority = options.priority;
     }

package/build/components/toast/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.toaster{--toast-gap:var(--size-300);--toast-inset:var(--size-500);--toast-peek:var(--size-300)}.toast{--toast-calc-height:max(var(--toast-frontmost-height,var(--toast-height,0px)), var(--toast-height,0px));--toast-calc-offset-y:calc(var(--toast-offset-y,0px) + (var(--toast-index,0) * var(--toast-gap)) + var(--toast-swipe-y,0px));--toast-color:var(--color-text-300);--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:max(0, 1 - (var(--toast-index,0) * .06));--toast-shrink:calc(1 - var(--toast-scale));--toast-swipe-x:0px;--toast-swipe-y:0px}.toaster{width:min(360px, 100% - var(--toast-inset) * 2);z-index:9999;position:fixed;inset:auto}.toaster[data-position^=top]{top:var(--toast-inset)}.toaster[data-position^=bottom]{bottom:var(--toast-inset)}.toaster[data-position$=left]{left:var(--toast-inset)}.toaster[data-position$=right]{right:var(--toast-inset)}.toaster[data-position$=center]{left:50%;transform:translate(-50%)}.toast{background:var(--background);border:1px solid var(--color-border-400);border-radius:var(--border-radius-500);box-shadow:var(--box-shadow-300);color:var(--color-text-400);transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + var(--toast-index) * var(--toast-peek) + var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));-webkit-user-select:none;user-select:none;width:100%;z-index:calc(9999 - var(--toast-index,0));transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s,height .2s;position:absolute;left:0;right:0;overflow:visible}[data-position*=top] .toast{transform-origin:top;top:0;bottom:auto}[data-position*=bottom] .toast{--toast-calc-offset-y:calc((var(--toast-offset-y,0px) * -1) + (var(--toast-index,0) * var(--toast-gap) * -1) + var(--toast-swipe-y,0px));transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - var(--toast-index) * var(--toast-peek) - var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));transform-origin:bottom;top:auto;bottom:0}.toast:after{content:"";height:calc(var(--toast-gap) + 1px);width:100%;position:absolute;left:0}[data-position*=top] .toast:after{top:100%}[data-position*=bottom] .toast:after{bottom:100%}.toast-action{flex-shrink:0}.toast-close{background:var(--background);border:1px solid var(--color-border-400);color:var(--color-text-500);height:var(--size-500);right:calc(var(--size-200) * -1);top:calc(var(--size-200) * -1);width:var(--size-500);z-index:1;border-radius:100%;justify-content:center;align-items:center;display:flex;position:absolute}.toast-content{align-items:center;gap:var(--size-300);min-height:0;opacity:max(0, 1 - var(--toast-index,0));padding:var(--size-400);justify-content:space-between;transition:opacity .3s;display:flex;overflow:clip visible}.toast-copy{justify-content:center;align-items:center;display:inline-flex}.toast-description{color:var(--color-text-300);overflow-wrap:anywhere}.toast-description--clamp{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toast-details{margin-top:var(--size-200);max-height:160px;overflow-y:auto}.toast-details-toggle{cursor:pointer;align-items:center;gap:var(--size-200);display:flex}.toast-icon{color:var(--toast-color);flex-shrink:0;width:18px;height:18px}.toast-title{font-weight:var(--font-weight-400);overflow-wrap:anywhere}.toast--error{--toast-color:var(--color-red-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--warning{--toast-color:var(--color-yellow-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--success{--toast-color:var(--color-green-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--info{--toast-color:var(--color-blue-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading{--toast-color:var(--color-grey-500);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading .toast-icon{animation:1s linear infinite toast-spin}.toast--message{--toast-color:var(--color-text-300);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toaster.--active .toast{height:auto;transform:translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y))}.toaster.--active .toast-content{opacity:1}.toaster .toast.toast--starting{opacity:0}.toaster[data-position*=top] .toast.toast--starting{transform:translateY(-120%)}.toaster[data-position*=bottom] .toast.toast--starting{transform:translateY(120%)}.toaster .toast.toast--ending{opacity:0}.toaster[data-position*=top] .toast.toast--ending{transform:translateY(calc(-100% - var(--toast-inset)))}.toaster[data-position*=bottom] .toast.toast--ending{transform:translateY(calc(100% + var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)))}.toast--swiping{transition:none}@keyframes toast-spin{to{transform:rotate(360deg)}}}
+@layer components {.toaster{--toast-gap:var(--size-300);--toast-inset:var(--size-500);--toast-peek:var(--size-300)}.toast{--toast-calc-height:max(var(--toast-frontmost-height,var(--toast-height,0px)), var(--toast-height,0px));--toast-calc-offset-y:calc(var(--toast-offset-y,0px) + (var(--toast-index,0) * var(--toast-gap)) + var(--toast-swipe-y,0px));--toast-color:var(--color-text-300);--toast-countdown-length:50.27;--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:max(0, 1 - (var(--toast-index,0) * .06));--toast-shrink:calc(1 - var(--toast-scale));--toast-swipe-x:0px;--toast-swipe-y:0px}.toaster{width:min(360px, 100% - var(--toast-inset) * 2);z-index:9999;position:fixed;inset:auto}.toaster[data-position^=top]{top:var(--toast-inset)}.toaster[data-position^=bottom]{bottom:var(--toast-inset)}.toaster[data-position$=left]{left:var(--toast-inset)}.toaster[data-position$=right]{right:var(--toast-inset)}.toaster[data-position$=center]{left:50%;translate:-50%}.toast{background:var(--background);border:1px solid var(--color-border-400);border-radius:var(--border-radius-500);box-shadow:var(--box-shadow-300);color:var(--color-text-400);scale:var(--toast-scale);translate:var(--toast-swipe-x) calc(var(--toast-swipe-y) + var(--toast-index) * var(--toast-peek) + var(--toast-shrink) * var(--toast-calc-height));-webkit-user-select:none;user-select:none;width:100%;z-index:calc(9999 - var(--toast-index,0));transition:translate .4s cubic-bezier(.22,1,.36,1),scale .4s cubic-bezier(.22,1,.36,1),opacity .3s,height .2s;position:absolute;inset-inline:0;overflow:visible}[data-position*=top] .toast{transform-origin:top;top:0;bottom:auto}[data-position*=bottom] .toast{--toast-calc-offset-y:calc((var(--toast-offset-y,0px) * -1) + (var(--toast-index,0) * var(--toast-gap) * -1) + var(--toast-swipe-y,0px));transform-origin:bottom;translate:var(--toast-swipe-x) calc(var(--toast-swipe-y) - var(--toast-index) * var(--toast-peek) - var(--toast-shrink) * var(--toast-calc-height));top:auto;bottom:0}.toast:after{content:"";height:calc(var(--toast-gap) + 1px);width:100%;position:absolute;left:0}[data-position*=top] .toast:after{top:100%}[data-position*=bottom] .toast:after{bottom:100%}.toast-action{flex-shrink:0}.toast-close{background:var(--background);border:1px solid var(--color-border-400);color:var(--color-text-500);height:var(--size-500);inset-inline-end:calc(var(--size-200) * -1);top:calc(var(--size-200) * -1);width:var(--size-500);z-index:1;border-radius:100%;justify-content:center;align-items:center;display:flex;position:absolute}.toast-content{align-items:center;gap:var(--size-300);min-height:0;opacity:max(0, 1 - var(--toast-index,0));padding:var(--size-400);justify-content:space-between;transition:opacity .3s;display:flex;overflow:clip visible}.toast-copy{justify-content:center;align-items:center;display:inline-flex}.toast-countdown{flex-shrink:0;width:20px;height:20px;rotate:-90deg}.toast-countdown circle{fill:none;stroke:currentColor;stroke-width:2px}.toast-countdown-ring{stroke-dasharray:var(--toast-countdown-length);stroke-linecap:round;animation:linear forwards toast-countdown}.toast-countdown-track{opacity:.2}.toast-description{color:var(--color-text-300);overflow-wrap:anywhere}.toast-description--clamp{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toast-details{max-height:160px;margin-block-start:var(--size-200);overflow-y:auto}.toast-details-toggle{cursor:pointer;align-items:center;gap:var(--size-200);display:flex}.toast-icon{color:var(--toast-color);flex-shrink:0;width:18px;height:18px}.toast-title{font-weight:var(--font-weight-400);overflow-wrap:anywhere}.toast--error{--toast-color:var(--color-red-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--warning{--toast-color:var(--color-yellow-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--success{--toast-color:var(--color-green-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--info{--toast-color:var(--color-blue-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading{--toast-color:var(--color-grey-500);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading .toast-icon{animation:1s linear infinite toast-spin}.toast--message{--toast-color:var(--color-text-300);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toaster.--active .toast{height:auto;scale:1;translate:var(--toast-swipe-x) var(--toast-calc-offset-y)}.toaster.--active .toast-content{opacity:1}.toaster.--active .toast-countdown-ring{animation-play-state:paused}.toaster .toast.toast--starting{opacity:0;scale:1}.toaster[data-position*=top] .toast.toast--starting{translate:0 -120%}.toaster[data-position*=bottom] .toast.toast--starting{translate:0 120%}.toaster .toast.toast--ending{opacity:0;scale:1}.toaster[data-position*=top] .toast.toast--ending{translate:0 calc(-100% - var(--toast-inset))}.toaster[data-position*=bottom] .toast.toast--ending{translate:0 calc(100% + var(--toast-inset))}.toaster .toast.toast--ending[data-swipe-direction=left]{translate:calc(var(--toast-swipe-x) - 100% - var(--toast-inset)) var(--toast-calc-offset-y)}.toaster .toast.toast--ending[data-swipe-direction=right]{translate:calc(var(--toast-swipe-x) + 100% + var(--toast-inset)) var(--toast-calc-offset-y)}.toaster .toast.toast--ending[data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-y) - 100% - var(--toast-inset))}.toaster .toast.toast--ending[data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-y) + 100% + var(--toast-inset))}.toast--swiping{transition:none}@media (prefers-reduced-motion:reduce){.toast,.toast-content{transition:none}}@keyframes toast-countdown{to{stroke-dashoffset:var(--toast-countdown-length)}}@keyframes toast-spin{to{rotate:360deg}}}
 /*$vite$:1*/

package/build/components/tooltip/context.d.ts

@@ -0,0 +1,22 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import { type Option } from './options.js';
+declare const CONTEXT_OPTION: unique symbol;
+declare const CONTEXT_TOOLTIP_CONTENT: unique symbol;
+type A = Attributes & {
+    [CONTEXT_OPTION]?: Attributes;
+    [CONTEXT_TOOLTIP_CONTENT]?: Attributes;
+    oncontextmenu?: never;
+    ondocumentclick?: never;
+    ondocumentcontextmenu?: never;
+    ondocumentkeydown?: never;
+    options: Option[];
+    state?: {
+        active: boolean;
+    };
+};
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly option: typeof CONTEXT_OPTION;
+    readonly tooltipContent: typeof CONTEXT_TOOLTIP_CONTENT;
+}>;
+export default _default;

package/build/components/tooltip/context.js

@@ -0,0 +1,66 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import render from './options.js';
+const template_03iv7xx2 = template_u1.template(`<div class='tooltip tooltip--context'><!--$--><div class='tooltip-content tooltip-content--context'>`);
+class ReactiveObject_03iv7xx0 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);
+    }
+}
+const CONTEXT_OPTION = Symbol.for('@esportsplus/ui/tooltip.context.option');
+const CONTEXT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.context.tooltip-content');
+export default component(({ options, state = new ReactiveObject_03iv7xx0(), ...attributes }, content) => {
+    let menu;
+    return (() => {
+        let root_03iv7xx1 = template_03iv7xx2(), element_03iv7xx3 = root_03iv7xx1.firstChild, element_03iv7xx4 = element_03iv7xx3.firstChild, element_03iv7xx5 = element_03iv7xx3.firstElementChild;
+        template_u1.setProperties(element_03iv7xx3, attributes);
+        template_u1.setList(element_03iv7xx3, 'class', () => state.active && '--active');
+        template_u1.delegate(element_03iv7xx3, 'contextmenu', function (event) {
+            if (!menu) {
+                return;
+            }
+            event.preventDefault();
+            let bounds = this.getBoundingClientRect(), x = event.clientX, xflip = x + menu.offsetWidth > window.innerWidth, y = event.clientY, yflip = y + menu.offsetHeight > window.innerHeight;
+            if (xflip) {
+                x -= menu.offsetWidth;
+            }
+            if (yflip) {
+                y -= menu.offsetHeight;
+            }
+            menu.style.left = `${x - bounds.left - this.clientLeft + this.scrollLeft}px`;
+            menu.style.top = `${y - bounds.top - this.clientTop + this.scrollTop}px`;
+            menu.style.transformOrigin = `${xflip ? 'right' : 'left'} ${yflip ? 'bottom' : 'top'}`;
+            state.active = true;
+        });
+        template_u1.ondocument(element_03iv7xx3, 'click', () => {
+            state.active = false;
+        });
+        template_u1.ondocument(element_03iv7xx3, 'contextmenu', function (event) {
+            if (!state.active || this.contains(event.target)) {
+                return;
+            }
+            state.active = false;
+        });
+        template_u1.ondocument(element_03iv7xx3, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                state.active = false;
+            }
+        });
+        template_u1.slot(element_03iv7xx4, content);
+        template_u1.setProperties(element_03iv7xx5, attributes[CONTEXT_TOOLTIP_CONTENT]);
+        template_u1.setProperty(element_03iv7xx5, 'inert', () => !state.active);
+        template_u1.onrender(element_03iv7xx5, (element) => {
+            menu = element;
+        });
+        template_u1.slot(element_03iv7xx5, render(options, attributes[CONTEXT_OPTION]), 1);
+        return root_03iv7xx1;
+    })();
+}, { option: CONTEXT_OPTION, tooltipContent: CONTEXT_TOOLTIP_CONTENT });

package/build/components/tooltip/group.d.ts

@@ -0,0 +1,29 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+declare const GROUP_ITEM: unique symbol;
+declare const GROUP_TOOLTIP_CONTENT: unique symbol;
+type A = Attributes & {
+    [GROUP_ITEM]?: Attributes;
+    [GROUP_TOOLTIP_CONTENT]?: Attributes & {
+        direction?: 'e' | 'n' | 's' | 'w';
+    };
+    items: (Attributes & {
+        content: Renderable<unknown>;
+        tooltip: Renderable<unknown>;
+    })[];
+    onfocusin?: never;
+    onfocusout?: never;
+    onkeydown?: never;
+    onpointerleave?: never;
+    onpointerover?: never;
+    state?: {
+        active: boolean;
+        gliding: boolean;
+        index: number;
+    };
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly item: typeof GROUP_ITEM;
+    readonly tooltipContent: typeof GROUP_TOOLTIP_CONTENT;
+}>;
+export default _default;

package/build/components/tooltip/group.js

@@ -0,0 +1,128 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_14qix912 = template_u1.template(`<div class='tooltip-group'><!--$--><div class='tooltip-group-content ' role='tooltip'><div class='tooltip-group-box'>`);
+const template_14qix918 = template_u1.template(`<div class='tooltip-group-item'>`);
+const template_14qix91b = template_u1.template(`<div class='tooltip-group-layer'>`);
+class ReactiveObject_14qix910 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #gliding = this[reactivity_u0.SIGNAL](false);
+    #index = this[reactivity_u0.SIGNAL](-1);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get gliding() {
+        return reactivity_u0.read(this.#gliding);
+    }
+    set gliding(_v1) {
+        reactivity_u0.write(this.#gliding, _v1);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v2) {
+        reactivity_u0.write(this.#index, _v2);
+    }
+}
+const GROUP_ITEM = Symbol.for('@esportsplus/ui/tooltip.group.item');
+const GROUP_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.group.tooltip-content');
+function item(container, target) {
+    let element = target?.closest?.('.tooltip-group-item');
+    if (!element || element.closest('.tooltip-group') !== container) {
+        return;
+    }
+    return element;
+}
+function measure(container, element, index) {
+    let content = container.querySelector('.tooltip-group-content'), layer = content?.querySelectorAll('.tooltip-group-layer')[index];
+    if (!content || !layer) {
+        return;
+    }
+    let style = content.style;
+    style.setProperty('--group-height', `${layer.offsetHeight}px`);
+    style.setProperty('--group-width', `${layer.offsetWidth}px`);
+    style.setProperty('--group-x', `${element.offsetLeft + element.offsetWidth / 2}px`);
+    style.setProperty('--group-y', `${element.offsetTop + element.offsetHeight / 2}px`);
+    return true;
+}
+export default component(({ items, state = new ReactiveObject_14qix910(), ...attributes }) => {
+    let { direction = 'n', ...tooltipContent } = attributes[GROUP_TOOLTIP_CONTENT] ?? {}, frame = 0;
+    let close = () => {
+        cancelAnimationFrame(frame);
+        state.active = false;
+        state.gliding = false;
+    };
+    let open = (container, element) => {
+        let index = Number(element.dataset.index);
+        if (state.active && state.index === index) {
+            return;
+        }
+        if (!measure(container, element, index)) {
+            return;
+        }
+        state.index = index;
+        if (state.active) {
+            return;
+        }
+        state.active = true;
+        frame = requestAnimationFrame(() => {
+            frame = requestAnimationFrame(() => {
+                state.gliding = true;
+            });
+        });
+    };
+    return (() => {
+        let root_14qix911 = template_14qix912(), element_14qix913 = root_14qix911.firstChild, element_14qix914 = element_14qix913.firstChild, element_14qix915 = element_14qix913.firstElementChild, element_14qix916 = element_14qix915.firstElementChild;
+        template_u1.setProperties(element_14qix913, attributes);
+        template_u1.setList(element_14qix913, 'class', () => `${state.active ? '--active' : ''} ${state.gliding ? '--gliding' : ''}`);
+        template_u1.ondisconnect(element_14qix913, () => {
+            cancelAnimationFrame(frame);
+        });
+        template_u1.on(element_14qix913, 'focusin', (e) => {
+            let container = e.currentTarget, element = item(container, e.target);
+            if (element && e.target.matches(':focus-visible')) {
+                open(container, element);
+            }
+        });
+        template_u1.on(element_14qix913, 'focusout', (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                close();
+            }
+        });
+        template_u1.delegate(element_14qix913, 'keydown', (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        });
+        template_u1.on(element_14qix913, 'pointerleave', close);
+        template_u1.delegate(element_14qix913, 'pointerover', (e) => {
+            let container = e.currentTarget, element = item(container, e.target);
+            if (element) {
+                open(container, element);
+            }
+        });
+        template_u1.slot(element_14qix914, items.map(({ content, tooltip, ...o }, i) => {
+            let root_14qix917 = template_14qix918(), element_14qix919 = root_14qix917.firstChild;
+            template_u1.setProperty(element_14qix919, 'data-index', i);
+            template_u1.setProperties(element_14qix919, o);
+            template_u1.setProperties(element_14qix919, attributes[GROUP_ITEM]);
+            template_u1.slot(element_14qix919, content, 1);
+            return root_14qix917;
+        }));
+        template_u1.setList(element_14qix915, 'class', `tooltip-group-content--${direction}`);
+        template_u1.setProperties(element_14qix915, tooltipContent);
+        template_u1.slot(element_14qix916, items.map(({ tooltip }, i) => {
+            let root_14qix91a = template_14qix91b(), element_14qix91c = root_14qix91a.firstChild;
+            template_u1.setList(element_14qix91c, 'class', () => state.index === i ? '--active' : state.index > i ? '--before' : '--after');
+            template_u1.slot(element_14qix91c, tooltip, 1);
+            return root_14qix91a;
+        }), 1);
+        return root_14qix911;
+    })();
+}, { item: GROUP_ITEM, tooltipContent: GROUP_TOOLTIP_CONTENT });