@sekiui/elements 0.0.88 → 0.1.0

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

@@ -19,51 +19,75 @@ import { syncTheme } from "../../utils/theme-sync";
  */
 export class SekiDrawer {
     constructor() {
+        /**
+         * Controlled open state. Also readable/writable as the `open` attribute, so
+         * `<seki-drawer open>` renders open with no script involved.
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         */
+        this.defaultOpen = false;
         /**
          * Internal state for drawer open/closed
          */
-        this.isOpen = false;
+        this._isOpen = false;
         /**
          * Current snap point (0-1)
          */
         this.currentSnapPoint = 1;
     }
+    componentWillLoad() {
+        this._isOpen = this.open || this.defaultOpen;
+        this.open = this._isOpen;
+        this.currentSnapPoint = this._isOpen ? 1 : 0;
+    }
+    componentDidLoad() {
+        this.updateContext();
+    }
+    handleOpenPropChange(newValue) {
+        // An outside assignment (`drawer.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this._isOpen)
+            return;
+        if (newValue) {
+            this.openDrawer();
+        }
+        else {
+            this.closeDrawer();
+        }
+    }
     /**
      * Opens the drawer
      */
-    async open() {
-        this.isOpen = true;
+    async openDrawer() {
+        this._isOpen = true;
+        this.open = true;
         this.currentSnapPoint = 1;
         this.updateContext();
         this.drawerOpen.emit();
+        this.sekiOpenChange.emit(true);
     }
     /**
      * Closes the drawer
      */
-    async close() {
-        this.isOpen = false;
+    async closeDrawer() {
+        this._isOpen = false;
+        this.open = false;
         this.currentSnapPoint = 0;
         this.updateContext();
         this.drawerClose.emit();
-    }
-    updateContext() {
-        // seki-drawer-content has no other way to know this drawer's open state —
-        // it reads this off the host element via closest('seki-drawer').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._drawerContext = { isOpen: this.isOpen };
-    }
-    componentDidLoad() {
-        this.updateContext();
+        this.sekiOpenChange.emit(false);
     }
     /**
      * Toggles the drawer
      */
-    async toggle() {
-        if (this.isOpen) {
-            await this.close();
+    async toggleDrawer() {
+        if (this._isOpen) {
+            await this.closeDrawer();
         }
         else {
-            await this.open();
+            await this.openDrawer();
         }
     }
     /**
@@ -71,37 +95,49 @@ export class SekiDrawer {
      */
     async snapTo(point) {
         if (point <= 0) {
-            await this.close();
+            await this.closeDrawer();
         }
         else {
             this.currentSnapPoint = point;
-            this.isOpen = true;
+            const wasOpen = this._isOpen;
+            this._isOpen = true;
+            this.open = true;
             this.updateContext();
+            if (!wasOpen) {
+                this.drawerOpen.emit();
+                this.sekiOpenChange.emit(true);
+            }
             this.drawerSnap.emit({ point });
         }
     }
+    updateContext() {
+        // seki-drawer-content has no other way to know this drawer's open state —
+        // it reads this off the host element via closest('seki-drawer').
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._drawerContext = { isOpen: this._isOpen };
+    }
     handleTriggerClick() {
-        this.toggle();
+        this.toggleDrawer();
     }
     handleRequestClose() {
-        this.close();
+        this.closeDrawer();
     }
     handleRequestSnap(event) {
         this.snapTo(event.detail.point);
     }
     handleKeydown(ev) {
-        if (this.isOpen && ev.key === 'Escape') {
-            this.close();
+        if (this._isOpen && ev.key === 'Escape') {
+            this.closeDrawer();
         }
     }
     connectedCallback() {
         syncTheme(this.el);
     }
     render() {
-        return (h("div", { key: '7ae3c36bf05c4e2d9957083912da105b559a47e6', class: {
+        return (h("div", { key: '824d218c42cd41a0a79bef604e940f6c95a64470', class: {
                 'seki-drawer': true,
-                'seki-drawer--open': this.isOpen,
-            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '6ef97e42496716b572d85d460dc25b63fdb8ff56' }), this.isOpen && (h("div", { key: 'fd17a0aa91fbd193a47ac1449eb85e6b972fe586', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.close() }))));
+                'seki-drawer--open': this._isOpen,
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '26982c14006c01915390898306d79fa665e30463' }), this._isOpen && (h("div", { key: 'a0f90520c0deaa5c320bbc027ca5b6a4edc4d9ff', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
     }
     static get is() { return "seki-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -115,9 +151,53 @@ export class SekiDrawer {
             "$": ["seki-drawer.css"]
         };
     }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state. Also readable/writable as the `open` attribute, so\n`<seki-drawer open>` renders open with no script involved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
-            "isOpen": {},
+            "_isOpen": {},
             "currentSnapPoint": {}
         };
     }
@@ -167,11 +247,26 @@ export class SekiDrawer {
                     "resolved": "{ point: number; }",
                     "references": {}
                 }
+            }, {
+                "method": "sekiOpenChange",
+                "name": "sekiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the open state changes. Matches the dialog/popover/collapsible\nevent shape so a consumer can listen to one event name across every overlay."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
-            "open": {
+            "openDrawer": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -188,7 +283,7 @@ export class SekiDrawer {
                     "tags": []
                 }
             },
-            "close": {
+            "closeDrawer": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -205,7 +300,7 @@ export class SekiDrawer {
                     "tags": []
                 }
             },
-            "toggle": {
+            "toggleDrawer": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -246,6 +341,12 @@ export class SekiDrawer {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "triggerClick",

package/dist/collection/components/hover-card/seki-hover-card.js

@@ -54,6 +54,17 @@ export class SekiHoverCard {
          * @default false
          */
         this.disabled = false;
+        /**
+         * Controlled open state. Reflects to the `open` attribute, so
+         * `<seki-hover-card open>` renders open with no script involved.
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         * @default false
+         */
+        this.defaultOpen = false;
         /**
          * Internal open state
          */
@@ -114,6 +125,20 @@ export class SekiHoverCard {
             }
         };
     }
+    componentWillLoad() {
+        // `disabled` wins over a requested initial open state.
+        this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
+        this.open = this._isOpen;
+    }
+    openChanged(newValue) {
+        // An outside assignment (`card.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this._isOpen)
+            return;
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(newValue);
+    }
     disabledChanged(newValue) {
         if (newValue && this._isOpen) {
             this.setOpen(false);
@@ -123,9 +148,17 @@ export class SekiHoverCard {
      * Set the open state and emit change event
      */
     setOpen(open) {
-        if (this._isOpen === open)
+        if (open && this.disabled) {
+            // Keep the reflected prop honest when an open request is refused.
+            this.open = false;
             return;
+        }
+        if (this._isOpen === open) {
+            this.open = open;
+            return;
+        }
         this._isOpen = open;
+        this.open = open;
         this.updateContext();
         this.sekiOpenChange.emit({ open });
         if (open) {
@@ -135,6 +168,22 @@ export class SekiHoverCard {
             this.removeScrollListener();
         }
     }
+    /**
+     * Open the hover card immediately, skipping `openDelay`
+     */
+    async openHoverCard() {
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(true);
+    }
+    /**
+     * Close the hover card immediately, skipping `closeDelay`
+     */
+    async closeHoverCard() {
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(false);
+    }
     /**
      * Close the hover card immediately and focus the trigger
      */
@@ -233,7 +282,7 @@ export class SekiHoverCard {
         this.removeScrollListener();
     }
     render() {
-        return (h(Host, { key: '228ce747491865bdc97fdef9b6da751f5833c588', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '777dade24e948b0e8ed21ebfa9595beb33fdf7a9', class: "hover-card" }, h("slot", { key: 'e5db3d1887de0241a95a7529aa3c5cb8d9c79ed2' }))));
+        return (h(Host, { key: '2a5bed9d9abe8647cdbd202d97984a05c8bb9eb1', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c3f1e0be795cea7a59c08d2a341c7a40d8754e04', class: "hover-card" }, h("slot", { key: '0021d9d0ede67170a903db785c6b334ffc5aaba7' }))));
     }
     static get is() { return "seki-hover-card"; }
     static get encapsulation() { return "shadow"; }
@@ -375,6 +424,52 @@ export class SekiHoverCard {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controlled open state. Reflects to the `open` attribute, so\n`<seki-hover-card open>` renders open with no script involved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
             }
         };
     }
@@ -401,9 +496,50 @@ export class SekiHoverCard {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "openHoverCard": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the hover card immediately, skipping `openDelay`",
+                    "tags": []
+                }
+            },
+            "closeHoverCard": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the hover card immediately, skipping `closeDelay`",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"
             }];

package/dist/collection/components/select-content/seki-select-content.css

@@ -816,6 +816,14 @@
   min-width: 100%;
 }
 
+/* Hides the listbox (and, since it's no longer un-slotted, every option
+   inside it) while closed. See the comment on render()'s Host class in
+   seki-select-content.tsx for why this replaced a conditional `return null`.
+   Mirrors seki-combobox-content.css's identical :host(.hidden) rule. */
+:host(.hidden) {
+  display: none;
+}
+
 .content-container {
   background: var(--seki-select-content-bg);
   border: var(--seki-select-content-border);

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

@@ -52,11 +52,14 @@ export class SekiSelectContent {
     /**
      * Accessible name for the listbox.
      *
-     * It cannot borrow the trigger's name via aria-labelledby: the trigger's
-     * combobox and this listbox live in separate shadow roots, and IDREFs do not
-     * resolve across tree scopes. So the name is mirrored down as a literal
-     * string instead. An aria-labelledby on the <seki-select> host *can* be
-     * resolved here, because the host and its label sit in the same tree.
+     * As of #300, seki-select-trigger and this listbox render in the same real
+     * DOM tree scope (scoped, non-shadow mode), so an aria-labelledby pointing
+     * back at the trigger's combobox would technically resolve now. Kept as a
+     * mirrored literal string anyway — simpler and more robust than a live
+     * cross-component id reference, and it avoids coupling this component's
+     * accessible name to the trigger's specific DOM shape. An aria-labelledby
+     * on the <seki-select> host *can* still be resolved here, because the host
+     * and its label sit in the same tree (unchanged).
      */
     getAccessibleName(selectContext) {
         var _a, _b, _c;
@@ -81,16 +84,22 @@ export class SekiSelectContent {
             return null;
         }
         const isOpen = selectContext.open;
-        // Lazy rendering - only render when open
-        if (!isOpen) {
-            return null;
-        }
         const parent = this.el.closest('seki-select');
         const maxHeight = (parent === null || parent === void 0 ? void 0 : parent.maxHeight) || '12.5rem';
-        return (h(Host, null, h("div", { class: "content-container", role: "listbox", id: selectContext.contentId, "aria-label": this.getAccessibleName(selectContext), "aria-multiselectable": selectContext.multiple ? 'true' : undefined }, h("div", { ref: (el) => (this.scrollContainerRef = el), class: "content-scroll", style: { maxHeight } }, h("slot", null)))));
+        // Always render, hiding via CSS instead of `return null` when closed (the
+        // seki-combobox-content pattern this mirrors). Under shadow DOM this used
+        // to conditionally return null and rely on the browser's own behavior of
+        // never rendering un-slotted light-DOM children — with no <slot> to
+        // assign them to, the options were simply invisible. Scoped (non-shadow)
+        // mode has no such mechanism: each seki-select-option still renders its
+        // own role="option" div regardless of whether a parent slot exists for
+        // it, so returning null here left every option fully visible — and
+        // interactable — even while "closed" (#300 e2e regression). See
+        // :host(.hidden) in seki-select-content.css.
+        return (h(Host, { class: { hidden: !isOpen } }, h("div", { class: "content-container", role: "listbox", id: selectContext.contentId, "aria-label": this.getAccessibleName(selectContext), "aria-multiselectable": selectContext.multiple ? 'true' : undefined }, h("div", { ref: (el) => (this.scrollContainerRef = el), class: "content-scroll", style: { maxHeight } }, h("slot", null)))));
     }
     static get is() { return "seki-select-content"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-content.css"]

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

@@ -15,10 +15,10 @@ export class SekiSelectGroup {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: 'e221fca22d8e6fdf3addd112fb08afe46cf888ce' }, h("div", { key: '365fe2f5ed8990ebb80d41904a2cc79534567f9f', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'd2c7e82bf5cb0c3cd108d8428e44c8d1654f77a4', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '0a6737c20344303ce09bab49d0c1fe913f29a216', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'a492f1b53627832fdb1b801b4115f2d4954f30f0', name: "label" }, this.label)), h("div", { key: 'eef01caf57f171ab6ce6ac66840c1cb4fc995a79', class: "group-options" }, h("slot", { key: 'fdb252d3a0e2e75e863104a66469cff17730e0ce' })))));
+        return (h(Host, { key: 'e1cb8d09575a3851c93f823623cd9331be3e96cc' }, h("div", { key: 'ddb385f0668bb61461f9e5121be9b8394218b629', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'de153ac27303e514ab3f6c85547809523b41584a', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'f8e67ce663167d38ff6432b704abec5631c5d52c', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '622315b7efb3aafc12b93f0b0bbf32a22292c95b', name: "label" }, this.label)), h("div", { key: 'beb13a0aeac5543fb9dcde5da98caf81d92a23e2', class: "group-options" }, h("slot", { key: '8919337fddfeb602538eaca3914a1e4bb36c65ee' })))));
     }
     static get is() { return "seki-select-group"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-group.css"]

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -15,19 +16,20 @@ export class SekiSelectOption {
         this.hasRegistered = false;
         this.contextSubscription = { parent: null, unsubscribe: () => { } };
         /**
-         * Refresh aria-selected/data-selected/data-focused directly on the shadow
-         * DOM whenever the parent's value/focus state changes post-mount. This is
-         * applied imperatively rather than through a Stencil @State bump + render()
+         * Refresh aria-selected/data-selected/data-focused directly on the
+         * rendered DOM whenever the parent's value/focus state changes post-mount.
+         * This is applied imperatively rather than through a Stencil @State bump +
+         * render()
          * — a component that reads a parent's state via closest() + an
          * addEventListener callback and relies on render() re-invoking to reflect
          * it is a confirmed-unreliable shape in this codebase (#244). Mutating the
-         * shadow DOM directly here side-steps that entirely.
+         * DOM directly here side-steps that entirely.
          */
         this.handleParentContextChange = () => {
-            var _a;
-            const optionEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option');
+            const optionEl = this.el.querySelector('.option');
             if (!optionEl)
                 return;
+            optionEl.id = this.optionId;
             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;
@@ -75,15 +77,21 @@ export class SekiSelectOption {
     // ===========================
     // State
     // ===========================
-    // Deterministic id, scoped to this option's own shadow root. seki-select-trigger
-    // no longer references it via aria-activedescendant (see #292 — the id lives in
-    // a different tree scope than the trigger's button, so that IDREF could never
-    // resolve); kept for scrollToOption() and as a stable hook for tests/consumers.
+    // Real, page-scoped DOM id as of #300 (scoped, non-shadow rendering) —
+    // seki-select-trigger's aria-activedescendant references this directly, so
+    // it must stay collision-free across multiple <seki-select> instances on
+    // one page. Prefixed with the parent select's own randomized contentId via
+    // buildOptionId (shared with seki-select-trigger so both compute the exact
+    // same string); falls back to the literal string 'select' if no parent
+    // context is available yet (e.g. before componentDidLoad registers it).
     get optionId() {
-        return `option-${this.value}`;
+        var _a;
+        const selectContext = this.getSelectContext();
+        return buildOptionId((_a = selectContext === null || selectContext === void 0 ? void 0 : selectContext.contentId) !== null && _a !== void 0 ? _a : 'select', this.value);
     }
     componentDidLoad() {
         this.registerWithParent();
+        this.refreshOptionId();
         this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentContextChange);
     }
     connectedCallback() {
@@ -101,6 +109,17 @@ export class SekiSelectOption {
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
         this.contextSubscription.unsubscribe();
     }
+    // If render() ran before the parent's selectContext was available (see the
+    // 'select' fallback in optionId's getter above), the DOM id was baked in as
+    // a non-unique placeholder. componentDidLoad and every later context change
+    // both call this to correct it once the real contentId is known — cheap
+    // because it's just an attribute write, not a structural re-render.
+    refreshOptionId() {
+        const optionEl = this.el.querySelector('.option');
+        if (optionEl) {
+            optionEl.id = this.optionId;
+        }
+    }
     registerWithParent() {
         var _a;
         const selectContext = this.getSelectContext();
@@ -126,10 +145,10 @@ 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: '0b45512c5e13b194e043e47fb5b45706e17742f6' }, h("div", { key: '500cf182ac44ea1fced2d7bb095bed0300140fe2', 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: '5760df03485c8a319df0f47e11e7812daf975b90', class: "option-label" }, h("slot", { key: 'e8f30da45607a6ac80c4091e33109134e1860d62' })), h("span", { key: '59646b48367babc22ef134f298194fde8a493085', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '7729ba2b454001bb5d71f5c3af7aaf2702999df2', name: "selected-indicator" }, h("svg", { key: 'ac6b0035fae24b5532e6c14ee2339b618abcb1e8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ec5d88d49bd03bbafde5a7bfcd746665cd5e02c6', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '5e81a06da7048aeea965ec7a1f3be01c38610b14' }, h("div", { key: '3129f00c2f8be28153ea68d4ad3552d5fe5babf2', 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: 'fa3daec06f3f25a8339cde8ed9e19778bec0f515', class: "option-label" }, h("slot", { key: 'd778727c4ad82c8b155c6157b2f2c13f7b20bd56' })), h("span", { key: 'a0103ece80cb3a52cf1aa0afaaab801093fa9118', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '6d17a76a97fec448881f315bfbd41714604325f5', name: "selected-indicator" }, h("svg", { key: '1b4066f6025db32d6d0e9c4c6e3cc6ee12844631', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c60be1174d75bc7f6f96e87d6f90a1ba4185d43e', 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"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-option.css"]

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -124,12 +125,14 @@ export class SekiSelectTrigger {
         }
         const isOpen = selectContext.open;
         const isDisabled = selectContext.disabled;
-        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
+        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
+                ? buildOptionId(selectContext.contentId, selectContext.focusedOptionValue)
+                : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
             ? this.renderMultiValue(selectContext)
             : this.renderSingleValue(selectContext), h("svg", { class: "trigger-chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "seki-select-trigger"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-trigger.css"]