@sekiui/elements 0.1.3 → 0.1.5

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,5 +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
  *
@@ -9,91 +10,68 @@ import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
  */
 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() {
-        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) {
-            // Focus first focusable element on open
-            requestAnimationFrame(() => {
-                if (this.contentRef) {
-                    focusFirst(this.contentRef);
-                }
-            });
-        }
-    }
-    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;
-        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() {
-        var _a;
-        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
+        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"; }
@@ -133,7 +111,9 @@ export class SekiDialogContent {
     }
     static get states() {
         return {
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {
@@ -155,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

@@ -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: '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"; }
@@ -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: '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

@@ -1,46 +1,44 @@
 import { h, Host } from "@stencil/core";
+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;
+        // 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();
             }
         };
     }
     getContext() {
-        const dialog = this.el.closest('seki-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return dialog ? dialog._dialogContext : null;
-    }
-    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;
+        return this.dialogConsumer.context;
     }
-    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) {
@@ -74,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

@@ -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: '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"; }
@@ -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: '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"; }