@sekiui/elements 0.1.4 → 0.1.5

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

@@ -66,6 +66,8 @@ export class SekiDataTable {
         };
         /** Viewport height for virtual scroll */
         this.viewportHeight = 400;
+        /** Monotonic id of the latest loadData call; older responses are discarded. */
+        this.loadSeq = 0;
         this.handleScroll = (event) => {
             if (!this.virtualScroll)
                 return;
@@ -102,15 +104,15 @@ export class SekiDataTable {
         this.handleSearchInput = (event) => {
             const value = event.target.value;
             this.searchInputValue = value;
-            if (this.searchTimeout) {
-                clearTimeout(this.searchTimeout);
-            }
+            this.cancelPendingSearch();
             this.searchTimeout = setTimeout(() => {
+                this.searchTimeout = undefined;
                 this.updateState({ search: value, page: 0 });
                 this.loadData();
             }, this.searchDebounce);
         };
         this.handleClearSearch = () => {
+            this.cancelPendingSearch();
             this.searchInputValue = '';
             this.updateState({ search: '', page: 0 });
             this.loadData();
@@ -204,6 +206,7 @@ export class SekiDataTable {
         this.setupVirtualScroll();
     }
     disconnectedCallback() {
+        this.cancelPendingSearch();
         this.cleanupVirtualScroll();
         // If the table is removed mid column-resize, tear down the document-level
         // drag listeners so they don't leak and keep firing against a dead instance.
@@ -369,6 +372,7 @@ export class SekiDataTable {
         if (!this.fetchData) {
             return;
         }
+        const seq = ++this.loadSeq;
         this.updateState({ loading: true });
         const request = {
             page: this.state.page,
@@ -379,6 +383,19 @@ export class SekiDataTable {
         };
         try {
             const response = await this.fetchData(request);
+            // A newer load started while this one was in flight: its result wins.
+            if (seq !== this.loadSeq)
+                return;
+            // The result set may have shrunk below the current page (filter, external
+            // change + refresh()). Move to the last valid page and refetch it. This
+            // terminates: lastPage < page strictly, and is 0 when there are no rows.
+            const lastPage = Math.max(0, Math.ceil(response.totalRows / this.state.pageSize) - 1);
+            if (this.state.page > lastPage) {
+                this.updateState({ page: lastPage, totalRows: response.totalRows });
+                this.pageChange.emit({ page: lastPage, pageSize: this.state.pageSize });
+                await this.loadData();
+                return;
+            }
             this.updateState({
                 rows: response.rows,
                 totalRows: response.totalRows,
@@ -390,10 +407,18 @@ export class SekiDataTable {
             }
         }
         catch (error) {
+            if (seq !== this.loadSeq)
+                return;
             console.error('[seki-data-table] Error fetching data:', error);
             this.updateState({ loading: false });
         }
     }
+    cancelPendingSearch() {
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = undefined;
+        }
+    }
     // =========================================================================
     // Render Helpers
     // =========================================================================
@@ -403,7 +428,7 @@ export class SekiDataTable {
             .sort((a, b) => a.orderIndex - b.orderIndex);
     }
     getTotalPages() {
-        return Math.ceil(this.state.totalRows / this.state.pageSize);
+        return Math.max(1, Math.ceil(this.state.totalRows / this.state.pageSize));
     }
     isAllSelected() {
         if (this.state.rows.length === 0)
@@ -423,10 +448,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        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: {
+        return (h(Host, { key: 'ef7266d08b7f59aed85189526cfd396d7065ec70' }, h("div", { key: '93d095c6f554e87dd8772de1965413573f68053c', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '3bc4368791a26f54704790d76992f6032006697d', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'db29b0c781ea9156916cfc846695b18f4bdfa34b', class: "data-table__search" }, h("input", { key: 'bdc57d3f0aafe38b10d8adb5d40f75f262e07d4e', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'd9ae5008168f17cbf37064f2ef6f8982c75b4be0', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'd7c0c68d9f30c218d476b80ff099cc1d32120ffb', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '9f9e2e9cd861585cc8633a8609c3a0d86c872b19', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: 'be86855eb822e478e5335564b2b761112c64a77a', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, 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 => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'ebd3c34018b944a0f2b6fe628121ec85a33e7434', class: "data-table__table", role: "grid" }, h("thead", { key: '5ff99f94676259161550501547e80d70c0ad3504', class: "data-table__head" }, h("tr", { key: '39cf1c498490bf2a4f77cfa4eda6c84bd013e77c', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '4f42cf205f41e14ebc0753474c7ef3dffd4d7621', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'c92983de7f4f6a76c5e59b2229603b671258c3db', 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: 'a985e1bcf41c50789036a753a6201b0ce8b329e6', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '5348325ae5babe41971ec38baadcb643786ba2a7', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -442,7 +467,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: '108750862419ff50da47dd4dac725a37dd4a4568', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: '990dd4e9513edd19707524f2070dafa2118e9637', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -485,12 +510,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: '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
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '1bd3786f7f62223ece07ecb4a0584fa571cdd1f5', class: "data-table__loading-overlay" }, h("div", { key: '5ea48299d4904c40c85bb8febca80d9003bac931', class: "data-table__loading" }, "Loading...")))), h("div", { key: '7e5ee89bc773833f70ee97fc78ce90f195476fd3', class: "data-table__pagination" }, h("div", { key: '16ff12879240b0d3ca554c2d54060b463cd3b880', 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: '554fe4cb908614c48d7dddd538796c8301c674ed', class: "data-table__pagination-controls" }, h("select", { key: 'df31158d96da258dc59a1b8b34bdf0192c8da54c', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: '4e22693aa84afffc1fca03ca88ad8235f7b22b04', class: "data-table__pagination-controls" }, h("select", { key: '0b08e5b10b5c9d313abed8995f116cff0d499d76', 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: '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"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: 'ebac0679723c2769dfdeee0c78c91cbd43083d34', 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: '03fdb7e083597370d0fb54a9dd7cc4ea77d19181', 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: '90bb4c5f8b1a8350c956b354fd3a0570909c1613', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '2d16b396615b4bb091154e27edcca428042f620d', 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: 'bf9b1446d2eb123acc05eb83e8df8416a8a2a7a1', 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"; }

package/dist/collection/components/date-picker/seki-date-picker.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
-import { format } from "../../utils/calendar/date-utils";
+import { format, parseDateInput, toISODate } from "../../utils/calendar/date-utils";
 import { FormControl } from "../../utils/form-control";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * seki-date-picker: A date picker component with popover calendar
  *
@@ -63,6 +64,12 @@ export class SekiDatePicker {
                 this.closeDatePicker();
             }
         };
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({ onEscape: (event) => this.handleEscape(event) });
     }
     componentWillLoad() {
         this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
@@ -72,8 +79,24 @@ export class SekiDatePicker {
         }
         this.formControl = new FormControl(this.el, this.internals, {
             getFormValue: () => {
+                if (this.mode === 'range') {
+                    // Range mode submits two entries, `<name>-from` and `<name>-to`
+                    // (YYYY-MM-DD each); an unset end is omitted.
+                    if (!this.name)
+                        return null;
+                    const from = this.parseDate(this.rangeFrom);
+                    const to = this.parseDate(this.rangeTo);
+                    if (!from && !to)
+                        return null;
+                    const data = new FormData();
+                    if (from)
+                        data.append(`${this.name}-from`, toISODate(from));
+                    if (to)
+                        data.append(`${this.name}-to`, toISODate(to));
+                    return data;
+                }
                 const value = this.parseDate(this.value);
-                return value ? value.toISOString() : '';
+                return value ? toISODate(value) : null;
             },
             // A range is only complete once both ends are picked.
             isEmpty: () => this.mode === 'range'
@@ -149,12 +172,7 @@ export class SekiDatePicker {
         (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     parseDate(value) {
-        if (!value)
-            return null;
-        if (value instanceof Date)
-            return value;
-        const parsed = new Date(value);
-        return isNaN(parsed.getTime()) ? null : parsed;
+        return parseDateInput(value);
     }
     formatDisplayValue() {
         if (this.mode === 'single') {
@@ -205,6 +223,9 @@ export class SekiDatePicker {
         this.popoverRef.style.zIndex = '1000';
     }
     handleKeyDown(event) {
+        this.handleEscape(event);
+    }
+    handleEscape(event) {
         var _a;
         if (event.key === 'Escape' && this._isOpen) {
             event.preventDefault();
@@ -212,6 +233,12 @@ export class SekiDatePicker {
             (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
+    }
+    disconnectedCallback() {
+        this.layer.setActive(false);
+    }
     handleDocumentClick(event) {
         if (!this._isOpen)
             return;
@@ -267,12 +294,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: 'b04f6a17da6d5c738d3f93559d1af4c75c6bb425', class: "seki-date-picker" }, h("button", { key: '8a2667e31438375ca0eb298466443187cfb59bed', type: "button", ref: el => (this.triggerRef = el), class: {
+        return (h("div", { key: '91fef921f7ff7dcb3b591396d17cde1fb792b1d7', class: "seki-date-picker" }, h("button", { key: 'cfa219217db627fbafd866d1f048849aeb38b401', 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: '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 })))));
+            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, "aria-description": this.ariaDescription || undefined, "aria-invalid": this.ariaInvalid === 'true' ? 'true' : undefined, onClick: this.handleTriggerClick }, h("svg", { key: '915378fd4ddbe1fedffb2e3fb94721047ddf8791', 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: '5f7f15aead150449099923a25a6309e26a1d6da7', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'cd592872a8870ed925b946822b48ed89e18f274b', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '2cea30f9b83fbec71070512a71cc1356abdf7ae9', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '981337d05f5ddc34d6f0cb9cb28e409ca9b8e1d8', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: '9f80f6c6b56a5bbcdbbc3d787220a94fd1f3713c', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this._isOpen && (h("div", { key: 'f1f222b867d12a0b8a30e582d01be1fd6e1cfb8e', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: 'a1e3931dd50efca67686c5f020917276ae19e4f7', mode: this.mode, selected: selectedDate ? toISODate(selectedDate) : undefined, "range-from": rangeFrom ? toISODate(rangeFrom) : undefined, "range-to": rangeTo ? toISODate(rangeTo) : undefined, "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"; }
@@ -513,7 +540,7 @@ export class SekiDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Form field name"
+                    "text": "Form field name. In single mode the submitted value is `YYYY-MM-DD`. In\nrange mode two entries are submitted: `<name>-from` and `<name>-to`\n(each `YYYY-MM-DD`; an unset end is omitted)."
                 },
                 "getter": false,
                 "setter": false,
@@ -559,6 +586,44 @@ export class SekiDatePicker {
                 "reflect": false,
                 "attribute": "aria-label"
             },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -757,6 +822,9 @@ export class SekiDatePicker {
             }, {
                 "propName": "required",
                 "methodName": "updateFormValue"
+            }, {
+                "propName": "name",
+                "methodName": "updateFormValue"
             }, {
                 "propName": "disabled",
                 "methodName": "updateFormValue"

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

@@ -11,7 +11,7 @@ export class SekiDialogClose {
         this.closeDialog.emit();
     }
     render() {
-        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"))));
+        return (h(Host, { key: 'bcd94472740e7c8583ebbfeb841dd9b596cd074e' }, h("button", { key: '6e2787ddc9af9dec9f05b2fc96076e0e10383376', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: 'e996e1d333f045a2e1d8187faef2130bff583670' }, h("svg", { key: 'f61194aa0ac7592a37534eab5c1a4b9b58fb3f76', 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: 'b454cad075aed5821aac5e4994b182992989d146', d: "M18 6 6 18" }), h("path", { key: '724b2de12b3d1400e011f3f873afc3dcc52a852b', d: "m6 6 12 12" }))), h("span", { key: 'c479dc3f4f52b5af3e3a6c3c8eb1afb0580ccbd4', class: "sr-only" }, "Close"))));
     }
     static get is() { return "seki-dialog-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -795,3 +795,9 @@
     animation: none;
   }
 }
+
+/* The panel itself takes focus only when it holds nothing focusable
+   (tabindex="-1", see utils/overlay.ts); no ring on the whole panel. */
+.dialog-content:focus {
+  outline: none;
+}

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
 import { ContextConsumer } from "../../utils/context-bridge";
+import { DialogLabelSource, OverlayLayer } from "../../utils/overlay";
 /**
  * Dialog content panel
  *
@@ -11,32 +11,46 @@ import { ContextConsumer } from "../../utils/context-bridge";
 export class SekiDialogContent {
     constructor() {
         this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', () => this.onDialogOpenChange());
+        /**
+         * Escape, focus trap, focus restore and scroll lock (utils/overlay.ts).
+         * Escape reaches this dialog only when nothing is open on top of it.
+         */
+        this.layer = new OverlayLayer({
+            modal: () => { var _a, _b; return (_b = (_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.modal) !== null && _b !== void 0 ? _b : true; },
+            container: () => this.contentRef,
+            onEscape: (event) => {
+                if (!this._isOpen || !this.closeOnEscape)
+                    return;
+                event.preventDefault();
+                this.closeDialog.emit();
+            },
+        });
+        this.labels = new DialogLabelSource((label, description) => {
+            this._label = label;
+            this._description = description;
+        });
         /**
          * 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();
-            const wasOpen = this._isOpen;
-            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-            if (!wasOpen && this._isOpen) {
-                this.previousActiveElement = document.activeElement;
-                requestAnimationFrame(() => {
-                    if (this.contentRef) {
-                        focusFirst(this.contentRef);
-                    }
-                });
-            }
-            else if (wasOpen && !this._isOpen) {
-                (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
-            }
+            this._isOpen = (_b = (_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+            this.layer.setActive(this._isOpen);
+            if (this._isOpen)
+                this.labels.observe(this.el);
+            else
+                this.labels.disconnect();
         };
         /**
          * Whether pressing Escape closes the dialog
          */
         this.closeOnEscape = true;
         this._isOpen = false;
+        /** Title text mirrored for the accessible name (#357). */
+        this._label = '';
+        /** Description text mirrored for the accessible description (#357). */
+        this._description = '';
     }
     getContext() {
         return this.dialogConsumer.context;
@@ -45,40 +59,19 @@ export class SekiDialogContent {
         this.dialogConsumer.connect(this.el);
     }
     componentDidRender() {
-        if (this._isOpen && this.contentRef) {
-            // Focus first focusable element on open
-            requestAnimationFrame(() => {
-                if (this.contentRef) {
-                    focusFirst(this.contentRef);
-                }
-            });
-        }
-    }
-    handleKeyDown(event) {
-        if (!this._isOpen)
-            return;
-        const context = this.getContext();
-        // Escape to close
-        if (event.key === 'Escape' && this.closeOnEscape) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.closeDialog.emit();
-            return;
-        }
-        // Focus trap
-        if (event.key === 'Tab' && (context === null || context === void 0 ? void 0 : context.modal) && this.contentRef) {
-            trapFocus(this.contentRef, event);
-        }
+        this.layer.didRender();
     }
     disconnectedCallback() {
         this.dialogConsumer.disconnect();
+        this.layer.setActive(false);
+        this.labels.disconnect();
     }
     render() {
         const context = this.getContext();
         if (!this._isOpen) {
             return null;
         }
-        return (h(Host, { "data-state": "open" }, h("div", { ref: (el) => (this.contentRef = el), part: "content", role: "dialog", "aria-modal": (context === null || context === void 0 ? void 0 : context.modal) ? 'true' : undefined, "aria-labelledby": context === null || context === void 0 ? void 0 : context.titleId, "aria-describedby": context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-content" }, h("slot", null))));
+        return (h(Host, { "data-state": "open" }, h("div", { ref: (el) => (this.contentRef = el), part: "content", role: "dialog", tabindex: "-1", "aria-modal": (context === null || context === void 0 ? void 0 : context.modal) ? 'true' : undefined, "aria-labelledby": this._label ? 'label' : undefined, "aria-describedby": this._description ? 'description' : undefined, class: "dialog-content" }, h("slot", null), h("span", { id: "label", hidden: true }, this._label), h("span", { id: "description", hidden: true }, this._description))));
     }
     static get is() { return "seki-dialog-content"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +111,9 @@ export class SekiDialogContent {
     }
     static get states() {
         return {
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {
@@ -140,13 +135,4 @@ export class SekiDialogContent {
             }];
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

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

@@ -20,7 +20,7 @@ export class SekiDialogDescription {
         this.dialogConsumer.disconnect();
     }
     render() {
-        return (h(Host, { key: '635ff7451517dce9556fda6c25510644dc7855d2' }, h("p", { key: 'e07527f9157e61cdff3e4188c8b3892407d3f205', part: "description", id: this._id, class: "dialog-description" }, h("slot", { key: '7299a25bfd795663507202ff2b92b8e6438de2e1' }))));
+        return (h(Host, { key: '5ed1a3dc59756be1b5f4a15a726bf5f1d7495ae4' }, h("p", { key: '9296a1ea7371e03200e939a83104aba64eb64897', part: "description", id: this._id, class: "dialog-description" }, h("slot", { key: 'c73351769b65c8d2e25220b840ebd080e1c7576b' }))));
     }
     static get is() { return "seki-dialog-description"; }
     static get encapsulation() { return "shadow"; }

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: '02e038242c98eab8d21e55710112036218e006cb' }, h("div", { key: '88f3bdfa080de914b1402a5c11c8c9fc12ba91bf', part: "footer", class: "dialog-footer" }, h("slot", { key: 'b6f64dfbf61c07eb5f3fcb6ee3f6369cb5985557' }))));
+        return (h(Host, { key: '8970dcb3e6e8e4fe83c497a858d30b30fb89293b' }, h("div", { key: 'bc379a67a182aad86014f06a2eabd4b4cb8edb0e', part: "footer", class: "dialog-footer" }, h("slot", { key: 'cfd4dced1e5a8dcc229bc838d41ed25eaa149863' }))));
     }
     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: 'db7d6837551f388010587ac956a87d91b22c7eea' }, h("div", { key: '66f347193ceec5a062aaff246804dd2a297b9104', part: "header", class: "dialog-header" }, h("slot", { key: '45c4fedd249b9b96d90f52e279521f65d964ad38' }))));
+        return (h(Host, { key: 'd7f56bc25e03da6ba732434f9056b5f9d761a27d' }, h("div", { key: 'de0fde96aaa6ec34238f7fde65b1ca4c5ba0f95e', part: "header", class: "dialog-header" }, h("slot", { key: '6598b0414e9aaccc358afa23b4c37f5db80eb168' }))));
     }
     static get is() { return "seki-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,23 +3,30 @@ import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Dialog overlay (backdrop)
  *
+ * Works inside `seki-dialog` and inside `seki-alert-dialog`. In an alert
+ * dialog a click on the overlay never closes it (shadcn/Radix: alert dialogs
+ * close only via Cancel, Action or Escape).
+ *
  * @part overlay - The overlay element
  */
 export class SekiDialogOverlay {
     constructor() {
         /**
-         * Whether clicking the overlay closes the dialog
+         * Whether clicking the overlay closes the dialog. Ignored inside
+         * `seki-alert-dialog`, which an overlay click never closes.
          */
         this.closeOnClick = true;
         this._isOpen = false;
-        this.dialogConsumer = new ContextConsumer('seki-dialog', '_dialogContext', () => this.onDialogOpenChange());
+        // seki-alert-dialog publishes the same `_dialogContext` shape (#359).
+        this.dialogConsumer = new ContextConsumer('seki-dialog, seki-alert-dialog', '_dialogContext', () => this.onDialogOpenChange());
         this.onDialogOpenChange = () => {
             var _a;
             const context = this.getContext();
             this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
         };
         this.handleClick = () => {
-            if (this.closeOnClick) {
+            var _a;
+            if (this.closeOnClick && ((_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.dismissOnOverlayClick) !== false) {
                 this.closeDialog.emit();
             }
         };
@@ -65,7 +72,7 @@ export class SekiDialogOverlay {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether clicking the overlay closes the dialog"
+                    "text": "Whether clicking the overlay closes the dialog. Ignored inside\n`seki-alert-dialog`, which an overlay click never closes."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -20,7 +20,7 @@ export class SekiDialogTitle {
         this.dialogConsumer.disconnect();
     }
     render() {
-        return (h(Host, { key: '7ffac23990c2de77d4ab06b5f9ad180eb941d651' }, h("h2", { key: '1d46ec7882f26e9657180af839ce8c1ddecca3ba', part: "title", id: this._id, class: "dialog-title" }, h("slot", { key: '4b361e327dfaa9b11df17d7b551d4d27bb07f5d7' }))));
+        return (h(Host, { key: '63d029ed3285223332b73bfa1cdc85a7261e34cf' }, h("h2", { key: '5801d19e99ff562346227acc7ecfa9fbd19f1ff3', part: "title", id: this._id, class: "dialog-title" }, h("slot", { key: 'cc0dc2661b9977ea54a9628e90031909e5931682' }))));
     }
     static get is() { return "seki-dialog-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiDialogTrigger {
         this.triggerClick.emit();
     }
     render() {
-        return (h(Host, { key: 'e1044138516e26d0b379505d50bc9b5efd383ee8' }, h("span", { key: '087e534c470eb1d96337f27067ce362b21eabc9a', part: "trigger", class: "dialog-trigger" }, h("slot", { key: '90ce25b6d9e5ca681297a6656cc43e7cee6bd4d9' }))));
+        return (h(Host, { key: 'b6f85563cb093681bf8d240a79c005df6b7a83b9' }, h("span", { key: '84359b96a38657c02777a576b2087462dbf97614', part: "trigger", class: "dialog-trigger" }, h("slot", { key: '4effbaece776e0069332864a051721cc08f1f9ae' }))));
     }
     static get is() { return "seki-dialog-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,4 @@
 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
@@ -21,6 +20,8 @@ export class SekiDialog {
         /**
          * Whether the dialog is modal (traps focus, blocks scroll)
          */
+        // The modal behaviour itself lives in seki-dialog-content (utils/overlay.ts),
+        // so a dialog declared open in HTML gets it as soon as its content connects.
         this.modal = true;
         /**
          * Internal state for open
@@ -35,12 +36,6 @@ export class SekiDialog {
         // 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();
     }
@@ -73,9 +68,6 @@ export class SekiDialog {
         // already updated.
         this.publish();
         this.sekiOpenChange.emit(true);
-        if (this.modal) {
-            lockBodyScroll();
-        }
     }
     /**
      * Closes the dialog
@@ -90,9 +82,6 @@ export class SekiDialog {
         // already updated.
         this.publish();
         this.sekiOpenChange.emit(false);
-        if (this.modal) {
-            unlockBodyScroll();
-        }
     }
     handleTriggerClick() {
         this.openDialog();
@@ -113,14 +102,8 @@ export class SekiDialog {
     publish() {
         publishContext(this.el, '_dialogContext', this.getContext(), this.dialogContextChange);
     }
-    disconnectedCallback() {
-        // Ensure body scroll is unlocked if component is removed while open
-        if (this._isOpen && this.modal) {
-            unlockBodyScroll();
-        }
-    }
     render() {
-        return (h(Host, { key: 'a1aa2d420059b896076fc23e80ad0843c54ca6e9', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c84e45a16884cc61fb26e4a5fd5b96547405bcea', part: "dialog", class: "dialog" }, h("slot", { key: '13f5b8cbae8ba716473dabdef44e5ea08f5a881b' }))));
+        return (h(Host, { key: 'e4cc2d1e5e3f258b5ce1b3170c324f2398c069a3', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '134502ada4d3f700d511366673c1fd01c6e5568b', part: "dialog", class: "dialog" }, h("slot", { key: '1c871fcd3297aca804b75c001f9bf5f7942a70d8' }))));
     }
     static get is() { return "seki-dialog"; }
     static get encapsulation() { return "shadow"; }