@sekiui/elements 0.0.57 → 0.0.60

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

@@ -1,337 +1,56 @@
-/**
- * SekiSidebar Component
- * @description Main sidebar container component managing collapse state, layout variant,
- * and responsive configuration. Provides context to child components.
- * @component
- * @example
- * <seki-sidebar variant="sidebar" collapse-mode="icon" persistent>
- *   <seki-sidebar-header>Header Content</seki-sidebar-header>
- *   <seki-sidebar-content>Menu content</seki-sidebar-content>
- *   <seki-sidebar-footer>Footer content</seki-sidebar-footer>
- * </seki-sidebar>
- */
-import { h, Host, } from "@stencil/core";
-import { getKeyboardService } from "../../services/keyboard";
+import { h, Host } from "@stencil/core";
 export class SekiSidebar {
     constructor() {
         /**
-         * Layout variant: standard, floating (detached), or inset
-         * @type {'sidebar' | 'floating' | 'inset'}
-         * @default 'sidebar'
+         * Sidebar variant: 'sidebar' | 'floating' | 'inset'
          */
         this.variant = 'sidebar';
         /**
-         * Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)
-         * @type {'offcanvas' | 'icon' | 'none'}
-         * @default 'offcanvas'
+         * Collapsible behavior: 'offcanvas' | 'icon' | 'none'
          */
-        this.collapseMode = 'offcanvas';
+        this.collapsible = 'offcanvas';
         /**
-         * Initial open/closed state
-         * @type {boolean}
-         * @default true
-         */
-        this.defaultOpen = true;
-        /**
-         * Persist state to localStorage
-         * @type {boolean}
-         * @default false
-         */
-        this.persistent = false;
-        /**
-         * Viewport width for mobile detection (px)
-         * @type {number}
-         * @default 768
-         */
-        this.mobileBreakpoint = 768;
-        /**
-         * Position: left or right side of viewport
-         * @type {'left' | 'right'}
-         * @default 'left'
+         * Side of the screen: 'left' | 'right'
          */
         this.side = 'left';
-        /**
-         * Storage key for persisted state
-         * @type {string}
-         * @default 'seki-sidebar-state'
-         */
-        this.persistenceKey = 'seki-sidebar-state';
-        /**
-         * Internal state: whether sidebar is open/expanded
-         */
-        this.isOpen = true;
-        /**
-         * Internal state: whether viewport is mobile
-         */
-        this.isMobile = false;
-        /**
-         * Note: Context distribution to child components via parent-child DOM hierarchy
-         * Child components use closest('seki-sidebar') to access parent methods
-         */
-        this.resizeObserver = null;
-        this.mediaQueryList = null;
-        this.keyboardShortcutId = `seki-sidebar-shortcut-${Math.random().toString(36).substr(2, 9)}`;
-        /**
-         * Handle media query changes for mobile detection
-         */
-        this.handleMediaQueryChange = (mq) => {
-            const wasMobile = this.isMobile;
-            this.isMobile = !mq.matches;
-            if (wasMobile !== this.isMobile) {
-                this.mobileStateChange.emit({ isMobile: this.isMobile });
-                // Auto-collapse on mobile if offcanvas mode
-                if (this.isMobile && this.collapseMode === 'offcanvas') {
-                    this.isOpen = false;
-                }
+        this._open = true;
+        this._openMobile = false;
+        this._isMobile = false;
+        this.handleOverlayClick = async () => {
+            const provider = this.el.closest('seki-sidebar-provider');
+            if (provider && this._isMobile) {
+                await provider.setOpenMobile(false);
             }
         };
     }
-    /**
-     * Component lifecycle: initialize state
-     */
     componentWillLoad() {
-        // Load persisted state if available
-        if (this.persistent) {
-            try {
-                const storage = typeof window !== 'undefined' && window.localStorage;
-                if (storage) {
-                    const stored = storage.getItem(this.persistenceKey);
-                    if (stored) {
-                        const state = JSON.parse(stored);
-                        if (typeof state.isOpen === 'boolean') {
-                            this.isOpen = state.isOpen;
-                        }
-                        else {
-                            this.isOpen = Boolean(this.defaultOpen);
-                        }
-                    }
-                    else {
-                        this.isOpen = Boolean(this.defaultOpen);
-                    }
-                }
-                else {
-                    this.isOpen = Boolean(this.defaultOpen);
-                }
-            }
-            catch (e) {
-                console.warn('[seki-sidebar] Failed to load persisted state:', e);
-                this.isOpen = Boolean(this.defaultOpen);
-            }
-        }
-        else {
-            this.isOpen = Boolean(this.defaultOpen);
-        }
-        // Detect initial mobile state
-        this.detectMobileState();
+        // Get initial state from provider
+        this.syncWithProvider();
     }
-    /**
-     * Watch for variant changes
-     */
-    watchVariant(newValue) {
-        if (newValue) {
-            this.variantChange.emit({ variant: newValue });
+    async syncWithProvider() {
+        const provider = this.el.closest('seki-sidebar-provider');
+        if (provider) {
+            const state = await provider.getState();
+            this._open = state.open;
+            this._openMobile = state.openMobile;
+            this._isMobile = state.isMobile;
         }
     }
-    /**
-     * Watch for collapse mode changes
-     */
-    watchCollapseMode(newValue) {
-        if (newValue) {
-            this.collapseModeChange.emit({ collapseMode: newValue });
-        }
+    handleStateChange(event) {
+        this._open = event.detail.open;
+        this._openMobile = event.detail.openMobile;
+        this._isMobile = event.detail.isMobile;
     }
-    /**
-     * Component lifecycle: after render
-     */
-    componentDidLoad() {
-        // Setup resize detection for mobile breakpoint
-        this.setupResizeDetection();
-        // Setup keyboard shortcut (Ctrl+B or Cmd+B)
-        this.setupKeyboardShortcut();
-        // Update context with current state
-        this.updateContext();
-    }
-    /**
-     * Component lifecycle: on prop changes
-     */
-    componentWillUpdate() {
-        this.updateContext();
-    }
-    /**
-     * Component lifecycle: cleanup
-     */
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        if (this.mediaQueryList) {
-            this.mediaQueryList.removeListener(this.handleMediaQueryChange);
-        }
-        // Clean up keyboard shortcut service
-        getKeyboardService().unregisterShortcut(this.keyboardShortcutId);
-    }
-    /**
-     * Listen for variant prop changes
-     */
-    onVariantChange(newVariant) {
-        this.variantChange.emit({
-            variant: newVariant,
-        });
-    }
-    /**
-     * Listen for collapseMode prop changes
-     */
-    onCollapseModeChange(newMode) {
-        this.collapseModeChange.emit({
-            collapseMode: newMode,
-        });
-    }
-    /**
-     * Detect if viewport is mobile
-     */
-    detectMobileState() {
-        if (typeof window === 'undefined')
-            return;
-        const breakpoint = this.mobileBreakpoint;
-        this.mediaQueryList = window.matchMedia(`(min-width: ${breakpoint}px)`);
-        this.isMobile = !this.mediaQueryList.matches;
-        // Use addEventListener for better browser support
-        if (this.mediaQueryList.addEventListener) {
-            this.mediaQueryList.addEventListener('change', this.handleMediaQueryChange);
-        }
-        else {
-            // Fallback for older browsers
-            this.mediaQueryList.addListener(this.handleMediaQueryChange);
-        }
-    }
-    /**
-     * Setup resize detection using ResizeObserver
-     */
-    setupResizeDetection() {
-        if (typeof window === 'undefined' || !('ResizeObserver' in window))
-            return;
-        const ResizeObserverClass = window.ResizeObserver;
-        this.resizeObserver = new ResizeObserverClass(() => {
-            this.detectMobileState();
-        });
-        const element = this.el;
-        if (element && this.resizeObserver) {
-            this.resizeObserver.observe(element);
-        }
-    }
-    /**
-     * Setup keyboard shortcut for toggling sidebar (Ctrl+B or Cmd+B)
-     * Uses the KeyboardService for centralized event handling
-     */
-    setupKeyboardShortcut() {
-        const keyboardService = getKeyboardService();
-        keyboardService.registerCtrlOrCmdShortcut(this.keyboardShortcutId, 'b', () => this.toggle(), true);
-    }
-    /**
-     * Note: Context updates handled via event emissions and state changes
-     */
-    updateContext() {
-        // State updates trigger reactive re-renders and event emissions
-        // Child components listen to these events
-    }
-    /**
-     * Get current state synchronously
-     */
-    getStateSync() {
-        var _a, _b;
-        return {
-            isOpen: Boolean(this.isOpen),
-            collapseMode: (_a = this.collapseMode) !== null && _a !== void 0 ? _a : 'offcanvas',
-            variant: (_b = this.variant) !== null && _b !== void 0 ? _b : 'sidebar',
-            isMobile: Boolean(this.isMobile),
-            persistenceKey: this.persistenceKey,
-        };
-    }
-    /**
-     * Open the sidebar (set isOpen=true)
-     * @returns {Promise<void>}
-     */
-    async open() {
-        var _a;
-        this.isOpen = true;
-        this.openChange.emit({ isOpen: true });
-        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, true);
-        await this.persistState();
-    }
-    /**
-     * Close the sidebar (set isOpen=false)
-     * @returns {Promise<void>}
-     */
-    async close() {
-        var _a;
-        this.isOpen = false;
-        this.openChange.emit({ isOpen: false });
-        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, false);
-        await this.persistState();
-    }
-    /**
-     * Toggle the sidebar open/closed state
-     * @returns {Promise<void>}
-     */
-    async toggle() {
-        if (this.isOpen) {
-            await this.close();
-        }
-        else {
-            await this.open();
-        }
-    }
-    /**
-     * Get current sidebar state
-     * @returns {Promise<SidebarState>}
-     */
-    async getState() {
-        return this.getStateSync();
-    }
-    /**
-     * Update sidebar state
-     * @param {Partial<SidebarState>} state - Partial state object
-     * @returns {Promise<void>}
-     */
-    async setState(state) {
-        var _a;
-        if (state.isOpen !== undefined) {
-            this.isOpen = state.isOpen;
-            this.openChange.emit({ isOpen: state.isOpen });
-        }
-        if (state.collapseMode !== undefined) {
-            this.collapseMode = state.collapseMode;
-            this.collapseModeChange.emit({ collapseMode: state.collapseMode });
-        }
-        if (state.variant !== undefined) {
-            this.variant = state.variant;
-            this.variantChange.emit({ variant: state.variant });
-        }
-        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, this.isOpen);
-        await this.persistState();
-    }
-    /**
-     * Persist state to localStorage if persistent=true
-     */
-    async persistState() {
-        if (!this.persistent)
-            return;
-        try {
-            const state = this.getStateSync();
-            const storage = typeof window !== 'undefined' && window.localStorage;
-            if (storage) {
-                storage.setItem(this.persistenceKey, JSON.stringify(state));
-            }
-        }
-        catch (e) {
-            console.warn('[seki-sidebar] Failed to persist state:', e);
-        }
-    }
-    /**
-     * Render the component
-     */
     render() {
-        return (h(Host, { key: '82055bbf43cae7732545e8e72b2b07b1485cdabc', role: "navigation", "aria-label": "Navigation sidebar", "data-state": this.isOpen ? 'open' : 'closed', "data-variant": this.variant, "data-collapse-mode": this.collapseMode, "data-mobile": this.isMobile }, h("div", { key: 'ea80ee13d88cb2814ea0fdf81174a70e28005a7e', class: "sidebar-container" }, h("div", { key: '990963e11792dec05f7dfc46374fd9495c45d061', class: "sidebar-header" }, h("slot", { key: 'a1383badaa23eaabdedc339b5f3c0fa9006f889b', name: "header" })), h("div", { key: 'a42b588e3975e14d46dc7a0d692625e165d27c27', class: "sidebar-content" }, h("slot", { key: '129065e3f26fb9c05d166e704b65b998de0ff999' })), h("div", { key: 'd88142484a511084430f197c7dc24c7f9a00186f', class: "sidebar-footer" }, h("slot", { key: '756e0971018fc4b9e23f36ed28a4ed45d7742ef2', name: "footer" })))));
+        const isOpen = this._isMobile ? this._openMobile : this._open;
+        const isClosed = !isOpen;
+        const isIconMode = this.collapsible === 'icon' && isClosed && !this._isMobile;
+        const isOffcanvas = this.collapsible === 'offcanvas' && isClosed && !this._isMobile;
+        const showMobileSheet = this._isMobile && this._openMobile;
+        return (h(Host, { key: 'a5657233f15a60fc671cab76744ed9aee53465f6', "data-variant": this.variant, "data-collapsible": this.collapsible, "data-side": this.side, "data-state": isOpen ? 'open' : 'closed', "data-mobile": this._isMobile ? 'true' : 'false', "data-icon-mode": isIconMode ? 'true' : 'false', "data-offcanvas": isOffcanvas ? 'true' : 'false' }, showMobileSheet && (h("div", { key: '75413aceee36d9ea35a6b8f08ff312e14e53a978', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '32e62efe6af9283fe907e4149f9e4e1a442d2061', class: {
+                'sidebar': true,
+                'sidebar--mobile-sheet': showMobileSheet,
+            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: 'e7cb27faccfda83a9c38869b5916a926b191b63e' }))));
     }
     static get is() { return "seki-sidebar"; }
     static get encapsulation() { return "shadow"; }
@@ -351,27 +70,15 @@ export class SekiSidebar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SidebarProps['variant']",
-                    "resolved": "\"floating\" | \"inset\" | \"sidebar\" | undefined",
-                    "references": {
-                        "SidebarProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarProps"
-                        }
-                    }
+                    "original": "'sidebar' | 'floating' | 'inset'",
+                    "resolved": "\"floating\" | \"inset\" | \"sidebar\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{'sidebar' | 'floating' | 'inset'}"
-                        }, {
-                            "name": "default",
-                            "text": "'sidebar'"
-                        }],
-                    "text": "Layout variant: standard, floating (detached), or inset"
+                    "tags": [],
+                    "text": "Sidebar variant: 'sidebar' | 'floating' | 'inset'"
                 },
                 "getter": false,
                 "setter": false,
@@ -379,432 +86,61 @@ export class SekiSidebar {
                 "attribute": "variant",
                 "defaultValue": "'sidebar'"
             },
-            "collapseMode": {
+            "collapsible": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SidebarProps['collapseMode']",
-                    "resolved": "\"icon\" | \"none\" | \"offcanvas\" | undefined",
-                    "references": {
-                        "SidebarProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarProps"
-                        }
-                    }
+                    "original": "'offcanvas' | 'icon' | 'none'",
+                    "resolved": "\"icon\" | \"none\" | \"offcanvas\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{'offcanvas' | 'icon' | 'none'}"
-                        }, {
-                            "name": "default",
-                            "text": "'offcanvas'"
-                        }],
-                    "text": "Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)"
+                    "tags": [],
+                    "text": "Collapsible behavior: 'offcanvas' | 'icon' | 'none'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "collapse-mode",
+                "attribute": "collapsible",
                 "defaultValue": "'offcanvas'"
             },
-            "defaultOpen": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "true"
-                        }],
-                    "text": "Initial open/closed state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "default-open",
-                "defaultValue": "true"
-            },
-            "persistent": {
-                "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": "Persist state to localStorage"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "persistent",
-                "defaultValue": "false"
-            },
-            "mobileBreakpoint": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{number}"
-                        }, {
-                            "name": "default",
-                            "text": "768"
-                        }],
-                    "text": "Viewport width for mobile detection (px)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "mobile-breakpoint",
-                "defaultValue": "768"
-            },
             "side": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SidebarProps['side']",
-                    "resolved": "\"left\" | \"right\" | undefined",
-                    "references": {
-                        "SidebarProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarProps"
-                        }
-                    }
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{'left' | 'right'}"
-                        }, {
-                            "name": "default",
-                            "text": "'left'"
-                        }],
-                    "text": "Position: left or right side of viewport"
+                    "tags": [],
+                    "text": "Side of the screen: 'left' | 'right'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "side",
                 "defaultValue": "'left'"
-            },
-            "persistenceKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }, {
-                            "name": "default",
-                            "text": "'seki-sidebar-state'"
-                        }],
-                    "text": "Storage key for persisted state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "persistence-key",
-                "defaultValue": "'seki-sidebar-state'"
-            },
-            "onOpenChange": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(isOpen: boolean) => void",
-                    "resolved": "((isOpen: boolean) => void) | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Callback fired when open state changes"
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {},
-            "isMobile": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "openChange",
-                "name": "openChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when sidebar opens/closes"
-                },
-                "complexType": {
-                    "original": "OpenChangeDetail",
-                    "resolved": "OpenChangeDetail",
-                    "references": {
-                        "OpenChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::OpenChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "variantChange",
-                "name": "variantChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when variant changes"
-                },
-                "complexType": {
-                    "original": "VariantChangeDetail",
-                    "resolved": "VariantChangeDetail",
-                    "references": {
-                        "VariantChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::VariantChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "collapseModeChange",
-                "name": "collapseModeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when collapse mode changes"
-                },
-                "complexType": {
-                    "original": "CollapseModeChangeDetail",
-                    "resolved": "CollapseModeChangeDetail",
-                    "references": {
-                        "CollapseModeChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::CollapseModeChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "mobileStateChange",
-                "name": "mobileStateChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when mobile state changes"
-                },
-                "complexType": {
-                    "original": "MobileStateChangeDetail",
-                    "resolved": "MobileStateChangeDetail",
-                    "references": {
-                        "MobileStateChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::MobileStateChangeDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "open": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Open the sidebar (set isOpen=true)",
-                    "tags": [{
-                            "name": "returns",
-                            "text": undefined
-                        }]
-                }
-            },
-            "close": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Close the sidebar (set isOpen=false)",
-                    "tags": [{
-                            "name": "returns",
-                            "text": undefined
-                        }]
-                }
-            },
-            "toggle": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggle the sidebar open/closed state",
-                    "tags": [{
-                            "name": "returns",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getState": {
-                "complexType": {
-                    "signature": "() => Promise<SidebarState>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "SidebarState": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarState"
-                        }
-                    },
-                    "return": "Promise<SidebarState>"
-                },
-                "docs": {
-                    "text": "Get current sidebar state",
-                    "tags": [{
-                            "name": "returns",
-                            "text": undefined
-                        }]
-                }
-            },
-            "setState": {
-                "complexType": {
-                    "signature": "(state: Partial<SidebarState>) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "{ isOpen?: boolean | undefined; collapseMode?: \"offcanvas\" | \"icon\" | \"none\" | undefined; variant?: \"sidebar\" | \"floating\" | \"inset\" | undefined; isMobile?: boolean | undefined; persistenceKey?: string | undefined; }",
-                            "docs": "- Partial state object"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Partial": {
-                            "location": "global",
-                            "id": "global::Partial"
-                        },
-                        "SidebarState": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarState"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Update sidebar state",
-                    "tags": [{
-                            "name": "param",
-                            "text": "state - Partial state object"
-                        }, {
-                            "name": "returns",
-                            "text": undefined
-                        }]
-                }
-            }
+            "_open": {},
+            "_openMobile": {},
+            "_isMobile": {}
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "variant",
-                "methodName": "watchVariant"
-            }, {
-                "propName": "collapseMode",
-                "methodName": "watchCollapseMode"
-            }];
-    }
     static get listeners() {
         return [{
-                "name": "variant",
-                "method": "onVariantChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "collapseMode",
-                "method": "onCollapseModeChange",
-                "target": undefined,
+                "name": "sekiSidebarStateChange",
+                "method": "handleStateChange",
+                "target": "window",
                 "capture": false,
                 "passive": false
             }];