@sekiui/elements 0.0.82 → 0.0.84

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,94 @@
+import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+/**
+ * seki-marker: Inline conversation status indicator, system note, or
+ * labeled separator for chat threads.
+ *
+ * Consumers control ARIA semantics by setting `role` directly on the host
+ * tag (e.g. `role="status"` for announced progress) — this works natively
+ * since the role applies to the custom element itself, not its shadow tree.
+ *
+ * @component Marker
+ * @example
+ * <seki-marker>
+ *   <seki-marker-icon><svg>...</svg></seki-marker-icon>
+ *   <seki-marker-content>Explored 4 files</seki-marker-content>
+ * </seki-marker>
+ * <seki-marker variant="separator">
+ *   <seki-marker-content>Today</seki-marker-content>
+ * </seki-marker>
+ */
+export class SekiMarker {
+    constructor() {
+        /**
+         * Visual variant of the marker
+         * @default 'default'
+         */
+        this.variant = 'default';
+        this.validVariants = ['default', 'border', 'separator'];
+    }
+    componentWillLoad() {
+        if (this.variant && !this.validVariants.includes(this.variant)) {
+            console.warn(`[seki-marker] Invalid variant "${this.variant}". Must be one of: ${this.validVariants.join(', ')}`);
+            this.variant = 'default';
+        }
+    }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
+    render() {
+        return (h("div", { key: '682ee44a3a6fe294f59564967da28b2fd6757527', class: {
+                'seki-marker': true,
+                [`seki-marker--${this.variant}`]: !!this.variant,
+            }, part: "marker" }, h("slot", { key: '9cbf8548fae7854b01ce18586c5cfb457c11d8d4' })));
+    }
+    static get is() { return "seki-marker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-marker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-marker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "MarkerVariant",
+                    "resolved": "\"border\" | \"default\" | \"separator\" | undefined",
+                    "references": {
+                        "MarkerVariant": {
+                            "location": "import",
+                            "path": "./seki-marker.interface",
+                            "id": "src/components/marker/seki-marker.interface.ts::MarkerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Visual variant of the marker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -49,10 +49,10 @@ export class SekiMenubarCheckbox {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'b0ac4233e3e09cad23511198608d29309d8ac473' }, h("div", { key: '18854a831f4f4328a89d5d1dc374c37929ff08b4', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '6cf84dc92dfbc7f34c6feeafd9072011952a9261' }, h("div", { key: '56a8c961598fbb4248d78a4e3aee80fc3cdc9a69', 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: '9acf38f21cf6bdf12f8d800aa12a5b9688e67901', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '09916d8e3b932cce68315d02803d3c29534123f2', 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: '62af01f6a5864e437db427264cad2e75a6e0b6d6', points: "20 6 9 17 4 12" })))), h("slot", { key: '1cb8e8c6487b550217d566f911698fe691a3b4db' }), this.shortcut && (h("span", { key: '1f53e4636cfc53b8f6e72920ac5b3c98d3979903', 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: '003e66f704ee1bda60628d6c9cb4f55ed523fc71', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: 'e2668d4c7f811c34aeaca413d4342802d186850e', 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: '0ec3ac5e7900165235f005e8655050a6713ac33d', points: "20 6 9 17 4 12" })))), h("slot", { key: 'b0030fa9d04e3675372445162768dc0974e6a5fc' }), this.shortcut && (h("span", { key: 'dfb75e160ecd539c71b700b574b1ca300272512b', 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-content.js

@@ -1,6 +1,7 @@
 // src/components/menubar/seki-menubar-content.tsx
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { computeAnchoredPosition } from "../../utils/positioning";
 /**
  * Menubar content - dropdown content container
  *
@@ -26,6 +27,19 @@ export class SekiMenubarContent {
         this._position = { top: '0', left: '0' };
         this._focusedIndex = -1;
         this.typeaheadBuffer = '';
+        this.onMenubarOpenChange = () => {
+            const context = this.getMenubarContext();
+            const menuId = this.getMenuId();
+            const wasOpen = this._isOpen;
+            this._isOpen = (context === null || context === void 0 ? void 0 : context.activeMenuId) === menuId;
+            if (this._isOpen && !wasOpen) {
+                this._focusedIndex = 0;
+                requestAnimationFrame(() => {
+                    this.updatePosition();
+                    this.focusItem(0);
+                });
+            }
+        };
     }
     getMenubarContext() {
         const menubar = this.el.closest('seki-menubar');
@@ -42,22 +56,9 @@ export class SekiMenubarContent {
         return Array.from(this.contentRef.querySelectorAll('seki-menubar-item:not([disabled]), seki-menubar-checkbox:not([disabled]), seki-menubar-radio:not([disabled]), seki-menubar-sub-trigger:not([disabled])'));
     }
     componentDidLoad() {
-        const menubar = this.el.closest('seki-menubar');
-        if (menubar) {
-            menubar.addEventListener('sekiOpenChange', () => {
-                const context = this.getMenubarContext();
-                const menuId = this.getMenuId();
-                const wasOpen = this._isOpen;
-                this._isOpen = (context === null || context === void 0 ? void 0 : context.activeMenuId) === menuId;
-                if (this._isOpen && !wasOpen) {
-                    this._focusedIndex = 0;
-                    requestAnimationFrame(() => {
-                        this.updatePosition();
-                        this.focusItem(0);
-                    });
-                }
-            });
-        }
+        var _a, _b;
+        this.menubarEl = (_a = this.el.closest('seki-menubar')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.menubarEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenubarOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -146,39 +147,20 @@ export class SekiMenubarContent {
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = this.contentRef.getBoundingClientRect();
-        const viewport = { width: window.innerWidth, height: window.innerHeight };
-        let top = 0;
-        let left = 0;
-        // Side positioning
-        if (this.side === 'bottom') {
-            top = triggerRect.bottom + this.sideOffset;
-        }
-        else {
-            top = triggerRect.top - contentRect.height - this.sideOffset;
-        }
-        // Align positioning
-        switch (this.align) {
-            case 'start':
-                left = triggerRect.left;
-                break;
-            case 'center':
-                left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
-                break;
-            case 'end':
-                left = triggerRect.right - contentRect.width;
-                break;
-        }
-        // Viewport clamping
-        const margin = 8;
-        left = Math.max(margin, Math.min(left, viewport.width - contentRect.width - margin));
-        top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
+        const { top, left } = computeAnchoredPosition(triggerRect, contentRect, {
+            side: this.side,
+            align: this.align,
+            sideOffset: this.sideOffset,
+        });
         this._position = { top: `${top}px`, left: `${left}px` };
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.menubarEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenubarOpenChange);
     }
     render() {
         if (!this._isOpen) {

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

@@ -16,7 +16,7 @@ export class SekiMenubarGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '1c3baccba08cb2172eb0b5480124c6bf830ae068' }, h("div", { key: '39a316838c9a26aba783e2e01d75112680dce76d', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '0045113742e50e8410783b32cae98734faed80cd', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'c0ca6e0136145ff789f0ae119f445c940ca36d6c' }))));
+        return (h(Host, { key: 'a70040707595e384e9ea0d49164b8cb6da77391c' }, h("div", { key: '733ac22de36cab4710cf51b03f544f312067fa2b', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '5c1096a076012ec6e06053ea0b2b297395c7a62c', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'd8c607df106b0efd5a3a808005e7df395090cab7' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,11 +46,11 @@ export class SekiMenubarItem {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'c5e57bc49bfc28cd8232b1858eb47de5a485d37d' }, h("div", { key: '76205df5e01cda7290aca4bddf3f89658d8b7544', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: '8237cb23d0d5cf66ef1a563ab7f9b72de7f0bb67' }, h("div", { key: '669e2bdd18efc7eaa0b4a2b6a320b7c04af40b88', 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: '4b644772813711d6b249313df06755f91895ebb0' }), this.shortcut && (h("span", { key: 'b6e67a0047dbaec6037a3c1ca7937d32a77a8975', 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: 'aad4d95cd19cddf247b59b2e25940eaf9f1421d8' }), this.shortcut && (h("span", { key: 'a315a0a30970f352313dfe06aadf55a4a9e2aae3', 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

@@ -31,7 +31,7 @@ export class SekiMenubarMenu {
         }
     }
     render() {
-        return (h(Host, { key: '39655c23e84355056a71140ccd387a615156ba0c' }, h("div", { key: 'adad1e15ca795912156b277026b7de486f90e00b', part: "menu", class: "menubar-menu" }, h("slot", { key: '666ae40d507d2eb2de9d48562026bf2dbfc815a2' }))));
+        return (h(Host, { key: 'd328e032ef3108ef08cb1bc3c9ca725b1c4c1fdc' }, h("div", { key: '4a9f54c45c49bb262f3de86a110355a42c20895d', part: "menu", class: "menubar-menu" }, h("slot", { key: 'd25de5203bf1a831bf1f6a8cff706a020b359ac6' }))));
     }
     static get is() { return "seki-menubar-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class SekiMenubarRadioGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '5bed21ffeccb53764df5b90b4d4518f8e0b575a3' }, h("div", { key: 'b6fdc6108a496e6e0d051924c717d40564977b74', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: '97b9ea372790041762ace400e9a66ec9e2df5365' }))));
+        return (h(Host, { key: '11fb84934201a569abcc9d3310cf630ce508797f' }, h("div", { key: 'ec99ce927c6121f7f653ed0f5dcbf4c857dcaa4b', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: 'd0e4ab29e49bbe3f10670fb4e5d6744a6640e928' }))));
     }
     static get is() { return "seki-menubar-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,6 +15,10 @@ export class SekiMenubarRadio {
          */
         this.disabled = false;
         this._isChecked = false;
+        this.onRadioGroupValueChange = () => {
+            const context = this.getContext();
+            this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -39,25 +43,23 @@ export class SekiMenubarRadio {
         this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
     }
     componentDidLoad() {
-        const group = this.el.closest('seki-menubar-radio-group');
-        if (group) {
-            group.addEventListener('sekiValueChange', () => {
-                const context = this.getContext();
-                this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
-            });
-        }
+        var _a, _b;
+        this.radioGroupEl = (_a = this.el.closest('seki-menubar-radio-group')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.radioGroupEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onRadioGroupValueChange);
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.radioGroupEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onRadioGroupValueChange);
     }
     render() {
-        return (h(Host, { key: '27a3bfd626a3a66def464369dc9737367cf0f4bd' }, h("div", { key: 'c14bcd223dff975400dc997f69a428ad76110988', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: '20cc160b7e5070279bab1536eafe4bf0b6914ffa' }, h("div", { key: 'a4f5d8c21020bf621e75f0b495959162a9e59910', 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: 'd0ee37c6950eef63bd7e32af7ad8b1db66cfd169', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: '44825a5fe92e369a8537c8d9932afc5c5d738ead', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '7704683ffe5ffedf7f8f029e207aff63df4b4cf0', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '6158619c72b6874fa472a97e0a939214988c1b28' }))));
+            }, 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: 'e2f9a9a75674de2e9983201f777f41102a8eaa9f', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: 'd408c93936760ed31f585beb6302cc1f70f0648b', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '213a815afd3a4d5ba639992de27d469c1da01032', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'c04ea5154b34acdd9683e0626322a531de5034a5' }))));
     }
     static get is() { return "seki-menubar-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiMenubarSeparator {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '110df62d06ceb1eff624912e15ab1207a8e0e6e6' }, h("div", { key: '5b00b7a5ab9b8cf9a95d89572da189ab2c427ed2', part: "separator", role: "separator", class: "menubar-separator" })));
+        return (h(Host, { key: '17ede9830801810fc93c4242fad90e97f48ce363' }, h("div", { key: '3d139dc6efe8e49853b6c2a1940cf1906165893f', 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

@@ -15,7 +15,7 @@ export class SekiMenubarShortcut {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'b341accbcaf8be0aba932bb2052272dced520c1f' }, h("span", { key: '73c4b8e7c236c19498ad36781eb44180ab011c85', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: 'e1c06d00428b2e969b18bf5b9cedddb37b79abda' }))));
+        return (h(Host, { key: 'c87e86fcb0682407cdc129cdc2b36e7da25d3994' }, h("span", { key: '1865a842e549c0ebbaaa547f03b9d2c456206c0d', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: 'c7554e1f6aa9250900c405a8178f86ab12db8364' }))));
     }
     static get is() { return "seki-menubar-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,11 +37,11 @@ export class SekiMenubarSubTrigger {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '5926c89854a423ed2ba7645116e6c9b7f34f02a8' }, h("div", { key: 'da811267f5af7d33976903f5d42f95443d9c8918', part: "trigger", role: "menuitem", class: {
+        return (h(Host, { key: 'f8b8f21daf65a3c1768b1dd29a4f0fabdaaa9fd4' }, h("div", { key: 'e441ac687a872a267753401454b8f89ce070c6a4', 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: 'b5203f95a108507f990f013151f00bfedfdf1de5' }), h("svg", { key: 'f24f17053082f63d0f52141e6fc2e26ceace5739', 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: 'b06d69c7390828fa552f692ee46ab3db415c36bf', 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: '92d0ddd48218274c941e0b9fb5f45174a1fde043' }), h("svg", { key: '8b8c2ec05a9e86ed1792fe41f624b782b21d6e6a', 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: '30a4c704ae4a62561a5dfaa019229243cb189170', 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

@@ -108,7 +108,7 @@ export class SekiMenubarSub {
         }
     }
     render() {
-        return (h(Host, { key: '281a3c00fa652f36a8b3482a1e622f1df4ea3c51', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'a1d63c8cdbecdc95b3f0a53dc84e128d125dcb6c', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: 'ff4c6d7fa7ce266f0aef771a6256d9d18cc30de3', name: "trigger" }), h("slot", { key: '0fa7c90f9ffe52a401d30bb2268de134f1d9450e', name: "content" }))));
+        return (h(Host, { key: 'fbcd1450f228d885e70a85660f9ef1d6d5d11a42', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '3cfb28806b6a836413e8a46b9b097b10ad9f20ff', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: 'd958a77a9ad9cf26a845626ebd16c9f978336867', name: "trigger" }), h("slot", { key: '62004a8f9b2cdf4907db69a702595e3abbb94c36', name: "content" }))));
     }
     static get is() { return "seki-menubar-sub"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,6 +15,11 @@ export class SekiMenubarTrigger {
          */
         this.disabled = false;
         this._isOpen = false;
+        this.onMenubarOpenChange = () => {
+            const context = this.getContext();
+            const menuId = this.getMenuId();
+            this._isOpen = (context === null || context === void 0 ? void 0 : context.activeMenuId) === menuId;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -89,26 +94,23 @@ export class SekiMenubarTrigger {
         return (menu === null || menu === void 0 ? void 0 : menu.getAttribute('menu-id')) || null;
     }
     componentDidLoad() {
-        const menubar = this.el.closest('seki-menubar');
-        if (menubar) {
-            menubar.addEventListener('sekiOpenChange', () => {
-                const context = this.getContext();
-                const menuId = this.getMenuId();
-                this._isOpen = (context === null || context === void 0 ? void 0 : context.activeMenuId) === menuId;
-            });
-        }
+        var _a, _b;
+        this.menubarEl = (_a = this.el.closest('seki-menubar')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.menubarEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenubarOpenChange);
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.menubarEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenubarOpenChange);
     }
     render() {
-        return (h(Host, { key: 'f2e521d333074c6fbf9138c6df93d4e2755f94e7' }, h("button", { key: '8d4599c838568cc253b4c58e7ecd65f3c6b6855d', part: "trigger", type: "button", role: "menuitem", class: {
+        return (h(Host, { key: 'dbd7fb2ab6a1202fab32d742f181cd7a5d1d0476' }, h("button", { key: '9d5caf282dd3b2c9de087266dc8b9ad88e0b89a2', 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: '3a528fb597f00f9c3f740b248141286a0c02bfea' }))));
+            }, 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: 'fed1a9cf2a925d740695980b41d268177bb2129f' }))));
     }
     static get is() { return "seki-menubar-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,7 +108,11 @@ export class SekiMenubar {
         };
     }
     setupClickOutside() {
-        setTimeout(() => {
+        // Clear any pending timeout/handler first so a rapid open→close→open cannot
+        // leave a leaked listener or double-schedule.
+        this.removeClickOutside();
+        this.clickOutsideTimeout = setTimeout(() => {
+            this.clickOutsideTimeout = undefined;
             this.clickOutsideHandler = (e) => {
                 const path = e.composedPath();
                 if (!path.includes(this.el)) {
@@ -119,6 +123,11 @@ export class SekiMenubar {
         }, 0);
     }
     removeClickOutside() {
+        // Cancel a still-pending registration so it can't fire after close/disconnect.
+        if (this.clickOutsideTimeout !== undefined) {
+            clearTimeout(this.clickOutsideTimeout);
+            this.clickOutsideTimeout = undefined;
+        }
         if (this.clickOutsideHandler) {
             document.removeEventListener('click', this.clickOutsideHandler, { capture: true });
             this.clickOutsideHandler = undefined;
@@ -145,7 +154,7 @@ export class SekiMenubar {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '69b928f6070343e2f5a99430fad37aa194879194' }, h("div", { key: 'a0884fd8d9c2e4c51c83ccf9880ce01a5d54fc16', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '81bead716c8144d58a656f6ea82a71a61ea2d509' }))));
+        return (h(Host, { key: '2a29a195f321084fda6b2c123887e39ea969b1f0' }, h("div", { key: '574fdbffd6c0a0d75b498aca7860751232d9e53f', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '080ba5c852e3c0397e536451b1288e778d3241d9' }))));
     }
     static get is() { return "seki-menubar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class SekiNativeSelect {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '473d0b3862ba2bfb6a54819317446f6fc89bec55', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: '5c11b0326bcc5fdcff93053000ce9afcc18b5c88', class: "seki-native-select" }, h("select", { key: '059b10b0119e3861e9836663031c382fd77bccf3', 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: 'c23508ccd0472e76440cc464a0b775b2bc326b94', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: '700efca1da6876a2b4e495fb5cb19f38b27ee323' })), h("svg", { key: 'a1ae14642a4ed5fd2f0a7aca9c1e0bdd24729054', 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: '82bdd10cbb31ab91392cc8723c153735d76f68c5', d: "m6 9 6 6 6-6" })))));
+        return (h(Host, { key: '06c1263022892c128e1ff1eba05a99879b6cdbf1', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: 'cfcd7624ab9b2b008272258acd58832e21de69d6', class: "seki-native-select" }, h("select", { key: '7702d0411e3a20ab73cc28dc42498bb65114bf1b', 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: '9a9455abc7c3be7907bc48cfdb622fad3620735e', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: 'd310c6cdae31847fe93daabfc86bbb1b0cdf2762' })), h("svg", { key: 'b597495004880eb4e20c9bb620302999775cc204', 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: '1864330846f7cf2ac998b70890b41035fed564f4', 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.css

@@ -17,7 +17,7 @@
   display: none;
 }
 
-:host-context(seki-navigation-menu-item.navigation-menu-item--mobile-expanded) :host(.navigation-menu-content--mobile) {
+:host([data-mobile-expanded].navigation-menu-content--mobile) {
   display: block;
 }
 

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiNavigationMenuContent {
     constructor() {
         // =========================================================================
@@ -65,10 +66,14 @@ export class SekiNavigationMenuContent {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.itemAttrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu-item', ['data-mobile-expanded']);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
         this.cleanupContentInteractions();
+        (_a = this.itemAttrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.itemAttrMirror = undefined;
     }
     // =========================================================================
     // Watchers
@@ -198,13 +203,13 @@ export class SekiNavigationMenuContent {
         if (this.layout === 'grid') {
             customStyles['--content-columns'] = String(this.columns);
         }
-        return (h(Host, { key: '3ac376eb7a89b0051be8d32d52917ae8fa76ed63', class: {
+        return (h(Host, { key: 'fd4af3ffd1e105c90564d860917c88c30c8606b6', 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,
-            }, style: customStyles }, h("div", { key: 'e11577bb89474433f31fb195999cbfc6b51c5af7', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '863bf44d927def8b4ae4c306d8b41e8a169e8eaa' }))));
+            }, "data-mobile": this.isMobile ? '' : undefined, style: customStyles }, h("div", { key: 'f55e89e59c9126118e15d7433e83f0113be21328', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '3fe1d809ccb69408a4153f8638caffe169fe3b3a' }))));
     }
     static get is() { return "seki-navigation-menu-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,12 +91,12 @@ export class SekiNavigationMenuItem {
         return this.parentMenu;
     }
     render() {
-        return (h(Host, { key: '0a5551472dc486b00e5228e4dfc8aa1d61fa89b8', class: {
+        return (h(Host, { key: '968dbf852a440e97c46d1f1036a9554d81058889', 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 }, h("li", { key: '4bcd8edafa25aff059eb81933543239dbba486fe', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '93988867d4cd9f8d02af17a8f9569b213638cd6b' }))));
+            }, "data-item-id": this.itemId, "data-mobile-expanded": this.mobileExpanded ? '' : undefined }, h("li", { key: '84fd1a796784024ca0ff6f068aee7c2e416a7934', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '70bd982cb3c84ba7a68452f02fcea1477b37efd6' }))));
     }
     static get is() { return "seki-navigation-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@
 }
 
 /* Mobile mode */
-:host-context(.navigation-menu-content--mobile) .navigation-menu-link__anchor {
+:host([data-mobile]) .navigation-menu-link__anchor {
   min-height: 44px;
   padding: var(--seki-spacing-3, 0.75rem) var(--seki-spacing-4, 1rem);
 }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiNavigationMenuLink {
     constructor() {
         // =========================================================================
@@ -68,19 +69,23 @@ export class SekiNavigationMenuLink {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu-content', ['data-mobile']);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.attrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.attrMirror = undefined;
     }
     render() {
         const hasDescription = Boolean(this.description);
-        return (h(Host, { key: '502ddacfbfbf646b1e59e14c61aeafdb6f88abfc', class: {
+        return (h(Host, { key: 'c4f1a5bcf3faa4a719c294c114a941a45c9795ac', 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: 'b51e731ebc66a823e3e3a4f8d5cab5b65f97f087', 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: '0f113b3aa8fef6307fbbf811e6edd78db7ef8bb4', 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.css

@@ -12,7 +12,7 @@
 }
 
 /* Mobile mode - vertical stack */
-:host-context(seki-navigation-menu.navigation-menu--mobile) .navigation-menu-list {
+:host([data-mobile]) .navigation-menu-list {
   flex-direction: column;
   align-items: stretch;
   gap: var(--seki-spacing-1, 0.25rem);

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiNavigationMenuList {
     constructor() {
         /** Whether in mobile mode */
@@ -35,10 +36,14 @@ export class SekiNavigationMenuList {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu', ['data-mobile']);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
         this.cleanupKeyboardNavigation();
+        (_a = this.attrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.attrMirror = undefined;
     }
     setupKeyboardNavigation() {
         this.el.addEventListener('keydown', this.handleKeyDown);
@@ -101,7 +106,7 @@ export class SekiNavigationMenuList {
         this.focusedIndex = index;
     }
     render() {
-        return (h(Host, { key: '38071b4039c5dfadab5c58be53d02684825cdce2' }, h("ul", { key: '44553ecd9d84dcb380414da8cf3251213a7abdc1', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: 'e664d20108a1fa84918b4b14670c4f6c4c7fdaf4' }))));
+        return (h(Host, { key: '30448cc6ca88489984b3f1a2b907ba4874dce124' }, h("ul", { key: 'e63b9f1fac449d35e3616186eac7a12ff085274d', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '0919c2642f38f7e49c3b0e504b8e5dba4e840065' }))));
     }
     static get is() { return "seki-navigation-menu-list"; }
     static get encapsulation() { return "shadow"; }