@sekiui/elements 0.0.82 → 0.0.84

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

@@ -181,12 +181,12 @@ export class SekiNavigationMenuTrigger {
     }
     render() {
         const itemId = this.getItemId();
-        return (h(Host, { key: '9361deb1ef34c980f4ccff32037ffb53e972cf91', class: {
+        return (h(Host, { key: '5ae4b7fe933a849a2752df6814a539adbf302a2b', class: {
                 'navigation-menu-trigger': true,
                 'navigation-menu-trigger--open': this.isOpen,
                 'navigation-menu-trigger--disabled': this.disabled,
                 'navigation-menu-trigger--mobile': this.isMobile,
-            } }, h("button", { key: '5736fd94663ff3b16d2770917a965538ef55cda1', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: 'fa626a6050e2ec49596d6c35ae2e7d211f6f41a2', class: "navigation-menu-trigger__label" }, h("slot", { key: '301f87d67ba40a52803bdabd8b92387f0303b44b' })), h("svg", { key: '9b4c4f91c5d3580e14b1ff1ac3f7fb6ea20cb4f5', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '9ca5be90f35f5757eeb7ea706505e83f59b221a9', points: "2 4 6 8 10 4" })))));
+            } }, h("button", { key: '8a5124fc282437ff0311365751cf7a900b638cba', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: '809e6492039c97a1746379be060a0bc0f18d05b8', class: "navigation-menu-trigger__label" }, h("slot", { key: '0ea30cadd7706ffdf562a4bb20bd4093fdc5fa54' })), h("svg", { key: '6423f36f719b1d47ae4ddb901157c884cd8891af', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '9403714a423005f9c37f355db7dac8dc84de49c2', points: "2 4 6 8 10 4" })))));
     }
     static get is() { return "seki-navigation-menu-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -233,7 +233,7 @@ export class SekiNavigationMenuTrigger {
     static get events() {
         return [{
                 "method": "triggerActivate",
-                "name": "seki-trigger-activate",
+                "name": "sekiTriggerActivate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -143,14 +143,14 @@ export class SekiNavigationMenuViewport {
         return h("slot", null);
     }
     render() {
-        return (h(Host, { key: 'd6488e7ee474b8a5c14bda3c4354a18c8f95e2bd', class: {
+        return (h(Host, { key: 'c863186fc1f5fa38f62d722497f1eca6564175ff', class: {
                 'navigation-menu-viewport': true,
                 'navigation-menu-viewport--visible': this.isVisible,
             }, style: {
                 '--indicator-left': `${this.indicatorLeft}px`,
                 '--content-offset': `${this.contentOffset}px`,
                 '--content-height': `${this.contentHeight}px`,
-            } }, h("div", { key: 'c154a11e43e35c612c8516ce48e90ce963f120cd', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '20963cf39499036ed89db44f1b34cf6b3064e3c8', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: 'd69af8e0581c22acf673595deef3bdce3aa12189', points: "10,0 20,10 0,10" }))), h("div", { key: '558cd698c2a894070a80b137e36dc62d25977043', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
+            } }, h("div", { key: '558ad311e9ee87bce50b1caaebbd438ef4f4ffa0', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '187cb7822a78f9ec991c403c1c0d255ef1c93434', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: '6a2cb9eb92b18a5815dfc433066f24bc4bb80d76', points: "10,0 20,10 0,10" }))), h("div", { key: '2aaa62ba0e22c828ef21bc4196b78ef78f60faf9', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
     }
     static get is() { return "seki-navigation-menu-viewport"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,10 +200,10 @@ export class SekiNavigationMenu {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '92a88df19e0f9b8ca9f3e61d4ee2069ca4de88e6', class: {
+        return (h(Host, { key: '53d2661dfd58fa7309d2a0defc307b17dd55dbf3', class: {
                 'navigation-menu': true,
                 'navigation-menu--mobile': this.isMobile,
-            } }, h("nav", { key: '27723ddaff49efe3255ff27643bfaf773bb6587d', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+            }, "data-mobile": this.isMobile ? '' : undefined }, h("nav", { key: 'da9466f28b733cec9d795716bfb7b19cd3d24e3c', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
     }
     renderDesktopNav() {
         return [
@@ -309,7 +309,7 @@ export class SekiNavigationMenu {
     static get events() {
         return [{
                 "method": "menuOpen",
-                "name": "seki-menu-open",
+                "name": "sekiMenuOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -324,7 +324,7 @@ export class SekiNavigationMenu {
                 }
             }, {
                 "method": "menuClose",
-                "name": "seki-menu-close",
+                "name": "sekiMenuClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -339,7 +339,7 @@ export class SekiNavigationMenu {
                 }
             }, {
                 "method": "mobileToggle",
-                "name": "seki-mobile-toggle",
+                "name": "sekiMobileToggle",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -13,7 +13,7 @@ export class SekiPaginationContent {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("ul", { key: '0eef5df2fbff0ec8f5db67936442132e7533b644', class: "seki-pagination-content", part: "content" }, h("slot", { key: 'c94e0346dd8691971bbc35533ba5e21ef4b2f016' })));
+        return (h("ul", { key: 'ea31819c031372d7ffb9d9d59ddc5a197dbca28d', class: "seki-pagination-content", part: "content" }, h("slot", { key: 'b836217e609787d2b60f88f1ff552cd4407e1a29' })));
     }
     static get is() { return "seki-pagination-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-ellipsis.js

@@ -13,7 +13,7 @@ export class SekiPaginationEllipsis {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("span", { key: 'e5da769c4014e32a068b14f782a51004c2c38ff1', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'ae6e59fa83ece765609c86b9d4497456788a30fa', 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("circle", { key: '082f189f59a792748ec544fbb70216e64f93eb88', cx: "12", cy: "12", r: "1" }), h("circle", { key: '8275a7a6c3609af95fe65e6c041bfbd9cda6daab', cx: "19", cy: "12", r: "1" }), h("circle", { key: '3132f541937f0a7b919ba419a211825c6ec856d6', cx: "5", cy: "12", r: "1" })), h("span", { key: '00ea25eab6b6c2bada2b50693b6e249e54a1e04b', class: "sr-only" }, "More pages")));
+        return (h("span", { key: 'ef6f7bf930de4da04444bcd475d6dceb9be69cec', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'c7f8d27c48a0454f921e32df9274bd730c907cf6', 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("circle", { key: '85166ad9fc2d89b2430eebfa63b42fbfa85496ef', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'c06dbee553119935e90d86c83798aaca644d4705', cx: "19", cy: "12", r: "1" }), h("circle", { key: '1fcf378e59e1c3371e606c622d723714ab6e0df8', cx: "5", cy: "12", r: "1" })), h("span", { key: '749bf80cc5d367bb22b82b7795149875f4358662', class: "sr-only" }, "More pages")));
     }
     static get is() { return "seki-pagination-ellipsis"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiPaginationItem {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("li", { key: '0ee2bdea0480c4628d356e0ce62c02e48933ce79', class: "seki-pagination-item", part: "item" }, h("slot", { key: '258953b60e2e3359e3072c212c29a47e237dc6b6' })));
+        return (h("li", { key: '1045893c9b246255f8c9fac22ea2fbce1bd4fb7d', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'bdb551483afa3926f1dc5fe771f2fcf6a437f96c' })));
     }
     static get is() { return "seki-pagination-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-link.js

@@ -24,11 +24,11 @@ export class SekiPaginationLink {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: 'fd072e785c7d4eb8c4d2559c4b9c237b6b837580', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '22e5f7a4f4e907396b1d8a73eb5a323875dd6963', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-link--active': !!this.active,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "link" }, h("slot", { key: 'a3dcd8928129282c981c1de6f49c906304d76179' })));
+            }, part: "link" }, h("slot", { key: '19b2c6755295f81fc78e0c07beef714ba32e7468' })));
     }
     static get is() { return "seki-pagination-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-next.js

@@ -20,11 +20,11 @@ export class SekiPaginationNext {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '1175280e4938aa058ab7c8e644966a12f89b21d5', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '080ad3ee2bce104e0b15a68b3261bc09ebb1e0b7', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "next" }, h("span", { key: '1d4d9ff0373abac23d3e4aa9eb04d2e4f182ffdc' }, "Next"), h("svg", { key: '7c2a26387e55c8acf82b0a4c3d104bb284b1fe19', 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: 'f4009a3e8ffe7004be2ec9a7d8a6d941facc41ef', d: "m9 18 6-6-6-6" }))));
+            }, part: "next" }, h("span", { key: '9aa466c1762cfb7371fcac60e4f0cc68be690b00' }, "Next"), h("svg", { key: 'e62dfed8237e0d56b5b519a403394fe48bc35577', 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: 'fe66a4d4d749c1696bae7b75de281d27953543b1', d: "m9 18 6-6-6-6" }))));
     }
     static get is() { return "seki-pagination-next"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-previous.js

@@ -20,11 +20,11 @@ export class SekiPaginationPrevious {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '14f566cd8937714764002b877b7598133e62a9a0', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '367f79b96e1395b0f76c92b070ade5efc5dce055', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "previous" }, h("svg", { key: '92005951a8344d359e670450c615320a95fc8228', 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: 'afd0983e2b2479bbb74d0b6a84c0fec6cc97c67e', d: "m15 18-6-6 6-6" })), h("span", { key: '4c98e96c6f985ae9cc816e37c514b97e42faf54c' }, "Previous")));
+            }, part: "previous" }, h("svg", { key: '8303bb9dc4f98c1819263c327144c0636e8aaab3', 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: '3b78b0168308783b538fddf56678653b01110625', d: "m15 18-6-6 6-6" })), h("span", { key: '48c97da757dfa5be9e1c24ceb9406f7de729c682' }, "Previous")));
     }
     static get is() { return "seki-pagination-previous"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class SekiPagination {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("nav", { key: '6b96cf15c5ea0e5ab63c3f2bf548715f3e047fd8', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '1a03c02c329fd24ad34796891794ca3bce3b1470' })));
+        return (h("nav", { key: 'bc43b557ab08b1c7566f34af6b9de57f99f95889', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: 'a545d97342e968437167fa553b7b66df5a2898c3' })));
     }
     static get is() { return "seki-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class SekiPopoverClose {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '7312370b1be55cacbdf497e982635fce855af1b6' }, h("button", { key: '407bca7106d71e4ce1c87fbc95aac669f6904d79', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '01814bdd47a683cb6ddb1b499f3ee7c0e5a7e751' }, h("svg", { key: 'fb566b8768c0255c0943204cbe2fdffcc4ddef22', 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: '2055fda483bad415580b14893cccf68e4cc86916', d: "M18 6 6 18" }), h("path", { key: '41b3f6a8ea41caf93d3dff8677babf2a2148a739', d: "m6 6 12 12" }))))));
+        return (h(Host, { key: '0ef002b3abe12dff2d5db49065dd9c4f9e6eb780' }, h("button", { key: '7a5a09ef9ca1eec3cacc40b37cac96682097a7ba', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '137d3956bd8e3813c296fbb176c306e152b35e50' }, h("svg", { key: '40d7ac8a21667d888964677fb9be6f6a5001082a', 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: '27b2172fb76c7cc1c8fed9b347dc182357211593', d: "M18 6 6 18" }), h("path", { key: '6b4bb18b5a12ac901dc8fa018e554f474693ba41', d: "m6 6 12 12" }))))));
     }
     static get is() { return "seki-popover-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { computeAnchoredPosition } from "../../utils/positioning";
 /**
  * Popover content panel with positioning
  *
@@ -9,6 +10,14 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiPopoverContent {
     constructor() {
+        this.onPopoverOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (this._isOpen) {
+                requestAnimationFrame(() => this.updatePosition());
+            }
+        };
         /**
          * Offset from trigger
          */
@@ -32,18 +41,10 @@ export class SekiPopoverContent {
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for open changes
-        const popover = this.el.closest('seki-popover');
-        if (popover) {
-            popover.addEventListener('sekiOpenChange', () => {
-                var _a;
-                const context = this.getContext();
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (this._isOpen) {
-                    requestAnimationFrame(() => this.updatePosition());
-                }
-            });
-        }
+        this.popoverEl = (_a = this.el.closest('seki-popover')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.popoverEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -58,63 +59,15 @@ export class SekiPopoverContent {
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = this.contentRef.getBoundingClientRect();
-        const viewport = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
         const context = this.getContext();
         const side = (_b = (_a = this.side) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : 'bottom';
         const align = (_d = (_c = this.align) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.align) !== null && _d !== void 0 ? _d : 'center';
-        const offset = this.sideOffset;
-        // Calculate base position
-        let top = 0;
-        let left = 0;
-        // Side positioning
-        switch (side) {
-            case 'top':
-                top = triggerRect.top - contentRect.height - offset;
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + offset;
-                break;
-            case 'left':
-                left = triggerRect.left - contentRect.width - offset;
-                break;
-            case 'right':
-                left = triggerRect.right + offset;
-                break;
-        }
-        // Align positioning
-        if (side === 'top' || side === 'bottom') {
-            switch (align) {
-                case 'start':
-                    left = triggerRect.left + this.alignOffset;
-                    break;
-                case 'center':
-                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    left = triggerRect.right - contentRect.width + this.alignOffset;
-                    break;
-            }
-        }
-        else {
-            switch (align) {
-                case 'start':
-                    top = triggerRect.top + this.alignOffset;
-                    break;
-                case 'center':
-                    top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    top = triggerRect.bottom - contentRect.height + this.alignOffset;
-                    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,
+            align,
+            sideOffset: this.sideOffset,
+            alignOffset: this.alignOffset,
+        });
         this._position = { top: `${top}px`, left: `${left}px` };
         this._actualSide = side;
     }
@@ -122,7 +75,9 @@ export class SekiPopoverContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     render() {
         if (!this._isOpen) {

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

@@ -19,7 +19,7 @@ export class SekiPopoverTrigger {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '5319e1dae174db072fcf0bd62e136f527e12be88' }, h("span", { key: 'a60281f22833faeb0a830f2204828b50827e8b87', part: "trigger", class: "popover-trigger" }, h("slot", { key: '10e40070717c60fec8eebb12619330639275d41d' }))));
+        return (h(Host, { key: '65d97401bc0769ccf29613a90d250c1246976f96' }, h("span", { key: '5e36207444878ed24c8a20ee7f4d8f3203fdd8a7', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'a5d75e85123ce48feee9ed291e9cfab29859c34b' }))));
     }
     static get is() { return "seki-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,8 +106,13 @@ export class SekiPopover {
     setupClickOutside() {
         if (!this.closeOnOutsideClick)
             return;
-        // Use setTimeout to avoid immediate close from the same click that opened it
-        setTimeout(() => {
+        // Clear any pending timeout/handler first so a rapid open→close→open cannot
+        // leave a leaked listener or double-schedule.
+        this.removeClickOutside();
+        // Defer registration so the same click that opened the popover doesn't
+        // immediately close it.
+        this.clickOutsideTimeout = setTimeout(() => {
+            this.clickOutsideTimeout = undefined;
             this.clickOutsideHandler = (e) => {
                 const path = e.composedPath();
                 if (!path.includes(this.el)) {
@@ -118,6 +123,11 @@ export class SekiPopover {
         }, 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;
@@ -152,7 +162,7 @@ export class SekiPopover {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '7b968558f37aa4a7afae25a7d4dccf819157884b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b92504499e50da2607d298f295c6cbe48f582577', part: "popover", class: "popover" }, h("slot", { key: 'a130d9a553ce561c9dc64a3be26d890ed8f8271b' }))));
+        return (h(Host, { key: '31974618c7383783980511b55823a55bfe2dae1e', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f6bc040f29ba0ae30783407550928d3733ec1113', part: "popover", class: "popover" }, h("slot", { key: 'ffbb6edae291c99b941642f81ff8c7862d59525a' }))));
     }
     static get is() { return "seki-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class SekiProgress {
         const state = this.getState();
         const percentage = this.getPercentage();
         const isIndeterminate = state === 'indeterminate';
-        return (h("div", { key: '0191aa314387c1b184879b543477ea71eea94bb9', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: 'ad9c6549def836c9c259fd82c7cd5ea1b4b5df20', class: {
+        return (h("div", { key: '44a502b524adfa60846b3d3bf5bf3e9cb02a90d1', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '42daaa7585cbb00b0557797da677c85546939b5a', class: {
                 'seki-progress__indicator': true,
                 'seki-progress__indicator--indeterminate': isIndeterminate,
             }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {

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

@@ -54,7 +54,7 @@ export class SekiRadioGroupItem {
     }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '0b2ab32e27817990e2560eafa34c212c33bb4726', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '26beadb59f436fe3fd62d854e430f17665c9b295', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '06e0bd11080abd9ad21463c081754022a5d53da6', class: "indicator", part: "indicator" })))));
+        return (h(Host, { key: '32474c3a959d8dd5e3a03d9c754e3c5293d1f7b7', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '4e46f66134f531e61477ba07fdfee5ff6f997202', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '8b75b8b3c20c82fa490e5f456118d75ffd40fd90', class: "indicator", part: "indicator" })))));
     }
     static get is() { return "seki-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -130,7 +130,7 @@ export class SekiRadioGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'e4d04a777cb2d6fa16df1aedf057126a2d4a36b8', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '4448c52431658200df9288b54b2f7c5129e44f7b' }), this.name && this.selectedValue && (h("input", { key: '2f456e66d4de15ff980eb642f176e3fb62bc7f29', type: "hidden", name: this.name, value: this.selectedValue }))));
+        return (h(Host, { key: '5ce2f8187be4b8c6b38cedce5650080eff0336b2', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '4051f3d8f08ebc679a867eff91e180a35b659eae' }), this.name && this.selectedValue && (h("input", { key: '21a6d632e39c05600d9c553bd1f2ac558f422f22', type: "hidden", name: this.name, value: this.selectedValue }))));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-handle.js

@@ -158,13 +158,13 @@ export class SekiResizableHandle {
     }
     render() {
         const isHorizontal = this._direction === 'horizontal';
-        return (h(Host, { key: 'cb5f4decb4f2fac72c380274ff2b98ec92891616' }, h("div", { key: '2e095395aa467fd9e7b5ab902fcc81bbd8ba80ff', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
+        return (h(Host, { key: '3602233af1a09633d52dc41b076716452b32240a' }, h("div", { key: 'e54ae0019acc4202d0bffc6f96a4f025ea0d9e7e', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
                 'resizable-handle': true,
                 'resizable-handle--horizontal': isHorizontal,
                 'resizable-handle--vertical': !isHorizontal,
                 'resizable-handle--disabled': this.disabled,
                 'resizable-handle--dragging': this._isDragging,
-            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'd6e8f35a5943d4d80c107bab556e0fbd3a6b8145', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '1512111aea3914eacd697b71c59ba1dbe2556314', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f83309597497caeabe5a970a4577f7730d8d4cd3', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '9d9668605c0855263fadda258cbe7ba3d7ab030f', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'eb0a48669ed9ef90c16941c7a59e8f024db49a99', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '785a354841ac8a9deb2af85bb96e312784a2d4e0', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '88998ec4045ec3002fc9e4380dfa60db588b789e', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'bbb9e2c07ea072e9f4c12c3f8c04e7c3cfee1172', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '7376ca0927fead3181d0af8168a1281dcd0d20dc', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '22f2e6b9ffa7d35a4636774d1ebe78fa564df9df', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'a4aaa33a41c36f93cf060bbf8294e7736d43be39', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '437252ff1fd788e541e7618ed55a4a858c5696db', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '500b72ba51d82c2f64377520e73ebf1005084d2d', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '96971e03e66e1d3a3492a84be646832c592d570c', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '0cb829c89f7d52d4fd6f4b848fde280b35f095bf', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '54dbc4b6c925a6db684efd82291897f1ea39ff01', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'be7b25f2d1d046eb75051a6fe61c831492b3d539', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'b7d3af0b09fb28defc25feb45420a3d87bf475cc', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'dd1510bb802d8c9b3de1f59dea4515a2c54ef269', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '308e1efb992f81d519a1e7fa1ccbd95ab2bfa393', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
     }
     static get is() { return "seki-resizable-handle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel-group.js

@@ -314,11 +314,11 @@ export class SekiResizablePanelGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'f33a7b0e0e2f1f8ca57cb86c4d152e22cac7e439' }, h("div", { key: 'fe7db4fcbd5ba76e9bb4f69be847bae08cbbc8e2', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '71bf3149ec0d18ebcbef51183c84fbc467e81e1e' }, h("div", { key: 'defdfa9d2c6df5ff4f56660abdf4b06a8fcc0e98', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: 'bec902b69980078e4bfc59b8e852df31f4f10f1e' }))));
+            } }, h("slot", { key: '0be341ba65f40a058e0947a77b6b2399813f718e' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -145,14 +145,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '944c452b9992b1c78076c06c973e96adac983e48', style: {
+        return (h(Host, { key: 'c3e439cda1225fc4a1e16c8be83afa8d6316647c', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: 'fc56fa12fac5db2defcc62c3e50252bf47f298a1', part: "panel", role: "region", class: {
+            } }, h("div", { key: '6f3f143cafe7e69a69fb22b9c5179b8a62c826ab', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '07b96ce86a594dbc83c49a39c355c7de898b5f87' }))));
+            } }, h("slot", { key: '4085d9053af3462a0a050ff911bf73a9c1e5f15e' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-area.js

@@ -157,7 +157,7 @@ export class SekiScrollArea {
     render() {
         const hasVerticalOverflow = this.scrollState.scrollHeight > this.scrollState.clientHeight;
         const hasHorizontalOverflow = this.scrollState.scrollWidth > this.scrollState.clientWidth;
-        return (h(Host, { key: 'def86be8b0d683ab38059dafe419a943aef4bc3e', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '822ae07cf076b30836dfbbff95f4a1d633f7427b', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '3af528d35870259becba2123016c3a85b4ceedee', class: "content" }, h("slot", { key: 'f61939ce0323bf089b1c6b7c58d29d5a567b7e71' }))), h("slot", { key: '001452bcd3ff2f061ee1ae97326ec961cfe94d58', name: "scrollbar" })));
+        return (h(Host, { key: 'b6856576a408c14295e8083fd4801e9b160c2dbf', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '51fcde9d949099bcdbeef40e4d982c6c04199b68', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '9b25bd4555ad6481b7fa2d6be88ea4456a0fd571', class: "content" }, h("slot", { key: '965dd88e318a5f19c4f9645b089b9f9465a071d8' }))), h("slot", { key: '8b4180062e625237314269e4a55bbe903745240b', name: "scrollbar" })));
     }
     static get is() { return "seki-scroll-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-bar.css

@@ -787,11 +787,11 @@
 }
 
 /* Reduce size when both scrollbars present */
-:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation="vertical"]) {
+:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation="vertical"]) {
   height: calc(100% - 12px);
 }
 
-:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation="horizontal"]) {
+:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation="horizontal"]) {
   width: calc(100% - 12px);
 }
 
@@ -878,20 +878,20 @@
 }
 
 /* Visibility controlled by parent data-state */
-:host-context([data-state="hidden"]) {
+:host([data-state="hidden"]) {
   opacity: 0;
   pointer-events: none;
   transition: opacity 200ms ease-out;
 }
 
-:host-context([data-state="visible"]) {
+:host([data-state="visible"]) {
   opacity: 1;
   pointer-events: auto;
   transition: opacity 150ms ease-in;
 }
 
 /* Always show on hover regardless of state */
-:host-context(:hover) {
+:host([data-parent-hover]) {
   opacity: 1;
   pointer-events: auto;
 }

package/dist/collection/components/scroll-area/seki-scroll-bar.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 /**
  * Scroll Bar Component
  *
@@ -105,9 +106,10 @@ export class SekiScrollBar {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-scroll-area', ['data-state', 'data-has-vertical-overflow', 'data-has-horizontal-overflow'], { trackHover: true });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         unregisterThemeSync(this.el);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
@@ -115,6 +117,8 @@ export class SekiScrollBar {
         document.removeEventListener('touchend', this.handleTouchEnd);
         (_a = this.scrollAreaRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiScroll', this.scrollHandler);
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.attrMirror) === null || _c === void 0 ? void 0 : _c.disconnect();
+        this.attrMirror = undefined;
     }
     updateFromContext() {
         const context = this.getContext();