@sekiui/elements 0.1.6 → 0.1.7

package/dist/collection/components/context-menu/seki-context-menu.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
 import { OverlayLayer } from "../../utils/overlay";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Context Menu component - right-click context menu with items
  *
@@ -42,6 +43,9 @@ export class SekiContextMenu {
     }
     componentWillLoad() {
         this._isOpen = this.open;
+        // Parts already upgraded hear this; parts that upgrade later read it when
+        // they connect (#384).
+        this.publish();
     }
     openChanged(newValue) {
         this._isOpen = newValue;
@@ -55,6 +59,7 @@ export class SekiContextMenu {
         }
         // Programmatic `menuEl.open = x` must notify already-mounted children the
         // same way openMenu()/closeMenu() do (found during the #261 audit).
+        this.publish();
         this.sekiOpenChange.emit(newValue);
     }
     /**
@@ -71,8 +76,7 @@ export class SekiContextMenu {
         // Context must be refreshed BEFORE `this.open = true` below — same
         // ordering reason as seki-dropdown-menu.tsx's openMenu() (found during
         // #268; see that file's comment for the full explanation).
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._contextMenuContext = this.getContext();
+        this.publish();
         this.open = true;
         this.setupClickOutside();
     }
@@ -84,8 +88,7 @@ export class SekiContextMenu {
             return;
         this._isOpen = false;
         // Same reordering as openMenu() above, same reason.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._contextMenuContext = this.getContext();
+        this.publish();
         this.open = false;
         this.removeClickOutside();
     }
@@ -145,6 +148,9 @@ export class SekiContextMenu {
             this.clickOutsideHandler = undefined;
         }
     }
+    publish() {
+        publishContext(this.el, '_contextMenuContext', this.getContext(), this.contextChange);
+    }
     getContext() {
         return {
             isOpen: this._isOpen,
@@ -155,15 +161,13 @@ export class SekiContextMenu {
         };
     }
     componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._contextMenuContext = this.getContext();
+        this.publish();
         if (this._isOpen) {
             this.setupClickOutside();
         }
     }
     componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._contextMenuContext = this.getContext();
+        this.publish();
     }
     componentDidRender() {
         this.layer.setActive(this._isOpen);
@@ -173,7 +177,7 @@ export class SekiContextMenu {
         this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '3b5bcf8bddbf856566437a16af2b78d667d6b9aa', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'cfb47dcf5c79696cf6fbe2746e2be3c59d79cb81', part: "context-menu", class: "context-menu" }, h("slot", { key: 'b4f31ddb24fb5ca635f9e1f503c70201a81b1d5a' }))));
+        return (h(Host, { key: '98e6c7a6214ca112d2f81bf3a9e09fc62eacdd14', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '2a9b0153bc1bff0950b67c5ef0b0c13ffe75ee35', part: "context-menu", class: "context-menu" }, h("slot", { key: '5d7589d88883ba9d02d9d9489635f6a65d9b3a8e' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -249,6 +253,24 @@ export class SekiContextMenu {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies the context menu parts that the published context changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-content.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { computeAnchoredPosition } from "../../utils/positioning";
 import { clearTypeahead, focusFirstMenuItem, handleMenuKeyDown } from "../../utils/menu-navigation";
+import { ContextConsumer } from "../../utils/context-bridge";
 const NAV_CONFIG = {
     itemSelector: 'seki-dropdown-menu-item, seki-dropdown-menu-checkbox, seki-dropdown-menu-radio, seki-dropdown-menu-sub',
     subContentSelector: 'seki-dropdown-menu-sub [slot="content"]',
@@ -15,17 +16,20 @@ const NAV_CONFIG = {
 export class SekiDropdownMenuContent {
     constructor() {
         this.typeahead = { buffer: '' };
-        this.onMenuOpenChange = () => {
+        this.hasLoaded = false;
+        this.menu = new ContextConsumer('seki-dropdown-menu', '_dropdownMenuContext', (context) => {
             var _a;
-            const context = this.getContext();
+            const wasOpen = this._isOpen;
             this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-            if (this._isOpen) {
+            // Focus the first item when the menu opens after mount; an initially open
+            // menu keeps focus where it is, as before.
+            if (this.hasLoaded && this._isOpen && !wasOpen) {
                 requestAnimationFrame(() => {
                     this.updatePosition();
                     void focusFirstMenuItem(this.el, NAV_CONFIG);
                 });
             }
-        };
+        });
         /**
          * Offset from trigger
          */
@@ -34,19 +38,13 @@ export class SekiDropdownMenuContent {
         this._position = { top: '0', left: '0' };
     }
     getContext() {
-        const menu = this.el.closest('seki-dropdown-menu');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return menu ? menu._dropdownMenuContext : null;
+        return this.menu.context;
     }
-    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;
+    connectedCallback() {
+        this.menu.connect(this.el);
     }
     componentDidLoad() {
-        var _a, _b;
-        this.menuEl = (_a = this.el.closest('seki-dropdown-menu')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenuOpenChange);
+        this.hasLoaded = true;
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -89,9 +87,8 @@ export class SekiDropdownMenuContent {
         this._position = next;
     }
     disconnectedCallback() {
-        var _a;
         clearTypeahead(this.typeahead);
-        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
+        this.menu.disconnect();
     }
     render() {
         if (!this._isOpen) {

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dropdown Menu trigger button
  *
@@ -9,32 +10,23 @@ import { h, Host } from "@stencil/core";
 export class SekiDropdownMenuTrigger {
     constructor() {
         this._isOpen = false;
-        this.onMenuOpenChange = () => {
+        this.menu = new ContextConsumer('seki-dropdown-menu', '_dropdownMenuContext', (context) => {
             var _a;
-            const context = this.getContext();
             this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-        };
-    }
-    getContext() {
-        const menu = this.el.closest('seki-dropdown-menu');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return menu ? menu._dropdownMenuContext : null;
+        });
     }
-    componentDidLoad() {
-        var _a, _b;
-        this.menuEl = (_a = this.el.closest('seki-dropdown-menu')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenuOpenChange);
+    connectedCallback() {
+        this.menu.connect(this.el);
     }
     handleClick(event) {
         event.stopPropagation();
         this.triggerClick.emit();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
+        this.menu.disconnect();
     }
     render() {
-        return (h(Host, { key: '041b282d798f5eb9c79bca05058680187068e64a', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '1d6e9fadfb4ef2ccfc5ec2ac1ba29cc9940c1f23', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '14ffb1dae82ed4f10583e73306212d3089f07d06' }))));
+        return (h(Host, { key: '62faab5af2d089c1bae1b6a56187b81f8799444d', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '0164812df07f1ed2f7d423852a1daf3bf972c43d', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: 'c04d209c3aea27373c2fcd09e0d99f9dfd6e0692' }))));
     }
     static get is() { return "seki-dropdown-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
 import { OverlayLayer } from "../../utils/overlay";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Dropdown Menu component - context menu with items
  *
@@ -50,6 +51,9 @@ export class SekiDropdownMenu {
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
+        // Parts already upgraded hear this; parts that upgrade later read it when
+        // they connect (#384).
+        this.publish();
     }
     openChanged(newValue) {
         this._isOpen = newValue;
@@ -63,6 +67,7 @@ export class SekiDropdownMenu {
         }
         // Programmatic `menuEl.open = x` must notify already-mounted children the
         // same way openMenu()/closeMenu() do (found during the #261 audit).
+        this.publish();
         this.sekiOpenChange.emit(newValue);
     }
     /**
@@ -80,8 +85,7 @@ export class SekiDropdownMenu {
         // #268 — the previous double-emit accidentally masked this ordering gap,
         // since the second, later emit always ran after a second, redundant
         // refresh).
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dropdownMenuContext = this.getContext();
+        this.publish();
         this.open = true;
         this.setupClickOutside();
     }
@@ -93,8 +97,7 @@ export class SekiDropdownMenu {
             return;
         this._isOpen = false;
         // Same reordering as openMenu() above, same reason.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dropdownMenuContext = this.getContext();
+        this.publish();
         this.open = false;
         this.removeClickOutside();
     }
@@ -155,6 +158,9 @@ export class SekiDropdownMenu {
             this.clickOutsideHandler = undefined;
         }
     }
+    publish() {
+        publishContext(this.el, '_dropdownMenuContext', this.getContext(), this.contextChange);
+    }
     getContext() {
         return {
             isOpen: this._isOpen,
@@ -169,15 +175,13 @@ export class SekiDropdownMenu {
         };
     }
     componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dropdownMenuContext = this.getContext();
+        this.publish();
         if (this._isOpen) {
             this.setupClickOutside();
         }
     }
     componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dropdownMenuContext = this.getContext();
+        this.publish();
     }
     componentDidRender() {
         this.layer.setActive(this._isOpen);
@@ -187,7 +191,7 @@ export class SekiDropdownMenu {
         this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '6ff61abf4391bf30cbda771351eec17c6e4849bc', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'a27b1fe18d83d7a34bed20c4fda6c3e0de6f25e2', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '30eb41187d2deaec7c6b4d92d83d94ce3c0f4fd2' }))));
+        return (h(Host, { key: 'e9cee0f28a94987325d2d07001bd9f841f84f241', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '556d58f58bd0cbe07fccf2def100db11c5e43e9d', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '0befc30be19c45fb3975bc31cc7565716f183171' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -353,6 +357,24 @@ export class SekiDropdownMenu {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies the dropdown menu parts that the published context changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Hover Card Content Component
  *
@@ -42,6 +43,26 @@ export class SekiHoverCardContent {
          * The actual side after collision detection (string primitive — safe as @State, no infinite loop)
          */
         this._actualSide = 'bottom';
+        this.hasLoaded = false;
+        this.hoverCard = new ContextConsumer('seki-hover-card', '_hoverCardContext', (context) => {
+            var _a;
+            const wasOpen = this._isOpen;
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            // Before the first render only the state is taken over (an initially open
+            // card needs no listeners set up by a transition).
+            if (!this.hasLoaded || this._isOpen === wasOpen)
+                return;
+            if (this._isOpen) {
+                requestAnimationFrame(() => this.updatePosition());
+                // Setup click-outside listener for touch devices
+                if (this.isTouchDevice()) {
+                    this.setupClickOutsideListener();
+                }
+            }
+            else {
+                this.removeClickOutsideListener();
+            }
+        });
         /**
          * Handle mouse enter - cancel any pending close
          */
@@ -91,33 +112,13 @@ export class SekiHoverCardContent {
      * Get the hover card context from the parent container
      */
     getContext() {
-        const parent = this.el.closest('seki-hover-card');
-        if (parent) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return parent._hoverCardContext || null;
-        }
-        return null;
+        return this.hoverCard.context;
+    }
+    connectedCallback() {
+        this.hoverCard.connect(this.el);
     }
     componentDidLoad() {
-        // Listen for open changes from parent (events bubble up, not down, so @Listen won't work)
-        const hoverCard = this.el.closest('seki-hover-card');
-        if (hoverCard) {
-            this.openChangeHandler = (e) => {
-                const open = e.detail;
-                this._isOpen = open;
-                if (this._isOpen) {
-                    requestAnimationFrame(() => this.updatePosition());
-                    // Setup click-outside listener for touch devices
-                    if (this.isTouchDevice()) {
-                        this.setupClickOutsideListener();
-                    }
-                }
-                else {
-                    this.removeClickOutsideListener();
-                }
-            };
-            hoverCard.addEventListener('sekiOpenChange', this.openChangeHandler);
-        }
+        this.hasLoaded = true;
     }
     componentDidRender() {
         if (this._isOpen && this.contentRef) {
@@ -126,14 +127,7 @@ export class SekiHoverCardContent {
     }
     disconnectedCallback() {
         this.removeClickOutsideListener();
-        // Clean up parent event listener
-        if (this.openChangeHandler) {
-            const hoverCard = this.el.closest('seki-hover-card');
-            if (hoverCard) {
-                hoverCard.removeEventListener('sekiOpenChange', this.openChangeHandler);
-            }
-            this.openChangeHandler = undefined;
-        }
+        this.hoverCard.disconnect();
     }
     /**
      * Setup click-outside listener for touch devices to close on tap outside

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Hover Card Trigger Component
  *
@@ -22,6 +23,10 @@ export class SekiHoverCardTrigger {
          * Internal state tracking whether the hover card is open (for aria-expanded)
          */
         this.isOpen = false;
+        this.hoverCard = new ContextConsumer('seki-hover-card', '_hoverCardContext', (context) => {
+            var _a;
+            this.isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        });
         /**
          * Handle mouse enter - request open (non-touch devices only)
          */
@@ -95,36 +100,16 @@ export class SekiHoverCardTrigger {
      * Get the hover card context from the parent container
      */
     getContext() {
-        const parent = this.el.closest('seki-hover-card');
-        if (parent) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return parent._hoverCardContext || null;
-        }
-        return null;
+        return this.hoverCard.context;
     }
-    componentDidLoad() {
-        // Listen for open state changes from parent (events bubble up, not down, so @Listen won't work)
-        const hoverCard = this.el.closest('seki-hover-card');
-        if (hoverCard) {
-            this.openChangeHandler = (e) => {
-                const open = e.detail;
-                this.isOpen = open;
-            };
-            hoverCard.addEventListener('sekiOpenChange', this.openChangeHandler);
-        }
+    connectedCallback() {
+        this.hoverCard.connect(this.el);
     }
     disconnectedCallback() {
-        // Clean up parent event listener
-        if (this.openChangeHandler) {
-            const hoverCard = this.el.closest('seki-hover-card');
-            if (hoverCard) {
-                hoverCard.removeEventListener('sekiOpenChange', this.openChangeHandler);
-            }
-            this.openChangeHandler = undefined;
-        }
+        this.hoverCard.disconnect();
     }
     render() {
-        return (h(Host, { key: '32dae264e134487c7a81bcbc4cf2c4e02fbd2c3c' }, h("span", { key: 'b46dda7c7a42086d4f0abd1dced54b4160c55a21', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: '0d7667574dbb5aebe2bd824b5e68c79e477c9ad1' }))));
+        return (h(Host, { key: '5e2612d5b7f94f66413bd2c8cc64e1f24de2621e' }, h("span", { key: 'fa875d7a1a941eeffa38f681d6f4c5ee2aaff267', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: '01856b11d54bdf534b1d3cc8db1d99314e84fc14' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { OverlayLayer } from "../../utils/overlay";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Hover Card Container Component
  *
@@ -142,6 +143,9 @@ export class SekiHoverCard {
         // `disabled` wins over a requested initial open state.
         this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
         this.open = this._isOpen;
+        // Parts already upgraded hear this; parts that upgrade later read it when
+        // they connect (#384).
+        this.updateContext();
     }
     openChanged(newValue) {
         // An outside assignment (`card.open = true`) has to win after first render;
@@ -255,8 +259,7 @@ export class SekiHoverCard {
      * Update the context on the element for child components to access
      */
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._hoverCardContext = this.getContext();
+        publishContext(this.el, '_hoverCardContext', this.getContext(), this.contextChange);
     }
     // Listen for custom events from child components
     handleRequestOpen() {
@@ -274,9 +277,6 @@ export class SekiHoverCard {
     componentDidRender() {
         this.layer.setActive(this._isOpen);
     }
-    componentDidLoad() {
-        this.updateContext();
-    }
     componentDidUpdate() {
         this.updateContext();
     }
@@ -289,7 +289,7 @@ export class SekiHoverCard {
         this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '2c9f5dd4788bc39af9881cc5a4d4f4e400347e10', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '0f8f5ed75e8049fd30df5a312e474cbf40d44e69', class: "hover-card" }, h("slot", { key: 'c5d4bf92063b24e49679e49837d11cc96a969f2f' }))));
+        return (h(Host, { key: 'ed09850d3514e29311629a54d02056b27e817e5a', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '6cbccba00a0fd2fca3816b25898d672618d74b62', class: "hover-card" }, h("slot", { key: 'adea6048e83def42318c736a9def3efe418a92de' }))));
     }
     static get is() { return "seki-hover-card"; }
     static get encapsulation() { return "shadow"; }
@@ -501,6 +501,24 @@ export class SekiHoverCard {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies the hover card parts that the published context changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @component seki-radio-group-item
  * @description An individual radio button item within a seki-radio-group.
@@ -7,6 +8,16 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiRadioGroupItem {
     constructor() {
+        // Pull the group's state: the group pushes `checked` onto items it can see,
+        // but an item that upgrades after the group (one-module-per-tag loading) was
+        // not an upgraded element yet, so it must read the group's state itself.
+        this.group = new ContextConsumer('seki-radio-group', '_radioGroupItemsContext', (context) => {
+            if (!context)
+                return;
+            this.checked = context.value !== undefined && context.value === this.value;
+            if (context.disabled)
+                this.disabled = true;
+        });
         /**
          * Whether this item is checked. Managed by parent radio group.
          */
@@ -38,6 +49,12 @@ export class SekiRadioGroupItem {
             }
         };
     }
+    connectedCallback() {
+        this.group.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.group.disconnect();
+    }
     /**
      * Focus this radio item.
      */
@@ -47,7 +64,7 @@ export class SekiRadioGroupItem {
     }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        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" })))));
+        return (h(Host, { key: 'ce2f71b19a5e58670e4f2a8ecd50f38480027b6e', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'b4216874c9102c333091b888bcc5285e2f038223', 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: '09cb9ea7c3ae16bbe103ea59313ab253fe31bcbf', 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,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { FormControl } from "../../utils/form-control";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * @component seki-radio-group
  * @description A set of radio buttons where only one can be selected at a time.
@@ -51,6 +52,7 @@ export class SekiRadioGroup {
         });
         this.formControl.captureInitial(this.internalValue);
         this.formControl.sync();
+        this.publish();
     }
     handleFormStateChange() {
         var _a;
@@ -163,7 +165,11 @@ export class SekiRadioGroup {
     /**
      * Update child items with current selection state
      */
+    publish() {
+        publishContext(this.el, '_radioGroupItemsContext', { value: this.selectedValue, disabled: this.disabled }, this.contextChange);
+    }
     updateChildItems() {
+        this.publish();
         const selectedValue = this.selectedValue;
         const items = this.getRadioItems();
         items.forEach(item => {
@@ -180,7 +186,7 @@ export class SekiRadioGroup {
         this.updateChildItems();
     }
     render() {
-        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' })));
+        return (h(Host, { key: 'c4210abc0444bb3fcefc3c0e3f6fa6fd7e218543', 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: 'd3d1603e53818cc9015b2ede0a44fa495c7f08be' })));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -356,6 +362,24 @@ export class SekiRadioGroup {
                     "resolved": "{ value: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies items that the published group state changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/resizable/layout.js

@@ -97,3 +97,5 @@ export function computeHandleRange(before, after) {
     const max = Math.min(before.constraints.maxSize, total - lowerBound(after));
     return { now: before.size, min: Math.min(min, before.size), max: Math.max(max, before.size) };
 }
+/** Generated host id for a panel; the handle derives the same id for `aria-controls`. */
+export const panelHostId = (panelId) => `seki-resizable-${panelId}`;