@sekiui/elements 0.1.3 → 0.1.4

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LabelBinding } from "../../utils/label-association";
 /**
  * seki-label: A styled label component for form elements
  *
@@ -21,12 +22,32 @@ export class SekiLabel {
          */
         this.disabled = false;
     }
+    onForChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event) {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.handleClick(event);
+    }
+    connectedCallback() {
+        this.binding = new LabelBinding(this.el, () => this.for);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+        (_b = this.binding) === null || _b === void 0 ? void 0 : _b.observe();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: 'df80b45752def839bec876b26d32861f31404f55', part: "label" }, labelProps, { class: {
+        return (h("label", { key: '1aa6ed2ae6c1c16812dd07aa81b88c0df0790b02', part: "label", class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: '2ce1883422648de0ca9da12706a55c9749c5407f' }), this.required && h("span", { key: '2e89edc35b776623fb0f9203744c6a1adb8cd20f', class: "seki-label__required" }, " *")));
+            } }, h("slot", { key: 'a2da93efc7cca1b92d6001b071f5bfa3971f2a8d', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: '81a2056abc5499c86d889ece899797b2fdea437e', class: "seki-label__required" }, " *")));
     }
     static get is() { return "seki-label"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +75,7 @@ export class SekiLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The ID of the form element this label is associated with.\nMaps to the `htmlFor` attribute on the inner `<label>` element."
+                    "text": "The ID of the form element this label is associated with. Resolved in the\nlabel's own root node (document or shadow root), not in this component's\nshadow root, so it reaches light-DOM controls. Without it, the first control\nnested inside the label is used."
                 },
                 "getter": false,
                 "setter": false,
@@ -110,4 +131,19 @@ export class SekiLabel {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "onForChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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.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/select/seki-select.js

@@ -36,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) {
@@ -172,8 +173,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,14 +205,14 @@ 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();
     }
     disconnectedCallback() {
@@ -238,8 +241,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;
@@ -434,7 +455,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '4bbdea0f347a629e01cd64d25b1ec222830bc777' }, h("slot", { key: '34bc204bde0f36e54d2aeef2163b7d33ead2b955' })));
+        return (h(Host, { key: '13a58769075314b9067f60c14e73dfc8f0bb4242' }, h("slot", { key: '28939ca73356763701694d0633b7d9052f702050' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -973,6 +994,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-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: '0c513bf5a4f3d1b462836bb8abd08017f5b75880' }, h("div", { key: '7a4a9008d7c14d016ee2747e0a18ed6e94d769aa', 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: '6660252c5c42e3e3fe297a734aecacf45bb9afab', class: "option-label" }, h("slot", { key: 'ab3c1a534982cdbe6dc75dc6174ecea320a1f21b' })), h("span", { key: 'a8bf08a92e88a1b3c0f61a2d5ec312f5b9f34b7f', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '3e9b9d8ecdb242fdfaf6b0ff5a431f9b8ea6bd67', name: "selected-indicator" }, h("svg", { key: '238a90118e217381e39951d5b92859f759488075', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '08be34c46c3017035ff9f281f433ffa9f91c7d06', 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"; }

package/dist/collection/components/select-trigger/seki-select-trigger.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 - Custom trigger content
  * @slot pill - Custom pill rendering in multi-select mode
@@ -11,16 +11,16 @@ export class SekiSelectTrigger {
         // ===========================
         // Lifecycle
         // ===========================
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
+        // One consumer covers value, open, focus, disabled and option registration:
+        // seki-select republishes on each of them. connect() reads the context right
+        // away, so a trigger that connects after the select already published still
+        // starts from the current value.
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
         // ===========================
         // Parent Event Listeners
         // ===========================
-        this.handleParentOpenChange = () => {
-            // Force re-render when parent's open state changes
-            this.forceUpdate++;
-        };
-        this.handleParentValueChange = () => {
-            // Force re-render when parent's value changes
+        this.handleParentContextChange = () => {
+            // Force re-render when the parent's context changes
             this.forceUpdate++;
         };
         // ===========================
@@ -47,42 +47,36 @@ export class SekiSelectTrigger {
             }
         };
     }
-    componentDidLoad() {
-        // Manually attach event listeners to ensure they work
-        if (this.buttonRef) {
-            this.buttonRef.addEventListener('click', this.handleButtonClick);
-            this.buttonRef.addEventListener('keydown', this.handleButtonKeyDown);
-        }
-        // Listen for state changes from parent
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.addEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.addEventListener('sekiChange', this.handleParentValueChange);
-        }
-        // sekiChange only fires for user-driven selection; programmatic value/
-        // focus/disabled changes (e.g. controlled-mode `select.value = x`) only
-        // emit the shared context-change event, so this needs its own subscription too.
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentValueChange);
+    connectedCallback() {
+        this.selectConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        // Clean up event listeners
-        if (this.buttonRef) {
-            this.buttonRef.removeEventListener('click', this.handleButtonClick);
-            this.buttonRef.removeEventListener('keydown', this.handleButtonKeyDown);
-        }
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.removeEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.removeEventListener('sekiChange', this.handleParentValueChange);
-        }
-        this.contextSubscription.unsubscribe();
+        // The button's own listeners need no cleanup: they live and die with it.
+        this.selectConsumer.disconnect();
+    }
+    /**
+     * Listeners follow the button element itself: the button only exists once a
+     * context is available (the first render may be the "Loading..." fallback
+     * when this trigger upgrades before its seki-select), so binding once in
+     * componentDidLoad could miss it entirely.
+     */
+    setButtonRef(ref) {
+        var _a, _b;
+        const el = ref !== null && ref !== void 0 ? ref : undefined;
+        if (el === this.buttonRef)
+            return;
+        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
+        (_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.handleButtonKeyDown);
+        this.buttonRef = el;
+        el === null || el === void 0 ? void 0 : el.addEventListener('click', this.handleButtonClick);
+        el === null || el === void 0 ? void 0 : el.addEventListener('keydown', this.handleButtonKeyDown);
     }
     // ===========================
     // 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;
     }
     renderPlaceholder() {
         const parent = this.el.closest('seki-select');
@@ -121,7 +115,7 @@ export class SekiSelectTrigger {
         }
         const isOpen = selectContext.open;
         const isDisabled = selectContext.disabled;
-        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
+        return (h(Host, null, h("button", { ref: (el) => this.setButtonRef(el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
                 ? buildOptionId(selectContext.contentId, selectContext.focusedOptionValue)
                 : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
             ? this.renderMultiValue(selectContext)