@sekiui/elements 0.1.2 → 0.1.3

package/dist/collection/components/textarea/seki-textarea.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-textarea
  * @description A multi-line text input field with full form integration, accessibility support,
@@ -38,19 +39,17 @@ export class SekiTextarea {
          */
         this.invalid = false;
         this.handleInput = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiInput.emit({ value: this.value, nativeEvent: event });
         };
         this.handleChange = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ value: this.value, nativeEvent: event });
         };
         this.handleFocus = (event) => {
@@ -61,27 +60,58 @@ export class SekiTextarea {
             this.sekiBlur.emit({ value: target.value, nativeEvent: event });
         };
     }
-    // Form-associated lifecycle callbacks
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
     formResetCallback() {
-        this.value = '';
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue('');
-        }
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
     }
     formStateRestoreCallback(state) {
-        this.value = state;
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(state);
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
+    /**
+     * Keep the inner textareaEl and the form in step with a programmatic `el.value = x`
+     * without waiting for the next render, so `form.checkValidity()` and FormData
+     * read the new value immediately.
+     */
+    handleFormStateChange() {
+        var _a, _b, _c;
+        if (this.textareaEl && this.textareaEl.value !== ((_a = this.value) !== null && _a !== void 0 ? _a : '')) {
+            this.textareaEl.value = (_b = this.value) !== null && _b !== void 0 ? _b : '';
         }
+        (_c = this.formControl) === null || _c === void 0 ? void 0 : _c.sync();
     }
     componentWillLoad() {
-        // Set initial form value
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.value || '');
-        }
+        var _a;
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : ''; },
+            isEmpty: () => !this.value,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            isReadonly: () => this.readonly,
+            restore: initial => {
+                this.value = initial;
+            },
+            restoreState: state => {
+                this.value = typeof state === 'string' ? state : '';
+            },
+            // Mirror the inner control's own validity (required, minlength, ...) onto the host.
+            getNativeControl: () => this.textareaEl,
+        });
+        this.formControl.captureInitial((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        this.formControl.sync();
+    }
+    componentDidRender() {
+        var _a;
+        // The inner control's constraint attributes were just updated by this render.
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        return (h("textarea", { key: 'b9c35f868ac2a4e26cc2e53576e4925e55672f99', value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("textarea", { key: '575577a2754c1721b3dc01a0e513a4e3f93b3830', ref: el => (this.textareaEl = el), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -478,5 +508,17 @@ export class SekiTextarea {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleFormStateChange"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/tooltip/seki-tooltip.css

@@ -864,3 +864,9 @@
 ::slotted([slot='trigger']) {
   cursor: help;
 }
+
+/* The trigger slot lives in an inline wrapper so a slotted trigger renders in place
+   (the host is display: contents and has no box of its own). */
+.trigger-wrapper {
+  display: inline-block;
+}

package/dist/collection/components/tooltip/seki-tooltip.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * Tooltip Component
  *
@@ -63,6 +63,7 @@ export class SekiTooltip {
         this.showTimer = null;
         this.hideTimer = null;
         this.triggerEl = null;
+        this.boundTrigger = null;
         this.longPressTimer = null;
         this.touchStartX = 0;
         this.touchStartY = 0;
@@ -185,6 +186,13 @@ export class SekiTooltip {
                 }
             }
         };
+        /**
+         * The trigger slot's assigned content changed (trigger added/replaced/removed):
+         * move the listeners over to the new trigger.
+         */
+        this.onTriggerSlotChange = () => {
+            this.attachTriggerListeners();
+        };
     }
     /**
      * Show tooltip programmatically
@@ -308,12 +316,20 @@ export class SekiTooltip {
         tooltip.style.zIndex = '1000';
     }
     /**
-     * Attach event listeners to trigger
+     * Bind listeners to the element currently assigned to the trigger slot.
+     * Idempotent: if the trigger is unchanged nothing is re-bound; if it was
+     * replaced, the old element is detached first.
      */
     attachTriggerListeners() {
         const trigger = this.el.querySelector('[slot="trigger"]');
+        if (this.boundTrigger && this.boundTrigger !== trigger) {
+            this.removeTriggerListeners(this.boundTrigger);
+            this.boundTrigger = null;
+        }
         if (!trigger)
             return;
+        this.boundTrigger = trigger;
+        this.triggerEl = trigger;
         // Mouse events
         trigger.addEventListener('mouseenter', this.onTriggerMouseEnter);
         trigger.addEventListener('mouseleave', this.onTriggerMouseLeave);
@@ -335,13 +351,7 @@ export class SekiTooltip {
             trigger.setAttribute('aria-describedby', contentId);
         }
     }
-    /**
-     * Remove event listeners from trigger
-     */
-    detachTriggerListeners() {
-        const trigger = this.el.querySelector('[slot="trigger"]');
-        if (!trigger)
-            return;
+    removeTriggerListeners(trigger) {
         trigger.removeEventListener('mouseenter', this.onTriggerMouseEnter);
         trigger.removeEventListener('mouseleave', this.onTriggerMouseLeave);
         trigger.removeEventListener('focus', this.onTriggerFocus);
@@ -349,6 +359,15 @@ export class SekiTooltip {
         trigger.removeEventListener('touchstart', this.onTriggerTouchStart);
         trigger.removeEventListener('touchmove', this.onTriggerTouchMove);
         trigger.removeEventListener('touchend', this.onTriggerTouchEnd);
+    }
+    /**
+     * Remove event listeners from the bound trigger
+     */
+    detachTriggerListeners() {
+        if (this.boundTrigger) {
+            this.removeTriggerListeners(this.boundTrigger);
+            this.boundTrigger = null;
+        }
         // Escape key was registered on document in attachTriggerListeners; remove it
         // here so it does not leak (and keep firing) after the tooltip is detached.
         document.removeEventListener('keydown', this.onEscapeKey);
@@ -399,7 +418,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h("div", { key: '34e42900e4cbb8d0d6f712cb830f5a8b0bd36bb0', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '7f0fe164ee6e6daec300b398aef5a738b8fcf72e', name: "content" }), h("div", { key: '7a9d1335442cc2f2eece9e57d779fc58b5d3349d', class: "tooltip-arrow" })));
+        return (h(Host, { key: '4904953ae5d7a0d67942898104f81e36bd5d9ab2' }, h("span", { key: '30a69b56ab401b6c28214360feff10c7a246f698', class: "trigger-wrapper" }, h("slot", { key: 'd15e4b6b7a83a462857b8670d1394718f1af688a', name: "trigger", onSlotchange: this.onTriggerSlotChange })), h("div", { key: '817b9ef07ada7e8018250f721e4384d2692559f7', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: 'd4e19072ceaabeb7fadd73f336876b2faedcdba6', name: "content" }), h("div", { key: '76fcd6d32a10202aabae4c3b14b4ba40c415770a', class: "tooltip-arrow" }))));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/form-control.js

@@ -0,0 +1,205 @@
+/* global File, ValidityState, ValidityStateFlags, HTMLFormElement */
+/**
+ * Shared form participation for every `formAssociated` SekiUI control.
+ *
+ * One `FormControl` per component instance owns the four things that kept
+ * drifting apart between components:
+ *
+ *  1. the submitted value          -> `internals.setFormValue(...)`
+ *  2. constraint validation        -> `internals.setValidity(...)`
+ *  3. the validity API on the host -> `validity`, `validationMessage`,
+ *                                     `willValidate`, `checkValidity()`,
+ *                                     `reportValidity()`
+ *  4. lifecycle callbacks          -> reset (back to the value captured at
+ *                                     load), disabled, state restore
+ *
+ * Usage inside a component:
+ *
+ * ```ts
+ * private form!: FormControl<string>;
+ *
+ * componentWillLoad() {
+ *   this.form = new FormControl(this.el, this.internals, { ...options });
+ *   this.form.captureInitial(this.value);
+ *   this.form.sync();
+ * }
+ * formResetCallback() { this.form?.reset(); }
+ * formDisabledCallback(d: boolean) { this.form?.setFieldsetDisabled(d); }
+ * formStateRestoreCallback(s: FormControlState) { this.form?.restoreState(s); }
+ * ```
+ *
+ * ## Why plain host members and not `@Method()`
+ *
+ * Stencil `@Method()`s are always async: `el.checkValidity()` would return a
+ * `Promise`, which is truthy, so the idiomatic `if (!el.checkValidity())` would
+ * silently never fire. Native parity (`validity`, `willValidate` and
+ * `validationMessage` are synchronous reads) matters more than Stencil's method
+ * proxy, so the helper defines the members directly on the host element. That
+ * works in every build target (lazy loader, CDN and custom-elements) because the
+ * host is a real `HTMLElement` instance. The one limitation is that, like any
+ * Stencil API, the members exist once the component has loaded, not before the
+ * lazy loader has hydrated the element; `form.checkValidity()` and form
+ * submission go through `ElementInternals` and are always correct.
+ */
+const FLAG_KEYS = [
+    'valueMissing',
+    'typeMismatch',
+    'patternMismatch',
+    'tooLong',
+    'tooShort',
+    'rangeUnderflow',
+    'rangeOverflow',
+    'stepMismatch',
+    'badInput',
+    'customError',
+];
+function flagsOf(validity) {
+    const flags = {};
+    for (const key of FLAG_KEYS) {
+        if (validity[key])
+            flags[key] = true;
+    }
+    return flags;
+}
+export class FormControl {
+    constructor(host, internals, opts) {
+        this.host = host;
+        this.internals = internals;
+        this.opts = opts;
+        this.hasInitial = false;
+        this.fieldsetDisabled = false;
+        this.installHostApi();
+    }
+    /** Remember the value the control has at load time; `reset()` restores it. */
+    captureInitial(value) {
+        this.initial = value;
+        this.hasInitial = true;
+    }
+    /** Push the current value and validity to the form. Call after any state change. */
+    sync() {
+        const internals = this.internals;
+        if (!internals)
+            return;
+        const disabled = this.disabled;
+        if (typeof internals.setFormValue === 'function') {
+            internals.setFormValue(disabled ? null : this.opts.getFormValue());
+        }
+        if (typeof internals.setValidity === 'function') {
+            this.applyValidity(internals);
+        }
+    }
+    /** Body of `formResetCallback`: restore the initial value, then re-sync. */
+    reset() {
+        if (this.hasInitial)
+            this.opts.restore(this.initial);
+        this.sync();
+    }
+    /** Body of `formDisabledCallback` (a `<fieldset disabled>` ancestor or the host attribute). */
+    setFieldsetDisabled(disabled) {
+        this.fieldsetDisabled = disabled;
+        this.sync();
+    }
+    /** Body of `formStateRestoreCallback`. */
+    restoreState(state) {
+        var _a, _b;
+        (_b = (_a = this.opts).restoreState) === null || _b === void 0 ? void 0 : _b.call(_a, state);
+        this.sync();
+    }
+    get disabled() {
+        var _a, _b;
+        return this.fieldsetDisabled || !!((_b = (_a = this.opts).isDisabled) === null || _b === void 0 ? void 0 : _b.call(_a));
+    }
+    applyValidity(internals) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const o = this.opts;
+        if (this.disabled || ((_a = o.isReadonly) === null || _a === void 0 ? void 0 : _a.call(o))) {
+            internals.setValidity({});
+            return;
+        }
+        const native = (_b = o.getNativeControl) === null || _b === void 0 ? void 0 : _b.call(o);
+        let flags = {};
+        let message = '';
+        if (native) {
+            if (!native.validity.valid) {
+                flags = flagsOf(native.validity);
+                message = native.validationMessage;
+            }
+        }
+        else if (((_c = o.isRequired) === null || _c === void 0 ? void 0 : _c.call(o)) && o.isEmpty()) {
+            flags = { valueMissing: true };
+            message = (_d = o.requiredMessage) !== null && _d !== void 0 ? _d : 'Please fill out this field.';
+        }
+        else if (!o.isEmpty()) {
+            const extra = (_e = o.getConstraints) === null || _e === void 0 ? void 0 : _e.call(o);
+            if (extra) {
+                flags = extra.flags;
+                message = extra.message;
+            }
+        }
+        if (!FLAG_KEYS.some(k => flags[k])) {
+            internals.setValidity({});
+            return;
+        }
+        if (!message)
+            message = 'Please enter a valid value.';
+        const anchor = (_h = (_g = (_f = o.getAnchor) === null || _f === void 0 ? void 0 : _f.call(o)) !== null && _g !== void 0 ? _g : native) !== null && _h !== void 0 ? _h : undefined;
+        try {
+            internals.setValidity(flags, message, anchor !== null && anchor !== void 0 ? anchor : undefined);
+        }
+        catch (_j) {
+            // The anchor must be a shadow-including descendant of the host; if it is
+            // not (yet) attached, the validity itself still has to be recorded.
+            internals.setValidity(flags, message);
+        }
+    }
+    /**
+     * Define the native validity members on the host. They delegate to
+     * `ElementInternals`, so the browser fires `invalid`, matches `:invalid` and
+     * shows its bubble exactly as for a built-in control.
+     */
+    installHostApi() {
+        const host = this.host;
+        const internals = this.internals;
+        const define = (name, descriptor) => Object.defineProperty(host, name, Object.assign({ configurable: true, enumerable: false }, descriptor));
+        define('validity', { get: () => internals === null || internals === void 0 ? void 0 : internals.validity });
+        define('validationMessage', { get: () => { var _a; return (_a = internals === null || internals === void 0 ? void 0 : internals.validationMessage) !== null && _a !== void 0 ? _a : ''; } });
+        define('willValidate', { get: () => !!internals && !this.disabled && internals.willValidate });
+        define('checkValidity', { value: () => (internals ? internals.checkValidity() : true) });
+        define('reportValidity', { value: () => (internals ? internals.reportValidity() : true) });
+    }
+}
+/**
+ * Activation behaviour for a form-associated *button* host (`seki-button`,
+ * `seki-attachment-action`). The real `<button>` lives in a shadow root, so its
+ * form owner is null and the browser never submits or resets anything for it.
+ * The host is form-associated instead, so we act on `internals.form` ourselves:
+ *
+ *  - `submit` -> `form.requestSubmit()` (keeps the `submit` event and constraint
+ *    validation, unlike `form.submit()`)
+ *  - `reset`  -> `form.reset()`
+ *
+ * Native buttons run their activation behaviour *after* the click event has
+ * finished dispatching, and skip it when a listener called `preventDefault()`.
+ * To match, the action is deferred one task so consumer click listeners (which
+ * run after ours while the event bubbles) can still cancel it.
+ *
+ * Limitation: `SubmitEvent.submitter` is `null`, because `requestSubmit()` only
+ * accepts a native submit button as the submitter.
+ */
+export function activateFormButton(event, type, internals, disabled) {
+    if (disabled || type === 'button' || !internals)
+        return;
+    setTimeout(() => {
+        if (event.defaultPrevented)
+            return;
+        const form = internals.form;
+        if (!form)
+            return;
+        // Call through the prototype: a control named/id'd "reset" or "requestSubmit"
+        // shadows the method on the form element (named property access).
+        if (type === 'submit')
+            HTMLFormElement.prototype.requestSubmit.call(form);
+        else
+            HTMLFormElement.prototype.reset.call(form);
+    }, 0);
+}

package/dist/collection/utils/menu-navigation.js

@@ -0,0 +1,155 @@
+/**
+ * Shared keyboard navigation for menu-like content (dropdown-menu,
+ * context-menu, menubar).
+ *
+ * Menu items are *slotted light-DOM children* of the `*-content` host, so they
+ * must be collected from the host (`el.querySelectorAll`), never from a node
+ * inside the content's own shadow root (#322). Each item renders its focus
+ * target (`[role^="menuitem"]`) in its own shadow root, so focusing an item
+ * means focusing that inner element, not the host.
+ */
+/** Roles of the focus target an item renders in its shadow root. */
+const FOCUS_TARGET = '[role^="menuitem"]';
+function isDisabled(el) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return el.hasAttribute('disabled') || el.disabled === true;
+}
+/** Nearest submenu container of an item, or null for top-level items. */
+function scopeOf(el, cfg) {
+    return el.closest(cfg.subContentSelector);
+}
+/** All item hosts under `root` (any scope), including disabled ones. */
+function allItems(root, cfg) {
+    return Array.from(root.querySelectorAll(cfg.itemSelector));
+}
+/** Enabled items under `root` that share the given submenu scope. */
+export function getMenuItems(root, cfg, scope = null) {
+    return allItems(root, cfg).filter((el) => !isDisabled(el) && scopeOf(el, cfg) === scope);
+}
+/** Focus an item by focusing its inner `[role=menuitem*]` element. */
+export function focusMenuItem(item) {
+    var _a, _b;
+    if (!item)
+        return;
+    const target = (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUS_TARGET)) !== null && _b !== void 0 ? _b : item;
+    target.focus();
+}
+/**
+ * Focus an item, retrying for a few frames until it is actually focused. A
+ * submenu's content only renders its slot once it is open, so the items are
+ * not focusable on the very frame the open was requested.
+ */
+export function focusMenuItemWhenReady(item, framesLeft = 10) {
+    var _a, _b;
+    if (!item)
+        return;
+    focusMenuItem(item);
+    const target = (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUS_TARGET)) !== null && _b !== void 0 ? _b : item;
+    if (framesLeft > 0 && getDeepActiveElement() !== target) {
+        requestAnimationFrame(() => focusMenuItemWhenReady(item, framesLeft - 1));
+    }
+}
+/**
+ * Focus the first enabled top-level item. Waits for the item to be upgraded
+ * and rendered (and for the content's slot to render) first, so it works when tags are defined one at a time (#314).
+ */
+export async function focusFirstMenuItem(root, cfg) {
+    const first = getMenuItems(root, cfg)[0];
+    if (!first)
+        return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ready = first.componentOnReady;
+    if (typeof ready === 'function') {
+        try {
+            await ready.call(first);
+        }
+        catch (_a) {
+            /* fall through and focus whatever is there */
+        }
+    }
+    focusMenuItemWhenReady(first);
+}
+/** Deepest focused element, looking through shadow roots. */
+export function getDeepActiveElement() {
+    var _a, _b;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return (_b = active) !== null && _b !== void 0 ? _b : null;
+}
+/** True when `node` is `ancestor` or a descendant of it, crossing shadow boundaries. */
+export function composedContains(ancestor, node) {
+    var _a, _b;
+    let current = node;
+    while (current) {
+        if (current === ancestor)
+            return true;
+        current = (_b = (_a = current.parentNode) !== null && _a !== void 0 ? _a : current.host) !== null && _b !== void 0 ? _b : null;
+    }
+    return false;
+}
+export function clearTypeahead(state) {
+    if (state.timer)
+        clearTimeout(state.timer);
+    state.timer = undefined;
+    state.buffer = '';
+}
+/**
+ * Handle ArrowDown / ArrowUp / Home / End / type-ahead for a menu. The current
+ * item is derived from the event itself, so mouse hover, click and Tab focus
+ * can never put a "focused index" out of sync with the DOM.
+ *
+ * Enter / Space are intentionally NOT handled here: every item activates
+ * itself from its own keydown handler, and doing it twice would select twice.
+ */
+export function handleMenuKeyDown(event, root, cfg, typeahead) {
+    var _a;
+    const everyItem = allItems(root, cfg);
+    const target = (_a = event.composedPath().find((n) => n instanceof HTMLElement && everyItem.includes(n))) !== null && _a !== void 0 ? _a : null;
+    const scope = target ? scopeOf(target, cfg) : null;
+    const items = getMenuItems(root, cfg, scope);
+    const result = { target, inSubmenu: scope !== null, handled: false };
+    if (event.altKey || event.ctrlKey || event.metaKey || items.length === 0)
+        return result;
+    const current = target ? items.indexOf(target) : -1;
+    let next = -1;
+    switch (event.key) {
+        case 'ArrowDown':
+            next = current < 0 ? 0 : (current + 1) % items.length;
+            break;
+        case 'ArrowUp':
+            next = current <= 0 ? items.length - 1 : current - 1;
+            break;
+        case 'Home':
+            next = 0;
+            break;
+        case 'End':
+            next = items.length - 1;
+            break;
+        default: {
+            if (event.key.length !== 1 || event.key === ' ')
+                return result;
+            if (typeahead.timer)
+                clearTimeout(typeahead.timer);
+            typeahead.buffer += event.key.toLowerCase();
+            typeahead.timer = setTimeout(() => clearTypeahead(typeahead), 500);
+            // Typing one character repeatedly cycles through the items starting with it.
+            const repeated = typeahead.buffer.length > 1 && typeahead.buffer.split('').every((c) => c === typeahead.buffer[0]);
+            const needle = repeated ? typeahead.buffer[0] : typeahead.buffer;
+            const start = typeahead.buffer.length === 1 || repeated ? current + 1 : Math.max(current, 0);
+            const ordered = [...items.slice(start), ...items.slice(0, start)];
+            const hit = ordered.find((el) => { var _a; return ((_a = el.textContent) !== null && _a !== void 0 ? _a : '').trim().toLowerCase().startsWith(needle); });
+            result.handled = true;
+            if (hit) {
+                event.preventDefault();
+                focusMenuItem(hit);
+            }
+            return result;
+        }
+    }
+    event.preventDefault();
+    focusMenuItem(items[next]);
+    result.handled = true;
+    return result;
+}

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import { g as globalScripts } from './p-jMliCqbB.js';
 export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './p-jMliCqbB.js';
-export { S as SekiSwitch } from './p-Bj7FnVct.js';
-export { S as SekiLabel } from './p-DZc1uUPr.js';
+export { S as SekiSwitch } from './p-Dh9pvFzL.js';
+export { S as SekiLabel } from './p-B7jKUvZz.js';
 export { a as SekiSonner, S as SekiSonnerElement } from './p-D4LyQFQp.js';
 
 /**

package/dist/{cdn/p-DZc1uUPr.js → components/p-B7jKUvZz.js}

@@ -22,10 +22,10 @@ const SekiLabel = /*@__PURE__*/ proxyCustomElement(class SekiLabel extends H {
     }
     render() {
         const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: '466532427202f522784c29f0c05044e5730686bb', part: "label" }, labelProps, { class: {
+        return (h("label", Object.assign({ key: 'df80b45752def839bec876b26d32861f31404f55', part: "label" }, labelProps, { class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: 'bda42de9d580700d6865d6c19a15a8fd53aa12f4' }), this.required && h("span", { key: 'bb929cf661b25fd432d07891314b63420e5dabf4', class: "seki-label__required" }, " *")));
+            } }), h("slot", { key: '2ce1883422648de0ca9da12706a55c9749c5407f' }), this.required && h("span", { key: '2e89edc35b776623fb0f9203744c6a1adb8cd20f', class: "seki-label__required" }, " *")));
     }
     get el() { return this; }
     static get style() { return sekiLabelCss; }