@sekiui/elements 0.1.3 → 0.1.5

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Popover component - floating content triggered by click
  *
@@ -40,19 +42,41 @@ export class SekiPopover {
          * Internal open state
          */
         this._isOpen = false;
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen && this.closeOnEscape) {
+                    event.preventDefault();
+                    this.closePopover();
+                }
+            },
+        });
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so `<seki-popover open>` /
+        // `<seki-popover default-open>` show their content at first paint (#323).
+        this.publish();
     }
     openChanged(newValue) {
-        this._isOpen = newValue;
-        if (this._isOpen) {
-            this.setupClickOutside();
+        // Route prop assignments through the same path as the methods so the
+        // context is refreshed and sekiOpenChange fires (#323). Both methods are
+        // no-ops when the state already matches, which also stops the re-entrant
+        // Watch call caused by their own `this.open = ...` write.
+        if (newValue) {
+            this.openPopover();
         }
         else {
-            this.removeClickOutside();
+            this.closePopover();
         }
     }
+    placementChanged() {
+        this.publish();
+    }
     /**
      * Open the popover
      */
@@ -61,8 +85,7 @@ export class SekiPopover {
             return;
         this._isOpen = true;
         this.open = true;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._popoverContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(true);
         this.setupClickOutside();
     }
@@ -74,8 +97,7 @@ export class SekiPopover {
             return;
         this._isOpen = false;
         this.open = false;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._popoverContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(false);
         this.removeClickOutside();
     }
@@ -96,12 +118,6 @@ export class SekiPopover {
     handleCloseRequest() {
         this.closePopover();
     }
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape' && this.closeOnEscape) {
-            event.preventDefault();
-            this.closePopover();
-        }
-    }
     setupClickOutside() {
         if (!this.closeOnOutsideClick)
             return;
@@ -142,22 +158,23 @@ export class SekiPopover {
             toggle: () => this.togglePopover(),
         };
     }
+    publish() {
+        publishContext(this.el, '_popoverContext', this.getContext(), this.popoverContextChange);
+    }
     componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._popoverContext = this.getContext();
         if (this._isOpen) {
             this.setupClickOutside();
         }
     }
-    componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._popoverContext = this.getContext();
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
     }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '71589105568f5d02366dce8eaf6f8f6bcb77c16d', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '20bc4dba4bb88869efaf714cf8be48cad3fd8663', part: "popover", class: "popover" }, h("slot", { key: 'd52a7e1d303cdb0861db203d823bff193d8c30c7' }))));
+        return (h(Host, { key: '428f4dd66a23e7b14f04c90129f92a62219ff4e4', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b11b34b8b4dd3d7d45d87647687c8f48c421aebc', part: "popover", class: "popover" }, h("slot", { key: '40385e1965f28c37318ba5656d8a0ffaa873d4ca' }))));
     }
     static get is() { return "seki-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -348,6 +365,21 @@ export class SekiPopover {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "popoverContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies popover parts that `_popoverContext` changed. Not part\nof the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -410,6 +442,12 @@ export class SekiPopover {
         return [{
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "side",
+                "methodName": "placementChanged"
+            }, {
+                "propName": "align",
+                "methodName": "placementChanged"
             }];
     }
     static get listeners() {
@@ -425,12 +463,6 @@ export class SekiPopover {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -66,7 +66,7 @@ export class SekiProgress {
         const state = this.getState();
         const percentage = this.getPercentage();
         const isIndeterminate = state === 'indeterminate';
-        return (h("div", { key: '50654fb987c08ffbb70070bcdd4de6ad2cfcee40', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '5f7763f0ed0eaa4d30abe034595a5bc84d9dbd81', class: {
+        return (h("div", { key: '6605ec4cd3b8cefa6d7c98e825bf02058fe2f33f', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '27c3a1316fb44a8a663b1f4e7f67d5757e0e9c8e', class: {
                 'seki-progress__indicator': true,
                 'seki-progress__indicator--indeterminate': isIndeterminate,
             }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {

package/dist/collection/components/radio-group/seki-radio-group-item.js

@@ -47,7 +47,7 @@ export class SekiRadioGroupItem {
     }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'eeb5fc7e9ca03c9abd46c416841ceea3f8f0e02a', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '68df8ecdc6e2b0fa9815ee41c3b15141275db38e', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '8716c8b1bf4169f1035a86d8a46eb218377d4baf', class: "indicator", part: "indicator" })))));
+        return (h(Host, { key: 'd1a1c231c0125135ff2d5b994136549a017f50a1', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'bc514d9ff7aec4d8024f4c617dedcb92f7b9f3de', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: 'b01d0d5652684152de16e1dfd88d65aa44976a0d', class: "indicator", part: "indicator" })))));
     }
     static get is() { return "seki-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -180,7 +180,7 @@ export class SekiRadioGroup {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: '68c46542431391dbffba9ca0186a99a9a308da61', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '5e688548a968a174bba849ba10dc312922964e45' })));
+        return (h(Host, { key: 'd0bc24b9a623cd6ef420fcf1665e23d9d8952680', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '8ea91aeda0738ed3a9b9232ddd28e6f924714a7e' })));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -162,13 +162,13 @@ export class SekiResizableHandle {
     }
     render() {
         const isHorizontal = this._direction === 'horizontal';
-        return (h(Host, { key: '145ee501547445a33ab122d557aaca1770cc7b40' }, h("div", { key: '260ca91d58689d7fdbb60f8a33ec1f5d8cc9b12a', 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: 'b09b62418c7022dea8d557a0424f9144a3a328ab' }, h("div", { key: '3ce823970f32a942edbffaf208b01ee8ec94cb7b', 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: '945a41b12735498d94c2912ff8f72022ef4f5258', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: 'f3803a9e896066c700b9e2afa2fb08ce14c06d4f', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '403ab8afad382406c7db05bee2e6103cc803f4b1', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '120cf0754a4741e94abef7f2d3dcc4a04e35ffc3', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '31a281a5b2a90698f82ac6d5e23892ba4b07ccbc', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '198294e622959f3022f24bf13dfcb4da807dc26a', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '0099e06f5fd627446d696e3ca39572639253cafe', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '4e3851be4a84d183219269bcaded43141abc8835', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '11c97894690f088ff4fe1ed04ce10505ebb84cfb', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: 'fe7131a715d44d274764744d884a1b93a0715d8e', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: '8a13bde6e35ce46fc8ec5cef8f0e5b6edd11af5f', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: 'fd3a70a0632c08b82bc2978170e857cb04c46f13', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c10da135841d6aee675e66652ae7e4ee1635ab9b', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'e02a17503852dd5bfcfa9ffbae26676154f41148', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '8538d187bedecaba841028b0934e8ae96e40d089', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '9bb14af4b24130c95a1be8e345c94d3197dd37ba', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '57c6a924a0f920980b200abd65d1e3123b2e529d', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '54d6cc12a1f737a13ac5769f926ad53362a4c14d', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '0250ca679d28272b72296929dcbc1bffa574bc45', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: 'fe6e5dc77473f0673b6ddf1c9e07db20505027ec', 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

@@ -312,11 +312,11 @@ export class SekiResizablePanelGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'ac1ecc1492362d7439963ec0cb8a124c2396f6ef' }, h("div", { key: '27e9cd19531a16256ac58fe662721e49504c61d8', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '38f00f78a09473cd8197e2ab86de77b7452ae056' }, h("div", { key: '3e70a20b91c12276faa806c0b558286f2af5e1d5', 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: 'ba2700999ef2bb3034b0404c826045fd19bb2027' }))));
+            } }, h("slot", { key: '04b9acd57ec8dbc4d1ec24831d4d1f779063afa2' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -164,14 +164,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: 'cfaf9c57ec9b7c5b8f6d9e8f768b8f438648ec89', style: {
+        return (h(Host, { key: 'b8de78bb2e22fcdb55a75ce15ec2738f8ce5503d', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: '013aca61b6d8abe68c50b264ec678e96f11fb2c3', part: "panel", role: "region", class: {
+            } }, h("div", { key: '157870f62b18e505693463b7f098563e61c9845f', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '2a69e04c6b797c8bcf36ab1ab63dc0a49c1a12a2' }))));
+            } }, h("slot", { key: '69fd5281eabcf236869470e9138c474a645a7fc5' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,7 +152,7 @@ export class SekiScrollArea {
     render() {
         const hasVerticalOverflow = this.scrollState.scrollHeight > this.scrollState.clientHeight;
         const hasHorizontalOverflow = this.scrollState.scrollWidth > this.scrollState.clientWidth;
-        return (h(Host, { key: 'f8d32b2e3cecb27de5d882975ac81f46328ca67f', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: 'f624636b0b417e268394c0f057a44c8cd59bba92', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '7e42ec534bcb3f779e853e9e5490070eff4c4427', class: "content" }, h("slot", { key: '0bac7e5fd2878fb504e0b9bb4d1951f818c2cfff' }))), h("slot", { key: '5f409c21ba5b9fba4123e2797018ad5454ba23c7', name: "scrollbar" })));
+        return (h(Host, { key: 'd933f2f45821018aa92a2b9b88638eb6f061aaf6', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '14c88c502df49b8609f8a7177d4920bca2df4f47', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'db9426461caa0293381031c4943c0748bce2a0f9', class: "content" }, h("slot", { key: '2c686a9252fde9cd33d35935340c15f2ab7c521c' }))), h("slot", { key: 'c99e4816a50c0fea88cadf3e86764494db2f487e', name: "scrollbar" })));
     }
     static get is() { return "seki-scroll-area"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
 import { FormControl } from "../../utils/form-control";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * @slot - Content containing seki-select-trigger and seki-select-content
  */
@@ -36,6 +37,22 @@ export class SekiSelect {
         this.triggerId = `select-trigger-${Math.random().toString(36).substr(2, 9)}`;
         this.searchTimeoutId = null;
         this.searchDebounce = 500;
+        /**
+         * The trigger already closes the list on Escape; this also covers focus
+         * anywhere else and keeps an enclosing dialog open.
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.handleOpenChange(false);
+                }
+            },
+        });
+        this.registrationPublishQueued = false;
         this.handleClickOutside = (event) => {
             // Only close if dropdown is open
             if (!this.isOpen) {
@@ -52,10 +69,10 @@ export class SekiSelect {
         // ===========================
         this.handleValueChange = (newValue) => {
             this.internalValue = newValue;
-            // Update controlled prop if it exists
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
+            // Always mirror the selection onto the `value` prop, so el.value reads
+            // back what the user picked in uncontrolled mode too (#339). A controlled
+            // consumer that re-sets the same value is a no-op for the @Watch.
+            this.value = newValue;
             // Emit change event
             const selectedOptions = this.getSelectedOptions();
             if (this.multiple && Array.isArray(newValue)) {
@@ -172,8 +189,10 @@ export class SekiSelect {
         else if (this.defaultOpen) {
             this.isOpen = this.defaultOpen;
         }
-        // Expose context on the element for child components
-        this.el.selectContext = this.buildSelectContext();
+        // Publish (and notify) before the first render: parts that upgraded
+        // before this select under one-module-per-tag loading are already
+        // listening, and the rest read it when they connect (#323).
+        this.updateContextOnElement();
         this.formControl = new FormControl(this.el, this.internals, {
             getFormValue: () => this.getFormValue(),
             isEmpty: () => this.isValueEmpty(),
@@ -202,21 +221,23 @@ export class SekiSelect {
         this.syncFormValue();
     }
     componentDidLoad() {
-        // Expose context on the element for child components
-        this.el.selectContext = this.buildSelectContext();
         // Add click-outside listener
         this.clickOutsideListener = this.handleClickOutside.bind(this);
         document.addEventListener('click', this.clickOutsideListener, true);
     }
     componentDidRender() {
-        // Update context reference after each render
+        // Keep the context reference fresh for props without a dedicated @Watch
+        // (aria-*). State that parts render from is republished with a
+        // notification by the watchers below.
         this.el.selectContext = this.buildSelectContext();
+        this.layer.setActive(this.isOpen);
     }
     disconnectedCallback() {
         // Clean up click-outside listener
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener, true);
         }
+        this.layer.setActive(false);
     }
     handleValuePropChange(newValue) {
         if (newValue !== undefined) {
@@ -238,8 +259,26 @@ export class SekiSelect {
         this.syncFormValue();
     }
     handleDisabledChange() {
+        this.updateContextOnElement();
         this.syncFormValue();
     }
+    /**
+     * The trigger's label comes from the registered options, so registering an
+     * option must notify the parts. Before #323 this was only a silent property
+     * write in componentDidRender, and a trigger that rendered before the
+     * selected option registered stayed on the placeholder.
+     */
+    handleRegisteredOptionsChange() {
+        // Options register one at a time; coalesce a burst into one publish so N
+        // options do not cost N notifications to every part.
+        if (this.registrationPublishQueued)
+            return;
+        this.registrationPublishQueued = true;
+        Promise.resolve().then(() => {
+            this.registrationPublishQueued = false;
+            this.updateContextOnElement();
+        });
+    }
     // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
     formResetCallback() {
         var _a;
@@ -257,9 +296,7 @@ export class SekiSelect {
     setValueFromForm(next) {
         const value = Array.isArray(next) ? [...next] : next;
         this.internalValue = value;
-        if (this.value !== undefined) {
-            this.value = value;
-        }
+        this.value = value;
     }
     isValueEmpty() {
         const v = this.internalValue;
@@ -420,6 +457,8 @@ export class SekiSelect {
             ariaLabel: this.ariaLabel,
             ariaLabelledby: this.ariaLabelledby,
             ariaDescribedby: this.ariaDescribedby,
+            ariaDescription: this.ariaDescription,
+            ariaInvalid: this.ariaInvalid,
             onValueChange: this.handleValueChange,
             onOpenChange: this.handleOpenChange,
             onOptionFocus: this.handleOptionFocus,
@@ -434,7 +473,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '4bbdea0f347a629e01cd64d25b1ec222830bc777' }, h("slot", { key: '34bc204bde0f36e54d2aeef2163b7d33ead2b955' })));
+        return (h(Host, { key: '4a71aaf5068c00bcad390e6a015c23ee16203753' }, h("slot", { key: '69883968cd901d89b376c23a6620edd7b9ec4ef3' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -716,6 +755,44 @@ export class SekiSelect {
                 "reflect": false,
                 "attribute": "aria-describedby"
             },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
+            },
             "placement": {
                 "type": "string",
                 "mutable": false,
@@ -973,6 +1050,9 @@ export class SekiSelect {
             }, {
                 "propName": "name",
                 "methodName": "handleDisabledChange"
+            }, {
+                "propName": "registeredOptions",
+                "methodName": "handleRegisteredOptionsChange"
             }, {
                 "propName": "focusedOptionValue",
                 "methodName": "handleFocusedOptionValueChange"

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

@@ -1,30 +1,27 @@
 import { Host, h } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Options and groups
  */
 export class SekiSelectContent {
     constructor() {
         this.forceUpdate = 0; // Used to force re-renders
-        this.handleParentOpenChange = () => {
-            // Force re-render when parent's open state changes
+        // ===========================
+        // Lifecycle
+        // ===========================
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
+        this.handleParentContextChange = () => {
+            // Force re-render when the parent's context changes
             this.forceUpdate++;
         };
     }
-    // ===========================
-    // Lifecycle
-    // ===========================
-    componentDidLoad() {
-        // Listen for state changes from parent
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.addEventListener('sekiOpenChange', this.handleParentOpenChange);
-        }
+    connectedCallback() {
+        // Re-render on every context publish (open state, but also the select's
+        // first publish when this part upgraded before it) (#323).
+        this.selectConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.removeEventListener('sekiOpenChange', this.handleParentOpenChange);
-        }
+        this.selectConsumer.disconnect();
     }
     // ===========================
     // Methods
@@ -42,8 +39,8 @@ export class SekiSelectContent {
     // Helpers
     // ===========================
     getSelectContext() {
-        const parent = this.el.parentElement;
-        return parent === null || parent === void 0 ? void 0 : parent.selectContext;
+        var _a;
+        return (_a = this.selectConsumer.context) !== null && _a !== void 0 ? _a : undefined;
     }
     /**
      * Accessible name for the listbox.

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

@@ -11,7 +11,7 @@ export class SekiSelectGroup {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '0ba0fad191131966a75fa138b780e6c0b8ce39bc' }, h("div", { key: '3f445d46b63b0ba92a896c7f48e06f9daf5437bb', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '4911d1d1d40cd59b2a252ce07da3462a0c5aaca2', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '9ee28a2cc4980e9eea8510f35aa9f829a36c0f78', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'd5c68fe3a81277db11c444d809f77580ac6335bf', name: "label" }, this.label)), h("div", { key: 'ec98783c7ad64bff2f0560558b2d26426f30ef3d', class: "group-options" }, h("slot", { key: 'cd3b66013c12886b41628be9674b839a6d892783' })))));
+        return (h(Host, { key: '0707b0bf05de6c1b88196de6729f3c10b6259a40' }, h("div", { key: '59d2bfe73a9b1bc693d81309740c98228d3f2486', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '19598269e7471b45d7694b20c4f1872f1de9fed6', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '113bcca772015b15ff3c7f625db31ace791b5d5d', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'b223766c95a812ad6c74e306688f50079ae0d079', name: "label" }, this.label)), h("div", { key: 'b77bcce151260031191a029e29fb12e3a4d5f832', class: "group-options" }, h("slot", { key: '8b45fc6d7b4070ad1c21ad13aa54f553bf6f0507' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { buildOptionId } from "../../utils/select";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Option content
  * @slot selected-indicator - Custom selected indicator
@@ -9,11 +9,7 @@ export class SekiSelectOption {
     constructor() {
         /** Whether the option is disabled */
         this.disabled = false;
-        // ===========================
-        // Lifecycle
-        // ===========================
-        this.hasRegistered = false;
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
         /**
          * Refresh aria-selected/data-selected/data-focused directly on the
          * rendered DOM whenever the parent's value/focus state changes post-mount.
@@ -25,11 +21,14 @@ export class SekiSelectOption {
          * DOM directly here side-steps that entirely.
          */
         this.handleParentContextChange = () => {
+            const selectContext = this.getSelectContext();
+            if (selectContext && this.registeredVia !== selectContext.registerOption) {
+                this.registerWithParent(selectContext);
+            }
             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;
             optionEl.setAttribute('aria-selected', isSelected ? 'true' : 'false');
@@ -88,24 +87,22 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         return buildOptionId((_a = selectContext === null || selectContext === void 0 ? void 0 : selectContext.contentId) !== null && _a !== void 0 ? _a : 'select', this.value);
     }
+    connectedCallback() {
+        // Runs on first connect and after a DOM move. Registration happens in the
+        // context callback, so it also happens when this option upgrades before
+        // its seki-select (one-module-per-tag loading): the select's first
+        // publish from componentWillLoad triggers it (#323).
+        this.selectConsumer.connect(this.el);
+    }
     componentDidLoad() {
-        this.registerWithParent();
         this.refreshOptionId();
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentContextChange);
-    }
-    connectedCallback() {
-        // 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() {
         // Unregister this option
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
-        this.contextSubscription.unsubscribe();
+        this.registeredVia = undefined;
+        this.selectConsumer.disconnect();
     }
     // 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
@@ -118,23 +115,24 @@ export class SekiSelectOption {
             optionEl.id = this.optionId;
         }
     }
-    registerWithParent() {
+    registerWithParent(selectContext) {
         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({
+        // Record first: registerOption republishes the context synchronously,
+        // which re-enters handleParentContextChange.
+        this.registeredVia = selectContext.registerOption;
+        selectContext.registerOption({
             value: this.value,
             label: displayLabel,
             disabled: this.disabled,
         });
-        this.hasRegistered = true;
     }
     // ===========================
     // Helpers
     // ===========================
     getSelectContext() {
-        const parent = this.el.closest('seki-select');
-        return parent === null || parent === void 0 ? void 0 : parent.selectContext;
+        var _a;
+        return (_a = this.selectConsumer.context) !== null && _a !== void 0 ? _a : undefined;
     }
     // ===========================
     // Render
@@ -143,7 +141,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: '86147b4b19997cbfaef666b2d62fd39819f33002' }, h("div", { key: '95065a78bc3326835b77c185236962dbb9e66613', 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: '77fa027a9145e613ab1960d194b509b884da3e0d', class: "option-label" }, h("slot", { key: 'a7c154b3d850fcc57cefe67e95273e2226d75200' })), h("span", { key: '8641aa8a4022301c6bdf240c1cabef40ae7d5854', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '209de66adb71a977fb4e1e4d98947c00f47f7bf1', name: "selected-indicator" }, h("svg", { key: 'b633b7d5825def081cd3e9dd1d05d69530251481', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4d95adba982542c07693b871abc831f364f8de06', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '2f9cda6aace5745c241cc41516964f32dd9c9150' }, h("div", { key: '5c20fffbb001fca4e149ecf142c82e46ff472e6e', 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: '1a36aa341c260a1d3d93cbc05ccbc68989d9fa22', class: "option-label" }, h("slot", { key: '1c89f2be8c02b85bde14b2c71b9e4052fdb16cf3' })), h("span", { key: '95e4c6f4b9bfc1ee64a0b870cd19b5129da99879', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '21b90d788c95b3c6bcebb4a881ac17be0e7a5bb4', name: "selected-indicator" }, h("svg", { key: '977dc30b75e9572ad1d05899c097fa7576f7e5b4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd023e0d908de93f227037995e33783e115274a19', 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 "scoped"; }