@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/tooltip/onhover.js

@@ -1,8 +1,8 @@
-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';
-const template_u32 = template_u0.template(`<div class='tooltip' >`);
+import { content, morph, morphing } from './utilities.js';
+const template_0bwku672 = template_u1.template(`<div class='tooltip'>`);
 class ReactiveObject_0bwku670 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -15,20 +15,91 @@ class ReactiveObject_0bwku670 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#active, _v0);
     }
 }
-const OMIT = ['state'];
-export default component((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_0bwku670();
+function cross(o, a, b) {
+    return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+}
+function hull(points) {
+    let lower = [], upper = [];
+    points.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    for (let i = 0, n = points.length; i < n; i++) {
+        while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], points[i]) <= 0) {
+            lower.pop();
+        }
+        lower.push(points[i]);
+    }
+    for (let i = points.length - 1; i >= 0; i--) {
+        while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], points[i]) <= 0) {
+            upper.pop();
+        }
+        upper.push(points[i]);
+    }
+    lower.pop();
+    upper.pop();
+    return lower.concat(upper);
+}
+function safe(element, x, y) {
+    let rect = element.getBoundingClientRect();
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+        return;
+    }
+    let tooltip = content(element);
+    if (!tooltip) {
+        return;
+    }
+    let box = tooltip.getBoundingClientRect(), left = Math.min(x, box.left), points = hull([[x, y], [box.left, box.top], [box.right, box.top], [box.right, box.bottom], [box.left, box.bottom]]), polygon = '', style = element.style, top = Math.min(y, box.top);
+    for (let i = 0, n = points.length; i < n; i++) {
+        polygon += `${i ? ', ' : ''}${points[i][0] - left}px ${points[i][1] - top}px`;
+    }
+    style.setProperty('--safe-area', `polygon(${polygon})`);
+    style.setProperty('--safe-height', `${Math.max(y, box.bottom) - top}px`);
+    style.setProperty('--safe-left', `${left - rect.left - element.clientLeft}px`);
+    style.setProperty('--safe-top', `${top - rect.top - element.clientTop}px`);
+    style.setProperty('--safe-width', `${Math.max(x, box.right) - left}px`);
+}
+export default component(({ state = new ReactiveObject_0bwku670(), ...attributes }, content) => {
+    let cancel, settled = morphing(false), x = 0, y = 0;
     return (() => {
-        let root_u31 = template_u32(), element_u33 = root_u31.firstChild;
-        template_u0.setProperties(element_u33, omit(attributes, OMIT));
-        template_u0.setList(element_u33, 'class', () => state.active && '--active');
-        template_u0.delegate(element_u33, 'mouseover', () => {
-            state.active = true;
+        let root_0bwku671 = template_0bwku672(), element_0bwku673 = root_0bwku671.firstChild;
+        template_u1.setProperties(element_0bwku673, attributes);
+        template_u1.setList(element_0bwku673, 'class', () => state.active && '--active');
+        template_u1.delegate(element_0bwku673, 'animationcancel', settled);
+        template_u1.delegate(element_0bwku673, 'animationend', settled);
+        template_u1.delegate(element_0bwku673, 'animationstart', morphing(true));
+        template_u1.delegate(element_0bwku673, 'mouseover', (e) => {
+            let element = e.currentTarget;
+            if (state.active || cancel || element.contains(e.relatedTarget)) {
+                return;
+            }
+            cancel = morph(element, () => {
+                cancel = undefined;
+                state.active = true;
+            });
         });
-        template_u0.delegate(element_u33, 'mouseout', () => {
+        template_u1.delegate(element_0bwku673, 'mouseout', (e) => {
+            if (e.currentTarget.contains(e.relatedTarget)) {
+                return;
+            }
+            cancel?.();
+            cancel = undefined;
             state.active = false;
         });
-        template_u0.slot(element_u33, content, 1);
-        return root_u31;
+        template_u1.delegate(element_0bwku673, 'pointermove', (e) => {
+            let element = e.currentTarget;
+            x = e.clientX;
+            y = e.clientY;
+            if (state.active) {
+                safe(element, x, y);
+            }
+        });
+        template_u1.delegate(element_0bwku673, 'transitioncancel', settled);
+        template_u1.delegate(element_0bwku673, 'transitionend', (e) => {
+            settled(e);
+            if (state.active) {
+                safe(e.currentTarget, x, y);
+            }
+        });
+        template_u1.delegate(element_0bwku673, 'transitionrun', morphing(true));
+        template_u1.slot(element_0bwku673, content, 1);
+        return root_0bwku671;
     })();
 });

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

@@ -0,0 +1,7 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type Option = Attributes & {
+    content: Renderable<unknown>;
+};
+export default _default;
+declare function _default(options: Option[], attributes?: Attributes): (DocumentFragment | Text)[];
+export type { Option };

package/build/components/tooltip/options.js

@@ -0,0 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
+const template_0bwbcae1 = template_u1.template(`<a class='link --width-full' target='_blank'>`);
+const template_0bwbcae4 = template_u1.template(`<div class='link --width-full'>`);
+export default (options, attributes) => options.map(({ content, ...o }) => {
+    if (o.href) {
+        return (() => {
+            let root_0bwbcae0 = template_0bwbcae1(), element_0bwbcae2 = root_0bwbcae0.firstChild;
+            template_u1.setProperties(element_0bwbcae2, o);
+            template_u1.setProperties(element_0bwbcae2, attributes);
+            template_u1.slot(element_0bwbcae2, content, 1);
+            return root_0bwbcae0;
+        })();
+    }
+    return (() => {
+        let root_0bwbcae3 = template_0bwbcae4(), element_0bwbcae5 = root_0bwbcae3.firstChild;
+        template_u1.setProperties(element_0bwbcae5, o);
+        template_u1.setProperties(element_0bwbcae5, attributes);
+        template_u1.slot(element_0bwbcae5, content, 1);
+        return root_0bwbcae3;
+    })();
+});

package/build/components/tooltip/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700) * 2));--min-width:auto;--spacer:var(--size-300);--width:auto}.tooltip-arrow{--rotate:0deg}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.tooltip{cursor:pointer;z-index:0;position:relative}.tooltip.--active.tooltip--box:before{content:"";height:calc(100% + var(--spacer) * 3);width:calc(100% + var(--spacer) * 3);z-index:-1;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(var(--rotate)) scaleX(-1)}.tooltip.--active,.tooltip:not(.--active):hover{z-index:9}.tooltip-arrow{transform:rotate(var(--rotate));margin:0 -1px}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);z-index:9;overflow:hidden}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{transform-origin:50%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.tooltip.--active>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active>.tooltip-message--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c{transform:translate(50%,50%)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{transform:translateX(calc(var(--spacer) * 2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));transform-origin:0;position:absolute;transform:translateY(50%)}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{transform:translate(calc(var(--spacer) * 2), 50%)}.tooltip-content--en,.tooltip-message--en{transform-origin:0 0;top:0}.tooltip-content--es,.tooltip-message--es{transform-origin:0 100%;bottom:0}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{transform:translateY(calc(var(--spacer) * -2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));transform-origin:bottom;position:absolute;right:50%;transform:translate(50%)}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{transform:translate(50%, calc(var(--spacer) * -2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{transform-origin:100% 100%;right:0}.tooltip-content--nw,.tooltip-message--nw{transform-origin:0 100%;left:0}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{top:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{transform:translateY(calc(var(--spacer) * 2))}.tooltip-content--s,.tooltip-message--s{right:50%;top:calc(100% - var(--spacer));transform-origin:top;position:absolute;transform:translate(50%)}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{transform:translate(50%, calc(var(--spacer) * 2))}.tooltip-content--se,.tooltip-message--se{transform-origin:100% 0;right:0}.tooltip-content--sw,.tooltip-message--sw{transform-origin:0 0;left:0}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{right:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{transform:translateX(calc(var(--spacer) * -2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;right:calc(100% - var(--spacer));transform-origin:100%;position:absolute;transform:translateY(50%)}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{transform:translate(calc(var(--spacer) * -2), 50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{transform-origin:100% 0;top:0}.tooltip-content--ws,.tooltip-message--ws{transform-origin:100% 100%;bottom:0}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}}
+@layer components {.tooltip-group{z-index:0;display:inline-flex;position:relative}.tooltip-group.--active{z-index:9}.tooltip-group.--active>.tooltip-group-content>.tooltip-group-box{filter:blur();opacity:1;transition:filter var(--group-open-duration) var(--group-timing-function) var(--group-delay), opacity var(--group-open-duration) var(--group-timing-function) var(--group-delay), scale var(--group-open-duration) var(--group-timing-function) var(--group-delay), translate var(--group-open-duration) var(--group-timing-function) var(--group-delay);translate:0;scale:1}.tooltip-group.--gliding>.tooltip-group-content{transition:height var(--group-glide-duration) var(--group-glide-timing-function), translate var(--group-glide-duration) var(--group-glide-timing-function), width var(--group-glide-duration) var(--group-glide-timing-function)}.tooltip-group.--gliding .tooltip-group-layer{transition:filter var(--group-swap-duration) var(--group-timing-function), opacity var(--group-swap-duration) var(--group-timing-function), translate var(--group-swap-duration) var(--group-timing-function)}.tooltip-group-box{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);filter:blur(var(--group-blur));font-size:var(--font-size);font-weight:var(--font-weight);opacity:0;scale:var(--group-scale);transition:filter var(--group-close-duration) var(--group-timing-function), opacity var(--group-close-duration) var(--group-timing-function), scale var(--group-close-duration) var(--group-timing-function), translate var(--group-close-duration) var(--group-timing-function);position:absolute;inset:0;overflow:hidden}.tooltip-group-content{height:var(--group-height);pointer-events:none;width:var(--group-width);z-index:9;transition:none;position:absolute}.tooltip-group-content--e,.tooltip-group-content--w{--group-axis-x:0;--group-axis-y:1;translate:0 calc(var(--group-y) - 50%);top:0}.tooltip-group-content--n,.tooltip-group-content--s{--group-axis-x:1;--group-axis-y:0;translate:calc(var(--group-x) - 50%) 0;left:0}.tooltip-group-content--e{left:calc(100% + var(--spacer))}.tooltip-group-content--e>.tooltip-group-box{transform-origin:0;translate:calc(var(--group-rise) * -1) 0}.tooltip-group-content--n{bottom:calc(100% + var(--spacer))}.tooltip-group-content--n>.tooltip-group-box{transform-origin:bottom;translate:0 var(--group-rise)}.tooltip-group-content--s{top:calc(100% + var(--spacer))}.tooltip-group-content--s>.tooltip-group-box{transform-origin:top;translate:0 calc(var(--group-rise) * -1)}.tooltip-group-content--w{right:calc(100% + var(--spacer))}.tooltip-group-content--w>.tooltip-group-box{transform-origin:100%;translate:var(--group-rise) 0}.tooltip-group-layer{--group-shift:var(--group-swap-shift);filter:blur(var(--group-swap-blur));max-width:var(--max-width);opacity:0;padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);translate:calc(-50% + var(--group-shift) * var(--group-axis-x)) calc(-50% + var(--group-shift) * var(--group-axis-y));white-space:nowrap;width:max-content;transition:none;position:absolute;top:50%;left:50%}.tooltip-group-layer.--active{--group-shift:0px;filter:blur();opacity:1}.tooltip-group-layer.--before{--group-shift:calc(var(--group-swap-shift) * -1)}@media (prefers-reduced-motion:reduce){.tooltip-group>.tooltip-group-content{--group-blur:0px;--group-glide-duration:0s;--group-rise:0px;--group-scale:1;--group-swap-blur:0px;--group-swap-shift:0px}}.tooltip{--safe-color:transparent}.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700) * 2));--min-width:auto;--offset:calc(var(--spacer) * 2);--scale:1;--spacer:var(--size-300);--width:auto}.tooltip-content--corner,.tooltip-message--corner{--corner-bleed:24px;--corner-clip-timing-function:cubic-bezier(.16, 1, .3, 1);--corner-close-duration:.26s;--corner-open-clip-duration:.32s;--corner-open-duration:.36s;--offset:0px;--scale:.96;--transition-timing-function:cubic-bezier(.2, .8, .2, 1)}.tooltip-content--grow,.tooltip-message--grow{--offset:0px;--scale:1 0;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.4, .64, 1)}.tooltip-content--morph,.tooltip-message--morph{--morph-blur:4px;--morph-close-duration:.16s;--morph-focus-timing-function:cubic-bezier(.25, .1, .25, 1);--morph-land:2px;--morph-open-duration:.12s;--morph-timing-function:cubic-bezier(.2, 0, 0, 1);--offset:0px;--scale:1}.tooltip-content--scale,.tooltip-message--scale{--offset:var(--spacer);--scale:.88}.tooltip-content--scale-spring,.tooltip-message--scale-spring{--offset:var(--spacer);--scale:.88;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-content--spring,.tooltip-message--spring{--offset:calc(var(--spacer) * 3);--scale:.96;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-content--stagger,.tooltip-message--stagger{--offset:4px;--scale:.98;--stagger-delay:25ms;--stagger-offset:6px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.16, 1, .3, 1)}.tooltip-content--zoom,.tooltip-message--zoom{--offset:8px;--scale:.95;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.16, 1, .3, 1)}.tooltip-arrow{--rotate:0deg}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.tooltip-group-content{--background:var(--color-black-400);--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--group-blur:7px;--group-close-duration:.128s;--group-delay:0s;--group-glide-duration:.4s;--group-glide-timing-function:cubic-bezier(.22, 1.12, .36, 1);--group-open-duration:.16s;--group-rise:4px;--group-scale:.94;--group-swap-blur:3px;--group-swap-duration:.14s;--group-swap-shift:10px;--group-timing-function:cubic-bezier(.23, 1, .32, 1);--max-width:calc(90vw - (var(--size-700) * 2));--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300);--spacer:var(--size-300)}.tooltip{cursor:pointer;z-index:0;position:relative}.tooltip.--active:before{background:var(--safe-color);clip-path:var(--safe-area);content:"";height:var(--safe-height);left:var(--safe-left);top:var(--safe-top);width:var(--safe-width);z-index:-3;position:absolute}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{scale:-1 1}.tooltip.--active,.tooltip:not(.--active):hover{z-index:9}.tooltip--context{cursor:inherit}.tooltip.--morphing{filter:url(#tooltip-morph-goo)}.tooltip:has(>.tooltip-content--morph,>.tooltip-message--morph,>:not(.tooltip)>.tooltip-content--morph,>:not(.tooltip)>.tooltip-message--morph):after{background:inherit;border-radius:inherit;content:"";pointer-events:none;z-index:-1;display:block;position:absolute;inset:0}.tooltip-arrow{rotate:var(--rotate);margin-inline:-1px}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;scale:var(--scale);transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width);z-index:9;overflow:hidden}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1;scale:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content--context,.tooltip-message--context{position:absolute}.tooltip-content--c,.tooltip-message--c{transform-origin:50%;position:absolute;bottom:50%;right:50%;translate:50% 50%}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{translate:var(--offset)}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% + var(--spacer) - var(--offset));transform-origin:0;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{translate:var(--offset) 50%}.tooltip-content--en,.tooltip-message--en{transform-origin:0 0;top:0}.tooltip-content--es,.tooltip-message--es{transform-origin:0 100%;bottom:0}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{translate:0 calc(var(--offset) * -1)}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% + var(--spacer) - var(--offset));transform-origin:bottom;position:absolute;right:50%;translate:50%}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{translate:50% calc(var(--offset) * -1)}.tooltip-content--ne,.tooltip-message--ne{transform-origin:100% 100%;right:0}.tooltip-content--nw,.tooltip-message--nw{transform-origin:0 100%;left:0}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{top:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{translate:0 var(--offset)}.tooltip-content--s,.tooltip-message--s{right:50%;top:calc(100% + var(--spacer) - var(--offset));transform-origin:top;position:absolute;translate:50%}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{translate:50% var(--offset)}.tooltip-content--se,.tooltip-message--se{transform-origin:100% 0;right:0}.tooltip-content--sw,.tooltip-message--sw{transform-origin:0 0;left:0}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{right:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{translate:calc(var(--offset) * -1)}.tooltip-content--w,.tooltip-message--w{bottom:50%;right:calc(100% + var(--spacer) - var(--offset));transform-origin:100%;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{translate:calc(var(--offset) * -1) 50%}.tooltip-content--wn,.tooltip-message--wn{transform-origin:100% 0;top:0}.tooltip-content--ws,.tooltip-message--ws{transform-origin:100% 100%;bottom:0}.tooltip-content--corner,.tooltip-message--corner{--corner-clip-duration:var(--corner-close-duration);--corner-duration:var(--corner-close-duration);clip-path:inset(var(--corner-inset) round var(--border-radius));transition:clip-path var(--corner-clip-duration) var(--corner-clip-timing-function), opacity var(--corner-duration) var(--transition-timing-function), scale var(--corner-duration) var(--transition-timing-function), translate var(--corner-duration) var(--transition-timing-function)}.tooltip.--active>.tooltip-content--corner,.tooltip.--active :not(.tooltip)>.tooltip-content--corner,.tooltip.--active>.tooltip-message--corner,.tooltip.--active :not(.tooltip)>.tooltip-message--corner{--corner-clip-duration:var(--corner-open-clip-duration);--corner-duration:var(--corner-open-duration);clip-path:inset(calc(var(--corner-bleed) * -1) round calc(var(--border-radius) + var(--corner-bleed)))}.tooltip-content--stagger>*,.tooltip-message--stagger>*{opacity:0;transition:opacity var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);translate:0 calc(var(--stagger-offset) * -1)}.tooltip.--active>.tooltip-content--stagger>*,.tooltip.--active :not(.tooltip)>.tooltip-content--stagger>*,.tooltip.--active>.tooltip-message--stagger>*,.tooltip.--active :not(.tooltip)>.tooltip-message--stagger>*{opacity:1;transition-delay:calc(var(--stagger-index,0) * var(--stagger-delay));translate:0}.tooltip-content--stagger>:first-child,.tooltip-message--stagger>:first-child{--stagger-index:0}.tooltip-content--stagger>:nth-child(2),.tooltip-message--stagger>:nth-child(2){--stagger-index:1}.tooltip-content--stagger>:nth-child(3),.tooltip-message--stagger>:nth-child(3){--stagger-index:2}.tooltip-content--stagger>:nth-child(4),.tooltip-message--stagger>:nth-child(4){--stagger-index:3}.tooltip-content--stagger>:nth-child(5),.tooltip-message--stagger>:nth-child(5){--stagger-index:4}.tooltip-content--stagger>:nth-child(6),.tooltip-message--stagger>:nth-child(6){--stagger-index:5}.tooltip-content--stagger>:nth-child(7),.tooltip-message--stagger>:nth-child(7){--stagger-index:6}.tooltip-content--stagger>:nth-child(8),.tooltip-message--stagger>:nth-child(8){--stagger-index:7}.tooltip-content--stagger>:nth-child(9),.tooltip-message--stagger>:nth-child(9){--stagger-index:8}.tooltip-content--stagger>:nth-child(10),.tooltip-message--stagger>:nth-child(10){--stagger-index:9}.tooltip-content--stagger>:nth-child(11),.tooltip-message--stagger>:nth-child(11){--stagger-index:10}.tooltip-content--stagger>:nth-child(12),.tooltip-message--stagger>:nth-child(12){--stagger-index:11}@media (prefers-reduced-motion:reduce){.tooltip-content--corner,.tooltip-content--grow,.tooltip-content--stagger,.tooltip-content--stagger>*,.tooltip-content--zoom,.tooltip-message--corner,.tooltip-message--grow,.tooltip-message--stagger,.tooltip-message--stagger>*,.tooltip-message--zoom{transition-duration:0s}}.tooltip-content--morph,.tooltip-message--morph{animation:tooltip-morph-close var(--morph-close-duration) linear;box-shadow:none;clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));filter:blur(var(--morph-blur));opacity:1;transition:filter var(--morph-close-duration) cubic-bezier(.16, 1, .3, 1), visibility 0s linear var(--morph-close-duration);visibility:hidden;z-index:-2;background:0 0;overflow:visible}.tooltip-content--morph:before,.tooltip-message--morph:before{background:var(--background);content:"";inset:min(var(--morph-blur) * -3, var(--morph-top) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-right) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-bottom) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-left) - var(--morph-land));z-index:-1;position:absolute}.tooltip.--active>.tooltip-content--morph,.tooltip.--active :not(.tooltip)>.tooltip-content--morph,.tooltip.--active>.tooltip-message--morph,.tooltip.--active :not(.tooltip)>.tooltip-message--morph{clip-path:inset(0 round var(--border-radius));filter:none;transition:clip-path var(--morph-open-duration) var(--morph-timing-function), filter var(--morph-open-duration) var(--morph-focus-timing-function);visibility:visible;animation:none}.tooltip-content--corner.tooltip-content--c{--corner-inset:46%}.tooltip-content--corner.tooltip-content--e{--corner-inset:46% 92% 46% 0}.tooltip-content--corner.tooltip-content--en{--corner-inset:0 92% 92% 0}.tooltip-content--corner.tooltip-content--es{--corner-inset:92% 92% 0 0}.tooltip-content--corner.tooltip-content--n{--corner-inset:92% 46% 0 46%}.tooltip-content--corner.tooltip-content--ne{--corner-inset:92% 0 0 92%}.tooltip-content--corner.tooltip-content--nw{--corner-inset:92% 92% 0 0}.tooltip-content--corner.tooltip-content--s{--corner-inset:0 46% 92% 46%}.tooltip-content--corner.tooltip-content--se{--corner-inset:0 0 92% 92%}.tooltip-content--corner.tooltip-content--sw{--corner-inset:0 92% 92% 0}.tooltip-content--corner.tooltip-content--w{--corner-inset:46% 0 46% 92%}.tooltip-content--corner.tooltip-content--wn{--corner-inset:0 0 92% 92%}.tooltip-content--corner.tooltip-content--ws{--corner-inset:92% 0 0 92%}.tooltip-content--grow:is(.tooltip-content--e,.tooltip-content--en,.tooltip-content--es,.tooltip-content--w,.tooltip-content--wn,.tooltip-content--ws){--scale:0 1}.tooltip-message--corner.tooltip-message--c{--corner-inset:46%}.tooltip-message--corner.tooltip-message--e{--corner-inset:46% 92% 46% 0}.tooltip-message--corner.tooltip-message--en{--corner-inset:0 92% 92% 0}.tooltip-message--corner.tooltip-message--es{--corner-inset:92% 92% 0 0}.tooltip-message--corner.tooltip-message--n{--corner-inset:92% 46% 0 46%}.tooltip-message--corner.tooltip-message--ne{--corner-inset:92% 0 0 92%}.tooltip-message--corner.tooltip-message--nw{--corner-inset:92% 92% 0 0}.tooltip-message--corner.tooltip-message--s{--corner-inset:0 46% 92% 46%}.tooltip-message--corner.tooltip-message--se{--corner-inset:0 0 92% 92%}.tooltip-message--corner.tooltip-message--sw{--corner-inset:0 92% 92% 0}.tooltip-message--corner.tooltip-message--w{--corner-inset:46% 0 46% 92%}.tooltip-message--corner.tooltip-message--wn{--corner-inset:0 0 92% 92%}.tooltip-message--corner.tooltip-message--ws{--corner-inset:92% 0 0 92%}.tooltip-message--grow:is(.tooltip-message--e,.tooltip-message--en,.tooltip-message--es,.tooltip-message--w,.tooltip-message--wn,.tooltip-message--ws){--scale:0 1}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);pointer-events:none;white-space:nowrap}@keyframes tooltip-morph-close{0%{clip-path:inset(0 round var(--border-radius));animation-timing-function:cubic-bezier(.3,0,.2,1)}55%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)))}80%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)));animation-timing-function:cubic-bezier(.4,0,.2,1)}to{clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius))}}}
 /*$vite$:1*/

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

@@ -0,0 +1,4 @@
+declare function content(element: HTMLElement): HTMLElement | undefined;
+declare function morph(element: HTMLElement, open: VoidFunction): (() => void) | undefined;
+declare function morphing(active: boolean): (e: AnimationEvent | TransitionEvent) => void;
+export { content, morph, morphing };

package/build/components/tooltip/utilities.js

@@ -0,0 +1,58 @@
+const GOO = 'tooltip-morph-goo';
+function content(element) {
+    let candidates = element.querySelectorAll('.tooltip-content, .tooltip-message');
+    for (let i = 0, n = candidates.length; i < n; i++) {
+        if (candidates[i].closest('.tooltip') === element) {
+            return candidates[i];
+        }
+    }
+}
+function goo() {
+    if (document.getElementById(GOO)) {
+        return;
+    }
+    document.body.insertAdjacentHTML('beforeend', `<svg aria-hidden='true' height='0' style='position: absolute;' width='0'>
+            <filter color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse' height='4000' id='${GOO}' width='4000' x='-2000' y='-2000'>
+                <feGaussianBlur in='SourceGraphic' result='blur' stdDeviation='8' />
+                <feColorMatrix in='blur' result='goo' type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -12' />
+                <feComposite in='SourceGraphic' in2='goo' operator='over' />
+            </filter>
+        </svg>`);
+}
+function morph(element, open) {
+    let tooltip = content(element);
+    if (!tooltip || !(tooltip.classList.contains('tooltip-content--morph') || tooltip.classList.contains('tooltip-message--morph'))) {
+        open();
+        return;
+    }
+    goo();
+    let box = tooltip.getBoundingClientRect(), rect = element.getBoundingClientRect(), style = tooltip.style;
+    style.transition = 'none';
+    style.setProperty('--morph-bottom', `${box.bottom - rect.bottom}px`);
+    style.setProperty('--morph-left', `${rect.left - box.left}px`);
+    style.setProperty('--morph-radius', getComputedStyle(element).borderTopLeftRadius);
+    style.setProperty('--morph-right', `${box.right - rect.right}px`);
+    style.setProperty('--morph-top', `${rect.top - box.top}px`);
+    tooltip.getBoundingClientRect();
+    let frame = requestAnimationFrame(() => {
+        style.removeProperty('transition');
+        open();
+    });
+    return () => {
+        cancelAnimationFrame(frame);
+        style.removeProperty('transition');
+    };
+}
+function morphing(active) {
+    return (e) => {
+        let element = e.currentTarget, tooltip = e.target;
+        if (tooltip.closest('.tooltip') !== element ||
+            !(tooltip.classList.contains('tooltip-content--morph') || tooltip.classList.contains('tooltip-message--morph'))) {
+            return;
+        }
+        if ('propertyName' in e ? e.propertyName === 'clip-path' : e.animationName === 'tooltip-morph-close') {
+            element.classList.toggle('--morphing', active);
+        }
+    };
+}
+export { content, morph, morphing };

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

@@ -0,0 +1,28 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    expanded?: string[];
+    label: string;
+    nodes: Node[];
+    select?: (id: string) => void;
+    selected?: string;
+    toggle?: (id: string, expanded: boolean) => void;
+};
+type Node = {
+    children?: Node[];
+    id: string;
+    label: string;
+    meta?: Renderable<unknown>;
+};
+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;
+};
+export default _default;
+export type { Node };

package/build/components/tree/index.js

@@ -0,0 +1,182 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1n2ul8n1 = template_u1.template(`<div class='tree-item' role='none'><div class='tree-row ' role='treeitem'><!--$--><span class='tree-label'>`);
+const template_1n2ul8n7 = template_u1.template(`<span class='tree-caret ' aria-hidden='true'><svg viewBox='0 0 10 10'><path d='M3.5 2 6.5 5 3.5 8' />`);
+const template_1n2ul8n9 = template_u1.template(`<span class='tree-caret' aria-hidden='true'>`);
+const template_1n2ul8nb = template_u1.template(`<span class='tree-meta'>`);
+const template_1n2ul8ne = template_u1.template(`<div class='tree-group ' role='group'><div class='tree-group-content'>`);
+const template_1n2ul8ni = template_u1.template(`<div class='tree' role='tree'>`);
+function flatten(nodes, parent, index) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i];
+        index.set(node.id, { node, parent });
+        if (node.children) {
+            flatten(node.children, node, index);
+        }
+    }
+    return index;
+}
+function visible(nodes, expanded, out = []) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i];
+        out.push(node);
+        if (node.children?.length && expanded[node.id]) {
+            visible(node.children, expanded, out);
+        }
+    }
+    return out;
+}
+export default component(function ({ expanded: open = [], label, nodes, select, selected: initial, toggle, ...attributes }) {
+    let index = flatten(nodes, null, new Map()), ids = [...index.keys()], expanded = reactivity_u0.reactive(Object.fromEntries(ids.map((id) => [id, open.includes(id)]))), selected = reactivity_u0.reactive(Object.fromEntries(ids.map((id) => [id, id === initial]))), state = {
+        focused: visible(nodes, expanded).some((node) => node.id === initial) ? initial : (nodes[0]?.id ?? ''),
+        selected: initial ?? ''
+    }, tabbable = reactivity_u0.reactive(Object.fromEntries(ids.map((id) => [id, id === state.focused])));
+    function activate(id) {
+        let entry = index.get(id);
+        if (state.selected !== id) {
+            if (state.selected) {
+                selected[state.selected] = false;
+            }
+            selected[id] = true;
+            state.selected = id;
+            select?.(id);
+        }
+        if (entry.node.children?.length) {
+            set(id, !expanded[id]);
+        }
+    }
+    function focus(root, id) {
+        root.querySelector(`.tree-row[data-id="${CSS.escape(id)}"]`)?.focus();
+    }
+    function set(id, value) {
+        if (expanded[id] === value) {
+            return;
+        }
+        expanded[id] = value;
+        toggle?.(id, value);
+    }
+    function render(nodes, depth) {
+        return nodes.map((node, i) => {
+            let branch = !!node.children?.length, id = node.id;
+            return (() => {
+                let root_1n2ul8n0 = template_1n2ul8n1(), element_1n2ul8n2 = root_1n2ul8n0.firstChild.firstElementChild, element_1n2ul8n3 = element_1n2ul8n2.firstChild, element_1n2ul8n4 = element_1n2ul8n2.firstElementChild, element_1n2ul8n5 = root_1n2ul8n0.firstChild;
+                template_u1.setList(element_1n2ul8n2, 'class', () => selected[id] && '--active');
+                template_u1.setProperty(element_1n2ul8n2, 'aria-level', depth);
+                template_u1.setProperty(element_1n2ul8n2, 'aria-posinset', i + 1);
+                template_u1.setProperty(element_1n2ul8n2, 'aria-setsize', nodes.length);
+                template_u1.setProperty(element_1n2ul8n2, 'data-id', id);
+                template_u1.setProperties(element_1n2ul8n2, branch ? { 'aria-expanded': () => expanded[id] ? 'true' : 'false' } : undefined);
+                template_u1.setProperty(element_1n2ul8n2, 'aria-selected', () => selected[id] ? 'true' : 'false');
+                template_u1.setProperty(element_1n2ul8n2, 'tabindex', () => tabbable[id] ? 0 : -1);
+                element_1n2ul8n3.parentNode.insertBefore(branch
+                    ? (() => {
+                        let root_1n2ul8n6 = template_1n2ul8n7(), element_1n2ul8n8 = root_1n2ul8n6.firstChild;
+                        template_u1.setList(element_1n2ul8n8, 'class', () => expanded[id] && '--active');
+                        return root_1n2ul8n6;
+                    })()
+                    : template_1n2ul8n9(), element_1n2ul8n3);
+                template_u1.slot(element_1n2ul8n4, node.label, 1);
+                template_u1.slot(element_1n2ul8n2, node.meta !== undefined && (() => {
+                    let root_1n2ul8na = template_1n2ul8nb(), element_1n2ul8nc = root_1n2ul8na.firstChild;
+                    template_u1.slot(element_1n2ul8nc, node.meta, 1);
+                    return root_1n2ul8na;
+                })(), 2);
+                template_u1.slot(element_1n2ul8n5, branch && (() => {
+                    let root_1n2ul8nd = template_1n2ul8ne(), element_1n2ul8nf = root_1n2ul8nd.firstChild, element_1n2ul8ng = element_1n2ul8nf.firstElementChild;
+                    template_u1.setList(element_1n2ul8nf, 'class', () => expanded[id] && '--active');
+                    template_u1.setProperty(element_1n2ul8nf, 'inert', () => !expanded[id]);
+                    template_u1.slot(element_1n2ul8ng, render(node.children, depth + 1), 1);
+                    return root_1n2ul8nd;
+                })(), 2);
+                return root_1n2ul8n0;
+            })();
+        });
+    }
+    return (() => {
+        let root_1n2ul8nh = template_1n2ul8ni(), element_1n2ul8nj = root_1n2ul8nh.firstChild;
+        template_u1.setProperty(element_1n2ul8nj, 'aria-label', label);
+        template_u1.setProperties(element_1n2ul8nj, attributes);
+        template_u1.delegate(element_1n2ul8nj, 'click', (event) => {
+            let row = event.target.closest('.tree-row'), root = row?.closest('.tree');
+            if (!row || !root) {
+                return;
+            }
+            focus(root, row.dataset.id);
+            activate(row.dataset.id);
+        });
+        template_u1.on(element_1n2ul8nj, 'focusin', (event) => {
+            let id = event.target.closest('.tree-row')?.dataset.id;
+            if (id === undefined || id === state.focused) {
+                return;
+            }
+            tabbable[state.focused] = false;
+            tabbable[id] = true;
+            state.focused = id;
+        });
+        template_u1.delegate(element_1n2ul8nj, 'keydown', (event) => {
+            let root = event.target.closest('.tree');
+            if (!root || !index.has(state.focused)) {
+                return;
+            }
+            let entry = index.get(state.focused), id = state.focused, rows = visible(nodes, expanded), position = rows.indexOf(entry.node), target;
+            switch (event.key) {
+                case 'ArrowDown':
+                    target = rows[position + 1]?.id;
+                    break;
+                case 'ArrowUp':
+                    target = rows[position - 1]?.id;
+                    break;
+                case 'ArrowRight':
+                    if (!entry.node.children?.length) {
+                        break;
+                    }
+                    if (expanded[id]) {
+                        target = entry.node.children[0].id;
+                    }
+                    else {
+                        set(id, true);
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (entry.node.children?.length && expanded[id]) {
+                        set(id, false);
+                    }
+                    else {
+                        target = entry.parent?.id;
+                    }
+                    break;
+                case 'End':
+                    target = rows[rows.length - 1]?.id;
+                    break;
+                case 'Enter':
+                case ' ':
+                    activate(id);
+                    break;
+                case 'Home':
+                    target = rows[0]?.id;
+                    break;
+                default: {
+                    if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) {
+                        return;
+                    }
+                    let key = event.key.toLowerCase();
+                    for (let i = 1, n = rows.length; i < n; i++) {
+                        let row = rows[(position + i) % n];
+                        if (row.label.toLowerCase().startsWith(key)) {
+                            target = row.id;
+                            break;
+                        }
+                    }
+                }
+            }
+            event.preventDefault();
+            if (target !== undefined) {
+                focus(root, target);
+            }
+        });
+        template_u1.slot(element_1n2ul8nj, render(nodes, 1), 1);
+        return root_1n2ul8nh;
+    })();
+});

package/build/components/tree/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.tree{--background:var(--background-default);--background-active:var(--color-grey-500);--background-default:transparent;--background-hover:var(--color-grey-400);--border-radius:var(--border-radius-300);--caret-duration:.32s;--caret-size:16px;--caret-timing-function:linear(0, .2 6%, .53 13%, .8 21%, .96 30%, 1.02 38%, 1.03 45%, 1.01 60%, 1);--close-duration:.2s;--close-fade-duration:.14s;--close-timing-function:cubic-bezier(.4, 0, 1, 1);--color:var(--color-default);--color-active:var(--color-text-500);--color-default:var(--color-text-300);--color-hover:var(--color-text-400);--focus-color:var(--color-blue-400);--focus-width:1.5px;--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--font-weight-active:var(--font-weight-500);--gap:var(--size-200);--guide-color:var(--color-border-300);--guide-width:1px;--height:28px;--meta-color:var(--color-text-300);--meta-font-family:"Geist Mono", ui-monospace, monospace;--open-duration:.28s;--open-fade-duration:.18s;--open-timing-function:cubic-bezier(.22, 1, .36, 1);--padding-horizontal:var(--size-300)}.tree-row:not(.--active):hover{--background:var(--background-hover);--color:var(--color-hover)}.tree-row.--active{--background:var(--background-active);--color:var(--color-active);--font-weight:var(--font-weight-active)}.tree{font-size:var(--font-size);flex-direction:column;display:flex}.tree-caret{flex:0 0 var(--caret-size);height:var(--caret-size);transition:rotate var(--caret-duration) var(--caret-timing-function);justify-content:center;align-items:center;display:inline-flex}.tree-caret.--active{rotate:90deg}.tree-caret svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;width:10px;height:10px}.tree-group{transition:grid-template-rows var(--open-duration) var(--open-timing-function);grid-template-rows:1fr;display:grid}.tree-group:not(.--active){transition:grid-template-rows var(--close-duration) var(--close-timing-function);grid-template-rows:0fr}.tree-group:not(.--active) .tree-group-content{opacity:0;transition:opacity var(--close-fade-duration) var(--close-timing-function)}.tree-group-content{border-inline-start:var(--guide-width) solid var(--guide-color);opacity:1;min-height:0;transition:opacity var(--open-fade-duration) var(--open-timing-function);flex-direction:column;margin-inline-start:calc(var(--padding-horizontal) + (var(--caret-size) - var(--guide-width)) / 2);padding-inline-start:var(--size-100);display:flex;overflow:hidden}.tree-label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.tree-meta{color:var(--meta-color);font-family:var(--meta-font-family);font-size:.85em;font-weight:var(--font-weight-400);flex:none}.tree-row{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-weight:var(--font-weight);align-items:center;gap:var(--gap);height:var(--height);padding-inline:var(--padding-horizontal);transition:background var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;outline:none;display:flex}.tree-row:focus-visible{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-color)}@media (prefers-reduced-motion:reduce){.tree-caret,.tree-group,.tree-group-content{transition:none!important}}}
+/*$vite$:1*/

package/build/components/tree-view/index.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    nodes: Node[];
+    open?: string[];
+    selected?: string;
+    state?: {
+        selected: string;
+    };
+};
+type Node = {
+    children?: Node[];
+    name: string;
+};
+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;
+};
+export default _default;