@esportsplus/ui 0.54.0 → 0.56.2

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

@@ -1,20 +1,24 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 import './scss/index.scss';
+declare const SELECT_ARROW: unique symbol;
+declare const SELECT_OPTION: unique symbol;
+declare const SELECT_TOOLTIP_CONTENT: unique symbol;
 type A = {
-    arrow?: Attributes;
+    [SELECT_ARROW]?: Attributes;
+    [SELECT_OPTION]?: Attributes;
+    [SELECT_TOOLTIP_CONTENT]?: Attributes & {
+        direction?: string;
+    };
     options: Record<number | string, Renderable<unknown> | {
         content: Renderable<unknown>;
         selected: Renderable<unknown>;
     }>;
-    option?: Attributes;
-    'tooltip-content'?: Attributes & {
-        direction?: string;
-    };
 } & ({
     selected?: number | string;
     state?: never;
 } | {
+    selected?: never;
     state: {
         active: boolean;
         error: string;
@@ -22,8 +26,12 @@ type A = {
         selected?: number | string;
     };
 }) & Attributes;
-declare const _default: template_u0.Factory<A, (state: {
+declare const _default: template_u1.Factory<A, (state: {
     active: boolean;
     selected?: string | number;
-}) => Renderable<unknown>, Renderable<any>>;
+}) => Renderable<unknown>, Renderable<any>, {
+    readonly arrow: typeof SELECT_ARROW;
+    readonly option: typeof SELECT_OPTION;
+    readonly tooltipContent: typeof SELECT_TOOLTIP_CONTENT;
+}>;
 export default _default;

package/build/components/select/index.js

@@ -1,12 +1,11 @@
-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 { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_u1n = template_u0.template(`<div class='link select-option ' >`);
-const template_u1q = template_u0.template(`<div class='tooltip-content --flex-column --scrollbar' >`);
-const template_u1t = template_u0.template(`<div class='select tooltip ' ><!--$--><div class='select-arrow' ></div><input class='select-tag' />`);
+const template_167mg1f2 = template_u1.template(`<div class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag' />`);
+const template_167mg1f8 = template_u1.template(`<div class='tooltip-content  --flex-column --scrollbar'>`);
+const template_167mg1fb = template_u1.template(`<div class='link select-option '>`);
 class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -41,35 +40,31 @@ class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#selected, _v3);
     }
 }
-const OMIT = [
-    'arrow',
-    'options',
-    'option',
-    'tooltip-content',
-];
-export default component(function (attributes, content) {
-    let element, { options, option } = attributes, state = attributes.state || new ReactiveObject_167mg1f0(attributes.selected || Object.keys(options)[0]);
+const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
+const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
+export default component(function ({ options, selected, state = new ReactiveObject_167mg1f0(selected || Object.keys(options)[0]), ...attributes }, content) {
+    let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {}, { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
     return (() => {
-        let root_u1s = template_u1t(), element_u1u = root_u1s.firstChild, element_u1v = element_u1u.firstChild, element_u1w = element_u1u.firstElementChild, element_u1x = element_u1w.nextElementSibling;
-        template_u0.setList(element_u1u, 'class', () => state.active && '--active');
-        template_u0.setProperties(element_u1u, this?.attributes && omit(this.attributes, OMIT));
-        template_u0.setProperties(element_u1u, omit(attributes, OMIT));
-        template_u0.onrender(element_u1u, (node) => element = node);
-        template_u0.ondocument(element_u1u, 'click', (event) => {
-            if (!state.active || !element?.isConnected) {
-                return;
-            }
-            if (!element.contains(event.target)) {
-                state.active = false;
-            }
-        });
-        template_u0.delegate(element_u1u, 'click', () => {
+        let root_167mg1f1 = template_167mg1f2(), element_167mg1f3 = root_167mg1f1.firstChild, element_167mg1f4 = element_167mg1f3.firstChild, element_167mg1f5 = element_167mg1f3.firstElementChild, element_167mg1f6 = element_167mg1f5.nextElementSibling;
+        template_u1.setList(element_167mg1f3, 'class', () => state.active && '--active');
+        template_u1.setProperties(element_167mg1f3, this?.attributes);
+        template_u1.setProperties(element_167mg1f3, attributes);
+        template_u1.delegate(element_167mg1f3, 'click', () => {
             if (state.render) {
                 state.active = !state.active;
             }
             state.render = true;
         });
-        new template_u0.EffectSlot(element_u1v, content ? (() => content(state)) : (() => {
+        template_u1.ondocument(element_167mg1f3, 'click', function (event) {
+            if (!state.active || !this?.isConnected) {
+                return;
+            }
+            if (!this.contains(event.target)) {
+                state.active = false;
+            }
+        });
+        new template_u1.EffectSlot(element_167mg1f4, content ? (() => content(state)) : (() => {
             let selected = options[state.selected];
             if (!selected) {
                 return '-';
@@ -79,74 +74,64 @@ export default component(function (attributes, content) {
             }
             return selected;
         }));
-        template_u0.setProperties(element_u1w, this?.attributes?.arrow);
-        template_u0.setProperties(element_u1w, attributes.arrow);
-        template_u0.setProperty(element_u1x, 'name', attributes.name);
-        template_u0.delegate(element_u1x, 'click', () => { });
-        template_u0.onrender(element_u1x, form.input.onrender(state));
-        template_u0.setProperty(element_u1x, 'value', () => state.selected);
-        new template_u0.EffectSlot(element_u1u, () => {
+        template_u1.setProperties(element_167mg1f5, this?.attributes?.[SELECT_ARROW]);
+        template_u1.setProperties(element_167mg1f5, attributes[SELECT_ARROW]);
+        template_u1.setProperty(element_167mg1f6, 'name', attributes.name);
+        template_u1.delegate(element_167mg1f6, 'click', () => { });
+        template_u1.onrender(element_167mg1f6, form.input.onrender(state));
+        template_u1.setProperty(element_167mg1f6, 'value', () => state.selected);
+        new template_u1.EffectSlot(element_167mg1f3, () => {
             if (!state.render) {
                 return;
             }
             let keys = Object.keys(options), selected = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false])));
             return (() => {
-                let root_u1p = template_u1q(), element_u1r = root_u1p.firstChild;
-                template_u0.setProperties(element_u1r, {
-                    ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-                    ...attributes['tooltip-content'],
-                    class: [
-                        ...toArray(this?.attributes?.['tooltip-content']?.class),
-                        ...toArray(attributes['tooltip-content']?.class),
-                        `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-                    ],
-                    inert: () => !state.active,
-                    onclick: (e) => {
-                        let element = e.target, key = element.dataset?.key;
-                        if (key === undefined) {
-                            let parent;
-                            while (parent = element.parentElement) {
-                                key = parent.dataset?.key;
-                                if (key !== undefined) {
-                                    break;
-                                }
+                let root_167mg1f7 = template_167mg1f8(), element_167mg1f9 = root_167mg1f7.firstChild;
+                template_u1.setList(element_167mg1f9, 'class', template_u1.interpolate(["tooltip-content--", (direction)]));
+                template_u1.setProperties(element_167mg1f9, defaultTooltipContent);
+                template_u1.setProperties(element_167mg1f9, tooltipContent);
+                template_u1.setProperty(element_167mg1f9, 'inert', () => !state.active);
+                template_u1.delegate(element_167mg1f9, 'click', (e) => {
+                    let element = e.target, key = element.dataset?.key;
+                    if (key === undefined) {
+                        let parent;
+                        while (parent = element.parentElement) {
+                            key = parent.dataset?.key;
+                            if (key !== undefined) {
+                                break;
                             }
                         }
-                        if (key === undefined) {
-                            return;
-                        }
-                        let previous = state.selected;
-                        state.active = false;
-                        state.selected = key;
-                        selected[key] = true;
-                        selected[previous] = false;
-                    },
-                    onconnect: () => {
-                        state.active = true;
-                    },
-                    style: [
-                        ...toArray(this?.attributes?.['tooltip-content']?.style),
-                        ...toArray(attributes['tooltip-content']?.style)
-                    ],
+                    }
+                    if (key === undefined) {
+                        return;
+                    }
+                    let previous = state.selected;
+                    state.active = false;
+                    state.selected = key;
+                    selected[key] = true;
+                    selected[previous] = false;
+                });
+                template_u1.onconnect(element_167mg1f9, () => {
+                    state.active = true;
                 });
-                template_u0.slot(element_u1r, keys.map((key) => {
+                template_u1.slot(element_167mg1f9, keys.map((key) => {
                     let content = options[key];
                     if (content !== null && typeof content === 'object' && 'content' in content) {
                         content = content.content;
                     }
                     return (() => {
-                        let root_u1m = template_u1n(), element_u1o = root_u1m.firstChild;
-                        template_u0.setList(element_u1o, 'class', () => selected[key] && '--active');
-                        template_u0.setProperties(element_u1o, this?.attributes?.option);
-                        template_u0.setProperties(element_u1o, option);
-                        template_u0.setProperty(element_u1o, 'data-key', key);
-                        template_u0.slot(element_u1o, content, 1);
-                        return root_u1m;
+                        let root_167mg1fa = template_167mg1fb(), element_167mg1fc = root_167mg1fa.firstChild;
+                        template_u1.setList(element_167mg1fc, 'class', () => selected[key] && '--active');
+                        template_u1.setProperties(element_167mg1fc, this?.attributes?.[SELECT_OPTION]);
+                        template_u1.setProperties(element_167mg1fc, attributes[SELECT_OPTION]);
+                        template_u1.setProperty(element_167mg1fc, 'data-key', key);
+                        template_u1.slot(element_167mg1fc, content, 1);
+                        return root_167mg1fa;
                     })();
                 }), 1);
-                return root_u1p;
+                return root_167mg1f7;
             })();
         }, 2);
-        return root_u1s;
+        return root_167mg1f1;
     })();
-});
+}, { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT });

package/build/components/select/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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);--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)}.select: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)}.select: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)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) * 2 + var(--arrow-size) - var(--border-width)) 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-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{transform:translateY(calc(50% + var(--arrow-size) / 3)) scaleY(-1) rotate(45deg)}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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);--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)}.select: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)}.select: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)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width)) max(0px, var(--padding-horizontal) * 2 + var(--arrow-size) - 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), rotate var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{rotate:225deg;translate:0 calc(50% + var(--arrow-size) / 3)}.select-arrow{border-color:var(--color);border-style:solid;border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;inset-inline-end:calc(var(--padding-horizontal) + var(--arrow-spacer));translate:0 50%;rotate:45deg}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
 /*$vite$:1*/

package/build/components/select-menu/index.d.ts

@@ -0,0 +1,34 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SELECT_MENU_OPTION]?: Attributes;
+    [SELECT_MENU_PANEL]?: Attributes;
+    [SELECT_MENU_TRIGGER]?: Attributes;
+    label: string;
+    name?: string;
+    options: Option[];
+    state?: {
+        active: boolean;
+        error: string;
+        value: string;
+    };
+    value?: string;
+};
+type Option = {
+    detail?: string;
+    label: string;
+    value: string;
+};
+declare const SELECT_MENU_OPTION: unique symbol;
+declare const SELECT_MENU_PANEL: unique symbol;
+declare const SELECT_MENU_TRIGGER: unique symbol;
+declare function template(this: {
+    attributes?: Pick<A, typeof SELECT_MENU_OPTION | typeof SELECT_MENU_PANEL | typeof SELECT_MENU_TRIGGER>;
+} | void, { label, name, options, value, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly option: typeof SELECT_MENU_OPTION;
+    readonly panel: typeof SELECT_MENU_PANEL;
+    readonly trigger: typeof SELECT_MENU_TRIGGER;
+};
+export default _default;
+export type { Option };

package/build/components/select-menu/index.js

@@ -0,0 +1,329 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { onCleanup } from '@esportsplus/reactivity';
+import form from '../form/index.js';
+import './scss/index.scss';
+const template_0e67p613 = template_u1.template(`<div class='select-menu tooltip'><span class='select-menu-label'></span><button aria-haspopup='listbox' class='select-menu-trigger' role='combobox' type='button'><span class='select-menu-value'></span><svg aria-hidden='true' class='select-menu-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m5 6.25 3-3 3 3M5 9.75l3 3 3-3' /></svg></button><input class='select-menu-tag' type='hidden' /><div class='tooltip-content select-menu-panel'><div class='select-menu-scroller'><div role='listbox'></div></div><div aria-hidden='true' class='select-menu-scroll select-menu-scroll--up'><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m4.5 9.5 3.5-3.5 3.5 3.5' /></svg></div><div aria-hidden='true' class='select-menu-scroll select-menu-scroll--down'><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m4.5 6.5 3.5 3.5 3.5-3.5' />`);
+const template_0e67p61f = template_u1.template(`<div class='select-menu-option' role='option'><svg aria-hidden='true' class='select-menu-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg><span class='select-menu-option-label'>`);
+const template_0e67p61j = template_u1.template(`<span class='select-menu-option-detail'>`);
+class ReactiveObject_0e67p610 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v2) {
+        reactivity_u0.write(this.#value, _v2);
+    }
+}
+class ReactiveObject_0e67p611 extends reactivity_u0.ReactiveObject {
+    #highlight = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get highlight() {
+        return reactivity_u0.read(this.#highlight);
+    }
+    set highlight(_v0) {
+        reactivity_u0.write(this.#highlight, _v0);
+    }
+}
+const MARGIN = 8;
+const ROWS = 8;
+const SCROLL_SPEED = 280;
+const SELECT_MENU_OPTION = Symbol.for('@esportsplus/ui/select-menu.option');
+const SELECT_MENU_PANEL = Symbol.for('@esportsplus/ui/select-menu.panel');
+const SELECT_MENU_TRIGGER = Symbol.for('@esportsplus/ui/select-menu.trigger');
+const TYPEAHEAD_RESET = 500;
+let uid = 0;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function place({ panel, scroller, trigger, value }, count, selected) {
+    let box = trigger.getBoundingClientRect(), label = scroller.querySelector('.select-menu-option-label'), option = scroller.querySelector('.select-menu-option');
+    if (!label || !option) {
+        return 0;
+    }
+    let scale = box.height / trigger.offsetHeight || 1, item = option.offsetHeight, pad = parseFloat(getComputedStyle(scroller).paddingTop) || 0, rows = Math.min(count, parseInt(getComputedStyle(panel).getPropertyValue('--rows'), 10) || ROWS), height = rows * item + pad * 2, maxScroll = (count - rows) * item, scroll = clamp((selected - Math.floor(rows / 2)) * item, 0, maxScroll), shift = label.offsetLeft - (value.offsetLeft - trigger.offsetLeft), top = trigger.offsetTop + (trigger.offsetHeight - item) / 2 - (pad + selected * item - scroll);
+    let maxBottom = trigger.offsetTop + (innerHeight - MARGIN - box.top) / scale, minTop = trigger.offsetTop + (MARGIN - box.top) / scale;
+    if (top < minTop) {
+        let d = minTop - top;
+        top += d;
+        scroll += Math.min(d, maxScroll - scroll);
+    }
+    if (top + height > maxBottom) {
+        let d = top + height - maxBottom;
+        top -= d;
+        scroll -= Math.min(d, scroll);
+    }
+    let width = trigger.offsetWidth + shift, left = Math.max(trigger.offsetLeft + (MARGIN - box.left) / scale, Math.min(trigger.offsetLeft - shift, trigger.offsetLeft + (innerWidth - MARGIN - box.left) / scale - width));
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+    panel.style.transformOrigin = `${trigger.offsetLeft + trigger.offsetWidth / 2 - left}px ${trigger.offsetTop + trigger.offsetHeight / 2 - top}px`;
+    panel.style.width = `${width}px`;
+    return scroll;
+}
+function edges(panel, scroller) {
+    let down = scroller.scrollTop < scroller.scrollHeight - scroller.clientHeight - 1, up = scroller.scrollTop > 1;
+    panel.toggleAttribute('data-down', down);
+    panel.toggleAttribute('data-up', up);
+    scroller.style.maskImage = `linear-gradient(to bottom, transparent, black ${up ? 'var(--fade)' : '0px'}, black calc(100% - ${down ? 'var(--fade)' : '0px'}), transparent)`;
+}
+function template({ label, name, options, value, state = new ReactiveObject_0e67p610(value ?? options[0]?.value ?? ''), ...attributes }) {
+    let frame = 0, id = `select-menu-${++uid}`, last = { x: -1, y: -1 }, menu = new ReactiveObject_0e67p611(), parts = {}, pressing = false, query = '', timer;
+    function choose(index) {
+        state.value = options[index].value;
+        close();
+    }
+    function close() {
+        cancelAnimationFrame(frame);
+        pressing = false;
+        state.active = false;
+    }
+    function highlight(index) {
+        let next = clamp(index, 0, options.length - 1), scroller = parts.scroller;
+        menu.highlight = next;
+        if (!scroller) {
+            return;
+        }
+        let item = scroller.querySelector('.select-menu-option')?.offsetHeight ?? 0, pad = parseFloat(getComputedStyle(scroller).paddingTop) || 0, top = pad + next * item;
+        if (top < scroller.scrollTop + pad) {
+            scroller.scrollTop = top - pad;
+        }
+        else if (top + item > scroller.scrollTop + scroller.clientHeight - pad) {
+            scroller.scrollTop = top + item - scroller.clientHeight + pad;
+        }
+    }
+    function onkeydown(e) {
+        let typing = query !== '';
+        if (!state.active) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && !(e.key === ' ' && typing)) {
+                e.preventDefault();
+                open();
+                return;
+            }
+        }
+        else {
+            let active = menu.highlight, page = ROWS - 1, moves = {
+                ArrowDown: active + 1,
+                ArrowUp: active - 1,
+                End: options.length - 1,
+                Home: 0,
+                PageDown: active + page,
+                PageUp: active - page
+            };
+            if (e.key === 'ArrowUp' && e.altKey) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+            if (e.key in moves) {
+                e.preventDefault();
+                highlight(moves[e.key]);
+                return;
+            }
+            if (e.key === 'Enter' || (e.key === ' ' && !typing)) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                close();
+                return;
+            }
+            if (e.key === 'Tab') {
+                choose(active);
+                return;
+            }
+        }
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            search(e.key);
+        }
+    }
+    function open() {
+        let { panel, scroller, trigger, value } = parts, index = selected();
+        menu.highlight = index;
+        state.active = true;
+        if (!panel || !scroller || !trigger || !value) {
+            return;
+        }
+        scroller.scrollTop = place({ panel, scroller, trigger, value }, options.length, index);
+        edges(panel, scroller);
+    }
+    function scroll(direction, e) {
+        if (e.pointerType === 'touch') {
+            return;
+        }
+        let previous = performance.now();
+        cancelAnimationFrame(frame);
+        function tick(now) {
+            if (!parts.scroller) {
+                return;
+            }
+            parts.scroller.scrollTop += (direction * SCROLL_SPEED * (now - previous)) / 1000;
+            previous = now;
+            frame = requestAnimationFrame(tick);
+        }
+        frame = requestAnimationFrame(tick);
+    }
+    function search(character) {
+        clearTimeout(timer);
+        query += character.toLowerCase();
+        timer = setTimeout(() => {
+            query = '';
+        }, TYPEAHEAD_RESET);
+        let repeated = [...query].every((c) => c === query[0]), from = state.active ? menu.highlight : selected(), needle = repeated ? query[0] : query, start = repeated ? from + 1 : from;
+        for (let i = 0, n = options.length; i < n; i++) {
+            let index = (start + i) % n;
+            if (!options[index].label.toLowerCase().startsWith(needle)) {
+                continue;
+            }
+            if (state.active) {
+                highlight(index);
+            }
+            else {
+                state.value = options[index].value;
+            }
+            return;
+        }
+    }
+    function selected() {
+        return Math.max(0, options.findIndex((option) => option.value === state.value));
+    }
+    function stop() {
+        cancelAnimationFrame(frame);
+    }
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+    });
+    return (() => {
+        let root_0e67p612 = template_0e67p613(), element_0e67p614 = root_0e67p612.firstChild, element_0e67p615 = element_0e67p614.firstElementChild, element_0e67p616 = element_0e67p615.nextElementSibling, element_0e67p617 = element_0e67p616.firstElementChild, element_0e67p618 = element_0e67p616.nextElementSibling, element_0e67p619 = element_0e67p618.nextElementSibling, element_0e67p61a = element_0e67p619.firstElementChild, element_0e67p61b = element_0e67p61a.firstElementChild, element_0e67p61c = element_0e67p61a.nextElementSibling, element_0e67p61d = element_0e67p61c.nextElementSibling;
+        template_u1.setProperties(element_0e67p614, this?.attributes);
+        template_u1.setProperties(element_0e67p614, attributes);
+        template_u1.setList(element_0e67p614, 'class', () => state.active && '--active');
+        template_u1.ondocument(element_0e67p614, 'click', function (e) {
+            if (state.active && this.isConnected && !this.contains(e.target)) {
+                close();
+            }
+        });
+        template_u1.setProperty(element_0e67p615, 'id', template_u1.interpolate([(id), "-label"]));
+        template_u1.slot(element_0e67p615, label, 1);
+        template_u1.setProperty(element_0e67p616, 'aria-controls', template_u1.interpolate([(id), "-list"]));
+        template_u1.setProperty(element_0e67p616, 'aria-labelledby', template_u1.interpolate([(id), "-label ", (id), "-value"]));
+        template_u1.setProperties(element_0e67p616, this?.attributes?.[SELECT_MENU_TRIGGER]);
+        template_u1.setProperties(element_0e67p616, attributes[SELECT_MENU_TRIGGER]);
+        template_u1.setProperty(element_0e67p616, 'aria-activedescendant', () => state.active ? `${id}-option-${menu.highlight}` : '');
+        template_u1.setProperty(element_0e67p616, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.on(element_0e67p616, 'blur', () => {
+            if (!pressing) {
+                close();
+            }
+        });
+        template_u1.delegate(element_0e67p616, 'click', () => {
+            if (state.active) {
+                close();
+            }
+            else {
+                open();
+            }
+        });
+        template_u1.delegate(element_0e67p616, 'keydown', onkeydown);
+        template_u1.onrender(element_0e67p616, (element) => {
+            parts.trigger = element;
+        });
+        template_u1.setProperty(element_0e67p617, 'id', template_u1.interpolate([(id), "-value"]));
+        template_u1.onrender(element_0e67p617, (element) => {
+            parts.value = element;
+        });
+        new template_u1.EffectSlot(element_0e67p617, () => options[selected()]?.label ?? '', 1);
+        template_u1.setProperty(element_0e67p618, 'name', name);
+        template_u1.onrender(element_0e67p618, form.input.onrender(state));
+        template_u1.setProperty(element_0e67p618, 'value', () => state.value);
+        template_u1.setProperties(element_0e67p619, this?.attributes?.[SELECT_MENU_PANEL]);
+        template_u1.setProperties(element_0e67p619, attributes[SELECT_MENU_PANEL]);
+        template_u1.setProperty(element_0e67p619, 'inert', () => !state.active);
+        template_u1.delegate(element_0e67p619, 'pointerdown', () => {
+            pressing = true;
+        });
+        template_u1.on(element_0e67p619, 'pointerenter', function (e) {
+            if (e.pointerType !== 'touch') {
+                this.setAttribute('data-hover', '');
+            }
+        });
+        template_u1.on(element_0e67p619, 'pointerleave', function () {
+            this.removeAttribute('data-hover');
+            stop();
+        });
+        template_u1.delegate(element_0e67p619, 'pointerup', () => {
+            pressing = false;
+            parts.trigger?.focus({ preventScroll: true });
+        });
+        template_u1.onrender(element_0e67p619, (element) => {
+            parts.panel = element;
+        });
+        template_u1.onrender(element_0e67p61a, (element) => {
+            parts.scroller = element;
+        });
+        template_u1.on(element_0e67p61a, 'scroll', function () {
+            if (parts.panel) {
+                edges(parts.panel, this);
+            }
+        });
+        template_u1.setProperty(element_0e67p61b, 'aria-labelledby', template_u1.interpolate([(id), "-label"]));
+        template_u1.setProperty(element_0e67p61b, 'id', template_u1.interpolate([(id), "-list"]));
+        template_u1.slot(element_0e67p61b, options.map((option, index) => {
+            let root_0e67p61e = template_0e67p61f(), element_0e67p61g = root_0e67p61e.firstChild, element_0e67p61h = element_0e67p61g.firstElementChild.nextElementSibling;
+            template_u1.setProperty(element_0e67p61g, 'id', template_u1.interpolate([(id), "-option-", (index)]));
+            template_u1.setProperties(element_0e67p61g, this?.attributes?.[SELECT_MENU_OPTION]);
+            template_u1.setProperties(element_0e67p61g, attributes[SELECT_MENU_OPTION]);
+            template_u1.setProperty(element_0e67p61g, 'aria-selected', () => state.value === option.value ? 'true' : 'false');
+            template_u1.setList(element_0e67p61g, 'class', () => menu.highlight === index && '--highlighted');
+            template_u1.delegate(element_0e67p61g, 'click', () => {
+                choose(index);
+                parts.trigger?.focus({ preventScroll: true });
+            });
+            template_u1.delegate(element_0e67p61g, 'pointermove', (e) => {
+                if (e.pointerType === 'touch' || (last.x === e.clientX && last.y === e.clientY)) {
+                    return;
+                }
+                last = { x: e.clientX, y: e.clientY };
+                if (menu.highlight !== index) {
+                    menu.highlight = index;
+                }
+            });
+            template_u1.slot(element_0e67p61h, option.label, 1);
+            template_u1.slot(element_0e67p61g, option.detail ? (() => {
+                let root_0e67p61i = template_0e67p61j(), element_0e67p61k = root_0e67p61i.firstChild;
+                template_u1.slot(element_0e67p61k, option.detail, 1);
+                return root_0e67p61i;
+            })() : '', 2);
+            return root_0e67p61e;
+        }), 1);
+        template_u1.on(element_0e67p61c, 'pointerenter', (e) => scroll(-1, e));
+        template_u1.on(element_0e67p61c, 'pointerleave', stop);
+        template_u1.on(element_0e67p61d, 'pointerenter', (e) => scroll(1, e));
+        template_u1.on(element_0e67p61d, 'pointerleave', stop);
+        return root_0e67p612;
+    })();
+}
+export default Object.assign(template, { option: SELECT_MENU_OPTION, panel: SELECT_MENU_PANEL, trigger: SELECT_MENU_TRIGGER });

package/build/components/select-menu/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.select-menu{--background:var(--color-grey-400);--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--color:var(--color-text-500);--color-muted:var(--color-text-300);--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--height:40px;--highlight:color-mix(in oklch, var(--color) 6%, transparent);--item-height:36px;--press-scale:.96;--transition-duration:.15s;--transition-timing-function:ease-out;--trigger-border-radius:var(--border-radius-400);--width:min(260px, 100%)}.select-menu .select-menu-panel{--background:var(--color-grey-400);--border-radius:var(--border-radius-600);--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--fade:24px;--pad:4px;--rows:8;--scale:.96;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1);--width:auto}.select-menu:not(.--active) .select-menu-panel{--transition-duration:.1s}.select-menu{color:var(--color);font-size:var(--font-size);width:var(--width);position:relative}.select-menu-check{filter:blur(4px);opacity:0;stroke-width:1.5px;height:16px;transition:filter .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), opacity .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), scale .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);flex:none;width:16px;scale:.25}[aria-selected=true]>.select-menu-check{filter:blur();opacity:1;scale:1}.select-menu-chevron{color:var(--color-muted);stroke-width:1.5px;flex:none;width:16px;height:16px}.select-menu-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.select-menu-option{border-radius:var(--border-radius-400);cursor:default;align-items:center;gap:var(--size-200);height:var(--item-height);padding:0 var(--size-100);-webkit-user-select:none;user-select:none;display:flex}.select-menu-option.--highlighted{background:var(--highlight)}.select-menu-option-detail{color:var(--color-muted);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;flex:none}.select-menu-option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.select-menu-panel{z-index:50;position:absolute;top:0;left:0}.select-menu-scroll{color:var(--color-muted);opacity:0;pointer-events:none;justify-content:center;align-items:center;height:24px;transition:opacity .15s ease-out;display:flex;position:absolute;inset-inline:0}.select-menu-scroll svg{stroke-width:1.5px;width:14px;height:14px}.select-menu-scroll--down{bottom:0}.select-menu-panel[data-hover][data-down] .select-menu-scroll--down{opacity:1;pointer-events:auto}.select-menu-scroll--up{top:0}.select-menu-panel[data-hover][data-up] .select-menu-scroll--up{opacity:1;pointer-events:auto}.select-menu-scroller{max-height:calc(var(--rows) * var(--item-height) + var(--pad) * 2);overscroll-behavior:contain;padding:var(--pad);overflow-y:auto}.select-menu-tag{display:none}.select-menu-trigger{background:var(--background);border-radius:var(--trigger-border-radius);box-shadow:var(--box-shadow);color:var(--color);cursor:pointer;font:inherit;align-items:center;gap:var(--size-200);height:var(--height);padding:0 10px 0 var(--size-300);text-align:left;touch-action:manipulation;transition:scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;border:0;outline:none;width:100%;margin:0;display:flex}.select-menu-trigger:active{scale:var(--press-scale)}.select-menu-trigger:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.select-menu-value{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.select-menu-check{filter:none;scale:1}.select-menu .select-menu-panel{--scale:1}.select-menu-trigger{transition:none}.select-menu-trigger:active{scale:1}}}
+/*$vite$:1*/