@sekiui/elements 0.1.6 → 0.1.7

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

@@ -801,11 +801,15 @@
 }
 
 .resizable-handle:hover:not(.resizable-handle--disabled),
-.resizable-handle:focus-visible:not(.resizable-handle--disabled) {
+:host(:focus-visible) .resizable-handle:not(.resizable-handle--disabled) {
   background: var(--seki-primary, hsl(240 5.9% 10%));
 }
 
-.resizable-handle:focus-visible {
+:host {
+  outline: none;
+}
+
+:host(:focus-visible) .resizable-handle {
   outline: 2px solid var(--seki-ring, hsl(240 5% 64.9%));
   outline-offset: 2px;
 }

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

@@ -1,6 +1,9 @@
 // src/components/resizable/seki-resizable-handle.tsx
 import { h, Host } from "@stencil/core";
 import { subscribeToContextChange } from "../../utils/context-bridge";
+import { isRtl } from "../../utils/direction";
+import { effectiveHostId } from "../../utils/host-id";
+import { panelHostId } from "./layout";
 /**
  * Resizable handle - draggable divider between panels
  *
@@ -23,6 +26,9 @@ export class SekiResizableHandle {
         this._direction = 'horizontal';
         this.startPosition = 0;
         this.groupElement = null;
+        this.loaded = false;
+        // The aria-label we generated on the host; any other value is the author's.
+        this.ownLabel = null;
         this.contextSubscription = null;
         this.handleDirectionChange = () => {
             const context = this.getContext();
@@ -52,7 +58,10 @@ export class SekiResizableHandle {
             if (!context || !this.groupElement)
                 return;
             const currentPosition = this._direction === 'horizontal' ? event.clientX : event.clientY;
-            const deltaPixels = currentPosition - this.startPosition;
+            // A horizontal group lays its panels out right-to-left under dir="rtl", so
+            // moving the pointer right shrinks the panel before the handle.
+            const flip = this._direction === 'horizontal' && isRtl(this.el) ? -1 : 1;
+            const deltaPixels = (currentPosition - this.startPosition) * flip;
             // Convert to percentage
             const groupRect = this.groupElement.getBoundingClientRect();
             const groupSize = this._direction === 'horizontal' ? groupRect.width : groupRect.height;
@@ -82,13 +91,34 @@ export class SekiResizableHandle {
             this._direction = context.direction;
         }
     }
-    componentDidLoad() {
+    /** (Re)bind to the enclosing group; also runs after the handle is moved. */
+    attach() {
         const group = this.el.closest('seki-resizable-panel-group');
-        if (group) {
-            this.groupElement = group;
-            group.addEventListener('sekiDirectionChange', this.handleDirectionChange);
-            group.addEventListener('sekiLayoutChange', this.handleLayoutChange);
+        if (!group || group === this.groupElement)
+            return;
+        this.detach();
+        this.groupElement = group;
+        group.addEventListener('sekiDirectionChange', this.handleDirectionChange);
+        group.addEventListener('sekiLayoutChange', this.handleLayoutChange);
+    }
+    detach() {
+        if (this.groupElement) {
+            this.groupElement.removeEventListener('sekiDirectionChange', this.handleDirectionChange);
+            this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
         }
+        this.groupElement = null;
+    }
+    connectedCallback() {
+        // Re-wire after a DOM move; componentDidLoad only fires once.
+        if (this.loaded) {
+            this.attach();
+            this.handleDirectionChange();
+            this.handleLayoutChange();
+        }
+    }
+    componentDidLoad() {
+        this.loaded = true;
+        this.attach();
         // Pick up the direction once the group publishes its context, which may be
         // after this handle loaded in the per-tag custom-elements build.
         this.contextSubscription = subscribeToContextChange(this.el, 'seki-resizable-panel-group', this.handleDirectionChange);
@@ -96,10 +126,7 @@ export class SekiResizableHandle {
     }
     disconnectedCallback() {
         var _a;
-        if (this.groupElement) {
-            this.groupElement.removeEventListener('sekiDirectionChange', this.handleDirectionChange);
-            this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
-        }
+        this.detach();
         (_a = this.contextSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.contextSubscription = null;
     }
@@ -113,20 +140,22 @@ export class SekiResizableHandle {
         if (handleIndex === -1)
             return;
         const isHorizontal = this._direction === 'horizontal';
+        // Arrow keys are visual; in RTL the panel before the handle is on the right.
+        const flip = isHorizontal && isRtl(this.el) ? -1 : 1;
         const smallStep = 1;
         const largeStep = 10;
         switch (event.key) {
             case 'ArrowLeft':
                 if (isHorizontal) {
                     event.preventDefault();
-                    const step = event.shiftKey ? -largeStep : -smallStep;
+                    const step = (event.shiftKey ? -largeStep : -smallStep) * flip;
                     context.resizePanels(handleIndex, step);
                 }
                 break;
             case 'ArrowRight':
                 if (isHorizontal) {
                     event.preventDefault();
-                    const step = event.shiftKey ? largeStep : smallStep;
+                    const step = (event.shiftKey ? largeStep : smallStep) * flip;
                     context.resizePanels(handleIndex, step);
                 }
                 break;
@@ -163,16 +192,44 @@ export class SekiResizableHandle {
             return { now: 50, min: 0, max: 100 };
         return { now: Math.round(range.now), min: Math.round(range.min), max: Math.round(range.max) };
     }
+    /**
+     * WAI-ARIA window splitter: the separator controls the primary pane (the one
+     * before it). IDREFs cannot cross shadow roots, so everything lives on this
+     * light-DOM host and points at the panel host in the same tree scope.
+     */
+    getControlled() {
+        const context = this.getContext();
+        if (!context)
+            return { id: null, label: null };
+        const panelId = context.getPanelOrder()[context.getHandleIndex(this.el)];
+        const panel = panelId ? context.getPanelElement(panelId) : null;
+        if (!panelId || !panel)
+            return { id: null, label: null };
+        return {
+            id: effectiveHostId(panel, panelHostId(panelId)),
+            label: panel.getAttribute('aria-label'),
+        };
+    }
+    resolveLabel(controlledLabel) {
+        const current = this.el.getAttribute('aria-label');
+        if (current !== null && current !== this.ownLabel)
+            return current; // author-provided
+        this.ownLabel = controlledLabel || 'Resize handle';
+        return this.ownLabel;
+    }
     render() {
+        var _a, _b;
         const isHorizontal = this._direction === 'horizontal';
         const range = this.getAriaRange();
-        return (h(Host, { key: '83f479c54a4b9bd6774df281ed0586b9113e72a0' }, h("div", { key: '64d97bd8e72cdc18185b0bfc927b1cba5daff71f', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": range.now, "aria-valuemin": range.min, "aria-valuemax": range.max, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
+        const controlled = this.getControlled();
+        const isDisabled = this.disabled || !!((_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.disabled);
+        return (h(Host, { key: 'd5d598d73db57d447393e478c4bcbad036cabc21', role: "separator", tabindex: isDisabled ? -1 : 0, "aria-valuenow": range.now, "aria-valuemin": range.min, "aria-valuemax": range.max, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": this.resolveLabel(controlled.label), "aria-controls": (_b = controlled.id) !== null && _b !== void 0 ? _b : undefined, "aria-disabled": isDisabled ? 'true' : undefined }, h("div", { key: '29f8a250bf62aadc3ad5a436935367f9b26cd7da', part: "handle", class: {
                 'resizable-handle': true,
                 'resizable-handle--horizontal': isHorizontal,
                 'resizable-handle--vertical': !isHorizontal,
                 'resizable-handle--disabled': this.disabled,
                 'resizable-handle--dragging': this._isDragging,
-            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'c09507c1b067f00ccb447e443ff4d9da948475cb', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: 'ad6ee321e91f3b8c4221b826000e46cec442176b', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '8e716a1255b4d80cc14f3c745fc4d179fffd4e10', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '38040394e39767cba8a758f67dc1c314ba6e44e5', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'ffc2c4fc89216b8722cf137ed8642a15dc071987', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'c4937f77a7819dddca6fdf51d4214974d2fab3ae', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'e431a62885cd25a462b8b5e22bd972b3ad988653', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'afba75fbb974a55a05e5822140eba759e87c141e', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '88cb3bb8a1c088aa5589c737b79af46fd0215d22', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '1eeb0515522cd4859385914a6fa5ff1a7b57691d', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: '65c10331e9f97979b272b1dc83c9a122939fc437', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '3c02d5f8bd72bc7e9549f251168dc6a6de081dad', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '380a11b2cf250b6190734083e5f05ba0c00b4dde', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'bc169db3f5d287264797dd56da8374ea35663327', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '626d7dfa182d9f1f1248e7cea476378e645fbc5b', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'd95b05917be3964f1c3c1d5abf8969aa667dab65', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'f98ecea62129e2af13ff87f59407f7c150384357', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '5f7f37ed7a8d8afe81444cfe7a412719ed9f0b7f', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '06941c191e2bb1273dffd15d956dd43faf4fadb6', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '7e96b8f034b59242f98f5e4b5b97578301a5e35e', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
     }
     static get is() { return "seki-resizable-handle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,6 +44,7 @@ export class SekiResizablePanelGroup {
             collapsePanel: () => { },
             expandPanel: () => { },
             isCollapsed: () => false,
+            getPanelElement: () => null,
             getHandleIndex: () => -1,
         };
         this.registerPanel = (id, constraints, element) => {
@@ -92,6 +93,7 @@ export class SekiResizablePanelGroup {
             var _a, _b;
             return (_b = (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.isCollapsed) !== null && _b !== void 0 ? _b : false;
         };
+        this.getPanelElement = (id) => { var _a; return (_a = this.panelElements.get(id)) !== null && _a !== void 0 ? _a : null; };
         this.getHandleIndex = (handleElement) => {
             const handles = Array.from(this.el.querySelectorAll('seki-resizable-handle'));
             return handles.indexOf(handleElement);
@@ -267,6 +269,7 @@ export class SekiResizablePanelGroup {
             collapsePanel: this.collapsePanel,
             expandPanel: this.expandPanel,
             isCollapsed: this.isCollapsed,
+            getPanelElement: this.getPanelElement,
             getHandleIndex: this.getHandleIndex,
         };
         this._resizableContext = context;
@@ -332,11 +335,11 @@ export class SekiResizablePanelGroup {
         }
     }
     render() {
-        return (h(Host, { key: '5fe1c6125506aee9cae6d412c33846986004f04c' }, h("div", { key: '04e52a26b3cb5cef717e4b7cffa76b9f198875db', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: 'e921bd4bf9566022d1b1df8b15e65fbe446a8eaf' }, h("div", { key: 'e54ea8623bba0ec7c7a4b8d2666ebcc4d2071859', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: '86ace975a70a0c3fcdf4acd2e98cebfee9812c98' }))));
+            } }, h("slot", { key: '3c289f22bccadb3d1fe418b221619f2dc60791fe' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,8 @@
 // src/components/resizable/seki-resizable-panel.tsx
 import { h, Host } from "@stencil/core";
 import { subscribeToContextChange } from "../../utils/context-bridge";
+import { claimHostId } from "../../utils/host-id";
+import { panelHostId } from "./layout";
 let panelIdCounter = 0;
 /**
  * Resizable panel - individual content panel with size constraints
@@ -168,14 +170,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '7131acc444ff314abcecdefea6d50a7d35b0994e', style: {
+        return (h(Host, { key: '315770a2c0d1a43476a411d128bba7a1e0c8340d', id: claimHostId(this.el, panelHostId(this.panelId)), style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: '2b75e0fe753750cf3f3dba471c51b75d23b44356', part: "panel", role: "region", class: {
+            } }, h("div", { key: '966dc30c32d38089963cd8509524abd099458115', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '295aa48096e5188fd40dda5e52f180eb4512a193' }))));
+            } }, h("slot", { key: '37cc25bf4a11a1b9a8d537092762a38be729f16a' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { getTabIds } from "./tab-ids";
+import { ContextConsumer } from "../../utils/context-bridge";
+import { getTabIds, findTabPeer } from "./tab-ids";
+import { claimHostId, effectiveHostId } from "../../utils/host-id";
 /**
  * Tab content panel
  *
@@ -10,42 +12,39 @@ import { getTabIds } from "./tab-ids";
 export class SekiTabsContent {
     constructor() {
         this._isSelected = false;
-        this.onTabsValueChange = () => {
+        this.tabs = new ContextConsumer('seki-tabs', '_tabsContext', (context) => {
             var _a;
-            const context = this.getContext();
             this._isSelected = (_a = context === null || context === void 0 ? void 0 : context.isSelected(this.value)) !== null && _a !== void 0 ? _a : false;
-        };
+        });
     }
     getContext() {
-        const tabs = this.el.closest('seki-tabs');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return tabs ? tabs._tabsContext : null;
+        return this.tabs.context;
     }
     get ids() {
         return getTabIds(this.el.closest('seki-tabs'), this.value);
     }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._isSelected = (_a = context === null || context === void 0 ? void 0 : context.isSelected(this.value)) !== null && _a !== void 0 ? _a : false;
+    connectedCallback() {
+        this.tabs.connect(this.el);
     }
-    componentDidLoad() {
+    valueChanged() {
         var _a, _b;
-        // Listen for value changes from parent tabs
-        this.tabsEl = (_a = this.el.closest('seki-tabs')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.tabsEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onTabsValueChange);
+        // The part's own value changed: re-evaluate against the current context.
+        this._isSelected = (_b = (_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.isSelected(this.value)) !== null && _b !== void 0 ? _b : false;
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.tabsEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onTabsValueChange);
+        this.tabs.disconnect();
     }
     render() {
         const isSelected = this._isSelected;
         const { triggerId, panelId } = this.ids;
-        return (h(Host, { key: '358f26f62be13d99c2d8e2f0920d83be6850ad73', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: panelId, "aria-labelledby": triggerId, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: 'c8cc92104ad3c64cade8801917eb9bbd01b79952', part: "content", class: {
+        // Keep an author-set id on either host; IDREFs use whatever id each host has.
+        const hostId = claimHostId(this.el, panelId);
+        const trigger = findTabPeer(this.el.closest('seki-tabs'), 'seki-tabs-trigger', this.value);
+        const labelledById = effectiveHostId(trigger, triggerId);
+        return (h(Host, { key: '8bbe15f6616031c9c6b75fb7028b98d5a95487f6', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: hostId, "aria-labelledby": labelledById, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: '6a9277868adafa201ab23fc015d87ddc4f3c0344', part: "content", class: {
                 'tabs-content': true,
                 'tabs-content--active': isSelected,
-            } }, h("slot", { key: 'e55305721b99f69cec73544236fd036601f618e4' }))));
+            } }, h("slot", { key: '4de0e63849e10e70990aca111e4ed85dfedad52e' }))));
     }
     static get is() { return "seki-tabs-content"; }
     static get encapsulation() { return "shadow"; }
@@ -88,4 +87,10 @@ export class SekiTabsContent {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

package/dist/collection/components/tabs/seki-tabs-list.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Container for tab triggers
  *
@@ -9,40 +10,23 @@ import { h, Host } from "@stencil/core";
 export class SekiTabsList {
     constructor() {
         this._orientation = 'horizontal';
-        this.onTabsValueChange = () => {
+        this.tabs = new ContextConsumer('seki-tabs', '_tabsContext', (context) => {
             var _a;
-            const context = this.getContext();
             this._orientation = (_a = context === null || context === void 0 ? void 0 : context.orientation) !== null && _a !== void 0 ? _a : 'horizontal';
-        };
-    }
-    getContext() {
-        const tabs = this.el.closest('seki-tabs');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return tabs ? tabs._tabsContext : null;
-    }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._orientation = (_a = context === null || context === void 0 ? void 0 : context.orientation) !== null && _a !== void 0 ? _a : 'horizontal';
+        });
     }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for the parent's only notification event so this list re-checks
-        // orientation after mount — without this, orientation freezes at whatever
-        // it was when the list first rendered (found during the #261 audit).
-        this.tabsEl = (_a = this.el.closest('seki-tabs')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.tabsEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onTabsValueChange);
+    connectedCallback() {
+        this.tabs.connect(this.el);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.tabsEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onTabsValueChange);
+        this.tabs.disconnect();
     }
     render() {
         const orientation = this._orientation;
-        return (h(Host, { key: 'fe9b44507284c1b0b9ce1ebcf8b37e143ac971ce', "data-orientation": orientation }, h("div", { key: '33aec6c7f47545ca3fa448288aaea07cb2e6fd5f', part: "list", role: "tablist", "aria-orientation": orientation, class: {
+        return (h(Host, { key: '3a9b098b96f1a1b6e639a78a71c66d9d7c0ac614', "data-orientation": orientation }, h("div", { key: 'd72c6d73977ef9daee3c70d539653df83bacec9a', part: "list", role: "tablist", "aria-orientation": orientation, class: {
                 'tabs-list': true,
                 [`tabs-list--${orientation}`]: true,
-            } }, h("slot", { key: '11b4a3e8dd650963f08cf5b61e0e36f7d2119d5e' }))));
+            } }, h("slot", { key: '9f80bf08dfd995468a89e7e561a97eadd59d3183' }))));
     }
     static get is() { return "seki-tabs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { getTabIds } from "./tab-ids";
+import { ContextConsumer } from "../../utils/context-bridge";
+import { getTabIds, findTabPeer } from "./tab-ids";
+import { claimHostId, effectiveHostId } from "../../utils/host-id";
 import { isRtl } from "../../utils/direction";
 /**
  * Tab trigger button
@@ -15,30 +17,24 @@ export class SekiTabsTrigger {
          */
         this.disabled = false;
         this._isSelected = false;
-        this.onTabsValueChange = () => {
+        this.tabs = new ContextConsumer('seki-tabs', '_tabsContext', (context) => {
             var _a;
-            const context = this.getContext();
             this._isSelected = (_a = context === null || context === void 0 ? void 0 : context.isSelected(this.value)) !== null && _a !== void 0 ? _a : false;
-        };
+        });
     }
     getContext() {
-        const tabs = this.el.closest('seki-tabs');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return tabs ? tabs._tabsContext : null;
+        return this.tabs.context;
     }
     get ids() {
         return getTabIds(this.el.closest('seki-tabs'), this.value);
     }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._isSelected = (_a = context === null || context === void 0 ? void 0 : context.isSelected(this.value)) !== null && _a !== void 0 ? _a : false;
+    connectedCallback() {
+        this.tabs.connect(this.el);
     }
-    componentDidLoad() {
+    valueChanged() {
         var _a, _b;
-        // Listen for value changes from parent tabs
-        this.tabsEl = (_a = this.el.closest('seki-tabs')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.tabsEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onTabsValueChange);
+        // The part's own value changed: re-evaluate against the current context.
+        this._isSelected = (_b = (_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.isSelected(this.value)) !== null && _b !== void 0 ? _b : false;
     }
     handleClick() {
         if (this.disabled)
@@ -159,16 +155,19 @@ export class SekiTabsTrigger {
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.tabsEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onTabsValueChange);
+        this.tabs.disconnect();
     }
     render() {
         const isSelected = this._isSelected;
         const { triggerId, panelId } = this.ids;
-        return (h(Host, { key: 'c8b584c8f281d46e015d507f61f6d6aecbcafb30', id: triggerId, "data-state": isSelected ? 'active' : 'inactive', "data-disabled": this.disabled ? '' : undefined, tabindex: this.disabled ? -1 : 0, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId }, h("button", { key: 'd635ec5ab25d34ccfa3db861e1ff946cd9964703', part: "trigger", type: "button", class: {
+        // Keep an author-set id on either host; IDREFs use whatever id each host has.
+        const hostId = claimHostId(this.el, triggerId);
+        const panel = findTabPeer(this.el.closest('seki-tabs'), 'seki-tabs-content', this.value);
+        const controlsId = effectiveHostId(panel, panelId);
+        return (h(Host, { key: '12d3ad61a2abcec3839d92baee7eb245514fbb52', id: hostId, "data-state": isSelected ? 'active' : 'inactive', "data-disabled": this.disabled ? '' : undefined, tabindex: this.disabled ? -1 : 0, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": controlsId }, h("button", { key: '5ac3ffd4c1581e596ab18ce99e3aa91421ae9a4c', part: "trigger", type: "button", class: {
                 'tabs-trigger': true,
                 'tabs-trigger--active': isSelected,
-            }, disabled: this.disabled, tabindex: -1 }, h("slot", { key: '6a3e0516bc5c865c997b2d974b93b441dc8a5467' }))));
+            }, disabled: this.disabled, tabindex: -1 }, h("slot", { key: '1e5440b27cd8a7e71f8a55c303c2331c76e2583b' }))));
     }
     static get is() { return "seki-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -231,6 +230,12 @@ export class SekiTabsTrigger {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Tabs root component that manages selected tab state
  *
@@ -22,15 +23,17 @@ export class SekiTabs {
         // Initialize from value or defaultValue
         const initialValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue) !== null && _b !== void 0 ? _b : '';
         this._selectedValue = initialValue;
-        // Publish before children load: they read the context in their first
-        // render, and componentDidLoad (parent-last) would be too late, leaving
-        // the initially selected panel hidden.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._tabsContext = this.getContext();
+        // Publish before children load: parts that are already upgraded pick it up
+        // from the event, parts that upgrade later read it when they connect (#384).
+        this.publish();
+    }
+    orientationChanged() {
+        this.publish();
     }
     valueChanged(newValue) {
         if (newValue !== undefined) {
             this._selectedValue = newValue;
+            this.publish();
             // Programmatic `tabsEl.value = x` must notify already-mounted children
             // the same way selectTab() does, or seki-tabs-trigger/seki-tabs-list
             // silently stay stale (found during the #261 audit).
@@ -48,9 +51,9 @@ export class SekiTabs {
         // sekiValueChange — no separate emit needed here (found during #268;
         // #261 originally left both, causing a double-emit on every click).
         this.value = tabValue;
-        // Update context for child components
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._tabsContext = this.getContext();
+    }
+    publish() {
+        publishContext(this.el, '_tabsContext', this.getContext(), this.contextChange);
     }
     isSelected(tabValue) {
         return this._selectedValue === tabValue;
@@ -63,19 +66,11 @@ export class SekiTabs {
             isSelected: (value) => this.isSelected(value),
         };
     }
-    componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._tabsContext = this.getContext();
-    }
-    componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._tabsContext = this.getContext();
-    }
     render() {
-        return (h(Host, { key: '6dabe970a9d7129184acdd2be17fbccf8e4bc7e7', "data-orientation": this.orientation }, h("div", { key: 'a5d5f6ddb4f8f81c3934a6493da102bfd920f578', part: "tabs", class: {
+        return (h(Host, { key: '3e4cf3afc38da559d0f6f3558b5e56f3e994bcc0', "data-orientation": this.orientation }, h("div", { key: 'd7a04a38c27904ba02224e97574393dfb0fa18bc', part: "tabs", class: {
                 'tabs': true,
                 [`tabs--${this.orientation}`]: true,
-            } }, h("slot", { key: '19cab6ce422e33ff2d64d44d50fdea8acbd88577' }))));
+            } }, h("slot", { key: '6cb943c282fe0e538dd7d6fa2ef453204c3eb0b0' }))));
     }
     static get is() { return "seki-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +167,24 @@ export class SekiTabs {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies tab parts that the published context changed. Not part\nof the public API (sekiValueChange is)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -202,6 +215,9 @@ export class SekiTabs {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "orientation",
+                "methodName": "orientationChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];

package/dist/collection/components/tabs/tab-ids.js

@@ -20,3 +20,16 @@ export function getTabIds(tabsEl, value) {
     const v = sanitize(value !== null && value !== void 0 ? value : '');
     return { triggerId: `${base}-trigger-${v}`, panelId: `${base}-panel-${v}` };
 }
+/**
+ * The trigger/panel host with the given `value` that belongs to `tabsEl` (not
+ * to a nested `seki-tabs`), or null when the tree has no such peer.
+ */
+export function findTabPeer(tabsEl, tag, value) {
+    if (!tabsEl)
+        return null;
+    for (const el of Array.from(tabsEl.querySelectorAll(tag))) {
+        if (el.closest('seki-tabs') === tabsEl && el.getAttribute('value') === value)
+            return el;
+    }
+    return null;
+}

package/dist/collection/utils/host-id.js

@@ -0,0 +1,27 @@
+/**
+ * Host ids for cross-shadow ARIA wiring (trigger host <-> content host).
+ *
+ * IDREFs cannot cross shadow roots, so components put their ids on the
+ * light-DOM hosts. An id the author wrote on the host must never be
+ * overwritten: `effectiveHostId` returns it when present and falls back to the
+ * generated id otherwise. We remember which id we generated per element so a
+ * generated id that changes later (e.g. the tab `value` changes) is replaced,
+ * while an author id (anything else on the element) is kept.
+ */
+const generated = new WeakMap();
+/** The id `el` actually has (author id, else `fallback`). Does not mutate. */
+export function effectiveHostId(el, fallback) {
+    if (el && el.id && el.id !== generated.get(el))
+        return el.id;
+    return fallback;
+}
+/**
+ * Resolve the id to render on `el`: keeps an author-set id, otherwise records
+ * and returns `fallback`.
+ */
+export function claimHostId(el, fallback) {
+    const id = effectiveHostId(el, fallback);
+    if (id === fallback)
+        generated.set(el, fallback);
+    return id;
+}

package/dist/components/p-BD28aG2U.js

@@ -0,0 +1,12 @@
+/**
+ * Text direction helpers for keyboard handling.
+ *
+ * `getComputedStyle().direction` already folds in the `dir` attribute on any
+ * ancestor (including across shadow boundaries via inheritance) and CSS
+ * `direction`, so it is the single source of truth.
+ */
+function isRtl(el) {
+    return getComputedStyle(el).direction === 'rtl';
+}
+
+export { isRtl as i };