@sekiui/elements 0.0.65 → 0.0.69

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

@@ -0,0 +1,259 @@
+import { h } from "@stencil/core";
+/**
+ * seki-drawer: Mobile-friendly drawer component with swipe gestures
+ *
+ * @component Drawer
+ * @example
+ * <seki-drawer>
+ *   <seki-sheet-trigger>
+ *     <seki-button>Open Drawer</seki-button>
+ *   </seki-sheet-trigger>
+ *   <seki-drawer-content direction="bottom" snap-points="0.5,1">
+ *     <seki-sheet-header>
+ *       <seki-sheet-title>Title</seki-sheet-title>
+ *     </seki-sheet-header>
+ *     Content here
+ *   </seki-drawer-content>
+ * </seki-drawer>
+ */
+export class SekiDrawer {
+    constructor() {
+        /**
+         * Internal state for drawer open/closed
+         */
+        this.isOpen = false;
+        /**
+         * Current snap point (0-1)
+         */
+        this.currentSnapPoint = 1;
+    }
+    /**
+     * Opens the drawer
+     */
+    async open() {
+        this.isOpen = true;
+        this.currentSnapPoint = 1;
+        this.drawerOpen.emit();
+    }
+    /**
+     * Closes the drawer
+     */
+    async close() {
+        this.isOpen = false;
+        this.currentSnapPoint = 0;
+        this.drawerClose.emit();
+    }
+    /**
+     * Toggles the drawer
+     */
+    async toggle() {
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
+    }
+    /**
+     * Snaps to a specific point (0-1)
+     */
+    async snapTo(point) {
+        if (point <= 0) {
+            await this.close();
+        }
+        else {
+            this.currentSnapPoint = point;
+            this.isOpen = true;
+            this.drawerSnap.emit({ point });
+        }
+    }
+    handleTriggerClick() {
+        this.toggle();
+    }
+    handleRequestClose() {
+        this.close();
+    }
+    handleRequestSnap(event) {
+        this.snapTo(event.detail.point);
+    }
+    handleKeydown(ev) {
+        if (this.isOpen && ev.key === 'Escape') {
+            this.close();
+        }
+    }
+    render() {
+        return (h("div", { key: 'a31fdf12fbfae8155fc311d28a600f7c7fa1fc2b', class: {
+                'seki-drawer': true,
+                'seki-drawer--open': this.isOpen,
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: 'bfe80c5c9597018175c51211079e91896ba3bb4d' }), this.isOpen && (h("div", { key: 'd7e8c150b673bf6198ea706ee6d876f77ad7a55b', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.close() }))));
+    }
+    static get is() { return "seki-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-drawer.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "currentSnapPoint": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "drawerOpen",
+                "name": "drawerOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "drawerClose",
+                "name": "drawerClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "drawerSnap",
+                "name": "drawerSnap",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer snaps to a point"
+                },
+                "complexType": {
+                    "original": "{ point: number }",
+                    "resolved": "{ point: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the drawer",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the drawer",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the drawer",
+                    "tags": []
+                }
+            },
+            "snapTo": {
+                "complexType": {
+                    "signature": "(point: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "point",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Snaps to a specific point (0-1)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "triggerClick",
+                "method": "handleTriggerClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "requestClose",
+                "method": "handleRequestClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "requestSnap",
+                "method": "handleRequestSnap",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -41,10 +41,10 @@ export class SekiDropdownMenuCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: '50e535df7389f3c079f5ef7df376c8d6b9a463aa' }, h("div", { key: '84bf1f78b848ef16155b642c8ffe61cd99126ad6', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '260baae1b86071e98613b965bb2e490f5f118ae4' }, h("div", { key: '71cca19b0bdca8f005ac26583156659fa3500467', part: "item", role: "menuitemcheckbox", class: {
                 'dropdown-menu-checkbox': true,
                 'dropdown-menu-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: 'be68e7b650b22ca9de908b78803efcd83d8a5f1e', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: '5a235e7d11840d3b3dc2a0501e3226a257fe02ae', 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: '5425469bfebab0f28fadc1019770650f67379ada', points: "20 6 9 17 4 12" })))), h("slot", { key: '17d41aab4f26dcad6fc07a82906485e702bd11d6' }))));
+            }, 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: '5c7df8e2061f41a976d4b61dc8c43290f404ee58', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: '8eef4e68c5a8664c59bdd19a8f7b1d1b3afe619e', 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: '65e7e8073470c5073f7806a0389b0c9d5d5d394e', points: "20 6 9 17 4 12" })))), h("slot", { key: '85318678b6c9406a032d623430906b7eb4bb6918' }))));
     }
     static get is() { return "seki-dropdown-menu-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,16 +33,26 @@ export class SekiDropdownMenuItem {
         };
     }
     getContext() {
-        const menu = this.el.closest('seki-dropdown-menu');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return menu ? menu._dropdownMenuContext : null;
+        // Try dropdown menu first
+        const dropdownMenu = this.el.closest('seki-dropdown-menu');
+        if (dropdownMenu) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return dropdownMenu._dropdownMenuContext;
+        }
+        // Try context menu
+        const contextMenu = this.el.closest('seki-context-menu');
+        if (contextMenu) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return contextMenu._contextMenuContext;
+        }
+        return null;
     }
     render() {
-        return (h(Host, { key: 'be569b372f67e0f4a68254ca6aa107be9c20e7aa' }, h("div", { key: '1f22bcf12b10c1f918d9b9da7ecbc6c2bc2d14d4', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'd38d7f14636e2f2b62c6a8dc532d4391f5560863' }, h("div", { key: '7512f3974cd7ded0909346ee7ec8d09ed87db56d', part: "item", role: "menuitem", class: {
                 'dropdown-menu-item': true,
                 'dropdown-menu-item--disabled': this.disabled,
                 'dropdown-menu-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'b9d0128d3403b4f6b38478278383a98c15fcd921' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'c1254310e2a4c3244e82b08172a3525a19a64b31' }))));
     }
     static get is() { return "seki-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,10 +14,10 @@ export class SekiDropdownMenuLabel {
         this.inset = false;
     }
     render() {
-        return (h(Host, { key: 'a61b4d9ee97c7eae5b0ac39262f52d840f819266' }, h("div", { key: 'd9591882cf045fd3dddf515062c7188ccb2cf148', part: "label", class: {
+        return (h(Host, { key: '76bbcdf532ae6b4d212974f04a434a2000a10d14' }, h("div", { key: 'dea417897bb24efcbcfbf775e4c5ef95c46baabb', part: "label", class: {
                 'dropdown-menu-label': true,
                 'dropdown-menu-label--inset': this.inset,
-            } }, h("slot", { key: '08b3004e77013be6b081223ac180a284280365fa' }))));
+            } }, h("slot", { key: 'f01986ae7e808e97e57d533f8c28c66269c7dee8' }))));
     }
     static get is() { return "seki-dropdown-menu-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class SekiDropdownMenuRadioGroup {
         this._radioGroupContext.setValue(event.detail);
     }
     render() {
-        return (h(Host, { key: 'de0c1b63b8471fb4cd9396b380cae41f13be1315' }, h("div", { key: 'fc5f38afea817f40a1fca3f9256540eb29454b1b', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: 'a8dfd98fbcbf394e9e250434724d8a27cb66d89f' }))));
+        return (h(Host, { key: '743dea0971caf6eacd511c2e197f45b97c7a6e6c' }, h("div", { key: 'e61c223eabeb13f15e1a2ebe474c8b8ebff7c3af', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: '07aa22872153cc3d5c778d999d219809439f3618' }))));
     }
     static get is() { return "seki-dropdown-menu-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,10 +47,10 @@ export class SekiDropdownMenuRadio {
         }
     }
     render() {
-        return (h(Host, { key: '11d051ac22871b83d89ece1b73549822e325089d' }, h("div", { key: '99cbad1d639cef0ffd61d7901b84147e9c290ac4', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: '16d7ae2664b71c3a795f59fea06eb2ec3cf777f3' }, h("div", { key: '73cbe7d31c018094793c12fe0f7e333062a09c16', 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: '851df3c6b080aba46174f011fde512538974db28', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '5f00d779565dca07a4f681de733397eaaab3b7a1', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '2cdcea3be28123cb77e01205c7ad5a9d84f528b4', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '592feb955766f3edacea51a7dac6476596e84402' }))));
+            }, 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: 'bdf73a083438aacbd09e5786fc2a03c49da1b11a', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '893efae5621a0cbb36862f7ad8216115033221e6', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '61996b36d71413ef174990b55fa800fe1e61911b', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '9345aa5e47cc8231f28c971807b13762936cb839' }))));
     }
     static get is() { return "seki-dropdown-menu-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDropdownMenuSeparator {
     render() {
-        return (h(Host, { key: 'a2fde79c6d66674749b69437d935a59379ed2bc1' }, h("div", { key: '17fee469717e65f0d11194239436fc69b73b94bc', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
+        return (h(Host, { key: '549a6d47b3ea409a4cbefe833d16af6f4ccd8599' }, h("div", { key: '343c18f5765c34eed991fa2763e73bee83654a74', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
     }
     static get is() { return "seki-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDropdownMenuShortcut {
     render() {
-        return (h(Host, { key: 'fdc9b1aa9d753829c8a40880525266024aed4b4f' }, h("span", { key: '659670cc60fd40ccb770a97924dadd60e6008d38', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: 'dddcebd4582a5056c481f2042a979fcd63ed20b1' }))));
+        return (h(Host, { key: '8ec6ae149ec3ffc0a2dfd1b13d129aa7027925ac' }, h("span", { key: 'bd1f5a35e2dccb318c82514fff31d153b038713b', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: 'd0dfea6ec0ba50e3c6abbe69b65a6b4e19b5365d' }))));
     }
     static get is() { return "seki-dropdown-menu-shortcut"; }
     static get encapsulation() { return "shadow"; }