@sekiui/elements 0.1.3 → 0.1.4

package/dist/collection/components/data-table/seki-data-table.js

@@ -212,6 +212,9 @@ export class SekiDataTable {
     // =========================================================================
     // Watchers
     // =========================================================================
+    fetchDataChanged() {
+        this.loadData();
+    }
     columnsChanged() {
         this.initializeColumns();
     }
@@ -420,10 +423,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        return (h(Host, { key: 'c04fd92ce353ad13bdac6e06c62e0d4c49df7fde' }, h("div", { key: '3af3f6f85702103871892e57d81e26b8fcb8ecc8', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '380ed854e25f2fc1a3836d1c159f0ef0d7ce043e', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '168edbf3bb61cb9a6451df5c24278c5a822bc426', class: "data-table__search" }, h("input", { key: 'd2a61ead41bc15fc10d88d5371595728d022e616', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'aaa7308f94b9f4a1cf225cba796b6b7173bacc7e', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'e305bee4964a6a21426831e1a05ce49a1d7ea02d', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '46a57cc4174a26a6f6b6233dbbdb4e8ac7e96809', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '12f509df155529d2d7797d3756e16affcd4b3dbe', class: {
+        return (h(Host, { key: '15535cda2a0f9026432cd29d3cca66471542293e' }, h("div", { key: '1a6d394f50582afa152912be44d3dc1b460647ec', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '5729cf6f2dfdd4f3280bcb37099348c91e18b589', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '8594e5f8a45e84ecf2d0a07d0cc60ede27c06a25', class: "data-table__search" }, h("input", { key: 'afdbfe0c7b913fa6986fabd1b1746a1143fe45e5', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '4600532ab6612b7676425744a4d488793ba76d11', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '7394abd007401280dc2c5f4dc6511f4bfbc733ea', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '3b058abfece531c57449b8c5c6c937efbbe238c2', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '25642d9e9db56c73438a5f0b5cf4823b7147fb58', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'e1ec10b01a7532c235fbf4c88be0ccf98b92770a', class: "data-table__table", role: "grid" }, h("thead", { key: 'e0f501dd110457bff2c475b09563209d71551964', class: "data-table__head" }, h("tr", { key: '9542a39008d2b10772abf640ec3d62abe4afd308', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '1a03b19a6716e96885fddc0a7b047634e0a60e4a', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'f3c3cde54af22263033cec4ecd735d1af0500e77', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '3470c4685f529805142e756c7b609ab4b17c9130', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '6fdba33e0ef797c0259fca1a51b922bd8c8ad1ec', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'e7f32b0e32993c811a671486b9ba0ea3963b8c65', class: "data-table__table", role: "grid" }, h("thead", { key: '32e774b234f5585bf7e86b80e87e9fc4b0dd8879', class: "data-table__head" }, h("tr", { key: '0063401f0e59a4fa53d93356cb6d1c6f7f98b6c9', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'ef06fa478dfb5b88ad080a35958341f050752542', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '46e938e0fd71d86f190968f6b8a3cb36fc25b313', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '51b2c56e81df98c93abb4b3ad36a7b644180e61c', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '4057f8000cce3087201191ada05ace0e8e4fd888', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -439,7 +442,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: '6ea94f1ce74f3a89f47b4ac639c84c0717b5bda8', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: '108750862419ff50da47dd4dac725a37dd4a4568', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -482,12 +485,12 @@ export class SekiDataTable {
                 /* Expanded content row */
                 isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
             ];
-        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'e0ca3f7b11df8a49252740a524c55fc494d17cb0', class: "data-table__loading-overlay" }, h("div", { key: 'a1ee63ae5045ba68371ad5d5bcbc286cf58f1141', class: "data-table__loading" }, "Loading...")))), h("div", { key: '567c17e0b546e9cbf0b151f5e058a1e5c8128d5f', class: "data-table__pagination" }, h("div", { key: '39b814ecda85ebb41d3e2bcbbb3015367edfc47e', class: "data-table__pagination-info" }, this.state.totalRows > 0
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'b8e2ce3a23488dc4eb315d7aae2eee1a488b2ecf', class: "data-table__loading-overlay" }, h("div", { key: '3e43dddce5bd374c7dd3eb26a8591b54a5fc42fd', class: "data-table__loading" }, "Loading...")))), h("div", { key: 'e345e839e25ec07e16e76cc162b67b7f8cdf4c6a', class: "data-table__pagination" }, h("div", { key: '2146a5e6890f6f29287c6fe9c5d30eb79660d483', class: "data-table__pagination-info" }, this.state.totalRows > 0
             ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
-            : '0 results'), h("div", { key: 'e937607ecfcdd6257f5b34c38c24ca3caa04a736', class: "data-table__pagination-controls" }, h("select", { key: 'dd39176cb21e8f1c8000c87710ea22e8100d8de7', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: '554fe4cb908614c48d7dddd538796c8301c674ed', class: "data-table__pagination-controls" }, h("select", { key: 'df31158d96da258dc59a1b8b34bdf0192c8da54c', class: "data-table__page-size", onChange: (e) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.handlePageSizeChange(Number(e.target.value));
-            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '70b60eaf9c0193ea8ef9ff95bacb05d720e3cba9', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: 'cf36b9fae6c3cb821101a23abe071daceae5bd45', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '060b12a98b60f4888f280322547505ce42734f2d', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '6b1962a2c3b75e979e69db4817e3b754ab9d9296', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '47662fbec3bf8912e7beb740aa591ef94cc3a527', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '7623ea8c30322aca869617976c0e8d25c0f08929', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: 'e24bdc80a8f542a9eb490fc49d4acaf7268804ca', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: 'bb14776ac673285917204f3ec0d24f51d21e41df', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '1945572fc04df1778d212ba95f8aa5863037fa9e', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '6a1571e72fde874357166c0001c1f4ed4fcc2652', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
     }
     static get is() { return "seki-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -848,6 +851,58 @@ export class SekiDataTable {
                 "reflect": false,
                 "attribute": "empty-message",
                 "defaultValue": "'No data'"
+            },
+            "fetchData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FetchDataCallback",
+                    "resolved": "((request: FetchRequest) => Promise<FetchResponse>) | undefined",
+                    "references": {
+                        "FetchDataCallback": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::FetchDataCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": ": in the lazy-loader build only\ndecorated members are proxied from the host element to the instance."
+                        }],
+                    "text": "Callback to fetch data. Set it as a JS property. Assigning or replacing it\n(re)loads the table. Must be a"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "renderExpandedRow": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RenderExpandedRowCallback",
+                    "resolved": "((row: Record<string, unknown>) => string) | undefined",
+                    "references": {
+                        "RenderExpandedRowCallback": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::RenderExpandedRowCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": ", see fetchData)"
+                        }],
+                    "text": "Callback to render expanded row content (must be a"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -1262,6 +1317,9 @@ export class SekiDataTable {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "fetchData",
+                "methodName": "fetchDataChanged"
+            }, {
                 "propName": "columns",
                 "methodName": "columnsChanged"
             }, {

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dialog content panel
  *
@@ -9,6 +10,11 @@ import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
  */
 export class SekiDialogContent {
     constructor() {
+        this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', () => this.onDialogOpenChange());
+        /**
+         * Re-read the parent's context. Runs once on connect (picking up a dialog
+         * that is already open, e.g. `<seki-dialog open>`) and on every publish.
+         */
         this.onDialogOpenChange = () => {
             var _a, _b;
             const context = this.getContext();
@@ -33,24 +39,10 @@ export class SekiDialogContent {
         this._isOpen = false;
     }
     getContext() {
-        const dialog = this.el.closest('seki-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return dialog ? dialog._dialogContext : null;
+        return this.dialogConsumer.context;
     }
-    componentWillRender() {
-        var _a, _b;
-        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;
-        // Handle focus on open
-        if (!wasOpen && this._isOpen) {
-            this.previousActiveElement = document.activeElement;
-            // Focus will be set in componentDidRender
-        }
-        // Handle focus on close
-        if (wasOpen && !this._isOpen) {
-            (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
-        }
+    connectedCallback() {
+        this.dialogConsumer.connect(this.el);
     }
     componentDidRender() {
         if (this._isOpen && this.contentRef) {
@@ -62,12 +54,6 @@ export class SekiDialogContent {
             });
         }
     }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for context changes
-        this.dialogEl = (_a = this.el.closest('seki-dialog')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onDialogOpenChange);
-    }
     handleKeyDown(event) {
         if (!this._isOpen)
             return;
@@ -85,8 +71,7 @@ export class SekiDialogContent {
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
+        this.dialogConsumer.disconnect();
     }
     render() {
         const context = this.getContext();

package/dist/collection/components/dialog/seki-dialog-description.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dialog description
  *
@@ -7,14 +8,19 @@ import { h, Host } from "@stencil/core";
  * @part description - The description element
  */
 export class SekiDialogDescription {
-    getContext() {
-        const dialog = this.el.closest('seki-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return dialog ? dialog._dialogContext : null;
+    constructor() {
+        this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', context => {
+            this._id = context === null || context === void 0 ? void 0 : context.descriptionId;
+        });
+    }
+    connectedCallback() {
+        this.dialogConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.dialogConsumer.disconnect();
     }
     render() {
-        const context = this.getContext();
-        return (h(Host, { key: '7b0104247624e150d1b1d8076ed21b2169fc097b' }, h("p", { key: '5db65c820a6e146aafe89b4f542386019b12a614', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: '85320e13964565ab011a2cba7b0b8cd8eaacf80a' }))));
+        return (h(Host, { key: '635ff7451517dce9556fda6c25510644dc7855d2' }, h("p", { key: 'e07527f9157e61cdff3e4188c8b3892407d3f205', part: "description", id: this._id, class: "dialog-description" }, h("slot", { key: '7299a25bfd795663507202ff2b92b8e6438de2e1' }))));
     }
     static get is() { return "seki-dialog-description"; }
     static get encapsulation() { return "shadow"; }
@@ -28,5 +34,10 @@ export class SekiDialogDescription {
             "$": ["seki-dialog-description.css"]
         };
     }
+    static get states() {
+        return {
+            "_id": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

package/dist/collection/components/dialog/seki-dialog-overlay.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dialog overlay (backdrop)
  *
@@ -11,6 +12,7 @@ export class SekiDialogOverlay {
          */
         this.closeOnClick = true;
         this._isOpen = false;
+        this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', () => this.onDialogOpenChange());
         this.onDialogOpenChange = () => {
             var _a;
             const context = this.getContext();
@@ -23,24 +25,13 @@ export class SekiDialogOverlay {
         };
     }
     getContext() {
-        const dialog = this.el.closest('seki-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return dialog ? dialog._dialogContext : null;
+        return this.dialogConsumer.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;
-    }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for context changes
-        this.dialogEl = (_a = this.el.closest('seki-dialog')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onDialogOpenChange);
+    connectedCallback() {
+        this.dialogConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
+        this.dialogConsumer.disconnect();
     }
     render() {
         if (!this._isOpen) {

package/dist/collection/components/dialog/seki-dialog-title.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dialog title
  *
@@ -7,14 +8,19 @@ import { h, Host } from "@stencil/core";
  * @part title - The title element
  */
 export class SekiDialogTitle {
-    getContext() {
-        const dialog = this.el.closest('seki-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return dialog ? dialog._dialogContext : null;
+    constructor() {
+        this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', context => {
+            this._id = context === null || context === void 0 ? void 0 : context.titleId;
+        });
+    }
+    connectedCallback() {
+        this.dialogConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.dialogConsumer.disconnect();
     }
     render() {
-        const context = this.getContext();
-        return (h(Host, { key: '8563ff00c6d6be076fcbf1c407abb8c4c3dac8ba' }, h("h2", { key: '95f31b424091d535abef32134e3304374b0c177d', part: "title", id: context === null || context === void 0 ? void 0 : context.titleId, class: "dialog-title" }, h("slot", { key: '308643273e0800c08e618c3c77386143f1281890' }))));
+        return (h(Host, { key: '7ffac23990c2de77d4ab06b5f9ad180eb941d651' }, h("h2", { key: '1d46ec7882f26e9657180af839ce8c1ddecca3ba', part: "title", id: this._id, class: "dialog-title" }, h("slot", { key: '4b361e327dfaa9b11df17d7b551d4d27bb07f5d7' }))));
     }
     static get is() { return "seki-dialog-title"; }
     static get encapsulation() { return "shadow"; }
@@ -28,5 +34,10 @@ export class SekiDialogTitle {
             "$": ["seki-dialog-title.css"]
         };
     }
+    static get states() {
+        return {
+            "_id": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { lockBodyScroll, unlockBodyScroll } from "../../utils/dialog/focus-trap";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Dialog root component for modal dialogs
  *
@@ -29,6 +30,19 @@ export class SekiDialog {
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so parts that render with this dialog
+        // (or upgrade before it, under one-module-per-tag loading) see `open`
+        // declared in HTML (#323).
+        this.publish();
+    }
+    componentDidLoad() {
+        // A dialog declared open in HTML never went through openDialog().
+        if (this._isOpen && this.modal) {
+            lockBodyScroll();
+        }
+    }
+    handleModalChange() {
+        this.publish();
     }
     handleOpenPropChange(newValue) {
         // Honour controlled `open` updates after first render. Without this, setting
@@ -57,8 +71,7 @@ export class SekiDialog {
         // Update context for child components before emitting, so that any listener
         // reading _dialogContext synchronously (e.g. seki-dialog-content) sees isOpen
         // already updated.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(true);
         if (this.modal) {
             lockBodyScroll();
@@ -75,8 +88,7 @@ export class SekiDialog {
         // Update context for child components before emitting, so that any listener
         // reading _dialogContext synchronously (e.g. seki-dialog-content) sees isOpen
         // already updated.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(false);
         if (this.modal) {
             unlockBodyScroll();
@@ -98,13 +110,8 @@ export class SekiDialog {
             close: () => this.closeDialog(),
         };
     }
-    componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
-    }
-    componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
+    publish() {
+        publishContext(this.el, '_dialogContext', this.getContext(), this.dialogContextChange);
     }
     disconnectedCallback() {
         // Ensure body scroll is unlocked if component is removed while open
@@ -113,7 +120,7 @@ export class SekiDialog {
         }
     }
     render() {
-        return (h(Host, { key: 'e647d4403eb9d3d3fa4a8da8b218659f9942c9e5', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '16eaa11585e656a62da1cf02a75d7d49610d65ae', part: "dialog", class: "dialog" }, h("slot", { key: 'a281ff724e3518a74f87bd9cab3bd70304e38cde' }))));
+        return (h(Host, { key: 'a1aa2d420059b896076fc23e80ad0843c54ca6e9', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c84e45a16884cc61fb26e4a5fd5b96547405bcea', part: "dialog", class: "dialog" }, h("slot", { key: '13f5b8cbae8ba716473dabdef44e5ea08f5a881b' }))));
     }
     static get is() { return "seki-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -212,6 +219,21 @@ export class SekiDialog {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "dialogContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies dialog parts (content, overlay, title, description)\nthat `_dialogContext` changed. Not part of the public API; listen to\n`sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -255,6 +277,9 @@ export class SekiDialog {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "modal",
+                "methodName": "handleModalChange"
+            }, {
                 "propName": "open",
                 "methodName": "handleOpenPropChange"
             }];

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * seki-drawer-content: Container for drawer content with gesture support
  *
@@ -52,9 +53,7 @@ export class SekiDrawerContent {
         this.startX = 0;
         this.contentEl = null;
         this.positions = [];
-        this.onDrawerOpenChange = () => {
-            this.syncOpenState();
-        };
+        this.drawerConsumer = new ContextConsumer('seki-drawer', '_drawerContext', () => this.syncOpenState());
         this.handleCloseClick = () => {
             this.requestClose.emit();
         };
@@ -152,29 +151,28 @@ export class SekiDrawerContent {
     get isHorizontal() {
         return this.direction === 'left' || this.direction === 'right';
     }
+    connectedCallback() {
+        this.drawerConsumer.connect(this.el);
+        this.propagateDirection();
+    }
     componentWillLoad() {
-        var _a;
         this.parseSnapPoints();
-        this.drawerEl = (_a = this.el.closest('seki-drawer')) !== null && _a !== void 0 ? _a : undefined;
-        // Propagate direction to parent for styling
-        if (this.drawerEl) {
-            this.drawerEl.setAttribute('data-direction', this.direction);
-            this.syncOpenState();
-        }
     }
-    componentDidLoad() {
-        var _a, _b, _c;
-        (_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('drawerOpen', this.onDrawerOpenChange);
-        (_b = this.drawerEl) === null || _b === void 0 ? void 0 : _b.addEventListener('drawerClose', this.onDrawerOpenChange);
-        (_c = this.drawerEl) === null || _c === void 0 ? void 0 : _c.addEventListener('drawerSnap', this.onDrawerOpenChange);
+    /** Propagate the direction to the parent for styling. */
+    propagateDirection() {
+        var _a;
+        (_a = this.drawerConsumer.parent) === null || _a === void 0 ? void 0 : _a.setAttribute('data-direction', this.direction);
     }
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a drawer
+     * that is already open, e.g. `<seki-drawer open>`) and on every publish.
+     */
     syncOpenState() {
-        var _a;
-        if (!this.drawerEl)
+        var _a, _b;
+        // No seki-drawer parent: stay open (standalone use).
+        if (!this.drawerConsumer.parent)
             return;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const context = this.drawerEl._drawerContext;
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        this._isOpen = (_b = (_a = this.drawerConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
     }
     parseSnapPoints() {
         const points = this.snapPoints
@@ -237,10 +235,7 @@ export class SekiDrawerContent {
         }
     }
     disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('drawerOpen', this.onDrawerOpenChange);
-        (_b = this.drawerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('drawerClose', this.onDrawerOpenChange);
-        (_c = this.drawerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('drawerSnap', this.onDrawerOpenChange);
+        this.drawerConsumer.disconnect();
     }
     render() {
         if (!this._isOpen) {
@@ -449,6 +444,9 @@ export class SekiDrawerContent {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "direction",
+                "methodName": "propagateDirection"
+            }, {
                 "propName": "snapPoints",
                 "methodName": "parseSnapPoints"
             }];

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * seki-drawer: Mobile-friendly drawer component with swipe gestures
  *
@@ -40,8 +41,8 @@ export class SekiDrawer {
         this._isOpen = this.open || this.defaultOpen;
         this.open = this._isOpen;
         this.currentSnapPoint = this._isOpen ? 1 : 0;
-    }
-    componentDidLoad() {
+        // Publish before the first render so `<seki-drawer open>` shows its content
+        // at first paint (#323).
         this.updateContext();
     }
     handleOpenPropChange(newValue) {
@@ -111,9 +112,8 @@ export class SekiDrawer {
     }
     updateContext() {
         // seki-drawer-content has no other way to know this drawer's open state —
-        // it reads this off the host element via closest('seki-drawer').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._drawerContext = { isOpen: this._isOpen };
+        // it reads this off the host element (see consumeContext in context-bridge).
+        publishContext(this.el, '_drawerContext', { isOpen: this._isOpen }, this.drawerContextChange);
     }
     handleTriggerClick() {
         this.toggleDrawer();
@@ -130,10 +130,10 @@ export class SekiDrawer {
         }
     }
     render() {
-        return (h("div", { key: '8740a2d8aad6119d9388b744fd0f7679c771e572', class: {
+        return (h("div", { key: '8e9c6c60ed2747b2e04f9057031fb98e98e39554', class: {
                 'seki-drawer': true,
                 'seki-drawer--open': this._isOpen,
-            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '54a1e6c7293e36038e24ee64c463f3329843fe35' }), this._isOpen && (h("div", { key: '89d7c1556c00b8e1faba0e96a6d66016d9790ade', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '8366502b9a1aa0404dfbabaaeedbb4d6b5c52080' }), this._isOpen && (h("div", { key: '693cb80fc7442b8eb3083dbc13704cd6a8b87685', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
     }
     static get is() { return "seki-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +258,21 @@ export class SekiDrawer {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "drawerContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies seki-drawer-content that `_drawerContext` changed. Not\npart of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LabelBinding } from "../../utils/label-association";
 export class SekiFieldLabel {
     constructor() {
         /**
@@ -7,9 +8,29 @@ export class SekiFieldLabel {
          */
         this.required = 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.htmlFor);
+    }
+    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.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'ff0853ec0cd7216d1357f6a67d31d477ed244c24' }, labelProps), h("slot", { key: 'caf0af6159cd63804748b99a66d20c1f40a23111' }), this.required && h("span", { key: '0628546ed8740017449a543dcb1b2bfa279ff254', class: "required-indicator" }, " *")));
+        return (h("label", { key: '012428a2524290c08330f7e9163c4f040a01c5c4' }, h("slot", { key: 'fec4e4466151bf66657c4326fa8978dac8137692', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: 'b21ecf7ad0432714e7160bf0ec911450eb1f7027', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +58,7 @@ export class SekiFieldLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "ID of the form control this label is for\nSets the `for` attribute on the label element"
+                    "text": "ID of the form control this label is for\nResolved in the label's own root node (not this component's shadow root), so it\nreaches light-DOM controls. Falls back to the control nested in the label."
                 },
                 "getter": false,
                 "setter": false,
@@ -67,4 +88,19 @@ export class SekiFieldLabel {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "htmlFor",
+                "methodName": "onForChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }