@sekiui/elements 0.0.82 → 0.0.83

package/dist/collection/components/navigation-menu/seki-navigation-menu-link.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiNavigationMenuLink {
     constructor() {
         // =========================================================================
@@ -68,19 +69,23 @@ export class SekiNavigationMenuLink {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu-content', ['data-mobile']);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.attrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.attrMirror = undefined;
     }
     render() {
         const hasDescription = Boolean(this.description);
-        return (h(Host, { key: '502ddacfbfbf646b1e59e14c61aeafdb6f88abfc', class: {
+        return (h(Host, { key: 'c42e571d96251b3d61a834145f9d6eb38e1cfef8', class: {
                 'navigation-menu-link': true,
                 'navigation-menu-link--active': this.active,
                 'navigation-menu-link--disabled': this.disabled,
                 'navigation-menu-link--in-content': this.isInContent,
                 'navigation-menu-link--with-description': hasDescription,
-            } }, h("a", { key: 'b51e731ebc66a823e3e3a4f8d5cab5b65f97f087', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
+            } }, h("a", { key: '2e7e4e32d5daaa7c1825a55c760574d2310c455f', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
     }
     static get is() { return "seki-navigation-menu-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.css

@@ -12,7 +12,7 @@
 }
 
 /* Mobile mode - vertical stack */
-:host-context(seki-navigation-menu.navigation-menu--mobile) .navigation-menu-list {
+:host([data-mobile]) .navigation-menu-list {
   flex-direction: column;
   align-items: stretch;
   gap: var(--seki-spacing-1, 0.25rem);

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiNavigationMenuList {
     constructor() {
         /** Whether in mobile mode */
@@ -35,10 +36,14 @@ export class SekiNavigationMenuList {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu', ['data-mobile']);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
         this.cleanupKeyboardNavigation();
+        (_a = this.attrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.attrMirror = undefined;
     }
     setupKeyboardNavigation() {
         this.el.addEventListener('keydown', this.handleKeyDown);
@@ -101,7 +106,7 @@ export class SekiNavigationMenuList {
         this.focusedIndex = index;
     }
     render() {
-        return (h(Host, { key: '38071b4039c5dfadab5c58be53d02684825cdce2' }, h("ul", { key: '44553ecd9d84dcb380414da8cf3251213a7abdc1', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: 'e664d20108a1fa84918b4b14670c4f6c4c7fdaf4' }))));
+        return (h(Host, { key: '2a520ed90768d5a0c6bcb6b52932a0b116c3b7c2' }, h("ul", { key: '3cd848f8b7244d7a8d8666568e25c3c429006216', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '656955f05da5ba10935bb1bc184959d70a80bbd7' }))));
     }
     static get is() { return "seki-navigation-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-trigger.js

@@ -181,12 +181,12 @@ export class SekiNavigationMenuTrigger {
     }
     render() {
         const itemId = this.getItemId();
-        return (h(Host, { key: '9361deb1ef34c980f4ccff32037ffb53e972cf91', class: {
+        return (h(Host, { key: '789d1b9750888bff1da2b016c1493bf042b1f15a', class: {
                 'navigation-menu-trigger': true,
                 'navigation-menu-trigger--open': this.isOpen,
                 'navigation-menu-trigger--disabled': this.disabled,
                 'navigation-menu-trigger--mobile': this.isMobile,
-            } }, h("button", { key: '5736fd94663ff3b16d2770917a965538ef55cda1', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: 'fa626a6050e2ec49596d6c35ae2e7d211f6f41a2', class: "navigation-menu-trigger__label" }, h("slot", { key: '301f87d67ba40a52803bdabd8b92387f0303b44b' })), h("svg", { key: '9b4c4f91c5d3580e14b1ff1ac3f7fb6ea20cb4f5', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '9ca5be90f35f5757eeb7ea706505e83f59b221a9', points: "2 4 6 8 10 4" })))));
+            } }, h("button", { key: '2fa5384effaadc1e51612973155ddaa421d792f3', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: '9cc2a103012ef542c8f1563699ac77b34d53f773', class: "navigation-menu-trigger__label" }, h("slot", { key: 'b9f4157e7f304d93981ccfe5f09bc56d10301d81' })), h("svg", { key: '95691c157b5962295c01fed6f9735dbc7fbb5c74', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '7a60c1c69b70ab54ce9b2ad991bb0aea8a1c3c58', points: "2 4 6 8 10 4" })))));
     }
     static get is() { return "seki-navigation-menu-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -233,7 +233,7 @@ export class SekiNavigationMenuTrigger {
     static get events() {
         return [{
                 "method": "triggerActivate",
-                "name": "seki-trigger-activate",
+                "name": "sekiTriggerActivate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/navigation-menu/seki-navigation-menu.js

@@ -200,10 +200,10 @@ export class SekiNavigationMenu {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '92a88df19e0f9b8ca9f3e61d4ee2069ca4de88e6', class: {
+        return (h(Host, { key: '53d2661dfd58fa7309d2a0defc307b17dd55dbf3', class: {
                 'navigation-menu': true,
                 'navigation-menu--mobile': this.isMobile,
-            } }, h("nav", { key: '27723ddaff49efe3255ff27643bfaf773bb6587d', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+            }, "data-mobile": this.isMobile ? '' : undefined }, h("nav", { key: 'da9466f28b733cec9d795716bfb7b19cd3d24e3c', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
     }
     renderDesktopNav() {
         return [
@@ -309,7 +309,7 @@ export class SekiNavigationMenu {
     static get events() {
         return [{
                 "method": "menuOpen",
-                "name": "seki-menu-open",
+                "name": "sekiMenuOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -324,7 +324,7 @@ export class SekiNavigationMenu {
                 }
             }, {
                 "method": "menuClose",
-                "name": "seki-menu-close",
+                "name": "sekiMenuClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -339,7 +339,7 @@ export class SekiNavigationMenu {
                 }
             }, {
                 "method": "mobileToggle",
-                "name": "seki-mobile-toggle",
+                "name": "sekiMobileToggle",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/popover/seki-popover-content.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { computeAnchoredPosition } from "../../utils/positioning";
 /**
  * Popover content panel with positioning
  *
@@ -9,6 +10,14 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiPopoverContent {
     constructor() {
+        this.onPopoverOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (this._isOpen) {
+                requestAnimationFrame(() => this.updatePosition());
+            }
+        };
         /**
          * Offset from trigger
          */
@@ -32,18 +41,10 @@ export class SekiPopoverContent {
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for open changes
-        const popover = this.el.closest('seki-popover');
-        if (popover) {
-            popover.addEventListener('sekiOpenChange', () => {
-                var _a;
-                const context = this.getContext();
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (this._isOpen) {
-                    requestAnimationFrame(() => this.updatePosition());
-                }
-            });
-        }
+        this.popoverEl = (_a = this.el.closest('seki-popover')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.popoverEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -58,63 +59,15 @@ export class SekiPopoverContent {
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = this.contentRef.getBoundingClientRect();
-        const viewport = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
         const context = this.getContext();
         const side = (_b = (_a = this.side) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : 'bottom';
         const align = (_d = (_c = this.align) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.align) !== null && _d !== void 0 ? _d : 'center';
-        const offset = this.sideOffset;
-        // Calculate base position
-        let top = 0;
-        let left = 0;
-        // Side positioning
-        switch (side) {
-            case 'top':
-                top = triggerRect.top - contentRect.height - offset;
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + offset;
-                break;
-            case 'left':
-                left = triggerRect.left - contentRect.width - offset;
-                break;
-            case 'right':
-                left = triggerRect.right + offset;
-                break;
-        }
-        // Align positioning
-        if (side === 'top' || side === 'bottom') {
-            switch (align) {
-                case 'start':
-                    left = triggerRect.left + this.alignOffset;
-                    break;
-                case 'center':
-                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    left = triggerRect.right - contentRect.width + this.alignOffset;
-                    break;
-            }
-        }
-        else {
-            switch (align) {
-                case 'start':
-                    top = triggerRect.top + this.alignOffset;
-                    break;
-                case 'center':
-                    top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    top = triggerRect.bottom - contentRect.height + this.alignOffset;
-                    break;
-            }
-        }
-        // Viewport clamping
-        const margin = 8;
-        left = Math.max(margin, Math.min(left, viewport.width - contentRect.width - margin));
-        top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
+        const { top, left } = computeAnchoredPosition(triggerRect, contentRect, {
+            side,
+            align,
+            sideOffset: this.sideOffset,
+            alignOffset: this.alignOffset,
+        });
         this._position = { top: `${top}px`, left: `${left}px` };
         this._actualSide = side;
     }
@@ -122,7 +75,9 @@ export class SekiPopoverContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     render() {
         if (!this._isOpen) {

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

@@ -106,8 +106,13 @@ export class SekiPopover {
     setupClickOutside() {
         if (!this.closeOnOutsideClick)
             return;
-        // Use setTimeout to avoid immediate close from the same click that opened it
-        setTimeout(() => {
+        // Clear any pending timeout/handler first so a rapid open→close→open cannot
+        // leave a leaked listener or double-schedule.
+        this.removeClickOutside();
+        // Defer registration so the same click that opened the popover doesn't
+        // immediately close it.
+        this.clickOutsideTimeout = setTimeout(() => {
+            this.clickOutsideTimeout = undefined;
             this.clickOutsideHandler = (e) => {
                 const path = e.composedPath();
                 if (!path.includes(this.el)) {
@@ -118,6 +123,11 @@ export class SekiPopover {
         }, 0);
     }
     removeClickOutside() {
+        // Cancel a still-pending registration so it can't fire after close/disconnect.
+        if (this.clickOutsideTimeout !== undefined) {
+            clearTimeout(this.clickOutsideTimeout);
+            this.clickOutsideTimeout = undefined;
+        }
         if (this.clickOutsideHandler) {
             document.removeEventListener('click', this.clickOutsideHandler, { capture: true });
             this.clickOutsideHandler = undefined;
@@ -152,7 +162,7 @@ export class SekiPopover {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '7b968558f37aa4a7afae25a7d4dccf819157884b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b92504499e50da2607d298f295c6cbe48f582577', part: "popover", class: "popover" }, h("slot", { key: 'a130d9a553ce561c9dc64a3be26d890ed8f8271b' }))));
+        return (h(Host, { key: '31974618c7383783980511b55823a55bfe2dae1e', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f6bc040f29ba0ae30783407550928d3733ec1113', part: "popover", class: "popover" }, h("slot", { key: 'ffbb6edae291c99b941642f81ff8c7862d59525a' }))));
     }
     static get is() { return "seki-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-bar.css

@@ -787,11 +787,11 @@
 }
 
 /* Reduce size when both scrollbars present */
-:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation="vertical"]) {
+:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation="vertical"]) {
   height: calc(100% - 12px);
 }
 
-:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation="horizontal"]) {
+:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation="horizontal"]) {
   width: calc(100% - 12px);
 }
 
@@ -878,20 +878,20 @@
 }
 
 /* Visibility controlled by parent data-state */
-:host-context([data-state="hidden"]) {
+:host([data-state="hidden"]) {
   opacity: 0;
   pointer-events: none;
   transition: opacity 200ms ease-out;
 }
 
-:host-context([data-state="visible"]) {
+:host([data-state="visible"]) {
   opacity: 1;
   pointer-events: auto;
   transition: opacity 150ms ease-in;
 }
 
 /* Always show on hover regardless of state */
-:host-context(:hover) {
+:host([data-parent-hover]) {
   opacity: 1;
   pointer-events: auto;
 }

package/dist/collection/components/scroll-area/seki-scroll-bar.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 /**
  * Scroll Bar Component
  *
@@ -105,9 +106,10 @@ export class SekiScrollBar {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-scroll-area', ['data-state', 'data-has-vertical-overflow', 'data-has-horizontal-overflow'], { trackHover: true });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         unregisterThemeSync(this.el);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
@@ -115,6 +117,8 @@ export class SekiScrollBar {
         document.removeEventListener('touchend', this.handleTouchEnd);
         (_a = this.scrollAreaRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiScroll', this.scrollHandler);
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.attrMirror) === null || _c === void 0 ? void 0 : _c.disconnect();
+        this.attrMirror = undefined;
     }
     updateFromContext() {
         const context = this.getContext();

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

@@ -123,7 +123,17 @@ export class SekiSelect {
             return this.registeredOptions.filter(opt => opt.value === this.internalValue);
         };
         this.registerOption = (option) => {
-            this.registeredOptions = [...this.registeredOptions, option];
+            // Idempotent: replace in place if this value already exists (e.g. an option
+            // re-registering after a DOM move) so reconnects can't create duplicates.
+            const existingIndex = this.registeredOptions.findIndex(opt => opt.value === option.value);
+            if (existingIndex >= 0) {
+                const next = [...this.registeredOptions];
+                next[existingIndex] = option;
+                this.registeredOptions = next;
+            }
+            else {
+                this.registeredOptions = [...this.registeredOptions, option];
+            }
         };
         this.unregisterOption = (value) => {
             this.registeredOptions = this.registeredOptions.filter(opt => opt.value !== value);
@@ -163,6 +173,8 @@ export class SekiSelect {
         }
         // Expose context on the element for child components
         this.el.selectContext = this.selectContext;
+        // Seed the form value so an unchanged select still submits its initial value.
+        this.syncFormValue();
     }
     componentDidLoad() {
         // Expose context on the element for child components
@@ -202,10 +214,45 @@ export class SekiSelect {
     }
     handleInternalValueChange() {
         this.updateContextOnElement();
+        this.syncFormValue();
+    }
+    handleDisabledChange() {
+        this.syncFormValue();
     }
     updateContextOnElement() {
         this.el.selectContext = this.selectContext;
     }
+    /**
+     * Mirror the current selection into the associated form via ElementInternals.
+     * Replaces the previous hidden native control, which lived inside the shadow
+     * root and therefore never participated in form submission.
+     */
+    syncFormValue() {
+        if (!this.internals || typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        // Disabled controls do not contribute a value to the form.
+        if (this.disabled) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        if (this.multiple) {
+            const values = Array.isArray(this.internalValue) ? this.internalValue : [];
+            if (!this.name || values.length === 0) {
+                this.internals.setFormValue(null);
+                return;
+            }
+            const formData = new FormData();
+            for (const val of values) {
+                formData.append(this.name, String(val));
+            }
+            this.internals.setFormValue(formData);
+        }
+        else {
+            const value = this.internalValue;
+            this.internals.setFormValue(value === '' || value === undefined || value === null ? null : String(value));
+        }
+    }
     // ===========================
     // Methods
     // ===========================
@@ -268,29 +315,33 @@ export class SekiSelect {
         }
     }
     focusNextOption() {
-        if (this.registeredOptions.length === 0)
+        const options = this.registeredOptions;
+        if (options.length === 0)
             return;
-        let nextIndex = 0;
-        if (this.focusedOptionValue !== null) {
-            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
-            nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, this.registeredOptions.length - 1) : 0;
-        }
-        const nextOption = this.registeredOptions[nextIndex];
-        if (nextOption && !nextOption.disabled) {
-            this.handleOptionFocus(nextOption.value);
+        const currentIndex = this.focusedOptionValue !== null
+            ? options.findIndex(opt => opt.value === this.focusedOptionValue)
+            : -1;
+        // Walk forward to the next enabled option, skipping disabled ones.
+        for (let i = currentIndex + 1; i < options.length; i++) {
+            if (!options[i].disabled) {
+                this.handleOptionFocus(options[i].value);
+                return;
+            }
         }
     }
     focusPreviousOption() {
-        if (this.registeredOptions.length === 0)
+        const options = this.registeredOptions;
+        if (options.length === 0)
             return;
-        let prevIndex = this.registeredOptions.length - 1;
-        if (this.focusedOptionValue !== null) {
-            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
-            prevIndex = currentIndex > 0 ? currentIndex - 1 : this.registeredOptions.length - 1;
-        }
-        const prevOption = this.registeredOptions[prevIndex];
-        if (prevOption && !prevOption.disabled) {
-            this.handleOptionFocus(prevOption.value);
+        const currentIndex = this.focusedOptionValue !== null
+            ? options.findIndex(opt => opt.value === this.focusedOptionValue)
+            : options.length;
+        // Walk backward to the previous enabled option, skipping disabled ones.
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!options[i].disabled) {
+                this.handleOptionFocus(options[i].value);
+                return;
+            }
         }
     }
     addToSearchBuffer(char) {
@@ -339,19 +390,11 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '5a1333b70dd0f6cb4e02c42643cd21b89f896ceb' }, h("slot", { key: 'd67d8ebd047bb146f42a5ce73871324868235137' }), this.name && this.renderHiddenNativeElement()));
-    }
-    renderHiddenNativeElement() {
-        if (this.multiple) {
-            return (h("select", { class: "select-native", name: this.name, multiple: true, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1 }, Array.isArray(this.internalValue) &&
-                this.internalValue.map(val => (h("option", { value: val, selected: true }, val)))));
-        }
-        else {
-            return (h("input", { type: "hidden", class: "select-native", name: this.name, value: this.internalValue, required: this.required, disabled: this.disabled }));
-        }
+        return (h(Host, { key: '414bca44c784b5a965a1c1cd3fb92942cfdd9259' }, h("slot", { key: '8c623a8161b8140bedde29ea61845055d77ce44d' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select.css"]
@@ -549,7 +592,7 @@ export class SekiSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "maxVisiblePills": {
@@ -865,6 +908,10 @@ export class SekiSelect {
             }, {
                 "propName": "internalValue",
                 "methodName": "handleInternalValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/select-option/seki-select-option.js

@@ -9,9 +9,9 @@ export class SekiSelectOption {
         /** Whether the option is disabled */
         this.disabled = false;
         // ===========================
-        // State
+        // Lifecycle
         // ===========================
-        this.optionId = `option-${Math.random().toString(36).substr(2, 9)}`;
+        this.hasRegistered = false;
         // ===========================
         // Event Handlers
         // ===========================
@@ -44,21 +44,26 @@ export class SekiSelectOption {
         };
     }
     // ===========================
-    // Lifecycle
+    // State
     // ===========================
+    // Deterministic id so it matches the `option-${value}` reference that
+    // seki-select-trigger emits as aria-activedescendant. (Note: full
+    // cross-shadow IDREF resolution still requires the trigger and options to
+    // share a tree scope — see seki-select-trigger for the known limitation.)
+    get optionId() {
+        return `option-${this.value}`;
+    }
     componentDidLoad() {
-        var _a;
-        // Register this option with parent select
-        const selectContext = this.getSelectContext();
-        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
-            value: this.value,
-            label: displayLabel,
-            disabled: this.disabled,
-        });
+        this.registerWithParent();
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        // Re-register on reconnect (after a DOM move). componentDidLoad fires only
+        // once, so without this the option would stay unregistered after being moved.
+        // Parent registration is idempotent, so this never duplicates.
+        if (this.hasRegistered) {
+            this.registerWithParent();
+        }
     }
     disconnectedCallback() {
         unregisterThemeSync(this.el);
@@ -66,6 +71,17 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
     }
+    registerWithParent() {
+        var _a;
+        const selectContext = this.getSelectContext();
+        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
+            value: this.value,
+            label: displayLabel,
+            disabled: this.disabled,
+        });
+        this.hasRegistered = true;
+    }
     // ===========================
     // Helpers
     // ===========================
@@ -80,7 +96,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '8ba7a9bd8c4423bdc87237421bfed49ed485de7f' }, h("div", { key: 'cdeedf3061b3de0a12a56faccd56121fbcd4c7e3', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '902d9c4caa962efa60eeb697a0595764ca82d822', class: "option-label" }, h("slot", { key: 'd15a6dfa001e33df302e17847aeb4b63ef2ca9fa' })), isSelected && (h("span", { key: '708d5a9eaea23837e6a75df3ae86ae484367b477', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'c170f9b1a743ce16aeee0ced9b3b67836c4e2677', name: "selected-indicator" }, h("svg", { key: '230c202c463fbf5912ab900595135e5df69fd6ee', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cad9198c5e438617c840b1e8e97db69e1b5a5a85', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'd44cc7dd5f3cef1f9bf5d9395e70f6a4ae4488f1' }, h("div", { key: 'b2b69aa14e1c5863b29addf8e6a51350e09418f5', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '7bfb98702689ab1f7ca8933dbb45860de693e7c9', class: "option-label" }, h("slot", { key: '9cd5d99e31ddaae4aa672e59ac61e02961ab06d1' })), isSelected && (h("span", { key: '4e219961f27c4cf4c3cc674beac34f52f19e6836', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '9c2b4a5dc2b6ba6e115da3c311685bf1318fdb4b', name: "selected-indicator" }, h("svg", { key: '3b11d7c72d8bc5d24903c29e9f666df39809a518', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b482689f6e1c606d5ea2559cbf1befbcb552d9dc', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }