@sekiui/elements 0.0.82 → 0.0.84

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

@@ -10,6 +10,23 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiDialogContent {
     constructor() {
+        this.onDialogOpenChange = () => {
+            var _a, _b;
+            const context = this.getContext();
+            const wasOpen = this._isOpen;
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (!wasOpen && this._isOpen) {
+                this.previousActiveElement = document.activeElement;
+                requestAnimationFrame(() => {
+                    if (this.contentRef) {
+                        focusFirst(this.contentRef);
+                    }
+                });
+            }
+            else if (wasOpen && !this._isOpen) {
+                (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        };
         /**
          * Whether pressing Escape closes the dialog
          */
@@ -47,27 +64,10 @@ export class SekiDialogContent {
         }
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for context changes
-        const dialog = this.el.closest('seki-dialog');
-        if (dialog) {
-            dialog.addEventListener('sekiOpenChange', () => {
-                var _a, _b;
-                const context = this.getContext();
-                const wasOpen = this._isOpen;
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (!wasOpen && this._isOpen) {
-                    this.previousActiveElement = document.activeElement;
-                    requestAnimationFrame(() => {
-                        if (this.contentRef) {
-                            focusFirst(this.contentRef);
-                        }
-                    });
-                }
-                else if (wasOpen && !this._isOpen) {
-                    (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            });
-        }
+        this.dialogEl = (_a = this.el.closest('seki-dialog')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     handleKeyDown(event) {
         if (!this._isOpen)
@@ -89,7 +89,9 @@ export class SekiDialogContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     render() {
         const context = this.getContext();

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

@@ -12,6 +12,11 @@ export class SekiDialogOverlay {
          */
         this.closeOnClick = true;
         this._isOpen = false;
+        this.onDialogOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        };
         this.handleClick = () => {
             if (this.closeOnClick) {
                 this.closeDialog.emit();
@@ -29,21 +34,18 @@ export class SekiDialogOverlay {
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for context changes
-        const dialog = this.el.closest('seki-dialog');
-        if (dialog) {
-            dialog.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;
-            });
-        }
+        this.dialogEl = (_a = this.el.closest('seki-dialog')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     render() {
         if (!this._isOpen) {

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

@@ -31,6 +31,16 @@ export class SekiDialog {
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
     }
+    handleOpenPropChange(newValue) {
+        // Honour controlled `open` updates after first render. Without this, setting
+        // dialog.open = true later did nothing (open was only read in componentWillLoad).
+        if (newValue && !this._isOpen) {
+            this.openDialog();
+        }
+        else if (!newValue && this._isOpen) {
+            this.closeDialog();
+        }
+    }
     get titleId() {
         return `seki-dialog-title-${this.instanceId}`;
     }
@@ -104,7 +114,7 @@ export class SekiDialog {
         }
     }
     render() {
-        return (h(Host, { key: 'b26d6665d7cbd7cb94f53e78855c7e0018c38c8d', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '416347fc9cd44970c3a5dec4bc562692f36562d4', part: "dialog", class: "dialog" }, h("slot", { key: '116af2368448782b7c65af0bf039a8f2186d508c' }))));
+        return (h(Host, { key: '185a05b13663a81dc152b76009f9befd201ec8db', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b172f05f25d1ee05dc43e2b50e95a6c1c0e8ad60', part: "dialog", class: "dialog" }, h("slot", { key: '5d73235cd76ea9b95b793661940553bc0685ed96' }))));
     }
     static get is() { return "seki-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -244,6 +254,12 @@ export class SekiDialog {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "sekiDialogTriggerClick",

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+import { computeAnchoredPosition } from "../../utils/positioning";
 /**
  * Dropdown Menu content panel
  *
@@ -9,6 +10,18 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiDropdownMenuContent {
     constructor() {
+        this.onMenuOpenChange = () => {
+            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) {
+                this._focusedIndex = 0;
+                requestAnimationFrame(() => {
+                    this.updatePosition();
+                    this.focusItem(0);
+                });
+            }
+        };
         /**
          * Offset from trigger
          */
@@ -33,21 +46,9 @@ export class SekiDropdownMenuContent {
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
-        const menu = this.el.closest('seki-dropdown-menu');
-        if (menu) {
-            menu.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) {
-                    this._focusedIndex = 0;
-                    requestAnimationFrame(() => {
-                        this.updatePosition();
-                        this.focusItem(0);
-                    });
-                }
-            });
-        }
+        var _a, _b;
+        this.menuEl = (_a = this.el.closest('seki-dropdown-menu')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -104,69 +105,23 @@ export class SekiDropdownMenuContent {
             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 : 'start';
-        const offset = this.sideOffset;
-        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;
-                    break;
-                case 'center':
-                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
-                    break;
-                case 'end':
-                    left = triggerRect.right - contentRect.width;
-                    break;
-            }
-        }
-        else {
-            switch (align) {
-                case 'start':
-                    top = triggerRect.top;
-                    break;
-                case 'center':
-                    top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
-                    break;
-                case 'end':
-                    top = triggerRect.bottom - contentRect.height;
-                    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,
+        });
         this._position = { top: `${top}px`, left: `${left}px` };
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
         if (!this._isOpen) {

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio.js

@@ -15,6 +15,10 @@ export class SekiDropdownMenuRadio {
          */
         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 SekiDropdownMenuRadio {
         this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
     }
     componentDidLoad() {
-        const group = this.el.closest('seki-dropdown-menu-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-dropdown-menu-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: 'df93ac43775928cd5a5d7504c13e1048e69b30c2' }, h("div", { key: '3df52c47bb088cd5e54dcdf0ca5b5541c48351b9', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: '9b5c16b86989fe8cac562696569685288dd455d1' }, h("div", { key: 'c190e966f43a39ff4171e721a85f5fcc4ae530e5', part: "item", role: "menuitemradio", class: {
                 'dropdown-menu-radio': true,
                 'dropdown-menu-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: '99d77c45832bf6ca48bc1c720a24b5b87431b49c', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '7cd44ae489f5ed6d61f011aeb2badc11e5b6fa73', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: 'fc0b11f4898ceb0df49e236090537e0251f65f62', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'd5b8304c7a347dc61d2b818a61d2cfdd48efb781' }))));
+            }, 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: '6eb76b52b8148dfe5d8e0dc5c81476c7cf0871ce', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '3ec758d15aaa2ea3c267051169c5b16ac889084e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '6a18e381a0dc726fca24b2d5404064dd781fefaf', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '894485165c5cf9c9b303c5faef47a130c7e7bbdf' }))));
     }
     static get is() { return "seki-dropdown-menu-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,11 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiDropdownMenuTrigger {
     constructor() {
         this._isOpen = false;
+        this.onMenuOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        };
     }
     getContext() {
         const menu = this.el.closest('seki-dropdown-menu');
@@ -17,14 +22,9 @@ export class SekiDropdownMenuTrigger {
         return menu ? menu._dropdownMenuContext : null;
     }
     componentDidLoad() {
-        const menu = this.el.closest('seki-dropdown-menu');
-        if (menu) {
-            menu.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;
-            });
-        }
+        var _a, _b;
+        this.menuEl = (_a = this.el.closest('seki-dropdown-menu')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     handleClick(event) {
         event.stopPropagation();
@@ -34,10 +34,12 @@ export class SekiDropdownMenuTrigger {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
-        return (h(Host, { key: '75d46109abf0d64e0e47c87cc08c1cbc3f30527c', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '65c160dc74af255f12f1fda5143738b6a469dbe8', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '96cb2d00c1cbb008aa2d86423af1e2f78d82847c' }))));
+        return (h(Host, { key: 'fce6a84d7fcc4ed52edfdc4465d1da0942cfe3cb', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '0fe984028ed8e6802fcb91354fe4d0fcc4b1d5fe', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: 'f7985116dbb64d96608f5eac631552862fa4c83a' }))));
     }
     static get is() { return "seki-dropdown-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,11 @@ export class SekiDropdownMenu {
         }
     }
     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)) {
@@ -102,6 +106,11 @@ export class SekiDropdownMenu {
         }, 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;
@@ -139,7 +148,7 @@ export class SekiDropdownMenu {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '767d46361c1622b7d9ee234882f20b6a2fc2b1d0', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '8f7e87616a6a73a78273b3bb5600f8937e894bb1', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '75e65c5316c6376fdf20f8cb7d68fc740494cc53' }))));
+        return (h(Host, { key: '2d005621c57288981fd010d032df05ba0673382b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'ccfad38f3553407073c9c5f8b7d2ad1a536428c8', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '12250972a0eaeef563e711a82c60243442e47a63' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }