@sekiui/elements 0.1.2 → 0.1.4

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { computeAnchoredPosition } from "../../utils/positioning";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Popover content panel with positioning
  *
@@ -9,6 +10,11 @@ import { computeAnchoredPosition } from "../../utils/positioning";
  */
 export class SekiPopoverContent {
     constructor() {
+        this.popoverConsumer = new ContextConsumer('seki-popover', '_popoverContext', () => this.onPopoverOpenChange());
+        /**
+         * Re-read the parent's context. Runs once on connect (picking up a popover
+         * that is already open) and on every publish.
+         */
         this.onPopoverOpenChange = () => {
             var _a;
             const context = this.getContext();
@@ -30,20 +36,10 @@ export class SekiPopoverContent {
         this._actualSide = 'bottom';
     }
     getContext() {
-        const popover = this.el.closest('seki-popover');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return popover ? popover._popoverContext : null;
-    }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        return this.popoverConsumer.context;
     }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for open changes
-        this.popoverEl = (_a = this.el.closest('seki-popover')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.popoverEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onPopoverOpenChange);
+    connectedCallback() {
+        this.popoverConsumer.connect(this.el);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -51,16 +47,15 @@ export class SekiPopoverContent {
         }
     }
     updatePosition() {
-        var _a, _b, _c, _d;
-        const popover = this.el.closest('seki-popover');
-        const trigger = popover === null || popover === void 0 ? void 0 : popover.querySelector('seki-popover-trigger');
+        var _a, _b, _c, _d, _e;
+        const trigger = (_a = this.popoverConsumer.parent) === null || _a === void 0 ? void 0 : _a.querySelector('seki-popover-trigger');
         if (!trigger || !this.contentRef)
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = this.contentRef.getBoundingClientRect();
         const context = this.getContext();
-        const side = (_b = (_a = this.side) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : 'bottom';
-        const align = (_d = (_c = this.align) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.align) !== null && _d !== void 0 ? _d : 'center';
+        const side = (_c = (_b = this.side) !== null && _b !== void 0 ? _b : context === null || context === void 0 ? void 0 : context.side) !== null && _c !== void 0 ? _c : 'bottom';
+        const align = (_e = (_d = this.align) !== null && _d !== void 0 ? _d : context === null || context === void 0 ? void 0 : context.align) !== null && _e !== void 0 ? _e : 'center';
         const { top, left } = computeAnchoredPosition(triggerRect, contentRect, {
             side,
             align,
@@ -78,8 +73,7 @@ export class SekiPopoverContent {
         this._actualSide = side;
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onPopoverOpenChange);
+        this.popoverConsumer.disconnect();
     }
     render() {
         if (!this._isOpen) {

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

@@ -12,7 +12,7 @@ export class SekiPopoverTrigger {
         this.triggerClick.emit();
     }
     render() {
-        return (h(Host, { key: 'ae6f983fdd40ffcee7cc0e60f3290fe19cf965f7' }, h("span", { key: '8bdd7bd35635819c50e773f73536ea63012eb42c', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'ed5dd263bc2e10bfb4b2924e4ebf5901bba5e185' }))));
+        return (h(Host, { key: '27bb74ff57019219dd2d967dc7753bc9ef75e578' }, h("span", { key: '6d9221c17895112c4896d1edb5c3050e1ce9d7a5', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'e02f2210b1c7bc3e745973486d1744552100a59d' }))));
     }
     static get is() { return "seki-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Popover component - floating content triggered by click
  *
@@ -43,16 +44,25 @@ export class SekiPopover {
     }
     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 +71,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 +83,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();
     }
@@ -142,22 +150,19 @@ 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();
-    }
     disconnectedCallback() {
         this.removeClickOutside();
     }
     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: '4843a3d2aab19c70804a6fec2059880dbd193456', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'dc6dd157034bec1abb59f8289e665a304bb7ca26', part: "popover", class: "popover" }, h("slot", { key: 'c079493c83ccbeaf8fded4777428f720610afaf3' }))));
     }
     static get is() { return "seki-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -348,6 +353,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 +430,12 @@ export class SekiPopover {
         return [{
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "side",
+                "methodName": "placementChanged"
+            }, {
+                "propName": "align",
+                "methodName": "placementChanged"
             }];
     }
     static get listeners() {

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: '579dc69827da25a425f4cbc41dfa8c36753a6c86', 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: 'bd36b1562e3cc3612699710c1685d95001b275fc', class: {
+        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: {
                 '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: 'b060b73e40b195094b94911386e07d82c665a70c', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'f279b9547fe842d25ab721922e062406ba915c55', 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: '00d3b0c8663df405d8308a192a6e629e879cc6b9', class: "indicator", part: "indicator" })))));
+        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" })))));
     }
     static get is() { return "seki-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-radio-group
  * @description A set of radio buttons where only one can be selected at a time.
@@ -29,6 +30,44 @@ export class SekiRadioGroup {
         // `value` in markup is the *initial* selection, not a permanent lock — see
         // valueChanged() for how a controlling host keeps authority.
         this.internalValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue;
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => (this.selectedValue ? this.selectedValue : null),
+            isEmpty: () => !this.selectedValue,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please select one of these options.',
+            getAnchor: () => this.getRadioItems().find(item => !item.disabled),
+            restore: initial => {
+                this.internalValue = initial;
+                this.value = initial;
+                this.updateChildItems();
+            },
+            restoreState: state => {
+                const next = typeof state === 'string' ? state : undefined;
+                this.internalValue = next;
+                this.value = next;
+                this.updateChildItems();
+            },
+        });
+        this.formControl.captureInitial(this.internalValue);
+        this.formControl.sync();
+    }
+    handleFormStateChange() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
+    formResetCallback() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
+    }
+    formStateRestoreCallback(state) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
     }
     /**
      * Mirror an externally-assigned `value` onto the rendered selection. This is
@@ -36,10 +75,12 @@ export class SekiRadioGroup {
      * writing the old value back to reject a selection) always wins.
      */
     valueChanged(newValue) {
+        var _a;
         if (newValue !== undefined && newValue !== this.internalValue) {
             this.internalValue = newValue;
             this.updateChildItems();
         }
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     /**
      * Get current selected value
@@ -51,6 +92,7 @@ export class SekiRadioGroup {
      * Handle radio item selection
      */
     handleRadioSelect(event) {
+        var _a;
         event.stopPropagation();
         if (this.disabled) {
             return;
@@ -60,6 +102,7 @@ export class SekiRadioGroup {
         // Keep the public property readable for consumers (`el.value`) and let a
         // controlled host overwrite it from the sekiChange handler below.
         this.value = newValue;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
         this.sekiChange.emit({ value: newValue });
         // Update all child radio items
         this.updateChildItems();
@@ -68,6 +111,7 @@ export class SekiRadioGroup {
      * Handle keyboard navigation
      */
     handleKeyDown(event) {
+        var _a;
         if (this.disabled) {
             return;
         }
@@ -105,6 +149,7 @@ export class SekiRadioGroup {
             // Select the focused item
             this.internalValue = nextItem.value;
             this.value = nextItem.value;
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ value: nextItem.value });
             this.updateChildItems();
         }
@@ -135,10 +180,11 @@ export class SekiRadioGroup {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: 'acfdba96bdc6300fcbc3d96ba90982f0b07b46ba', 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: 'b2b4fb6827d7a056b51675aa2930f06777dd3bab' }), this.name && this.selectedValue && (h("input", { key: '03e9662873194ab74be761ca2e350633a88eb21b', type: "hidden", name: this.name, value: this.selectedValue }))));
+        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' })));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-radio-group.css"]
@@ -315,6 +361,12 @@ export class SekiRadioGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleFormStateChange"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];
@@ -334,4 +386,5 @@ export class SekiRadioGroup {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
+import { FormControl } from "../../utils/form-control";
 /**
  * @slot - Content containing seki-select-trigger and seki-select-content
  */
@@ -35,6 +36,7 @@ export class SekiSelect {
         this.triggerId = `select-trigger-${Math.random().toString(36).substr(2, 9)}`;
         this.searchTimeoutId = null;
         this.searchDebounce = 500;
+        this.registrationPublishQueued = false;
         this.handleClickOutside = (event) => {
             // Only close if dropdown is open
             if (!this.isOpen) {
@@ -171,20 +173,46 @@ 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(),
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please select an item in the list.',
+            getAnchor: () => {
+                var _a, _b;
+                const trigger = this.el.querySelector('seki-select-trigger');
+                return (_b = (_a = trigger === null || trigger === void 0 ? void 0 : trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : trigger;
+            },
+            restore: initial => this.setValueFromForm(initial),
+            restoreState: state => {
+                if (this.multiple) {
+                    // A multiple select submits FormData; recover its entries for our name.
+                    this.setValueFromForm(state instanceof FormData && this.name ? state.getAll(this.name).map(String) : []);
+                }
+                else {
+                    this.setValueFromForm(typeof state === 'string' ? state : '');
+                }
+            },
+        });
+        // form.reset() goes back to the selection the select was authored with.
+        this.formControl.captureInitial(Array.isArray(this.internalValue) ? [...this.internalValue] : this.internalValue);
         // Seed the form value so an unchanged select still submits its initial value.
         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();
     }
     disconnectedCallback() {
@@ -213,44 +241,79 @@ export class SekiSelect {
         this.syncFormValue();
     }
     handleDisabledChange() {
-        this.syncFormValue();
-    }
-    handleFocusedOptionValueChange() {
         this.updateContextOnElement();
-    }
-    updateContextOnElement() {
-        publishContext(this.el, 'selectContext', this.buildSelectContext(), this.sekiSelectContextChange);
+        this.syncFormValue();
     }
     /**
-     * Mirror the current selection into the associated form via ElementInternals.
-     * Replaces the previous hidden native control, which lived inside the shadow
-     * root and therefore never participated in form submission.
+     * 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.
      */
-    syncFormValue() {
-        if (!this.internals || typeof this.internals.setFormValue !== 'function') {
-            return;
-        }
-        // Disabled controls do not contribute a value to the form.
-        if (this.disabled) {
-            this.internals.setFormValue(null);
+    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;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
+    }
+    formStateRestoreCallback(state) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
+    /** Put the selection back to `next` without emitting `sekiChange` (reset is not a user edit). */
+    setValueFromForm(next) {
+        const value = Array.isArray(next) ? [...next] : next;
+        this.internalValue = value;
+        if (this.value !== undefined) {
+            this.value = value;
         }
+    }
+    isValueEmpty() {
+        const v = this.internalValue;
+        return Array.isArray(v) ? v.length === 0 : v === '' || v === undefined || v === null;
+    }
+    getFormValue() {
         if (this.multiple) {
             const values = Array.isArray(this.internalValue) ? this.internalValue : [];
             if (!this.name || values.length === 0) {
-                this.internals.setFormValue(null);
-                return;
+                return null;
             }
             const formData = new FormData();
             for (const val of values) {
                 formData.append(this.name, String(val));
             }
-            this.internals.setFormValue(formData);
-        }
-        else {
-            const value = this.internalValue;
-            this.internals.setFormValue(value === '' || value === undefined || value === null ? null : String(value));
+            return formData;
         }
+        return this.isValueEmpty() ? null : String(this.internalValue);
+    }
+    handleFocusedOptionValueChange() {
+        this.updateContextOnElement();
+    }
+    updateContextOnElement() {
+        publishContext(this.el, 'selectContext', this.buildSelectContext(), this.sekiSelectContextChange);
+    }
+    /**
+     * Mirror the current selection into the associated form via ElementInternals.
+     * Replaces the previous hidden native control, which lived inside the shadow
+     * root and therefore never participated in form submission.
+     */
+    syncFormValue() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     // ===========================
     // Methods
@@ -392,7 +455,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'd8510bb454e952f086e7bdab84121e4bd15b829d' }, h("slot", { key: '3cdb05ad6c95045d602fd6460f399bd37407a089' })));
+        return (h(Host, { key: '13a58769075314b9067f60c14e73dfc8f0bb4242' }, h("slot", { key: '28939ca73356763701694d0633b7d9052f702050' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -922,6 +985,18 @@ export class SekiSelect {
             }, {
                 "propName": "disabled",
                 "methodName": "handleDisabledChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "handleDisabledChange"
+            }, {
+                "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.