@sekiui/elements 0.1.4 → 0.1.5

package/dist/collection/components/input-group/seki-input-addon.js

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'c7074cb973c31da3445e116e04659984da389a67' }, h("div", { key: '91947802b154c0fdea29752dfcb6d8895d60f071', class: `addon addon--${this.size}` }, h("slot", { key: '16c554ff314d8bf805022f009dfccb48d8a700b3' }))));
+        return (h(Host, { key: '675310be4b793bcabb26a9c7a91700c0f552aa0f' }, h("div", { key: '452965ce5b41eb9548a71457c1048e75e4008a41', class: `addon addon--${this.size}` }, h("slot", { key: '57e2f786b21ee1ca1288634fd6f337f5cc1bdf3d' }))));
     }
     static get is() { return "seki-input-addon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/seki-input-group.js

@@ -53,7 +53,7 @@ export class SekiInputGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'fc2a9fb89ce4d35c26d71370e70449ae007876ab' }, h("div", { key: '892fda648fcc6ef0ca07be866eef38aedfc4beb3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'f6cb66ed84abcf5eb1113077f6c10cd727c89c73', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: '5d80edff320e0cb88756c35b0ea0b46b8bfca5c7' }, h("div", { key: '6ebed869c80e654900d3aecb0f4e11deda8ac412', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '71fcba34ca5c417a36c65b244f0869d04d825658', onSlotchange: () => this.updateChildren() }))));
     }
     static get is() { return "seki-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-group.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpGroup {
     render() {
-        return (h("div", { key: '1f0aeb7a32007269564aeabd2485ce0c2243c0e5', class: "group", role: "group" }, h("slot", { key: 'eaf66792fbde8b08fda526f2cae06862a9e3ef97' })));
+        return (h("div", { key: 'b9707e74793434783585cf1b1d7536d27f22a214', class: "group", role: "group" }, h("slot", { key: 'a51afb10a72e3ba236f43e08198dcd0db6f16c6e' })));
     }
     static get is() { return "seki-input-otp-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-separator.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpSeparator {
     render() {
-        return (h("div", { key: '0ba5502fc7bd9b31f971d60a97e3a2918347a9a1', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '110fa0a196358d6f0ffa09234ade3dda4733e4c7' }, h("span", { key: '5d20bcb216cea24e89ece238a2504507c4f3bedf', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: '7556636fca1784fbe295e9f73c65d5ebc194f418', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'e8eee494b70af54552bff03c651d7fc2511f4a08' }, h("span", { key: '0b675997a21fd05d73799fef45930ad86af360a6', "aria-hidden": "true" }, "-"))));
     }
     static get is() { return "seki-input-otp-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-slot.js

@@ -64,7 +64,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: '3f9f4d541c4c65699899c99be18e17f71ad05cc8', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '5a8b8d160ce2d6a98a9d2f6ed71a81456d29dfb5', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: 'c1b2a645b973427facb8843d47a24b759dacf881', class: "caret" })));
+        return (h("div", { key: '89a73d5cff25eda795d9935c2ee3bfbc1b5f0f99', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '3145766a9ce5f6a680b1025eed1fa62a8fd02d09', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: 'f73009e536e15654f5c7a758629e60bd19d46724', class: "caret" })));
     }
     static get is() { return "seki-input-otp-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp.js

@@ -231,11 +231,11 @@ export class SekiInputOtp {
         const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
         const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
         const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
-        return (h("div", { key: 'd8f9c9735de8030cdc76eff544ebcb18c66ca2a8', class: {
+        return (h("div", { key: 'bf66388fec20c808149ad793a869072343d09a8b', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, onClick: this.handleContainerClick }, h("input", { key: 'b5238c7570558d06ba41121dd7bc9c9ee2ff350f', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: '3f13d03d8d93d87de9d9553eab7d5c48b7500a73' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: 'a98b49086d2966e5c1c5e0b5aa7bdc9e526de5ea', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-description": this.ariaDescription, "aria-invalid": this.invalid || this.ariaInvalid === 'true' ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'd18e2d9db483d27b123e2940a36b8d83c222e833' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }
@@ -468,6 +468,44 @@ export class SekiInputOtp {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-describedby"
+            },
+            "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"
             }
         };
     }

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

@@ -47,12 +47,12 @@ export class SekiItem {
     }
     render() {
         const isInteractive = this.interactive && !this.disabled;
-        return (h(Host, { key: 'e60fd6bcfe9e94d042e37622f86313e555a10b94', class: {
+        return (h(Host, { key: 'a4aca5f571f888770a9d58c3002c3d376eeeafc6', class: {
                 'seki-item--active': this.active,
                 'seki-item--disabled': this.disabled,
                 'seki-item--inset': this.variant === 'inset',
                 'seki-item--interactive': isInteractive,
-            } }, h("div", { key: 'e547d2460512151a65e4fb3da298d141e053c80d', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '0629d5b1d6d354898bf6dc47985614327a135646', class: "seki-item__leading", part: "leading" }, h("slot", { key: '97142ba739619a3c211da4e04b61e9700c9c059e', name: "leading" })), h("span", { key: '261b367fa19f359e86240dc54a544b0b849eb0a7', class: "seki-item__content", part: "content" }, h("slot", { key: 'af44ed6e5bef0ec718a6da42d346e35e6a292618' })), h("span", { key: 'fa9555c5bf60d1bc02d821449a345f6ab89d2374', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '352645ee437ef89f439600e552e2f7371bb0b7b2', name: "trailing" })))));
+            } }, h("div", { key: '146d79fcc58d7454bf01e7081ecb4451cf0e3485', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '2f061a05ccd0245af63f633ddea6e66f732386b9', class: "seki-item__leading", part: "leading" }, h("slot", { key: '588132b910dc3442f404e8c8d8d07f9c3f38434e', name: "leading" })), h("span", { key: '58c0f484fef794f0be0666ecf5f3d97b72e6db8a', class: "seki-item__content", part: "content" }, h("slot", { key: 'dc4c7c24ed7b067e1df2e766b4bac3441a5c79ae' })), h("span", { key: 'd1b99516bf430e0f00e47e2b6106d3ea23e42b72', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '85dea054f33a82604249f52fa0fa02ea7c7873c7', name: "trailing" })))));
     }
     static get is() { return "seki-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SekiKbd {
         this.size = 'md';
     }
     render() {
-        return (h("kbd", { key: 'c5e138b3e2c53dd57cee2a91356868c4a5b25415', class: `kbd kbd--${this.size}` }, h("slot", { key: '7467b6cc90306a0a2735fe1a92c6ca9300557cae' })));
+        return (h("kbd", { key: 'fe8411a9e283c7a5454986dcb007dc23cd62a5a8', class: `kbd kbd--${this.size}` }, h("slot", { key: '569f2551eded18484366535b79920b70aef8e703' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,10 +19,10 @@ export class SekiMarkerContent {
         this.shimmer = false;
     }
     render() {
-        return (h("span", { key: 'd88bfa837db737e298a5bc789ea75e1368d46ea1', class: {
+        return (h("span", { key: 'a5e0c2916216e19cfa65d80f875bab089a1f1e06', class: {
                 'seki-marker-content': true,
                 'seki-marker-content--shimmer': !!this.shimmer,
-            }, part: "content" }, h("slot", { key: '9e71f23c5bd96ab2cdac18bfc331b5a7d4dff96b' })));
+            }, part: "content" }, h("slot", { key: '9ff1e39c675198a3f59cdd4e0d003d221d7cfa24' })));
     }
     static get is() { return "seki-marker-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/marker/seki-marker-icon.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SekiMarkerIcon {
     render() {
-        return (h("span", { key: 'afb8eaa183cec8ce8b1188a5a9855217d4103871', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: 'adf541dba8e66c5158b511ac3b34144357e531b1' })));
+        return (h("span", { key: '6a965dcd5e8c3e63d5c7dd3c1ee923ef1c8d988e', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: '9067720b934b4fe6adc103f58a78ddd19ce61fa7' })));
     }
     static get is() { return "seki-marker-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,10 +33,10 @@ export class SekiMarker {
         }
     }
     render() {
-        return (h("div", { key: '55b7a8634d9d01bc11543259b1ccc3ae63e92394', class: {
+        return (h("div", { key: '5b0c6343e1366845a3edf1985688437cff61800d', class: {
                 'seki-marker': true,
                 [`seki-marker--${this.variant}`]: !!this.variant,
-            }, part: "marker" }, h("slot", { key: '951dccaac4741f8354cf6a51a5f12cec0e9a807a' })));
+            }, part: "marker" }, h("slot", { key: 'b145c1a4ad4af88915a6a7399c3e686fa9cfd905' })));
     }
     static get is() { return "seki-marker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-checkbox.js

@@ -42,10 +42,10 @@ export class SekiMenubarCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: '5953781b01eaa150edff41854bc523651512881b' }, h("div", { key: '9436263dff8aa14dd3eda098804e8383844cd2fa', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '83b010f7a8a2d1c613b9eed6f0a64d7e03d38bb5' }, h("div", { key: '6cc6ab3b13365ccac67bafe1cbfc584073b60b22', part: "item", role: "menuitemcheckbox", class: {
                 'menubar-checkbox': true,
                 'menubar-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'ee65b51ebbbb46abaa602273a89b102ed351fd1c', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '69366a971cbd1d1f31f36a0778301893f50e8c44', 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("polyline", { key: '1c4e759552572eb12ca74872cac9e09e4f8e3f26', points: "20 6 9 17 4 12" })))), h("slot", { key: 'bf3e353fa5f0066c714d84a1917d2fc689736701' }), this.shortcut && (h("span", { key: '42dbe1da3886b116df4b4cee9063a852162a9742', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'af2d4ce9a9f42de58eef2a1bc70014de85efaa6b', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '9983a7601800c7a2faaf1f671b9b3b68f08c4327', 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("polyline", { key: 'ef75d08b1be4e266c5876c33ba6f8a1f2741d467', points: "20 6 9 17 4 12" })))), h("slot", { key: 'f549b5baeb0d496966e6d08b4a6bc7bd0ae84832' }), this.shortcut && (h("span", { key: '1171ebda703013f01ee9b7773139dd3607c889a3', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-group.js

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarGroup {
     render() {
-        return (h(Host, { key: '38acaa7c61643b164fda694d374eeaa2f4e6810e' }, h("div", { key: '91cef31ecb1d748b756a01d88bd286a06000bb6d', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '5cd58a8aaae037d790a5890e808211841b30d9e5', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: '5422b6c864256077260e81ae9229152d4da6d5ae' }))));
+        return (h(Host, { key: '0c4a88b838326de3397484c7d43da04213f20c98' }, h("div", { key: '1f6b04141c2ee681cc6338f720b53dc42a384b90', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '67c59aaa1750b69956ab7af038650c6f389a7a6f', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: '954b2ac101c9fd34144823468eb9c6284585b669' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-item.js

@@ -39,11 +39,11 @@ export class SekiMenubarItem {
         return menubar ? menubar._menubarContext : null;
     }
     render() {
-        return (h(Host, { key: 'bc62601e3312e5cffa88790eefe0ca22af978fb1' }, h("div", { key: '34837da09a7949108ef0334fc544a06d5ad6545e', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'b542fb8a97cb3122a86699c0dd0dabe3802b9db9' }, h("div", { key: 'd7008fc0c95f85d6ba94a1679bc33c8230e648e4', part: "item", role: "menuitem", class: {
                 'menubar-item': true,
                 'menubar-item--disabled': this.disabled,
                 'menubar-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'da60510d9dbe188d7c5318b5b54e69855aca8ef3' }), this.shortcut && (h("span", { key: '797c8ef1dcc3fe63d85f347e6d6af3644cfb613b', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'c0a574e8594cdef298982311a8ad3238c71b5391' }), this.shortcut && (h("span", { key: 'c32a67315b552abab274757fb436e8ebcad1f409', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-menu.js

@@ -33,7 +33,7 @@ export class SekiMenubarMenu {
         }
     }
     render() {
-        return (h(Host, { key: '80b78376db374c1bdcc44c50bb25fb7703f36043' }, h("div", { key: 'a6c7728c1b8ebb658ee06b3fb9e0a94a100bc793', part: "menu", class: "menubar-menu" }, h("slot", { key: '07b73966726e704b585889e90b9948c855d46084' }))));
+        return (h(Host, { key: '8a0f5b4f08822ff4c3c25392cfccedb2369ebc1b' }, h("div", { key: '845cd038814fd35605764688d9a1bb1577d694d4', part: "menu", class: "menubar-menu" }, h("slot", { key: '1cb505480bf5e853a7e6b206d3b666a2b57238ac' }))));
     }
     static get is() { return "seki-menubar-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-radio-group.js

@@ -35,7 +35,7 @@ export class SekiMenubarRadioGroup {
         this._radioGroupContext.setValue(event.detail);
     }
     render() {
-        return (h(Host, { key: '097fecb2abb21cb37508abc3649334fa7c950426' }, h("div", { key: '5c88810e69c01c29560debeeab3b38f46003d658', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: '3387d347908d8c3f6f193889421650a2df86d6dd' }))));
+        return (h(Host, { key: '497606d5a6f395987bae63c1a427d7303bdce563' }, h("div", { key: '8b0cd99faf33858d0ee7d41e65dbaf4b2884bca5', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: 'bad3f1f67de133dedbb283f4725d4626a1535b23' }))));
     }
     static get is() { return "seki-menubar-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-radio.js

@@ -51,10 +51,10 @@ export class SekiMenubarRadio {
         (_a = this.radioGroupEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onRadioGroupValueChange);
     }
     render() {
-        return (h(Host, { key: 'f8bf4c6d5d0125c2d1911df1cce1ae9b0ae13631' }, h("div", { key: '1257972e3f286c2e96d1b3c5a271365dc625e407', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: 'd90fd04e602749b7d76d2e45cfd561a514e651a3' }, h("div", { key: 'def43c84e1d370cd53cfde838526fc3cba89f375', part: "item", role: "menuitemradio", class: {
                 'menubar-radio': true,
                 'menubar-radio--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'da4d08d1bad7ec82f7221cf87d8f2bc87562086a', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: 'b49b2e3095900d0eef1165425e11f3bf6e8b4d37', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: 'ea138fc97b5935a66abd5ea87d329fca80abeb02', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'ff8dbef5ba7278eff0abb8c8a5bbef674103860d' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a265331ec44d07bd3a16f8de22c9c747bb7fe937', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: '368674d212d1dfa673942805e0c1901f2bd00435', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '80db75e785e41b8cbab6e0b35454dbb37e9c89dc', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '57090266236fe16a4d7ea2ff24cbcf97f59a8d6a' }))));
     }
     static get is() { return "seki-menubar-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-separator.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarSeparator {
     render() {
-        return (h(Host, { key: 'b45f0e4da2f60089eb0c0039dfbfdbf49d3490db' }, h("div", { key: '1255b0e1af0745f9068b23afe33c9eaf4ab6e1db', part: "separator", role: "separator", class: "menubar-separator" })));
+        return (h(Host, { key: '51a1b758b324f5124535dcac29aaf7de41f12af6' }, h("div", { key: '527e03b8e8e1ab12ad3fee39a0624700e8e03130', part: "separator", role: "separator", class: "menubar-separator" })));
     }
     static get is() { return "seki-menubar-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-shortcut.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarShortcut {
     render() {
-        return (h(Host, { key: '86b97e0bdfcacbd7632b249805fdcbd3079d5d24' }, h("span", { key: 'bc26a4928805a37d41f057b7b0134ee0a3d77fb4', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: '05323c54d5b39c62bd4e390f7ea1a0f5cdfeafec' }))));
+        return (h(Host, { key: 'dbef0849eaa2660f44028cb44fa6666dcc1835f1' }, h("span", { key: '82fd1ffe6c9d1dfc4458d47358472eaec9e790ae', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: '7c096f1cc52142eabb5650a951d890fbcd5e0f5b' }))));
     }
     static get is() { return "seki-menubar-shortcut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-sub-trigger.js

@@ -30,11 +30,11 @@ export class SekiMenubarSubTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'c32d102253d62f730338c2a868e5f8b917421f06' }, h("div", { key: '0f3a23f1b34743b3cba6dcb123b42ec02c34438c', part: "trigger", role: "menuitem", class: {
+        return (h(Host, { key: '54bf103ccb0906c462aa1a9317a16a04f5eb2ef3' }, h("div", { key: 'a6eac12ad3748f6473737fa8e45f137443f7b94a', part: "trigger", role: "menuitem", class: {
                 'menubar-sub-trigger': true,
                 'menubar-sub-trigger--disabled': this.disabled,
                 'menubar-sub-trigger--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: 'd6fe0841edff8470ae26526e4200c4a800946a15' }), h("svg", { key: 'fc533e323cfe735bd649e372ec87b8fa882d4c21', part: "chevron", class: "menubar-sub-trigger__chevron", 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("polyline", { key: '4fc0f2e01dcaa73aed6d4affc767a6f65fcefe0b', points: "9 18 15 12 9 6" })))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: 'dd62dea0f0b20832b4bf78620f252efcb882ebe2' }), h("svg", { key: '81a9feccc96e6add451de042b394b0fba16a98f7', part: "chevron", class: "menubar-sub-trigger__chevron", 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("polyline", { key: 'fb97fa8bd35e3ec7d3c976aca243647c6a8dd4ff', points: "9 18 15 12 9 6" })))));
     }
     static get is() { return "seki-menubar-sub-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-sub.js

@@ -104,7 +104,7 @@ export class SekiMenubarSub {
         }
     }
     render() {
-        return (h(Host, { key: 'd356090e178848490583af0289d74f1a4e8a30f1', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '142ac219e552d59fa1f1cc35758ff7f7d6c28335', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: 'f53b45614519932ad844b85349ff5f33a97deb3a', name: "trigger" }), h("slot", { key: '84eebc6e33ce9ee78bd73858b988d5d8a63ae5bd', name: "content" }))));
+        return (h(Host, { key: '1d9accaa639b1aeadd9c8100939595572fa60dc1', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '0d6f3ef0732292f5225039488a20d26585953824', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: 'eea282185a05b9cc52cf3c41914f8a1f9127a891', name: "trigger" }), h("slot", { key: 'b5080b1cd6c0903b356060668a3a186de5715db3', name: "content" }))));
     }
     static get is() { return "seki-menubar-sub"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,10 +107,10 @@ export class SekiMenubarTrigger {
         (_a = this.menubarEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenubarOpenChange);
     }
     render() {
-        return (h(Host, { key: 'd78c1cc6d2ab10d274d99da63d6c4f6cdf68ddbd' }, h("button", { key: '3f1451bedc3cc8f395220143fb2eaa53656c67b9', part: "trigger", type: "button", role: "menuitem", class: {
+        return (h(Host, { key: 'af7a30418f8ed827de6dff6da1c3981d4cce03d4' }, h("button", { key: '3c8cfc6bf247eb707c31e5198c6c327a3b91eba1', part: "trigger", type: "button", role: "menuitem", class: {
                 'menubar-trigger': true,
                 'menubar-trigger--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '7f905091f2e07d32ad4aa1f334b18b980e3ac580' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'fd5007b27cde15585d0d9e9d719d30a135b6a5fb' }))));
     }
     static get is() { return "seki-menubar-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 // src/components/menubar/seki-menubar.tsx
 import { h, Host } from "@stencil/core";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Menubar - horizontal menu bar with dropdown menus
  *
@@ -97,6 +98,21 @@ export class SekiMenubar {
             }
             return this._menuIds[prevIndex];
         };
+        /**
+         * 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) => {
+                if (this._activeMenuId) {
+                    event.preventDefault();
+                    const menuId = this._activeMenuId;
+                    this.closeMenu();
+                    this.focusTrigger(menuId);
+                }
+            },
+        });
     }
     componentWillLoad() {
         this.updateContext();
@@ -148,14 +164,6 @@ export class SekiMenubar {
             this.clickOutsideHandler = undefined;
         }
     }
-    handleEscape(event) {
-        if (this._activeMenuId && event.key === 'Escape') {
-            event.preventDefault();
-            const menuId = this._activeMenuId;
-            this.closeMenu();
-            this.focusTrigger(menuId);
-        }
-    }
     handleItemSelect(event) {
         event.stopPropagation();
         this.sekiSelect.emit(event.detail);
@@ -164,11 +172,15 @@ export class SekiMenubar {
         if (menuId)
             this.focusTrigger(menuId);
     }
+    componentDidRender() {
+        this.layer.setActive(this._activeMenuId !== null);
+    }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '4b686ab41a81f5ecc678375b5eb3afee6374263b' }, h("div", { key: 'd8a353b31fe03544cf263b575ecf953ce3d33d76', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '50009f0981d4604085b4855d508d7a1db1b50dc3' }))));
+        return (h(Host, { key: '68ae2d5aea5a68dd70644dbac7e2faf9854d2368' }, h("div", { key: 'f949576c47d3eb988ebfea9ed5c500605b2658bf', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: 'a512e52d022b3ee609bf44a02c6f02dd9a97f10b' }))));
     }
     static get is() { return "seki-menubar"; }
     static get encapsulation() { return "shadow"; }
@@ -248,12 +260,6 @@ export class SekiMenubar {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "keydown",
-                "method": "handleEscape",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "sekiMenubarSelect",
                 "method": "handleItemSelect",
                 "target": undefined,

package/dist/collection/components/message/seki-message-avatar.js

@@ -19,7 +19,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMessageAvatar {
     render() {
-        return (h(Host, { key: 'dbdf7f7b56148c2ffe53b4af90ea088f6c40af5b' }, h("div", { key: '77119f92f5093b78b5d82112f0d1c52bd693a529', class: "avatar", part: "avatar" }, h("slot", { key: '423c4bdfab4f45450b4e3594a062d31ffc8807d4' }))));
+        return (h(Host, { key: 'a0e7b34526087dfc472056f3ffcb537ca95066e6' }, h("div", { key: 'd5f118f1770a0a1b782e82644116fcee1d645b79', class: "avatar", part: "avatar" }, h("slot", { key: '7004cb69570f5cdc135ed609a96987560486400e' }))));
     }
     static get is() { return "seki-message-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMessageContent {
     render() {
-        return (h(Host, { key: '45d837c4dbc833013c974fe0283fe4310c06737e' }, h("div", { key: 'afdd436d61cd3eb49b297e219807d7c166d52aff', class: "content", part: "content" }, h("slot", { key: 'be32b0e5693ce101dc4e8efdeeef77f643823de0' }))));
+        return (h(Host, { key: '324566b1fbf0feb55ab1deadf6e501a45267bb40' }, h("div", { key: 'b3ce9e6affbc165cc6398e45d19ccc5dccfe203b', class: "content", part: "content" }, h("slot", { key: '9b203b480f2f62fc5175809392649666b9aa8ed7' }))));
     }
     static get is() { return "seki-message-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/seki-message-footer.js

@@ -17,7 +17,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMessageFooter {
     render() {
-        return (h(Host, { key: 'dad23857bf95942f7d7130ba7d7dd3fd8762f391' }, h("div", { key: '867a856c3b8adb2dbc1093507307c401106de319', class: "footer", part: "footer" }, h("slot", { key: 'd1a1f8786126fdaedfa3a2858ab110b62f6698bc' }))));
+        return (h(Host, { key: '053413ede28efa9f7ff478521c1146b0b33acb21' }, h("div", { key: '9c2159dca70c053f2f14331b9683dbcb42ff2c94', class: "footer", part: "footer" }, h("slot", { key: '709529a6eaf12a219b0d070d4002dd64a3614f8e' }))));
     }
     static get is() { return "seki-message-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/seki-message-group.js

@@ -33,7 +33,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMessageGroup {
     render() {
-        return (h(Host, { key: '743a50b6f5d76803b518e3e867f98a8f2381310d' }, h("div", { key: '963a4432ffd53f71120d93c72e0f535e322f405c', class: "group", part: "group" }, h("slot", { key: '1ae37a34e3eb49155f51f1e27016422f0e8b2e78' }))));
+        return (h(Host, { key: 'b091edef4cc4d8555e649fa5e7212016ccfbb46c' }, h("div", { key: 'adcc567a9dcfc41e6b782c798f325628a8541924', class: "group", part: "group" }, h("slot", { key: '6b6cac046dc8bb76beb1a254d2e9835b90639006' }))));
     }
     static get is() { return "seki-message-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMessageHeader {
     render() {
-        return (h(Host, { key: '214ac5b9faf1f877eed4dd3527a2bb9917e1c807' }, h("div", { key: 'c72c23d4d145c2390e0e651031fa5226b2ce1151', class: "header", part: "header" }, h("slot", { key: '9cd4d482ecc5c2ade8114645b1e8e2ebb4ccbfb8' }))));
+        return (h(Host, { key: '5198f4226ae413c60e3b39e9edc2d3bc12925819' }, h("div", { key: '260e7a2d27fe75833dfd4e137f9f13304e95cbb1', class: "header", part: "header" }, h("slot", { key: '2c7fd25cb8c529018216d6497c88dafe6bade857' }))));
     }
     static get is() { return "seki-message-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-scroller/seki-message-scroller-button.js

@@ -93,7 +93,7 @@ export class SekiMessageScrollerButton {
         this.el.setAttribute('data-active', String(active));
     }
     render() {
-        return (h(Host, { key: 'b1fda40b02710afc966090b91310bd8cad34829a' }, h("button", { key: '1ff24674c33fc433f6e9e6e60fe351dcfca9f652', type: "button", class: "button", part: "button", "aria-label": this.label, onClick: this.handleClick }, h("slot", { key: '4a3f8c3588f87b28b73a923dce21eee71b447937' }, h("svg", { key: 'a0c92e4d5ef4b1962f073d86e5e27830cf1cf21f', class: "icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, this.direction === 'end' ? (h("path", { d: "M12 5v14M19 12l-7 7-7-7" })) : (h("path", { d: "M12 19V5M5 12l7-7 7 7" })))))));
+        return (h(Host, { key: 'bdd67fc830224aee0b4490599056a4496d8b64dd' }, h("button", { key: '10b0e64a2b64efdc5ffa0b653f2538f10296cfad', type: "button", class: "button", part: "button", "aria-label": this.label, onClick: this.handleClick }, h("slot", { key: '9a9a078d06b6afedb79111cc0cb1da3600961379' }, h("svg", { key: '0462d921a32a4925ac53ce3d3fa347013c05ea6c', class: "icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, this.direction === 'end' ? (h("path", { d: "M12 5v14M19 12l-7 7-7-7" })) : (h("path", { d: "M12 19V5M5 12l7-7 7 7" })))))));
     }
     static get is() { return "seki-message-scroller-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-scroller/seki-message-scroller-content.js

@@ -15,7 +15,7 @@ export class SekiMessageScrollerContent {
         this.label = 'Message log';
     }
     render() {
-        return (h(Host, { key: '41ab8a96056651c28ea1b3d385fd85b186d81525', role: "log", "aria-label": this.label, "aria-relevant": "additions", "aria-live": "polite" }, h("slot", { key: '7ce75c5473a93a5e968d039d62c8539eb5b790ad' })));
+        return (h(Host, { key: 'ceaf29b99a9eae31fe6c8885cc5f0a1f4ea63627', role: "log", "aria-label": this.label, "aria-relevant": "additions", "aria-live": "polite" }, h("slot", { key: 'ffbe216be547b293b2fe66fb435eac0b39415cd0' })));
     }
     static get is() { return "seki-message-scroller-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-scroller/seki-message-scroller-item.js

@@ -20,7 +20,7 @@ export class SekiMessageScrollerItem {
         this.scrollAnchor = false;
     }
     render() {
-        return (h(Host, { key: '93686906b6a08c6cc469ebb9c04613c6e224e136' }, h("slot", { key: '8d19fef78664d56008364150003fcab489059b14' })));
+        return (h(Host, { key: '95f5cd2946b51ec5660de133066f74ad888ef2cb' }, h("slot", { key: 'e12656c73dbd411afc0cb4fd0e8378099debdee6' })));
     }
     static get is() { return "seki-message-scroller-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-scroller/seki-message-scroller-viewport.js

@@ -25,7 +25,7 @@ export class SekiMessageScrollerViewport {
         this.label = 'Messages';
     }
     render() {
-        return (h(Host, { key: 'e5358b3afc59494bb2740693f66312a0d9571bfe', role: "region", "aria-label": this.label, tabindex: "0" }, h("slot", { key: 'd101dfb81383e5438a20dfc11c221d0991b14210' })));
+        return (h(Host, { key: 'b1647b027b0b344d6b584d863907fff76e180d17', role: "region", "aria-label": this.label, tabindex: "0" }, h("slot", { key: 'ff33fdfe1a353321d23a1254a357b3659a95300b' })));
     }
     static get is() { return "seki-message-scroller-viewport"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/native-select/seki-native-select.js

@@ -28,7 +28,7 @@ export class SekiNativeSelect {
         };
     }
     render() {
-        return (h(Host, { key: '59760b55fcad6eff6aac714a99b27e2bd48b81e2', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: '613e3efa10e0e2c4b7e3ca4dfd8c552025d4fb1e', class: "seki-native-select" }, h("select", { key: 'cd111cbff1d36bf758643bbd01223d4c93793f98', class: "seki-native-select__select", name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.ariaLabel, onChange: this.handleChange }, this.placeholder && (h("option", { key: '875de1f815cfc837ef28f355005626d6176e1348', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: 'd040c0c0c967f017258afdb5847affc6b3b3d6d1' })), h("svg", { key: '85ab91bc536f57f575e7342051748be16f17208e', class: "seki-native-select__chevron", 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", "aria-hidden": "true" }, h("path", { key: 'e839e78702f9b140de63d9070ac165f0986375a9', d: "m6 9 6 6 6-6" })))));
+        return (h(Host, { key: 'e6390690cea94614d6ae97bcdaa7c91311e8f8e4', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: '43c99d325ae1679b65cda38bc50480a4f0fd39f7', class: "seki-native-select" }, h("select", { key: 'cd73a0e74240b3557adefa4c70df1db9b4d139b9', class: "seki-native-select__select", name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.ariaLabel, onChange: this.handleChange }, this.placeholder && (h("option", { key: 'd848b6c0c9b97870eac66ce0fb20558fbbabbe16', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: '6ddff472dd89e779d0b69fc39cf2a11084141f98' })), h("svg", { key: 'ae9b8f44ecd0c6f68b3ee8df0ab0127aaa4eb634', class: "seki-native-select__chevron", 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", "aria-hidden": "true" }, h("path", { key: '146ec91eb6e12716711fb15c6b063bf572d76195', d: "m6 9 6 6 6-6" })))));
     }
     static get is() { return "seki-native-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-content.js

@@ -205,13 +205,13 @@ export class SekiNavigationMenuContent {
         if (this.layout === 'grid') {
             customStyles['--content-columns'] = String(this.columns);
         }
-        return (h(Host, { key: '13051cec28576a2f88de781782cd548661b33df5', class: {
+        return (h(Host, { key: '2a0fcc6fb5cbbcf000d4ea056be222490fb372ba', class: {
                 'navigation-menu-content': true,
                 'navigation-menu-content--open': this.isOpen,
                 'navigation-menu-content--mobile': this.isMobile,
                 [`navigation-menu-content--layout-${this.layout}`]: true,
                 [`navigation-menu-content--align-${this.align}`]: true,
-            }, "data-mobile": this.isMobile ? '' : undefined, style: customStyles }, h("div", { key: '38b673a277068e5bb1475c4d4f4820796bbad562', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '9accb56a806fa6dd48c3fe9da31903d921a56f88' }))));
+            }, "data-mobile": this.isMobile ? '' : undefined, style: customStyles }, h("div", { key: 'f4c976634a69898ec65aa4888feb227835c2eea1', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: 'ad0a5047065b878b826d9f253e7ce04bfe9a9a69' }))));
     }
     static get is() { return "seki-navigation-menu-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-item.js

@@ -101,12 +101,12 @@ export class SekiNavigationMenuItem {
         return this.parentMenu;
     }
     render() {
-        return (h(Host, { key: '03568962e53f4816407ee716ad0a9503608dfe83', class: {
+        return (h(Host, { key: '3586cea4df93f1934b0e28382cb5f1ffbc1e6afe', class: {
                 'navigation-menu-item': true,
                 'navigation-menu-item--open': this.isOpen,
                 'navigation-menu-item--mobile': this.isMobile,
                 'navigation-menu-item--mobile-expanded': this.mobileExpanded,
-            }, "data-item-id": this.itemId, "data-mobile-expanded": this.mobileExpanded ? '' : undefined }, h("li", { key: 'e9d8a9c5f999d7bc32da9531ab61fa2b642dfa1f', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '55319231321797bd6edf850b431425e51c858bc9' }))));
+            }, "data-item-id": this.itemId, "data-mobile-expanded": this.mobileExpanded ? '' : undefined }, h("li", { key: 'bbeebfa762fc7de6d72833eb8c4bbfb9e9fcb110', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '196860f245f0bec3b4371c4f781533b0f852c657' }))));
     }
     static get is() { return "seki-navigation-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-link.js

@@ -76,13 +76,13 @@ export class SekiNavigationMenuLink {
     }
     render() {
         const hasDescription = Boolean(this.description);
-        return (h(Host, { key: '4d1cec837a5b32d23a1df0801fbf404a8d1db1fc', class: {
+        return (h(Host, { key: 'fb8f4dd52a0e20c080249bec483f4c150479cb65', class: {
                 'navigation-menu-link': true,
                 'navigation-menu-link--active': this.active,
                 'navigation-menu-link--disabled': this.disabled,
                 'navigation-menu-link--in-content': this.isInContent,
                 'navigation-menu-link--with-description': hasDescription,
-            } }, h("a", { key: '0f0428afeefc2f5c5db17c14115e22af2ec19878', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
+            } }, h("a", { key: 'c6e93972336c3e92884891a551b01a1baa90bf13', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
     }
     static get is() { return "seki-navigation-menu-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.js

@@ -103,7 +103,7 @@ export class SekiNavigationMenuList {
         this.focusedIndex = index;
     }
     render() {
-        return (h(Host, { key: 'c2e616a048414c117b5ba643aaf6a74b3df66f19' }, h("ul", { key: '1b62129754781d7d85415a344287554f91477c8d', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: 'f1e17f6d7fa6c913fd7febc974caddb574624555' }))));
+        return (h(Host, { key: '7c8d4112c3bf01fc49d46fc58072255b48b7704f' }, h("ul", { key: 'a7cb204d2cb8aff99fdba6205d766d612570b611', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '384fa6c10772c26c0776fd3504662e62705cec27' }))));
     }
     static get is() { return "seki-navigation-menu-list"; }
     static get encapsulation() { return "shadow"; }