@sekiui/elements 0.0.57 → 0.0.60

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

@@ -1,110 +1,10 @@
-/**
- * SekiSidebarGroup Component
- * @description Group container for organizing sidebar menu items
- * Optionally provides a collapsible section with title and action button
- * @component
- * @example
- * <seki-sidebar-group title="Navigation" collapsible>
- *   <seki-sidebar-menu>
- *     <seki-sidebar-menu-item href="/">Home</seki-sidebar-menu-item>
- *   </seki-sidebar-menu>
- * </seki-sidebar-group>
- */
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 export class SekiSidebarGroup {
-    constructor() {
-        /**
-         * Allow collapsing this group
-         * @type {boolean}
-         * @default false
-         */
-        this.collapsible = false;
-        /**
-         * Initial collapsed state
-         * @type {boolean}
-         * @default false
-         */
-        this.defaultCollapsed = false;
-        /**
-         * Internal state: whether group is collapsed
-         */
-        this.isCollapsed = false;
-        /**
-         * Toggle collapsed state
-         */
-        this.handleToggle = () => {
-            if (!this.collapsible)
-                return;
-            this.isCollapsed = !this.isCollapsed;
-            this.collapsedChange.emit({ isCollapsed: this.isCollapsed });
-        };
-        /**
-         * Handle keyboard navigation on toggle button
-         * - Enter/Space: toggle group
-         * - ArrowLeft: collapse group
-         * - ArrowRight: expand group
-         */
-        this.handleToggleKeyDown = (event) => {
-            if (!this.collapsible)
-                return;
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    this.handleToggle();
-                    break;
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    if (!this.isCollapsed) {
-                        this.isCollapsed = true;
-                        this.collapsedChange.emit({ isCollapsed: true });
-                    }
-                    break;
-                case 'ArrowRight':
-                    event.preventDefault();
-                    if (this.isCollapsed) {
-                        this.isCollapsed = false;
-                        this.collapsedChange.emit({ isCollapsed: false });
-                    }
-                    break;
-            }
-        };
-        /**
-         * Handle action button click
-         */
-        this.handleAction = (event) => {
-            var _a, _b;
-            event.stopPropagation();
-            (_b = (_a = this.action) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-    }
-    /**
-     * Component lifecycle: initialize state
-     */
-    componentWillLoad() {
-        this.isCollapsed = Boolean(this.defaultCollapsed);
-    }
-    /**
-     * Get current collapsed state
-     */
-    async isCollapsedState() {
-        return Boolean(this.isCollapsed);
-    }
-    /**
-     * Set collapsed state
-     */
-    async setCollapsed(collapsed) {
-        this.isCollapsed = collapsed;
-        this.collapsedChange.emit({ isCollapsed: collapsed });
-    }
-    /**
-     * Render the component
-     */
     render() {
-        return (h(Host, { key: 'c052df772b318b7c39d3b254746327e60409cdfa', "data-collapsed": this.isCollapsed }, h("div", { key: '3dd8a428ddbcc450f5f66a8f677e56893ace1c55', class: "group-wrapper" }, this.title && (h("div", { key: 'c1066e46ffe417f11fb87fe871483b0693c47886', class: "group-header" }, this.collapsible && (h("button", { key: '6f7b1180e40d4d1157c403735a80d6bdda425002', class: "group-toggle", "aria-expanded": !this.isCollapsed, "aria-label": `Toggle ${this.title} section`, onClick: this.handleToggle, onKeyDown: this.handleToggleKeyDown, type: "button" }, h("span", { key: '78cbb975a0a87693ad16ce2b6aaa8e4cfcb3fcfa', class: "toggle-icon" }, "\u25B6"))), h("span", { key: 'c61dec1def7006312775205323f8365ada2d8019', class: "group-title" }, this.title), this.action && (h("button", { key: '982669c5234425ee0b6dd951090547f35ca9bb82', class: "group-action", "aria-label": this.action.label, onClick: this.handleAction, type: "button" }, h("span", { key: '38fb06a76ace76673588755a132c00ef962e7a83', innerHTML: this.action.icon }))))), !this.isCollapsed && (h("div", { key: '532861c2c414ba077f96d58e613b11e3b6c47740', class: "group-content" }, h("slot", { key: '8a2472eb32df603d65c3f467b5dd2c995bcf72a6' }))))));
+        return (h("div", { key: '7ed11a95e77c36b5ba462e15b66ab85038225380', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: '452756ebd5d17424d6d1905abc61057dd3aceb81' }, this.label)), h("div", { key: 'bffdc6c888214f408cb9d4f2f26cc7b0c2b36054', class: "sidebar-group-content" }, h("slot", { key: '18f1bdbf5366437a45e279f9c140a05a25f572cd' }))));
     }
     static get is() { return "seki-sidebar-group"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-sidebar-group.css"]
@@ -117,184 +17,25 @@ export class SekiSidebarGroup {
     }
     static get properties() {
         return {
-            "title": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SidebarGroupProps['title']",
+                    "original": "string",
                     "resolved": "string | undefined",
-                    "references": {
-                        "SidebarGroupProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarGroupProps"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Section header text (optional)"
+                    "tags": [],
+                    "text": "Label for the group"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title"
-            },
-            "collapsible": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Allow collapsing this group"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "collapsible",
-                "defaultValue": "false"
-            },
-            "defaultCollapsed": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Initial collapsed state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "default-collapsed",
-                "defaultValue": "false"
-            },
-            "action": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarGroupProps['action']",
-                    "resolved": "undefined | ({ icon: string; label: string; onClick: () => void; })",
-                    "references": {
-                        "SidebarGroupProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarGroupProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{object}"
-                        }],
-                    "text": "Optional action button configuration"
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isCollapsed": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "collapsedChange",
-                "name": "collapsedChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when collapsed state changes"
-                },
-                "complexType": {
-                    "original": "CollapsedChangeDetail",
-                    "resolved": "CollapsedChangeDetail",
-                    "references": {
-                        "CollapsedChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::CollapsedChangeDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "isCollapsedState": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Get current collapsed state",
-                    "tags": []
-                }
-            },
-            "setCollapsed": {
-                "complexType": {
-                    "signature": "(collapsed: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "collapsed",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set collapsed state",
-                    "tags": []
-                }
+                "attribute": "label"
             }
         };
     }
-    static get elementRef() { return "el"; }
 }