@sekiui/elements 0.1.2 → 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: '5290c225a0e1b2cf0699baf87a2fab85fd9954af' }, h("div", { key: '028ac37234e7adb80c89968c576a0914d4e75dc3', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '3e037515097715938502c39b7e6a7e7eabecf623', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '2fa3565b1663d3ec82124152ef99cc31b970c962', class: "data-table__search" }, h("input", { key: '9430f20d766eb526650981c1b090585a2b990bd7', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '313a9f194d1123eb95ea0b791d9cfd413a7b3d84', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'c00fa17d298ac5034381b3850409966f3e9cc8ad', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '5ace20f0e45356da220add1a1e2b3a0a5fb644c0', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '7551236f7aec32db2bfa64952a8a84f8b67b60d3', 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: '93f2bf72539f9d442653032e7772346539cced73', class: "data-table__table", role: "grid" }, h("thead", { key: '8ab566ccd571fa76e96e4bbb7d468f369d01e3eb', class: "data-table__head" }, h("tr", { key: '338c244ac79ace0eebb8087564a555655451e33b', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '1225b037948c346050035382f407392a3a64d32e', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'df702aa6de2271a845904f63358f509c1e8140bf', 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: '84f7802b8f80476e82ea1342dc928ada3700524e', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '0e9646ebf0d8069e8d61dfe4c0e4beb69585c922', 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: 'a775edd93f2efb08cdebd74a6818900f844dd000', 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: 'fdc42f1588f5bdd6c2bf1abf51afff53b9487a6f', class: "data-table__loading-overlay" }, h("div", { key: '3ddeec3d9e247a0858cbebeca69250df02f52a8e', class: "data-table__loading" }, "Loading...")))), h("div", { key: '70f4d46880d127e8d5c862715fb6d3c18a51630e', class: "data-table__pagination" }, h("div", { key: 'f6675db5f9d46e4c6615ea231a544a60603f990c', 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: '9388d391584f5fb1d60473a43e549393a882c6b3', class: "data-table__pagination-controls" }, h("select", { key: '16a5aed8e811d9ec0934a7a35225bf78566f88db', 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: 'c875c2938c02b09904becc2602d6d37024a85567', 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: '1c66a365b2cc5dc0c7cec71cb4f2703aa1795dc4', 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: '99a30dfdd3dbec2e92de2b1410bcc43db96ef84a', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: 'ea516e677c984038298336414ed252692939c39e', 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: 'aebcedde86678c9a7066e9d430f2ab4f8801e509', 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/date-picker/seki-date-picker.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { format } from "../../utils/calendar/date-utils";
+import { FormControl } from "../../utils/form-control";
 /**
  * seki-date-picker: A date picker component with popover calendar
  *
@@ -69,8 +70,61 @@ export class SekiDatePicker {
         if ('attachInternals' in HTMLElement.prototype) {
             this.internals = this.el.attachInternals();
         }
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => {
+                const value = this.parseDate(this.value);
+                return value ? value.toISOString() : '';
+            },
+            // A range is only complete once both ends are picked.
+            isEmpty: () => this.mode === 'range'
+                ? !this.parseDate(this.rangeFrom) || !this.parseDate(this.rangeTo)
+                : !this.parseDate(this.value),
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please select a date.',
+            getAnchor: () => this.triggerRef,
+            // The calendar already greys out dates outside minDate/maxDate; this covers
+            // values assigned programmatically.
+            getConstraints: () => {
+                if (this.mode !== 'single')
+                    return null;
+                const date = this.parseDate(this.value);
+                const min = this.parseDate(this.minDate);
+                const max = this.parseDate(this.maxDate);
+                if (date && min && date < min) {
+                    return { flags: { rangeUnderflow: true }, message: 'Please select a later date.' };
+                }
+                if (date && max && date > max) {
+                    return { flags: { rangeOverflow: true }, message: 'Please select an earlier date.' };
+                }
+                return null;
+            },
+            restore: initial => {
+                this.value = initial.value;
+                this.rangeFrom = initial.rangeFrom;
+                this.rangeTo = initial.rangeTo;
+            },
+            restoreState: state => {
+                if (this.mode === 'single')
+                    this.value = typeof state === 'string' && state ? state : undefined;
+            },
+        });
+        this.formControl.captureInitial({ value: this.value, rangeFrom: this.rangeFrom, rangeTo: this.rangeTo });
         this.updateFormValue();
     }
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
+    formResetCallback() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
+    }
+    formStateRestoreCallback(state) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
     componentDidLoad() {
         if (this._isOpen) {
             requestAnimationFrame(() => {
@@ -91,10 +145,8 @@ export class SekiDatePicker {
         }
     }
     updateFormValue() {
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            const value = this.parseDate(this.value);
-            this.internals.setFormValue(value ? value.toISOString() : '');
-        }
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     parseDate(value) {
         if (!value)
@@ -215,12 +267,12 @@ export class SekiDatePicker {
         const selectedDate = this.parseDate(this.value);
         const rangeFrom = this.parseDate(this.rangeFrom);
         const rangeTo = this.parseDate(this.rangeTo);
-        return (h("div", { key: '4166dae93dc1973ef93c3c6eb94c97c2d6880e80', class: "seki-date-picker" }, h("button", { key: 'aff28759e9a811a8e4a861e6abe0383e08755097', type: "button", ref: el => (this.triggerRef = el), class: {
+        return (h("div", { key: 'b04f6a17da6d5c738d3f93559d1af4c75c6bb425', class: "seki-date-picker" }, h("button", { key: '8a2667e31438375ca0eb298466443187cfb59bed', type: "button", ref: el => (this.triggerRef = el), class: {
                 'seki-date-picker__trigger': true,
                 'seki-date-picker__trigger--open': this._isOpen,
                 'seki-date-picker__trigger--disabled': this.disabled,
                 'seki-date-picker__trigger--has-value': hasValue,
-            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: 'e5feb454d93f70d905068193f468de164f37f5f9', class: "seki-date-picker__icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'e4d18b44d59615a33a568c468cc3160e185264c6', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '723be4b06ce2f33be271648d69c7ed1799720ccc', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '185f2fca74018529a33ae13404f5f4c2556fcd16', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '9d09480603e7e427f9b1b8c373a50e41f9fdebf0', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: '9c5e4d53ad127b88bcdcc71f274166bc0fefb056', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this._isOpen && (h("div", { key: '901c0438449ffaad895f06b58b09a6fb6e3e8487', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: '1c00a8f38cfff26ec7df601a81bcba11c6c37087', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
+            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: 'faa419039b07be90d60b4116552b518bac0f2563', class: "seki-date-picker__icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'd1803b39a6a209cdc8cd4f237e6bba1e8799c696', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '723f355cdf51382e089a9530eedd0b2a9b4931b9', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: 'fdca3f35fce5819059474a3f9e30e0e5d14293be', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '88b77787351f12d4811d7141081077d25a4a3d9e', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: '9e445f33f05be5642db375398d00dc7726d5b4a7', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this._isOpen && (h("div", { key: '78d2ba423a7839c2a24a81b103378eeeff5532bd', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: 'c4880004c25329cd899924dc47d6a8eb4bb9cdd7', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
     }
     static get is() { return "seki-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -696,6 +748,21 @@ export class SekiDatePicker {
             }, {
                 "propName": "rangeTo",
                 "methodName": "updateFormValue"
+            }, {
+                "propName": "minDate",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "maxDate",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "required",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "disabled",
+                "methodName": "updateFormValue"
+            }, {
+                "propName": "mode",
+                "methodName": "updateFormValue"
             }];
     }
     static get listeners() {

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

@@ -11,7 +11,7 @@ export class SekiDialogClose {
         this.closeDialog.emit();
     }
     render() {
-        return (h(Host, { key: 'fbf5700168952759b9841211fe198c3d5309155d' }, h("button", { key: '97a4d3b9868ae8ee18117fee7477c03608d72a79', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: 'c3bf0dc4b65919c053026191c1a89e7448233d8f' }, h("svg", { key: '01e4f7a2182fa9acda65584c4a6be0a19aa1cc2e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '3e0f300fe41bbcbee0bd891f3dbd07c775f9b531', d: "M18 6 6 18" }), h("path", { key: 'c40891f946aafb4cc79f821889f2fae7222b41fc', d: "m6 6 12 12" }))), h("span", { key: '5e4988a53c8e108f004b5522d5f7aebec87c9f07', class: "sr-only" }, "Close"))));
+        return (h(Host, { key: '3076b1d4ab5fdd8615662ed8e8dd4a544bcdb985' }, h("button", { key: 'd0b78390b904bd68f1a40d95549c1a7fe4378e42', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: '7d91ce16f8ed4540dbc8e4759efa2128277f5dea' }, h("svg", { key: 'ff27bdf1041d11e9c69d23a4d5771b655f84084c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '1bed288cc3a7850ca17b1cf2bd8396a80ce53df7', d: "M18 6 6 18" }), h("path", { key: 'b971585a71acaa9cfb73d771ae0e580b3376336f', d: "m6 6 12 12" }))), h("span", { key: '2e5ac452a430a59d2a4905e75441401cf78b0709', class: "sr-only" }, "Close"))));
     }
     static get is() { return "seki-dialog-close"; }
     static get encapsulation() { return "shadow"; }

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: '9fe95f1b0ca930f023215103d6c296bd568731b3' }, h("p", { key: '5ad693bd433dd158ac572c4020570146f4a35297', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: '96bbcc24f3682c34e98e68ad4e0ed61bee9bfdbd' }))));
+        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-footer.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDialogFooter {
     render() {
-        return (h(Host, { key: '59fbccae81475ec7f10875b6d88cf43978fa83e1' }, h("div", { key: '1152c116f8fe9106c78cc6aa28265fb8fc7990d3', part: "footer", class: "dialog-footer" }, h("slot", { key: '0e4ce3a756d3bf4a6709b6f665d607cc1335874d' }))));
+        return (h(Host, { key: '02e038242c98eab8d21e55710112036218e006cb' }, h("div", { key: '88f3bdfa080de914b1402a5c11c8c9fc12ba91bf', part: "footer", class: "dialog-footer" }, h("slot", { key: 'b6f64dfbf61c07eb5f3fcb6ee3f6369cb5985557' }))));
     }
     static get is() { return "seki-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDialogHeader {
     render() {
-        return (h(Host, { key: '5eeefc7fb060ed5aa47f3eaf00b388729a2fb203' }, h("div", { key: 'fcd059d52b0ceebf8a8b581ba4ad32c188508d26', part: "header", class: "dialog-header" }, h("slot", { key: 'f1fef1b9fd409d7920ef285fe49895c40f361d67' }))));
+        return (h(Host, { key: 'db7d6837551f388010587ac956a87d91b22c7eea' }, h("div", { key: '66f347193ceec5a062aaff246804dd2a297b9104', part: "header", class: "dialog-header" }, h("slot", { key: '45c4fedd249b9b96d90f52e279521f65d964ad38' }))));
     }
     static get is() { return "seki-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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: '6077dbd8d6f8aa1aac00df21bf8ba3f1facf944e' }, h("h2", { key: 'd495d84e88c944c43915b8e1ab291f45549d1d41', part: "title", id: context === null || context === void 0 ? void 0 : context.titleId, class: "dialog-title" }, h("slot", { key: '32adacc57fc755f5f0ddfd3826c039c695853ff6' }))));
+        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-trigger.js

@@ -11,7 +11,7 @@ export class SekiDialogTrigger {
         this.triggerClick.emit();
     }
     render() {
-        return (h(Host, { key: '0bd47f4db38ea3fb08bdd74e1d42c81dfcb8d3cf' }, h("span", { key: '83170a93eaf8463fdfd00fd2541dd2834507eeef', part: "trigger", class: "dialog-trigger" }, h("slot", { key: '1b1318db45d35b1d2afcb9cc1238333c48a22eb7' }))));
+        return (h(Host, { key: 'e1044138516e26d0b379505d50bc9b5efd383ee8' }, h("span", { key: '087e534c470eb1d96337f27067ce362b21eabc9a', part: "trigger", class: "dialog-trigger" }, h("slot", { key: '90ce25b6d9e5ca681297a6656cc43e7cee6bd4d9' }))));
     }
     static get is() { return "seki-dialog-trigger"; }
     static get encapsulation() { return "shadow"; }

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: 'c0b5c16c3d4877691dd949cabbf3d3bad28b9743', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'bd6a709bdd992aefbecfbeae8ba24d1233872c4f', part: "dialog", class: "dialog" }, h("slot", { key: '7723c79670a33449a46bc697d5168b6fd6ccc7e5' }))));
+        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/direction/seki-direction.js

@@ -18,7 +18,7 @@ export class SekiDirection {
         this.dir = 'ltr';
     }
     render() {
-        return (h(Host, { key: '9ff0711b89c76b02d431614c3bc1f71f17c0c71b', dir: this.dir }, h("slot", { key: 'bb4a67303b3f2e977a8fc3105680179c356b667e' })));
+        return (h(Host, { key: 'f88b2b2f5141ab10202a945ae3a437b383c59fed', dir: this.dir }, h("slot", { key: 'c14e1f5265bce7da29534426f339e32e8f576361' })));
     }
     static get is() { return "seki-direction"; }
     static get encapsulation() { return "shadow"; }