@sekiui/elements 0.0.59 → 0.0.61

package/dist/cjs/seki-sidebar-separator.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-DzoHqiUq.js');
+
+const sekiSidebarCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98.5%);--seki-sidebar-foreground:hsl(0, 0%, 9%);--seki-sidebar-primary:hsl(0, 0%, 12%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 97%);--seki-sidebar-accent-foreground:hsl(0, 0%, 12%);--seki-sidebar-border:hsl(0, 0%, 90%);--seki-sidebar-ring:hsl(0, 0%, 64%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(0, 0%, 12%);--seki-sidebar-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-primary:hsl(264, 100%, 60%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 18%);--seki-sidebar-accent-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-border:hsla(0, 0%, 100%, 0.1);--seki-sidebar-ring:hsl(0, 0%, 40%)}:host{--sidebar-width:var(--seki-sidebar-width, 16rem);--sidebar-width-icon:var(--seki-sidebar-width-icon, 3rem);--sidebar-width-mobile:var(--seki-sidebar-width-mobile, 18rem);--sidebar-background:var(--seki-sidebar-background);--sidebar-foreground:var(--seki-sidebar-foreground);--sidebar-primary:var(--seki-sidebar-primary);--sidebar-primary-foreground:var(--seki-sidebar-primary-foreground);--sidebar-accent:var(--seki-sidebar-accent);--sidebar-accent-foreground:var(--seki-sidebar-accent-foreground);--sidebar-border:var(--seki-sidebar-border);--sidebar-ring:var(--seki-sidebar-ring);--sidebar-transition-duration:var(--seki-sidebar-transition-duration, 200ms);--sidebar-transition-timing:var(--seki-sidebar-transition-timing, ease-in-out);display:block;flex-shrink:0}.sidebar{position:relative;display:flex;flex-direction:column;width:var(--sidebar-width);height:100vh;background-color:var(--sidebar-background);color:var(--sidebar-foreground);border-right:1px solid var(--sidebar-border);transition:width var(--sidebar-transition-duration) var(--sidebar-transition-timing),\n              transform var(--sidebar-transition-duration) var(--sidebar-transition-timing);overflow:hidden}:host([data-side='right']) .sidebar{border-right:none;border-left:1px solid var(--sidebar-border)}:host([data-variant='floating']) .sidebar{border:1px solid var(--sidebar-border);border-radius:0.5rem;margin:0.5rem;height:calc(100vh - 1rem);box-shadow:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))}:host([data-variant='inset']) .sidebar{border:none;background-color:transparent}:host([data-icon-mode='true']) .sidebar{width:var(--sidebar-width-icon)}:host([data-offcanvas='true']) .sidebar{width:0;border:none}:host([data-collapsible='none']) .sidebar{width:var(--sidebar-width)}.sidebar-overlay{position:fixed;inset:0;z-index:40;background-color:hsla(0, 0%, 0%, 0.8);backdrop-filter:blur(4px);animation:fadeIn var(--sidebar-transition-duration) var(--sidebar-transition-timing)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host([data-mobile='true']) .sidebar{position:fixed;top:0;bottom:0;z-index:50;width:var(--sidebar-width-mobile);height:100vh;border-radius:0;box-shadow:var(--seki-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))}:host([data-mobile='true'][data-side='left']) .sidebar{left:0;transform:translateX(-100%)}:host([data-mobile='true'][data-side='right']) .sidebar{right:0;transform:translateX(100%)}.sidebar--mobile-sheet{transform:translateX(0) !important;animation:slideIn var(--sidebar-transition-duration) var(--sidebar-transition-timing)}:host([data-side='left']) .sidebar--mobile-sheet{animation-name:slideInLeft}:host([data-side='right']) .sidebar--mobile-sheet{animation-name:slideInRight}@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}:host([data-theme='dark']){--sidebar-background:var(--seki-sidebar-background);--sidebar-foreground:var(--seki-sidebar-foreground);--sidebar-border:var(--seki-sidebar-border)}";
+
+const SekiSidebarSeparator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'e461798add6b92751b9e51cadaf17c5bee684e77', class: "sidebar-separator", role: "separator" }));
+    }
+};
+SekiSidebarSeparator.style = sekiSidebarCss;
+
+exports.seki_sidebar_separator = SekiSidebarSeparator;

package/dist/cjs/seki-sidebar-trigger.cjs.entry.js

@@ -1,83 +1,42 @@
 'use strict';
 
-var index = require('./index-D4RM3EID.js');
+var index = require('./index-DzoHqiUq.js');
 
-const sekiSidebarTriggerCss = ":host{display:inline-block}.trigger-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:0.375rem;color:var(--sidebar-foreground);font-size:1.25rem;cursor:pointer;transition:background-color 200ms ease-in-out, border-color 200ms ease-in-out}.trigger-button:hover:not(:disabled){background-color:rgba(0, 0, 0, 0.05);border-color:var(--sidebar-border)}.trigger-button:active:not(:disabled){background-color:rgba(0, 0, 0, 0.1)}.trigger-button:focus-visible{outline:2px solid var(--sidebar-primary);outline-offset:2px}.trigger-button:disabled{opacity:0.5;cursor:not-allowed}.trigger-icon{display:flex;align-items:center;justify-content:center}.trigger-icon-default{font-size:1.25rem}:host-context([data-theme=\"dark\"]) .trigger-button:hover:not(:disabled){background-color:rgba(255, 255, 255, 0.1)}:host-context([data-theme=\"dark\"]) .trigger-button:active:not(:disabled){background-color:rgba(255, 255, 255, 0.15)}@media (prefers-reduced-motion: reduce){.trigger-button{transition:none}}";
+const sekiSidebarTriggerCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98.5%);--seki-sidebar-foreground:hsl(0, 0%, 9%);--seki-sidebar-primary:hsl(0, 0%, 12%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 97%);--seki-sidebar-accent-foreground:hsl(0, 0%, 12%);--seki-sidebar-border:hsl(0, 0%, 90%);--seki-sidebar-ring:hsl(0, 0%, 64%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(0, 0%, 12%);--seki-sidebar-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-primary:hsl(264, 100%, 60%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 18%);--seki-sidebar-accent-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-border:hsla(0, 0%, 100%, 0.1);--seki-sidebar-ring:hsl(0, 0%, 40%)}:host{--sidebar-foreground:var(--seki-sidebar-foreground);--sidebar-accent:var(--seki-sidebar-accent);--sidebar-accent-foreground:var(--seki-sidebar-accent-foreground);--sidebar-border:var(--seki-sidebar-border);--sidebar-ring:var(--seki-sidebar-ring);display:inline-block}.sidebar-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:var(--seki-radius-md, 0.375rem);color:var(--sidebar-foreground);cursor:pointer;transition:background-color 0.15s ease-in-out, color 0.15s ease-in-out}.sidebar-trigger:hover:not(:disabled){background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.sidebar-trigger:focus-visible{outline:2px solid var(--sidebar-ring);outline-offset:2px}.sidebar-trigger:disabled{opacity:0.5;cursor:not-allowed}.sidebar-trigger svg{width:1rem;height:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
 
 const SekiSidebarTrigger = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * Accessibility label for the button
-         * @type {string}
-         * @default 'Toggle sidebar'
-         */
-        this.ariaLabel = 'Toggle sidebar';
-        /**
-         * Track the sidebar's open state for aria-expanded attribute
-         */
-        this.isOpen = true;
-        /**
-         * Reference to parent sidebar
-         */
-        this.parentSidebar = null;
-        /**
-         * Handle button click - finds parent seki-sidebar or nearest sidebar in document
+         * Whether the trigger is disabled
          */
+        this.disabled = false;
+        this._isOpen = true;
+        this._isMobile = false;
+        this.provider = null;
         this.handleClick = async () => {
-            // First try to find parent sidebar
-            let sidebar = this.parentSidebar;
-            // If no parent found, look for nearest sidebar in the document
-            if (!sidebar) {
-                sidebar = document.querySelector('seki-sidebar');
-                this.parentSidebar = sidebar;
-            }
-            if (!sidebar)
-                return;
-            const state = await sidebar.getState();
-            await sidebar.setState({ isOpen: !state.isOpen });
-        };
-        /**
-         * Handle keyboard activation (Space, Enter)
-         */
-        this.handleKeyDown = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                e.preventDefault();
-                this.handleClick();
+            if (this.provider && !this.disabled) {
+                await this.provider.toggleSidebar();
             }
         };
     }
-    /**
-     * Initialize - find parent sidebar and listen to state changes
-     */
-    connectedCallback() {
-        var _a, _b;
-        this.parentSidebar = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('seki-sidebar');
-        if (!this.parentSidebar) {
-            this.parentSidebar = document.querySelector('seki-sidebar');
-        }
-        // Get initial state from parent sidebar
-        if (this.parentSidebar) {
-            const sidebarEl = this.parentSidebar;
-            (_b = sidebarEl.getState) === null || _b === void 0 ? void 0 : _b.call(sidebarEl).then(state => {
-                this.isOpen = state.isOpen;
-            });
-        }
+    componentWillLoad() {
+        this.provider = document.querySelector('seki-sidebar-provider');
+        this.syncWithProvider();
     }
-    /**
-     * Listen to openChange event from parent sidebar
-     */
-    handleOpenChange(event) {
-        // Update local state when parent sidebar changes
-        if (event.detail && typeof event.detail.isOpen === 'boolean') {
-            this.isOpen = event.detail.isOpen;
+    async syncWithProvider() {
+        if (this.provider) {
+            const state = await this.provider.getState();
+            this._isOpen = state.isMobile ? state.openMobile : state.open;
+            this._isMobile = state.isMobile;
         }
     }
-    /**
-     * Render the component
-     */
+    handleStateChange(event) {
+        this._isOpen = event.detail.isMobile ? event.detail.openMobile : event.detail.open;
+        this._isMobile = event.detail.isMobile;
+    }
     render() {
-        return (index.h(index.Host, { key: 'f031872df0db62782e7736739a4ec21890bedb5a' }, index.h("button", { key: 'f673e56848c712deca471b9b28c7f52ba346f809', class: "trigger-button", "aria-expanded": this.isOpen, "aria-label": this.ariaLabel, onClick: this.handleClick, onKeyDown: this.handleKeyDown, type: "button" }, this.icon && index.h("span", { key: '17a389fc5025ce39e9c7e7ac4711efa7bc8477ee', class: "trigger-icon", innerHTML: this.icon }), !this.icon && index.h("span", { key: 'a2e7692e62bc23ee325d2f3e02bf34a2900d1873', class: "trigger-icon-default" }, "\u2630"))));
+        return (index.h(index.Host, { key: '7751e2bcd4f7abd08a23a8e6ed1d28c5afa52236' }, index.h("button", { key: '12393157e2b598cc27e0a24885245ee27a3c6131', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("slot", { key: '224abf5dda64001fa6b88c9261ebe67f45a5677d' }, index.h("svg", { key: 'f1057ac8f1c87eef4d96dbfb6c60a437dac1a16c', 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" }, index.h("rect", { key: '5b988659b789aaeae2c3f518bad01506bf9c5a8d', width: "18", height: "18", x: "3", y: "3", rx: "2" }), index.h("path", { key: '1b4a03f0f9a67b8050d1e1721d9751b1e7e287aa', d: "M9 3v18" }))), index.h("span", { key: '12a56721a022b47997b9db375a6bfb7ddaab8c92', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-sidebar.cjs.entry.js

@@ -1,341 +1,64 @@
 'use strict';
 
-var index = require('./index-D4RM3EID.js');
-var keyboard = require('./keyboard-Cjl5HYES.js');
+var index = require('./index-DzoHqiUq.js');
 
-const sekiSidebarCss = ":host{--sidebar-bg:var(--color-sidebar-bg, #f9fafb);--sidebar-foreground:var(--color-sidebar-foreground, #1f2937);--sidebar-primary:var(--color-sidebar-primary, #2563eb);--sidebar-accent:var(--color-sidebar-accent, #10b981);--sidebar-border:var(--color-sidebar-border, #e5e7eb);--sidebar-width:var(--sizing-sidebar-width, 250px);--sidebar-collapsed-width:var(--sizing-sidebar-collapsed-width, 64px);--sidebar-padding:var(--spacing-sidebar-padding, 1rem);--sidebar-gap:var(--spacing-sidebar-gap, 0.5rem);--sidebar-item-padding:var(--spacing-sidebar-item-padding, 0.75rem 1rem);--sidebar-item-height:var(--sizing-sidebar-item-height, 44px);--sidebar-item-border-radius:var(--radius-sidebar-item, 0.375rem);--sidebar-transition-duration:var(--duration-sidebar-transition, 200ms);--sidebar-z-header:10;--sidebar-z-footer:10;--sidebar-z-content:1;--sidebar-z-overlay:40}:host([data-theme=\"dark\"]),:host-context([data-theme=\"dark\"]){--sidebar-bg:var(--color-sidebar-bg-dark, #1f2937);--sidebar-foreground:var(--color-sidebar-foreground-dark, #f1f5f9);--sidebar-primary:var(--color-sidebar-primary-dark, #60a5fa);--sidebar-accent:var(--color-sidebar-accent-dark, #34d399);--sidebar-border:var(--color-sidebar-border-dark, #374151)}:host{display:flex;flex-direction:column;height:100%;width:var(--sidebar-width);background-color:var(--sidebar-bg);color:var(--sidebar-foreground);border-right:1px solid var(--sidebar-border);transition:width 200ms ease-linear;contain:layout style paint}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]){width:var(--sidebar-collapsed-width)}:host([data-collapsible=\"icon\"]){--group-collapsible:icon}:host([data-collapsible=\"offcanvas\"]){--group-collapsible:offcanvas}:host([data-collapsible=\"none\"]){--group-collapsible:none}:host([data-state=\"closed\"][data-collapse-mode=\"offcanvas\"]){position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-width);transform:translateX(-100%);border-right:none;box-shadow:2px 0 8px rgba(0, 0, 0, 0.1);z-index:var(--sidebar-z-overlay);opacity:0;pointer-events:none}:host([data-state=\"open\"][data-collapse-mode=\"offcanvas\"]){position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-width);transform:translateX(0);box-shadow:2px 0 8px rgba(0, 0, 0, 0.1);z-index:var(--sidebar-z-overlay);opacity:1;pointer-events:auto}:host([data-variant=\"floating\"]){position:absolute;border-radius:0.5rem;box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);border:1px solid var(--sidebar-border)}:host([data-variant=\"inset\"]){border-right:1px solid var(--sidebar-border)}.sidebar-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.sidebar-header{flex-shrink:0;padding:var(--sidebar-padding);border-bottom:1px solid var(--sidebar-border);position:sticky;top:0;z-index:var(--sidebar-z-header);background-color:var(--sidebar-bg)}.sidebar-header:empty{display:none}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-header{padding:0.5rem;justify-content:center;align-items:center}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-header>*{transition:margin 200ms ease-linear, opacity 200ms ease-linear}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-header>:not(svg){margin:-0.5rem 0;opacity:0}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-padding);gap:var(--sidebar-gap);display:flex;flex-direction:column;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;min-width:0}.sidebar-content::-webkit-scrollbar{width:8px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--sidebar-accent);border-radius:4px;opacity:0.5}.sidebar-content::-webkit-scrollbar-thumb:hover{opacity:0.7}.sidebar-footer{flex-shrink:0;padding:var(--sidebar-padding);border-top:1px solid var(--sidebar-border);position:sticky;bottom:0;z-index:var(--sidebar-z-footer);background-color:var(--sidebar-bg)}.sidebar-footer:empty{display:none}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-footer{padding:0.5rem;justify-content:center;display:flex;align-items:center}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-footer>*{transition:margin 200ms ease-linear, opacity 200ms ease-linear}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]) .sidebar-footer>:not(:first-child){margin:-0.5rem 0;opacity:0}@media (max-width: 767px){:host{position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-width);transform:translateX(-100%);transition:transform var(--sidebar-transition-duration) ease-in-out;border-right:none;box-shadow:2px 0 8px rgba(0, 0, 0, 0.1);z-index:var(--sidebar-z-overlay);opacity:0;pointer-events:none}:host([data-state=\"open\"]){transform:translateX(0);opacity:1;pointer-events:auto}:host([data-collapse-mode=\"none\"]){position:static;width:100%;height:auto;border-right:none;border-bottom:1px solid var(--sidebar-border)}}@media (min-width: 768px) and (max-width: 1023px){:host{width:var(--sidebar-width)}:host([data-state=\"closed\"][data-collapse-mode=\"icon\"]){width:var(--sidebar-collapsed-width)}}@media (min-width: 1024px){:host{position:relative;width:var(--sidebar-width);height:100%;transform:none;z-index:auto}}:host-context(:focus-visible),:host:focus-visible{outline:2px solid var(--sidebar-primary);outline-offset:-2px}@media (prefers-reduced-motion: reduce){:host{transition:none}.sidebar-content{scroll-behavior:auto}}@media print{:host{display:none}}@media (prefers-contrast: more){:host{border-width:2px}.sidebar-header,.sidebar-footer{border-width:2px}}@supports (container-type: inline-size){:host{container-type:inline-size}}";
+const sekiSidebarCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98.5%);--seki-sidebar-foreground:hsl(0, 0%, 9%);--seki-sidebar-primary:hsl(0, 0%, 12%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 97%);--seki-sidebar-accent-foreground:hsl(0, 0%, 12%);--seki-sidebar-border:hsl(0, 0%, 90%);--seki-sidebar-ring:hsl(0, 0%, 64%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(0, 0%, 12%);--seki-sidebar-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-primary:hsl(264, 100%, 60%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-accent:hsl(0, 0%, 18%);--seki-sidebar-accent-foreground:hsl(0, 0%, 98.5%);--seki-sidebar-border:hsla(0, 0%, 100%, 0.1);--seki-sidebar-ring:hsl(0, 0%, 40%)}:host{--sidebar-width:var(--seki-sidebar-width, 16rem);--sidebar-width-icon:var(--seki-sidebar-width-icon, 3rem);--sidebar-width-mobile:var(--seki-sidebar-width-mobile, 18rem);--sidebar-background:var(--seki-sidebar-background);--sidebar-foreground:var(--seki-sidebar-foreground);--sidebar-primary:var(--seki-sidebar-primary);--sidebar-primary-foreground:var(--seki-sidebar-primary-foreground);--sidebar-accent:var(--seki-sidebar-accent);--sidebar-accent-foreground:var(--seki-sidebar-accent-foreground);--sidebar-border:var(--seki-sidebar-border);--sidebar-ring:var(--seki-sidebar-ring);--sidebar-transition-duration:var(--seki-sidebar-transition-duration, 200ms);--sidebar-transition-timing:var(--seki-sidebar-transition-timing, ease-in-out);display:block;flex-shrink:0}.sidebar{position:relative;display:flex;flex-direction:column;width:var(--sidebar-width);height:100vh;background-color:var(--sidebar-background);color:var(--sidebar-foreground);border-right:1px solid var(--sidebar-border);transition:width var(--sidebar-transition-duration) var(--sidebar-transition-timing),\n              transform var(--sidebar-transition-duration) var(--sidebar-transition-timing);overflow:hidden}:host([data-side='right']) .sidebar{border-right:none;border-left:1px solid var(--sidebar-border)}:host([data-variant='floating']) .sidebar{border:1px solid var(--sidebar-border);border-radius:0.5rem;margin:0.5rem;height:calc(100vh - 1rem);box-shadow:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))}:host([data-variant='inset']) .sidebar{border:none;background-color:transparent}:host([data-icon-mode='true']) .sidebar{width:var(--sidebar-width-icon)}:host([data-offcanvas='true']) .sidebar{width:0;border:none}:host([data-collapsible='none']) .sidebar{width:var(--sidebar-width)}.sidebar-overlay{position:fixed;inset:0;z-index:40;background-color:hsla(0, 0%, 0%, 0.8);backdrop-filter:blur(4px);animation:fadeIn var(--sidebar-transition-duration) var(--sidebar-transition-timing)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host([data-mobile='true']) .sidebar{position:fixed;top:0;bottom:0;z-index:50;width:var(--sidebar-width-mobile);height:100vh;border-radius:0;box-shadow:var(--seki-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))}:host([data-mobile='true'][data-side='left']) .sidebar{left:0;transform:translateX(-100%)}:host([data-mobile='true'][data-side='right']) .sidebar{right:0;transform:translateX(100%)}.sidebar--mobile-sheet{transform:translateX(0) !important;animation:slideIn var(--sidebar-transition-duration) var(--sidebar-transition-timing)}:host([data-side='left']) .sidebar--mobile-sheet{animation-name:slideInLeft}:host([data-side='right']) .sidebar--mobile-sheet{animation-name:slideInRight}@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}:host([data-theme='dark']){--sidebar-background:var(--seki-sidebar-background);--sidebar-foreground:var(--seki-sidebar-foreground);--sidebar-border:var(--seki-sidebar-border)}";
 
 const SekiSidebar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.openChange = index.createEvent(this, "openChange");
-        this.variantChange = index.createEvent(this, "variantChange");
-        this.collapseModeChange = index.createEvent(this, "collapseModeChange");
-        this.mobileStateChange = index.createEvent(this, "mobileStateChange");
         /**
-         * 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 });
-        }
-    }
-    /**
-     * 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
-        keyboard.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 = keyboard.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);
-        }
+    handleStateChange(event) {
+        this._open = event.detail.open;
+        this._openMobile = event.detail.openMobile;
+        this._isMobile = event.detail.isMobile;
     }
-    /**
-     * Render the component
-     */
     render() {
-        return (index.h(index.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 }, index.h("div", { key: 'ea80ee13d88cb2814ea0fdf81174a70e28005a7e', class: "sidebar-container" }, index.h("div", { key: '990963e11792dec05f7dfc46374fd9495c45d061', class: "sidebar-header" }, index.h("slot", { key: 'a1383badaa23eaabdedc339b5f3c0fa9006f889b', name: "header" })), index.h("div", { key: 'a42b588e3975e14d46dc7a0d692625e165d27c27', class: "sidebar-content" }, index.h("slot", { key: '129065e3f26fb9c05d166e704b65b998de0ff999' })), index.h("div", { key: 'd88142484a511084430f197c7dc24c7f9a00186f', class: "sidebar-footer" }, index.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 (index.h(index.Host, { key: '238dba399fb48ad734392e9e887d8e11ed15673f', "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 && (index.h("div", { key: '1d659a86e98fe43400b56eaa44b3eeb5fd4c8ffc', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), index.h("aside", { key: '1cf35b03bc9bc5511fc6cce31050eb0d8a334d27', class: {
+                'sidebar': true,
+                'sidebar--mobile-sheet': showMobileSheet,
+            }, role: "complementary", "aria-label": "Sidebar" }, index.h("slot", { key: 'ea158ebb620275e5492965234d0ab925d391f919' }))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "variant": ["watchVariant"],
-        "collapseMode": ["watchCollapseMode"]
-    }; }
 };
 SekiSidebar.style = sekiSidebarCss;