@sekiui/elements 0.0.57 → 0.0.60

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

@@ -1,352 +1,630 @@
 /**
- * Sidebar Component Styles
- * @description Scoped styles for seki-sidebar and sub-components
- * Includes design tokens for theming, responsive breakpoints, and accessibility
+ * SekiUI Design Tokens - Index
+ * Aggregates all design token files into a single entry point
+ *
+ * Import this file to get access to all design tokens:
+ * @import '../tokens/index.css';
  */
 
-/* ============================================================================
-   CSS Custom Properties (Design Tokens)
-   ============================================================================ */
-
-:host {
-  /* Background and text colors */
-  --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);
-
-  /* Sizing */
-  --sidebar-width: var(--sizing-sidebar-width, 250px);
-  --sidebar-collapsed-width: var(--sizing-sidebar-collapsed-width, 64px);
-
-  /* Spacing */
-  --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);
-
-  /* Styling */
-  --sidebar-item-border-radius: var(--radius-sidebar-item, 0.375rem);
-  --sidebar-transition-duration: var(--duration-sidebar-transition, 200ms);
-
-  /* Z-index layers */
-  --sidebar-z-header: 10;
-  --sidebar-z-footer: 10;
-  --sidebar-z-content: 1;
-  --sidebar-z-overlay: 40;
-}
+/**
+ * SekiUI Design Tokens - Colors
+ * Based on shadcn/ui color system
+ */
 
-/* Dark mode overrides */
-: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);
-}
+/* =============================================================================
+   PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
+   ============================================================================= */
 
-/* ============================================================================
-   Main Container Layout
-   ============================================================================ */
+:host {
+  /* Neutral Scale (50-950) - shadcn/ui inspired */
+  --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%);
+
+  /* Primary/Accent Scale (50-950) */
+  --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%);
+
+  /* Semantic Color Primitives */
+  --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%);
+}
+
+/* =============================================================================
+   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
+   ============================================================================= */
 
 :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;
-}
+  /* Base */
+  --seki-background: hsl(0, 0%, 100%);
+  --seki-foreground: hsl(0, 0%, 3.9%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 96.1%);
+  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 100%);
+  --seki-card-foreground: hsl(0, 0%, 3.9%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 100%);
+  --seki-popover-foreground: hsl(0, 0%, 3.9%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 89.8%);
+  --seki-input: hsl(0, 0%, 89.8%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 9%);
+  --seki-primary-foreground: hsl(0, 0%, 98%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 96.1%);
+  --seki-secondary-foreground: hsl(0, 0%, 9%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 96.1%);
+  --seki-accent-foreground: hsl(0, 0%, 9%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 84.2%, 60.2%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 3.9%);
+
+  /* Legacy aliases for backward compatibility */
+  --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);
+}
+
+/* Dark Mode Semantic Tokens */
+:host([data-theme='dark']) {
+  /* Base */
+  --seki-background: hsl(0, 0%, 3.9%);
+  --seki-foreground: hsl(0, 0%, 98%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 14.9%);
+  --seki-muted-foreground: hsl(0, 0%, 63.9%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 3.9%);
+  --seki-card-foreground: hsl(0, 0%, 98%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 3.9%);
+  --seki-popover-foreground: hsl(0, 0%, 98%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 14.9%);
+  --seki-input: hsl(0, 0%, 14.9%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 98%);
+  --seki-primary-foreground: hsl(0, 0%, 9%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 14.9%);
+  --seki-secondary-foreground: hsl(0, 0%, 98%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 14.9%);
+  --seki-accent-foreground: hsl(0, 0%, 98%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 62.8%, 30.6%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 83.1%);
+
+  /* Legacy aliases for backward compatibility */
+  --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);
+
+  /* Button overrides for dark mode */
+  --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);
+  --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);
+}
+
+/* =============================================================================
+   COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
+   ============================================================================= */
 
-:host([data-state="closed"][data-collapse-mode="icon"]) {
-  width: var(--sidebar-collapsed-width);
+:host {
+  /* Button Variant: Primary (default in shadcn/ui) */
+  --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;
+
+  /* Button Variant: Secondary */
+  --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;
+
+  /* Button Variant: Outline */
+  --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);
+
+  /* Button Variant: Ghost */
+  --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;
+
+  /* Button Variant: Destructive */
+  --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;
+
+  /* Button Sizing: Small */
+  --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; /* Updated from 2rem to match shadcn (36px) */
+
+  /* Button Sizing: Medium (default) */
+  --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;
+
+  /* Button Sizing: Large */
+  --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */
+  --seki-button-lg-padding-y: 0.5rem;
+  --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */
+  --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */
+
+  /* Button Sizing: Icon-only (NEW - shadcn compatibility) */
+  --seki-button-icon-sm-size: 2rem; /* 32x32px square */
+  --seki-button-icon-size: 2.5rem; /* 40x40px square */
+  --seki-button-icon-lg-size: 3rem; /* 48x48px square */
+  --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */
+
+  /* Button Variant: Link (NEW - shadcn compatibility) */
+  --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;
+
+  /* Button Common */
+  --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;
+
+  /* Input Component Colors */
+  --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;
+
+  /* Select Component Colors */
+  --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;
+
+  /* Select Content/Dropdown */
+  --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;
+
+  /* Select Option */
+  --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);
+
+  /* Select Group */
+  --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);
 }
 
-/* Group-based selectors for child components to respond to sidebar state */
-:host([data-collapsible="icon"]) {
-  --group-collapsible: icon;
-}
+/**
+ * SekiUI Design Tokens - Spacing
+ * 4px base unit, rem-based scale
+ */
 
-:host([data-collapsible="offcanvas"]) {
-  --group-collapsible: offcanvas;
+:host {
+  /* Spacing Scale (4px base unit) */
+  --seki-spacing-0: 0;
+  --seki-spacing-0-5: 0.125rem;  /* 2px */
+  --seki-spacing-1: 0.25rem;     /* 4px */
+  --seki-spacing-1-5: 0.375rem;  /* 6px */
+  --seki-spacing-2: 0.5rem;      /* 8px */
+  --seki-spacing-2-5: 0.625rem;  /* 10px */
+  --seki-spacing-3: 0.75rem;     /* 12px */
+  --seki-spacing-3-5: 0.875rem;  /* 14px */
+  --seki-spacing-4: 1rem;        /* 16px */
+  --seki-spacing-5: 1.25rem;     /* 20px */
+  --seki-spacing-6: 1.5rem;      /* 24px */
+  --seki-spacing-8: 2rem;        /* 32px */
+  --seki-spacing-10: 2.5rem;     /* 40px */
+  --seki-spacing-12: 3rem;       /* 48px */
+  --seki-spacing-16: 4rem;       /* 64px */
+  --seki-spacing-20: 5rem;       /* 80px */
+  --seki-spacing-24: 6rem;       /* 96px */
+
+  /* Input Component Tokens */
+  --seki-input-height-sm: 2rem;       /* 32px */
+  --seki-input-height-md: 2.5rem;     /* 40px - default */
+  --seki-input-height-lg: 3rem;       /* 48px */
+  --seki-input-padding-x: 0.75rem;    /* 12px */
+  --seki-input-padding-y: 0.5rem;     /* 8px */
+  --seki-input-font-size: 0.875rem;   /* 14px */
+  --seki-input-ring-offset: 2px;
 }
 
-:host([data-collapsible="none"]) {
-  --group-collapsible: none;
-}
+/**
+ * SekiUI Design Tokens - Shadows
+ * Subtle elevation system
+ */
 
-: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 {
+  /* Shadow Levels */
+  --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([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;
-}
+/**
+ * SekiUI Design Tokens - Typography
+ * System font stacks, sizes, weights, line heights
+ */
 
-/* Floating variant */
-: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 {
+  /* Font Families */
+  --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --seki-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Font Sizes (rem-based) */
+  --seki-text-xs: 0.75rem;    /* 12px */
+  --seki-text-sm: 0.875rem;   /* 14px */
+  --seki-text-base: 1rem;     /* 16px */
+  --seki-text-lg: 1.125rem;   /* 18px */
+  --seki-text-xl: 1.25rem;    /* 20px */
+  --seki-text-2xl: 1.5rem;    /* 24px */
+  --seki-text-3xl: 1.875rem;  /* 30px */
+  --seki-text-4xl: 2.25rem;   /* 36px */
+
+  /* Font Weights */
+  --seki-font-normal: 400;
+  --seki-font-medium: 500;
+  --seki-font-semibold: 600;
+  --seki-font-bold: 700;
+
+  /* Line Heights */
+  --seki-leading-tight: 1.25;
+  --seki-leading-normal: 1.5;
+  --seki-leading-relaxed: 1.75;
 }
 
-/* Inset variant - integrated into layout */
-:host([data-variant="inset"]) {
-  border-right: 1px solid var(--sidebar-border);
-}
+/**
+ * SekiUI Design Tokens - Border Radius
+ * Four-level radius system
+ */
 
-/* Container for all sidebar content */
-.sidebar-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
+:host {
+  /* Border Radius Levels */
+  --seki-radius-sm: 0.25rem;   /* 4px */
+  --seki-radius-md: 0.375rem;  /* 6px */
+  --seki-radius-lg: 0.5rem;    /* 8px */
+  --seki-radius-xl: 1rem;      /* 16px */
 }
 
-/* ============================================================================
-   Header Section (Sticky Top)
-   ============================================================================ */
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
 
-.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 TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
 
-.sidebar-header:empty {
-  display: none;
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --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%);
+
+  /* Menu Button Sizing */
+  --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);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+: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%);
 }
 
-/* Hide text in header when collapsed to icon mode */
-: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;
+:host {
+  /* Inherit sidebar tokens from provider/global */
+  --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);
+
+  /* Colors from tokens */
+  --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);
+
+  /* Transitions */
+  --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;
 }
 
-/* ============================================================================
-   Content Section (Scrollable)
-   ============================================================================ */
-
-.sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--sidebar-padding);
-  gap: var(--sidebar-gap);
+.sidebar {
+  position: relative;
   display: flex;
   flex-direction: column;
-
-  /* Smooth scroll behavior */
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-
-  /* Allow horizontal ellipsis in collapsed state */
-  min-width: 0;
+  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),
+              transform var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+  overflow: hidden;
 }
 
-/* Scrollbar styling */
-.sidebar-content::-webkit-scrollbar {
-  width: 8px;
+/* Side: right */
+:host([data-side='right']) .sidebar {
+  border-right: none;
+  border-left: 1px solid var(--sidebar-border);
 }
 
-.sidebar-content::-webkit-scrollbar-track {
-  background: transparent;
-}
+/* =============================================================================
+   VARIANTS
+   ============================================================================= */
 
-.sidebar-content::-webkit-scrollbar-thumb {
-  background-color: var(--sidebar-accent);
-  border-radius: 4px;
-  opacity: 0.5;
+/* Variant: floating */
+: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));
 }
 
-.sidebar-content::-webkit-scrollbar-thumb:hover {
-  opacity: 0.7;
+/* Variant: inset */
+:host([data-variant='inset']) .sidebar {
+  border: none;
+  background-color: transparent;
 }
 
-/* ============================================================================
-   Footer Section (Sticky Bottom)
-   ============================================================================ */
+/* =============================================================================
+   COLLAPSIBLE STATES (Desktop)
+   ============================================================================= */
 
-.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);
+/* Icon mode: collapse to icon width */
+:host([data-icon-mode='true']) .sidebar {
+  width: var(--sidebar-width-icon);
 }
 
-.sidebar-footer:empty {
-  display: none;
+/* Offcanvas mode: collapse to 0 width */
+:host([data-offcanvas='true']) .sidebar {
+  width: 0;
+  border: none;
 }
 
-/* Hide text in footer when collapsed to icon mode, but keep first child (avatar) */
-:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer {
-  padding: 0.5rem;
-  justify-content: center;
-  display: flex;
-  align-items: center;
+/* Non-collapsible */
+:host([data-collapsible='none']) .sidebar {
+  width: var(--sidebar-width);
 }
 
-:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer > * {
-  transition: margin 200ms ease-linear, opacity 200ms ease-linear;
-}
+/* =============================================================================
+   MOBILE SHEET BEHAVIOR
+   ============================================================================= */
 
-:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer > :not(:first-child) {
-  margin: -0.5rem 0;
-  opacity: 0;
+/* Mobile overlay */
+.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);
 }
 
-/* ============================================================================
-   Responsive Behavior
-   ============================================================================ */
-
-/* Mobile devices (<768px default) */
-@media (max-width: 767px) {
-  :host {
-    /* Default to offcanvas on mobile */
-    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);
+@keyframes fadeIn {
+  from {
     opacity: 0;
-    pointer-events: none;
   }
-
-  :host([data-state="open"]) {
-    transform: translateX(0);
+  to {
     opacity: 1;
-    pointer-events: auto;
-  }
-
-  :host([data-collapse-mode="none"]) {
-    /* Fixed sidebar on mobile */
-    position: static;
-    width: 100%;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--sidebar-border);
   }
 }
 
-/* Tablet devices (768px - 1024px) */
-@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);
-  }
+/* Mobile: hide by default on mobile */
+: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));
 }
 
-/* Desktop devices (1024px+) */
-@media (min-width: 1024px) {
-  :host {
-    position: relative;
-    width: var(--sidebar-width);
-    height: 100%;
-    transform: none;
-    z-index: auto;
-  }
+:host([data-mobile='true'][data-side='left']) .sidebar {
+  left: 0;
+  transform: translateX(-100%);
 }
 
-/* ============================================================================
-   Accessibility Features
-   ============================================================================ */
+:host([data-mobile='true'][data-side='right']) .sidebar {
+  right: 0;
+  transform: translateX(100%);
+}
 
-/* Focus indicators */
-:host-context(:focus-visible),
-:host:focus-visible {
-  outline: 2px solid var(--sidebar-primary);
-  outline-offset: -2px;
+/* Mobile sheet open state */
+.sidebar--mobile-sheet {
+  transform: translateX(0) !important;
+  animation: slideIn var(--sidebar-transition-duration) var(--sidebar-transition-timing);
 }
 
-/* Reduce motion preference */
-@media (prefers-reduced-motion: reduce) {
-  :host {
-    transition: none;
-  }
+:host([data-side='left']) .sidebar--mobile-sheet {
+  animation-name: slideInLeft;
+}
 
-  .sidebar-content {
-    scroll-behavior: auto;
-  }
+:host([data-side='right']) .sidebar--mobile-sheet {
+  animation-name: slideInRight;
 }
 
-/* Print styles */
-@media print {
-  :host {
-    display: none;
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
   }
 }
 
-/* ============================================================================
-   High contrast mode
-   ============================================================================ */
-
-@media (prefers-contrast: more) {
-  :host {
-    border-width: 2px;
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
   }
-
-  .sidebar-header,
-  .sidebar-footer {
-    border-width: 2px;
+  to {
+    transform: translateX(0);
   }
 }
 
-/* ============================================================================
-   Container queries (future enhancement)
-   ============================================================================ */
+/* =============================================================================
+   DARK MODE
+   ============================================================================= */
 
-@supports (container-type: inline-size) {
-  :host {
-    container-type: inline-size;
-  }
+:host([data-theme='dark']) {
+  --sidebar-background: var(--seki-sidebar-background);
+  --sidebar-foreground: var(--seki-sidebar-foreground);
+  --sidebar-border: var(--seki-sidebar-border);
 }