@sekiui/elements 0.0.88 → 0.1.1

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,11 +148,19 @@ 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 });
+        this.sekiOpenChange.emit(open);
         if (open) {
             this.setupScrollListener();
         }
@@ -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: '23c73aa997f26586621e616361279663c7d6f52a', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'beb5e0101353f32b2e706edd6b2caa8c9526c35f', class: "hover-card" }, h("slot", { key: 'e61dfec60b816e957d30e9d6504fb2f905cfb9e3' }))));
     }
     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"
             }
         };
     }
@@ -392,18 +487,59 @@ export class SekiHoverCard {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when open state changes"
+                    "text": "Emitted when open state changes. `detail` is the new open state as a\nbare boolean, matching every other `sekiOpenChange` in the library."
                 },
                 "complexType": {
-                    "original": "{ open: boolean }",
-                    "resolved": "{ open: boolean; }",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }];
     }
+    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/resizable/seki-resizable-handle.js

@@ -1,6 +1,7 @@
 // src/components/resizable/seki-resizable-handle.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
  * Resizable handle - draggable divider between panels
  *
@@ -21,6 +22,7 @@ export class SekiResizableHandle {
         this._direction = 'horizontal';
         this.startPosition = 0;
         this.groupElement = null;
+        this.contextSubscription = null;
         this.handleDirectionChange = () => {
             const context = this.getContext();
             if (context) {
@@ -82,14 +84,21 @@ export class SekiResizableHandle {
             this.groupElement = group;
             group.addEventListener('sekiDirectionChange', this.handleDirectionChange);
         }
+        // Pick up the direction once the group publishes its context, which may be
+        // after this handle loaded in the per-tag custom-elements build.
+        this.contextSubscription = subscribeToContextChange(this.el, 'seki-resizable-panel-group', this.handleDirectionChange);
+        this.handleDirectionChange();
     }
     connectedCallback() {
         syncTheme(this.el);
     }
     disconnectedCallback() {
+        var _a;
         if (this.groupElement) {
             this.groupElement.removeEventListener('sekiDirectionChange', this.handleDirectionChange);
         }
+        (_a = this.contextSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.contextSubscription = null;
     }
     handleKeyDown(event) {
         if (this.disabled)
@@ -157,13 +166,13 @@ export class SekiResizableHandle {
     }
     render() {
         const isHorizontal = this._direction === 'horizontal';
-        return (h(Host, { key: 'f57bd8dbeadc3b60bfe1b949e5b0eaa64cabf8e3' }, h("div", { key: '7e753102f4e9f175e23aa2539d2bd61a44e7a0e0', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
+        return (h(Host, { key: '567e976a7d1d4b1fedf048ff9a7596c2f91c1872' }, h("div", { key: 'ec73f064616fd898f17cbf01b99af34788c7530f', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
                 'resizable-handle': true,
                 'resizable-handle--horizontal': isHorizontal,
                 'resizable-handle--vertical': !isHorizontal,
                 'resizable-handle--disabled': this.disabled,
                 'resizable-handle--dragging': this._isDragging,
-            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'b2481ae202d7c569c94b4ebbadb2e970f00350fc', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '88d2b6c7169b11809053b63c1983245ca268fc27', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '7af4ef76e00f3b7ebf3b0f8ec25c1949254ce4b3', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'a52a1f74aba04567eca82dd84a1d289d093b960e', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'a5db8c4c9f72a9f3ce1940e3c336f36bedc503c2', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '34e4356b00d9aec99f4d5da29036352e5e43f013', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '17ce1db6add8788fead03b9c97113a262b725c17', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'edccbc8dad1a053a55cba85cf8a0b939d319a6b8', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '5d95d8b187d2992bc9d55a08fe3dd034fda9474a', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '149ff3d7f9ba53b1715ec4867b72ad4d941a3972', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'e3054a34cbc71079c006864adb10fce7fa338507', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: 'de3899676f375377fb558dea1bb645f0d0e70388', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'e9c55beb3bc0039c9cd6562aa8e936d4dcfafdb2', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'f7ebf6269df4d7e88b2c903ec922666a06a594d7', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'beedd6149812012e9d5b32f3dd77f120aa0e0859', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '9b42b8fb2e0e502e8195b520a08a760dc27a9eaa', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '12d0dd2597037340c94792be04f82e5745ba20de', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '12227cd7aed5dd71c26133e57e4dd9bb72efb88b', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'f0951f2f445e06af2419f6f4d56d008aed9c5316', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '57e3b554bab80ce435e77722957fae11e4c29192', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
     }
     static get is() { return "seki-resizable-handle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel-group.js

@@ -1,6 +1,7 @@
 // src/components/resizable/seki-resizable-panel-group.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { publishContext } from "../../utils/context-bridge";
 const STORAGE_KEY_PREFIX = 'seki-resizable:';
 function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
@@ -247,7 +248,7 @@ export class SekiResizablePanelGroup {
         this.restoreLayout();
     }
     updateContext() {
-        this._resizableContext = {
+        const context = {
             direction: this.direction,
             disabled: this.disabled,
             registerPanel: this.registerPanel,
@@ -260,6 +261,10 @@ export class SekiResizablePanelGroup {
             isCollapsed: this.isCollapsed,
             getHandleIndex: this.getHandleIndex,
         };
+        this._resizableContext = context;
+        // Publish on the host so children reach it via closest() in every build,
+        // and notify any child that mounted before this group was defined.
+        publishContext(this.el, '_resizableContext', context, this.contextChange);
     }
     emitLayoutChange() {
         const sizes = this._panelOrder.map((id) => { var _a, _b; return (_b = (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0; });
@@ -311,11 +316,11 @@ export class SekiResizablePanelGroup {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '1d6170c745798c0608abae51b7d2bbbf51b10f99' }, h("div", { key: '517e36739e6857b55d9719f191f4cb0695ca5aaa', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '4050d03c828d3bd09ddd73ab9009b81ffcb2a2cd' }, h("div", { key: '148dba7f6173a023c861cfdd49e626773e317c23', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: '66621ac830e9e164ad833b58124504df9812c930' }))));
+            } }, h("slot", { key: '076d2200fad74c84d01970985d443a8cdd7d00ff' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }
@@ -429,6 +434,21 @@ export class SekiResizablePanelGroup {
                     "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: fired whenever `_resizableContext` is (re)published so panels and\nhandles that mounted before this group was defined can register late.\nSee utils/context-bridge.ts \u2014 no payload by design."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -1,6 +1,7 @@
 // src/components/resizable/seki-resizable-panel.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { subscribeToContextChange } from "../../utils/context-bridge";
 let panelIdCounter = 0;
 /**
  * Resizable panel - individual content panel with size constraints
@@ -31,9 +32,35 @@ export class SekiResizablePanel {
         this.collapsedSize = 0;
         this._size = 0;
         this._isCollapsed = false;
+        this.hasRegistered = false;
+        this.contextSubscription = null;
         this.handleLayoutChange = () => {
             this.updateSize();
         };
+        /**
+         * The group publishes its context when *it* loads, which in the per-tag
+         * custom-elements build can be after this panel's componentWillLoad. Register
+         * whenever the context is (re)published; the group ignores duplicates.
+         */
+        this.handleParentContextChange = () => {
+            this.registerWithGroup();
+            this.updateSize();
+        };
+    }
+    registerWithGroup() {
+        if (this.hasRegistered)
+            return;
+        const context = this.getContext();
+        if (!context)
+            return;
+        context.registerPanel(this.panelId, {
+            defaultSize: this.defaultSize,
+            minSize: this.minSize,
+            maxSize: this.maxSize,
+            collapsible: this.collapsible,
+            collapsedSize: this.collapsedSize,
+        });
+        this.hasRegistered = true;
     }
     getContext() {
         const group = this.el.closest('seki-resizable-panel-group');
@@ -42,16 +69,7 @@ export class SekiResizablePanel {
     }
     componentWillLoad() {
         this.panelId = `panel-${++panelIdCounter}`;
-        const context = this.getContext();
-        if (context) {
-            context.registerPanel(this.panelId, {
-                defaultSize: this.defaultSize,
-                minSize: this.minSize,
-                maxSize: this.maxSize,
-                collapsible: this.collapsible,
-                collapsedSize: this.collapsedSize,
-            });
-        }
+        this.registerWithGroup();
     }
     componentDidLoad() {
         const group = this.el.closest('seki-resizable-panel-group');
@@ -59,34 +77,38 @@ export class SekiResizablePanel {
             this.groupElement = group;
             group.addEventListener('sekiLayoutChange', this.handleLayoutChange);
         }
+        this.contextSubscription = subscribeToContextChange(this.el, 'seki-resizable-panel-group', this.handleParentContextChange);
+        this.registerWithGroup();
         this.updateSize();
     }
     connectedCallback() {
         syncTheme(this.el);
+        // Re-register after a DOM move; componentWillLoad only fires once.
+        if (this.panelId)
+            this.registerWithGroup();
     }
     disconnectedCallback() {
+        var _a;
         // Remove event listener to prevent memory leak
         if (this.groupElement) {
             this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
         }
+        (_a = this.contextSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.contextSubscription = null;
         // Unregister panel from group
         const context = this.getContext();
         if (context) {
             context.unregisterPanel(this.panelId);
         }
+        this.hasRegistered = false;
     }
     handleConstraintChange() {
         const context = this.getContext();
         if (context) {
             // Re-register with new constraints
             context.unregisterPanel(this.panelId);
-            context.registerPanel(this.panelId, {
-                defaultSize: this.defaultSize,
-                minSize: this.minSize,
-                maxSize: this.maxSize,
-                collapsible: this.collapsible,
-                collapsedSize: this.collapsedSize,
-            });
+            this.hasRegistered = false;
+            this.registerWithGroup();
         }
     }
     updateSize() {
@@ -144,14 +166,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '6b53e0ef0f75bbde83bb9e318a55ab8261498737', style: {
+        return (h(Host, { key: '69f32198c8537b16e91222dcfcbb23c18dc37782', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: 'dd9e5c4165ed0e65aa5949373871240fdacd3e44', part: "panel", role: "region", class: {
+            } }, h("div", { key: 'f45c47381a87eca45473a2da2a035bbff4c1b745', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '230de96b3ac24f7f0bbd470bf92d91e43a56f374' }))));
+            } }, h("slot", { key: '1f9f46fd08e315a79cc806b72c56a450c75c7ed5' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class SekiSelect {
                 this.hasBeenActivated = true;
             }
             // Emit event
-            this.sekiOpenChange.emit({ open });
+            this.sekiOpenChange.emit(open);
             // Validate on close if required
             if (!open && this.required && this.hasBeenActivated) {
                 this.validateRequired();
@@ -396,7 +396,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '4a9f13dc6746a13b0b99bf03b8092d48ab475677' }, h("slot", { key: '9c49228973bc8e62ec2129c5c3f72fadf608081f' })));
+        return (h(Host, { key: 'd89c2754151f8faf545b616b5dce64b4dbbfd1a4' }, h("slot", { key: 'b5bf2a24deed68b33849b9fbcb6b091297885367' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -767,18 +767,12 @@ export class SekiSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when dropdown open state changes"
+                    "text": "Emitted when dropdown open state changes; `detail` is the new open state as a bare boolean"
                 },
                 "complexType": {
-                    "original": "SelectOpenChangeEventDetail",
-                    "resolved": "SelectOpenChangeEventDetail",
-                    "references": {
-                        "SelectOpenChangeEventDetail": {
-                            "location": "import",
-                            "path": "../../utils/select",
-                            "id": "src/utils/select/index.ts::SelectOpenChangeEventDetail"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 }
             }, {
                 "method": "sekiValidate",

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"]