le-kit 0.1.14 → 0.1.15

package/dist/collection/dist/components/themes/index.css

@@ -0,0 +1,415 @@
+/**
+ * Le-Kit All Themes
+ * 
+ * Contains base tokens and all available themes.
+ * For production, consider importing only the themes you need:
+ * 
+ * @import 'le-kit/themes/base.css';
+ * @import 'le-kit/themes/default.css';
+ * @import 'le-kit/themes/dark.css';
+ */
+
+@import './base.css';
+@import './default.css';
+@import './dark.css';
+@import './gradient.css';
+@import './minimal.css';
+@import './warm.css';
+
+/* ============================================
+   BASE TOKENS
+   Structural design tokens that apply to all themes
+   ============================================ */
+
+:root {
+  /* Spacing Scale */
+  --le-space-xs: 4px;
+  --le-space-sm: 8px;
+  --le-space-md: 16px;
+  --le-space-lg: 24px;
+  --le-space-xl: 32px;
+  --le-space-2xl: 48px;
+  --le-space-3xl: 64px;
+
+  /* Typography Scale */
+  --le-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --le-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  
+  --le-font-size-2xs: 0.625rem;
+  --le-font-size-xs: 0.75rem;
+  --le-font-size-sm: 0.875rem;
+  --le-font-size-md: 1rem;
+  --le-font-size-lg: 1.125rem;
+  --le-font-size-xl: 1.25rem;
+  --le-font-size-2xl: 1.5rem;
+  --le-font-size-3xl: 2rem;
+  --le-font-size-4xl: 2.5rem;
+
+  --le-font-weight-normal: 400;
+  --le-font-weight-medium: 500;
+  --le-font-weight-semibold: 600;
+  --le-font-weight-bold: 700;
+
+  --le-line-height-tight: 1.25;
+  --le-line-height-normal: 1.5;
+  --le-line-height-relaxed: 1.75;
+
+  /* Transition Tokens */
+  --le-transition-fast: 150ms ease;
+  --le-transition-normal: 250ms ease;
+  --le-transition-slow: 400ms ease;
+  --le-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Z-Index Scale */
+  --le-z-dropdown: 1000;
+  --le-z-sticky: 1020;
+  --le-z-fixed: 1030;
+  --le-z-modal-backdrop: 1040;
+  --le-z-modal: 1050;
+  --le-z-popover: 1060;
+  --le-z-tooltip: 1070;
+}
+
+/* ============================================
+   DEFAULT THEME
+   Clean, professional light theme
+   ============================================ */
+
+:root,
+[theme="default"] {
+  /* Primary Colors */
+  --le-color-primary: #3b82f6;
+  --le-color-primary-hover: #2563eb;
+  --le-color-primary-active: #1d4ed8;
+  --le-color-primary-subtle: #eff6ff;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors */
+  --le-color-secondary: #64748b;
+  --le-color-secondary-hover: #475569;
+  --le-color-secondary-active: #334155;
+  --le-color-secondary-subtle: #f1f5f9;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #22c55e;
+  --le-color-success-subtle: #f0fdf4;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #f59e0b;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #ef4444;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #06b6d4;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: #ffffff;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Text Colors */
+  --le-color-text: #1e293b;
+  --le-color-text-secondary: #64748b;
+  --le-color-text-muted: #94a3b8;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors */
+  --le-color-border: #e2e8f0;
+  --le-color-border-strong: #cbd5e1;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius */
+  --le-radius-none: 0;
+  --le-radius-sm: 4px;
+  --le-radius-md: 7px;
+  --le-radius-lg: 12px;
+  --le-radius-xl: 16px;
+  --le-radius-2xl: 24px;
+  --le-radius-full: 9999px;
+
+  /* Shadows */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --le-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+/* ============================================
+   DARK THEME
+   Modern dark mode with blue accents
+   ============================================ */
+
+[theme="dark"] {
+  /* Primary Colors */
+  --le-color-primary: #60a5fa;
+  --le-color-primary-hover: #93c5fd;
+  --le-color-primary-active: #3b82f6;
+  --le-color-primary-subtle: #1e3a5f;
+  --le-color-on-primary: #0f172a;
+
+  /* Secondary Colors */
+  --le-color-secondary: #94a3b8;
+  --le-color-secondary-hover: #cbd5e1;
+  --le-color-secondary-active: #64748b;
+  --le-color-secondary-subtle: #1e293b;
+  --le-color-on-secondary: #0f172a;
+
+  /* Semantic Colors */
+  --le-color-success: #4ade80;
+  --le-color-success-subtle: #14532d;
+  --le-color-on-success: #0f172a;
+
+  --le-color-warning: #fbbf24;
+  --le-color-warning-subtle: #422006;
+  --le-color-on-warning: #0f172a;
+
+  --le-color-error: #f87171;
+  --le-color-error-subtle: #450a0a;
+  --le-color-on-error: #0f172a;
+
+  --le-color-info: #22d3ee;
+  --le-color-info-subtle: #164e63;
+  --le-color-on-info: #0f172a;
+
+  /* Surface Colors */
+  --le-color-background: #0f172a;
+  --le-color-surface: #1e293b;
+  --le-color-surface-raised: #334155;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Text Colors */
+  --le-color-text: #f1f5f9;
+  --le-color-text-secondary: #94a3b8;
+  --le-color-text-muted: #64748b;
+  --le-color-text-inverse: #0f172a;
+
+  /* Border Colors */
+  --le-color-border: #334155;
+  --le-color-border-strong: #475569;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Shadows (adjusted for dark mode) */
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --le-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.4);
+}
+
+/* ============================================
+   GRADIENT THEME
+   Vibrant gradients with purple/pink accents
+   ============================================ */
+
+[theme="gradient"] {
+  /* Primary Colors - Purple gradient feel */
+  --le-color-primary: #8b5cf6;
+  --le-color-primary-hover: #a78bfa;
+  --le-color-primary-active: #7c3aed;
+  --le-color-primary-subtle: #f5f3ff;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Pink accent */
+  --le-color-secondary: #ec4899;
+  --le-color-secondary-hover: #f472b6;
+  --le-color-secondary-active: #db2777;
+  --le-color-secondary-subtle: #fdf2f8;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #10b981;
+  --le-color-success-subtle: #ecfdf5;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #f59e0b;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #f43f5e;
+  --le-color-error-subtle: #fff1f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #06b6d4;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #fff7ed 100%);
+  --le-color-surface: rgba(255, 255, 255, 0.9);
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(139, 92, 246, 0.3);
+
+  /* Text Colors */
+  --le-color-text: #1f2937;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-muted: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors */
+  --le-color-border: rgba(139, 92, 246, 0.2);
+  --le-color-border-strong: rgba(139, 92, 246, 0.4);
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - More rounded for playful feel */
+  --le-radius-sm: 6px;
+  --le-radius-md: 12px;
+  --le-radius-lg: 16px;
+  --le-radius-xl: 20px;
+  --le-radius-2xl: 28px;
+
+  /* Shadows - Colored shadows */
+  --le-shadow-sm: 0 1px 3px 0 rgba(139, 92, 246, 0.1);
+  --le-shadow-md: 0 4px 6px -1px rgba(139, 92, 246, 0.15), 0 2px 4px -2px rgba(236, 72, 153, 0.1);
+  --le-shadow-lg: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.15);
+  --le-shadow-xl: 0 20px 25px -5px rgba(139, 92, 246, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.2);
+  --le-shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.4);
+}
+
+/* ============================================
+   MINIMAL THEME
+   Clean, minimal design with subtle grays
+   ============================================ */
+
+[theme="minimal"] {
+  /* Primary Colors - Subtle dark gray */
+  --le-color-primary: #374151;
+  --le-color-primary-hover: #1f2937;
+  --le-color-primary-active: #111827;
+  --le-color-primary-subtle: #f3f4f6;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Light gray */
+  --le-color-secondary: #9ca3af;
+  --le-color-secondary-hover: #6b7280;
+  --le-color-secondary-active: #4b5563;
+  --le-color-secondary-subtle: #f9fafb;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors - Muted versions */
+  --le-color-success: #059669;
+  --le-color-success-subtle: #f0fdf4;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #d97706;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #ffffff;
+
+  --le-color-error: #dc2626;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #0891b2;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: #fafafa;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  /* Text Colors */
+  --le-color-text: #111827;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-muted: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors - Very subtle */
+  --le-color-border: #e5e7eb;
+  --le-color-border-strong: #d1d5db;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - Sharp, minimal */
+  --le-radius-none: 0;
+  --le-radius-sm: 2px;
+  --le-radius-md: 4px;
+  --le-radius-lg: 6px;
+  --le-radius-xl: 8px;
+  --le-radius-2xl: 12px;
+  --le-radius-full: 9999px;
+
+  /* Shadows - Minimal, subtle */
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  --le-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --le-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
+  --le-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
+  --le-shadow-focus: 0 0 0 2px rgba(55, 65, 81, 0.2);
+}
+
+/* ============================================
+   WARM THEME
+   Warm earthy tones with orange/amber accents
+   ============================================ */
+
+[theme="warm"] {
+  /* Primary Colors - Warm orange */
+  --le-color-primary: #ea580c;
+  --le-color-primary-hover: #f97316;
+  --le-color-primary-active: #c2410c;
+  --le-color-primary-subtle: #fff7ed;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Warm brown */
+  --le-color-secondary: #78716c;
+  --le-color-secondary-hover: #57534e;
+  --le-color-secondary-active: #44403c;
+  --le-color-secondary-subtle: #fafaf9;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #65a30d;
+  --le-color-success-subtle: #f7fee7;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #d97706;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #dc2626;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #0891b2;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors - Warm tinted */
+  --le-color-background: #fffbf5;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(120, 53, 15, 0.4);
+
+  /* Text Colors - Warm grays */
+  --le-color-text: #292524;
+  --le-color-text-secondary: #78716c;
+  --le-color-text-muted: #a8a29e;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors - Warm tinted */
+  --le-color-border: #e7e5e4;
+  --le-color-border-strong: #d6d3d1;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - Soft, friendly */
+  --le-radius-sm: 4px;
+  --le-radius-md: 8px;
+  --le-radius-lg: 12px;
+  --le-radius-xl: 16px;
+  --le-radius-2xl: 24px;
+
+  /* Shadows - Warm tinted */
+  --le-shadow-sm: 0 1px 2px 0 rgba(120, 53, 15, 0.05);
+  --le-shadow-md: 0 4px 6px -1px rgba(120, 53, 15, 0.1), 0 2px 4px -2px rgba(120, 53, 15, 0.08);
+  --le-shadow-lg: 0 10px 15px -3px rgba(120, 53, 15, 0.12), 0 4px 6px -4px rgba(120, 53, 15, 0.1);
+  --le-shadow-xl: 0 20px 25px -5px rgba(120, 53, 15, 0.15), 0 8px 10px -6px rgba(120, 53, 15, 0.12);
+  --le-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.3);
+}

package/dist/collection/dist/components/themes/minimal.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Minimal Theme
+ * 
+ * Clean, subtle design with sharp edges and minimal shadows.
+ * 
+ * Usage: set theme="minimal" on any element, or import as your default.
+ */
+
+[theme="minimal"] {
+  /* Primary brand color - dark gray */
+  --le-color-primary: #111827;
+  --le-color-primary-light: #374151;
+  --le-color-primary-dark: #030712;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #6b7280;
+  --le-color-secondary-light: #9ca3af;
+  --le-color-secondary-dark: #4b5563;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors - muted */
+  --le-color-success: #059669;
+  --le-color-success-light: #10b981;
+  --le-color-success-dark: #047857;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #d97706;
+  --le-color-warning-light: #f59e0b;
+  --le-color-warning-dark: #b45309;
+  --le-color-warning-contrast: #ffffff;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0284c7;
+  --le-color-info-light: #0ea5e9;
+  --le-color-info-dark: #0369a1;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #f9fafb;
+  --le-color-gray-100: #f3f4f6;
+  --le-color-gray-200: #e5e7eb;
+  --le-color-gray-300: #d1d5db;
+  --le-color-gray-400: #9ca3af;
+  --le-color-gray-500: #6b7280;
+  --le-color-gray-600: #4b5563;
+  --le-color-gray-700: #374151;
+  --le-color-gray-800: #1f2937;
+  --le-color-gray-900: #111827;
+  
+  /* Background colors */
+  --le-color-background: #ffffff;
+  --le-color-background-secondary: #fafafa;
+  --le-color-background-tertiary: #f5f5f5;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #f3f4f6;
+  
+  /* Text colors */
+  --le-color-text-primary: #111827;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-disabled: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #e5e7eb;
+  --le-color-border-hover: #a7aaae;
+  --le-color-border-light: #f3f4f6;
+  --le-color-border-dark: #d1d5db;
+
+  /** Input borders */
+  --le-border-width: 1px;
+  --le-color-border-input: #c8cfdd;
+
+  /* Focus ring */
+  --le-color-focus: rgba(17, 24, 39, 0.15);
+  
+  /* Border radius - sharp/minimal */
+  --le-radius-none: 0;
+  --le-radius-sm: 0;
+  --le-radius-md: 2px;
+  --le-radius-lg: 4px;
+  --le-radius-xl: 6px;
+  --le-radius-2xl: 8px;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - very subtle */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
+  --le-shadow-none: none;
+  --le-shadow-sm: none;
+  --le-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --le-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --le-shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --le-shadow-2xl: 0 4px 8px rgba(0, 0, 0, 0.1);
+}

package/dist/collection/dist/components/themes/warm.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Warm Theme
+ * 
+ * Cozy, warm colors with orange/amber tones.
+ * 
+ * Usage: set theme="warm" on any element, or import as your default.
+ */
+
+[theme="warm"] {
+  /* Primary brand color - orange */
+  --le-color-primary: #ea580c;
+  --le-color-primary-light: #fb923c;
+  --le-color-primary-dark: #c2410c;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color - amber */
+  --le-color-secondary: #b45309;
+  --le-color-secondary-light: #d97706;
+  --le-color-secondary-dark: #92400e;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #16a34a;
+  --le-color-success-light: #22c55e;
+  --le-color-success-dark: #15803d;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #ca8a04;
+  --le-color-warning-light: #eab308;
+  --le-color-warning-dark: #a16207;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0891b2;
+  --le-color-info-light: #06b6d4;
+  --le-color-info-dark: #0e7490;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors - warm tinted */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #fffbeb;
+  --le-color-gray-100: #fef3c7;
+  --le-color-gray-200: #fde68a;
+  --le-color-gray-300: #fcd34d;
+  --le-color-gray-400: #fbbf24;
+  --le-color-gray-500: #f59e0b;
+  --le-color-gray-600: #d97706;
+  --le-color-gray-700: #b45309;
+  --le-color-gray-800: #92400e;
+  --le-color-gray-900: #78350f;
+  
+  /* Background colors */
+  --le-color-background: #fffbeb;
+  --le-color-background-secondary: #fef3c7;
+  --le-color-background-tertiary: #fde68a;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #ffebba;
+  
+  /* Text colors */
+  --le-color-text-primary: #78350f;
+  --le-color-text-secondary: #92400e;
+  --le-color-text-disabled: #d97706;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #fcd34d;
+  --le-color-border-hover: #ee8349;
+  --le-color-border-light: #fde68a;
+  --le-color-border-dark: #fbbf24;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #e7d4c4;
+
+  /* Focus ring */
+  --le-color-focus: rgba(234, 88, 12, 0.15);
+  
+  /* Border radius - slightly rounded */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;
+  --le-radius-md: 0.375rem;
+  --le-radius-lg: 0.625rem;
+  --le-radius-xl: 0.875rem;
+  --le-radius-2xl: 1.125rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - warm tinted */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(234, 88, 12, 0.05);
+  --le-shadow-md: 0 4px 6px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.06);
+  --le-shadow-lg: 0 10px 15px rgba(234, 88, 12, 0.15), 0 4px 6px rgba(234, 88, 12, 0.08);
+  --le-shadow-xl: 0 20px 25px rgba(234, 88, 12, 0.15), 0 10px 10px rgba(234, 88, 12, 0.1);
+  --le-shadow-2xl: 0 25px 50px rgba(234, 88, 12, 0.2), 0 12px 24px rgba(234, 88, 12, 0.12);
+}

package/dist/collection/global/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/global/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc;IACrB,OAAO,CAAC,CAAC,EAAe,EAAa,EAAE;QACrC,wCAAwC;QACxC,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,OAAoB,CAAC;QAC9B,CAAC;QAED,qDAAqD;QACrD,IAAI,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC;QAC9B,OAAO,MAAM,EAAE,CAAC;YACd,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAI,UAAU,EAAE,CAAC;gBACf,OAAO,UAAuB,CAAC;YACjC,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QAED,iCAAiC;QACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,QAAqB,CAAC;QAC/B,CAAC;QAED,kBAAkB;QAClB,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,2CAA2C;AAC3C,eAAe,cAAc,CAAC;AAE9B;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EAAe;IACrC,2BAA2B;IAC3B,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,OAAoB,CAAC;IAC9B,CAAC;IAED,8CAA8C;IAC9C,IAAI,OAAO,GAAgB,EAAE,CAAC;IAC9B,OAAO,OAAO,EAAE,CAAC;QACf,2BAA2B;QAC3B,IAAI,OAAO,YAAY,OAAO,IAAI,OAAO,CAAC,aAAa,EAAE,CAAC;YACxD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;YAChC,MAAM,IAAI,GAAI,OAAuB,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC;YAC7D,IAAI,IAAI,EAAE,CAAC;gBACT,OAAO,IAAiB,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,sDAAsD;YACtD,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;YACnC,IAAI,IAAI,YAAY,UAAU,EAAE,CAAC;gBAC/B,gDAAgD;gBAChD,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;gBACpB,MAAM,IAAI,GAAI,OAAuB,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC;gBAC7D,IAAI,IAAI,EAAE,CAAC;oBACT,OAAO,IAAiB,CAAC;gBAC3B,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,kCAAkC;gBAClC,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,QAAqB,CAAC;IAC/B,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAe;IACtC,4BAA4B;IAC5B,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,QAAsB,CAAC;IAChC,CAAC;IAED,kBAAkB;IAClB,IAAI,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC;IAC9B,OAAO,MAAM,EAAE,CAAC;QACd,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,WAAyB,CAAC;QACnC,CAAC;QACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;IAChC,CAAC;IAED,aAAa;IACb,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACjE,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,SAAuB,CAAC;IACjC,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,IAAe;IAC3C,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACtD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAAiB;IAC9C,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACxD,CAAC;AAED;;GAEG;AACH,IAAI,WAAW,GAAG;IAChB;;;;;;;;;OASG;IACH,YAAY,EAAE,uBAAuB;CACtC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,MAAmC;IAChE,WAAW,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;AAC9C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n * \n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Global configuration for le-kit\n */\nlet leKitConfig = {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   * \n   * Default: '/custom-elements.json' (served from app root)\n   * \n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestFile: '/custom-elements.json',\n};\n\n/**\n * Configure le-kit global settings.\n * \n * @example\n * ```ts\n * import { configureLeKit } from 'le-kit';\n * \n * configureLeKit({\n *   manifestFile: 'custom-elements.json'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<typeof leKitConfig>): void {\n  leKitConfig = { ...leKitConfig, ...config };\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): typeof leKitConfig {\n  return leKitConfig;\n}\n"]}

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGhH,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * @fileoverview Entry point for le-kit component library\n *\n * This file exports utilities, types, and helper functions.\n * Components are auto-registered and available as custom elements.\n *\n * @see README.md for usage instructions\n */\n\n// Utility exports\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\n\n// Global mode and theme helpers\nexport { getMode, setGlobalMode, getTheme, setGlobalTheme, configureLeKit, getLeKitConfig } from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\n\n// Popup/dialog programmatic API\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './components.d.ts';\n"]}

package/dist/collection/types/blocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.js","sourceRoot":"","sources":["../../src/types/blocks.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAmIH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAsB;IACtD;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,GAAG;QACR,WAAW,EAAE,mBAAmB;QAChC,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,sBAAsB;KACpC;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,uBAAuB;QACpC,QAAQ,EAAE,IAAI;KACf;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,wBAAwB;QACrC,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,uBAAuB;QACpC,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,gBAAgB;QAC7B,QAAQ,EAAE,IAAI;KACf;IACD;QACE,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,cAAc;QAC3B,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,YAAY;QACjB,WAAW,EAAE,OAAO;QACpB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,aAAa;QAC1B,QAAQ,EAAE,IAAI;KACf;IACD;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,MAAM;QACX,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,YAAY;QACzB,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,IAAI;QACT,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAWF;;GAEG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,SAAS,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAC7E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,IAAe,EAAE,UAAkB,EAAE;IAC/D,OAAO;QACL,EAAE,EAAE,eAAe,EAAE;QACrB,IAAI;QACJ,OAAO;KACR,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Block types for the rich text editor.\n *\n * Used by: le-rich-text-editor, le-editor-block, le-block-menu\n */\n\n/**\n * Available block types for the editor.\n * Start with essential types, expand in future versions.\n */\nexport type BlockType = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'bullet-list' | 'numbered-list' | 'quote' | 'code' | 'divider';\n\n/**\n * A single block in the editor.\n *\n * @example Paragraph block\n * ```typescript\n * const block: LeBlock = {\n *   id: 'block-1',\n *   type: 'paragraph',\n *   content: 'Hello <strong>world</strong>!'\n * };\n * ```\n *\n * @example Code block with language\n * ```typescript\n * const block: LeBlock = {\n *   id: 'block-2',\n *   type: 'code',\n *   content: 'const x = 1;',\n *   attributes: { language: 'typescript' }\n * };\n * ```\n */\nexport interface LeBlock {\n  /**\n   * Unique identifier for the block.\n   */\n  id: string;\n\n  /**\n   * The type of block (paragraph, heading, list, etc.)\n   */\n  type: BlockType;\n\n  /**\n   * HTML content of the block.\n   * For most blocks, this is the inner HTML.\n   * For divider, this is empty.\n   */\n  content: string;\n\n  /**\n   * Block-specific attributes.\n   */\n  attributes?: LeBlockAttributes;\n}\n\n/**\n * Block-specific attributes\n */\nexport interface LeBlockAttributes {\n  /**\n   * Programming language for code blocks.\n   */\n  language?: string;\n\n  /**\n   * Placeholder text shown when block is empty.\n   */\n  placeholder?: string;\n\n  /**\n   * Custom CSS class for the block.\n   */\n  className?: string;\n\n  /**\n   * Additional custom attributes.\n   */\n  [key: string]: unknown;\n}\n\n/**\n * Configuration for a block type.\n * Used by the block registry to render and manage blocks.\n */\nexport interface BlockTypeConfig {\n  /**\n   * Block type identifier.\n   */\n  type: BlockType;\n\n  /**\n   * Display label for the block type (shown in block menu).\n   */\n  label: string;\n\n  /**\n   * Icon for the block type (emoji or icon name).\n   */\n  icon?: string;\n\n  /**\n   * HTML tag to render for this block type.\n   */\n  tag: string;\n\n  /**\n   * CSS class applied to the block element.\n   */\n  className?: string;\n\n  /**\n   * Placeholder text shown when block is empty.\n   */\n  placeholder?: string;\n\n  /**\n   * Whether the block content is editable.\n   * Set to false for blocks like divider.\n   */\n  editable?: boolean;\n\n  /**\n   * Description shown in block menu.\n   */\n  description?: string;\n\n  /**\n   * Keyboard shortcut hint (e.g., \"# \" for heading).\n   */\n  shortcut?: string;\n}\n\n/**\n * Default block type configurations.\n */\nexport const DEFAULT_BLOCK_CONFIGS: BlockTypeConfig[] = [\n  {\n    type: 'paragraph',\n    label: 'Text',\n    icon: '📝',\n    tag: 'p',\n    placeholder: 'Type something...',\n    editable: true,\n    description: 'Plain text paragraph',\n  },\n  {\n    type: 'heading1',\n    label: 'Heading 1',\n    icon: 'H1',\n    tag: 'h1',\n    placeholder: 'Heading 1',\n    editable: true,\n    description: 'Large section heading',\n    shortcut: '# ',\n  },\n  {\n    type: 'heading2',\n    label: 'Heading 2',\n    icon: 'H2',\n    tag: 'h2',\n    placeholder: 'Heading 2',\n    editable: true,\n    description: 'Medium section heading',\n    shortcut: '## ',\n  },\n  {\n    type: 'heading3',\n    label: 'Heading 3',\n    icon: 'H3',\n    tag: 'h3',\n    placeholder: 'Heading 3',\n    editable: true,\n    description: 'Small section heading',\n    shortcut: '### ',\n  },\n  {\n    type: 'bullet-list',\n    label: 'Bulleted List',\n    icon: '•',\n    tag: 'li',\n    placeholder: 'List item',\n    editable: true,\n    description: 'Unordered list',\n    shortcut: '- ',\n  },\n  {\n    type: 'numbered-list',\n    label: 'Numbered List',\n    icon: '1.',\n    tag: 'li',\n    placeholder: 'List item',\n    editable: true,\n    description: 'Ordered list',\n    shortcut: '1. ',\n  },\n  {\n    type: 'quote',\n    label: 'Quote',\n    icon: '❝',\n    tag: 'blockquote',\n    placeholder: 'Quote',\n    editable: true,\n    description: 'Block quote',\n    shortcut: '> ',\n  },\n  {\n    type: 'code',\n    label: 'Code',\n    icon: '</>',\n    tag: 'code',\n    placeholder: 'Code',\n    editable: true,\n    description: 'Code block',\n    shortcut: '``` ',\n  },\n  {\n    type: 'divider',\n    label: 'Divider',\n    icon: '—',\n    tag: 'hr',\n    editable: false,\n    description: 'Horizontal line',\n    shortcut: '---',\n  },\n];\n\n/**\n * Event detail for block changes\n */\nexport interface LeBlockChangeDetail {\n  blocks: LeBlock[];\n  changedBlock?: LeBlock;\n  action: 'add' | 'remove' | 'update' | 'move';\n}\n\n/**\n * Generate a unique block ID\n */\nexport function generateBlockId(): string {\n  return `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Create a new block with default values\n */\nexport function createBlock(type: BlockType, content: string = ''): LeBlock {\n  return {\n    id: generateBlockId(),\n    type,\n    content,\n  };\n}\n"]}

package/dist/collection/types/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../src/types/options.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Universal option interface used across Le-Kit components.\n *\n * Used by: le-select, le-combobox, le-multiselect, le-tabs,\n * le-block-menu, le-emoji-picker, and any menu/list components.\n *\n * @example Basic option\n * ```typescript\n * const option: LeOption = {\n *   label: 'Option 1',\n *   value: 'opt1'\n * };\n * ```\n *\n * @example With icons and description\n * ```typescript\n * const option: LeOption = {\n *   label: 'Settings',\n *   value: 'settings',\n *   iconStart: '⚙️',\n *   description: 'Configure application settings'\n * };\n * ```\n *\n * @example Grouped options\n * ```typescript\n * const options: LeOption[] = [\n *   { label: 'Apple', value: 'apple', group: 'Fruits' },\n *   { label: 'Banana', value: 'banana', group: 'Fruits' },\n *   { label: 'Carrot', value: 'carrot', group: 'Vegetables' },\n * ];\n * ```\n *\n * @example Nested options (for submenus)\n * ```typescript\n * const option: LeOption = {\n *   label: 'More actions',\n *   iconEnd: '▶',\n *   children: [\n *     { label: 'Duplicate', value: 'duplicate' },\n *     { label: 'Archive', value: 'archive' },\n *   ]\n * };\n * ```\n */\nexport interface LeOption {\n  /**\n   * Unique identifier for the option.\n   * Auto-generated if not provided.\n   */\n  id?: string;\n\n  /**\n   * Display text for the option (required).\n   */\n  label: string;\n\n  /**\n   * Selection value. Defaults to label if not provided.\n   */\n  value?: string | number;\n\n  /**\n   * Main icon, used in the tab bar or as a start icon in menus.\n   * Can be a URL, icon name, or emoji character.\n   */\n  icon?: string;\n\n  /**\n   * Whether the option is disabled and cannot be selected.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the option is currently selected.\n   * Used for multiselect and menu components.\n   */\n  selected?: boolean;\n\n  /**\n   * Whether the option is checked.\n   * Used for checkbox/radio menu items.\n   */\n  checked?: boolean;\n\n  /**\n   * Icon displayed at the start (left) of the option.\n   * Can be a URL, icon name, or emoji character.\n   */\n  iconStart?: string;\n\n  /**\n   * Icon displayed at the end (right) of the option.\n   * Can be a URL, icon name, or emoji character.\n   */\n  iconEnd?: string;\n\n  /**\n   * Secondary description text displayed below the label.\n   */\n  description?: string;\n\n  /**\n   * Nested child options for hierarchical menus or submenus.\n   */\n  children?: LeOption[];\n\n  /**\n   * Group label for categorizing options in flat lists.\n   * Options with the same group value are visually grouped together.\n   */\n  group?: string;\n\n  /**\n   * Add a visual separator line before or after this option.\n   */\n  separator?: 'before' | 'after';\n\n  /**\n   * URL to navigate to when the option is selected.\n   */\n  href?: string;\n\n  /**\n   * Custom data passthrough for application-specific needs.\n   * This data is included in selection events.\n   */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Helper type for option value\n */\nexport type LeOptionValue = string | number;\n\n/**\n * Event detail for option selection events\n */\nexport interface LeOptionSelectDetail {\n  value: LeOptionValue;\n  option: LeOption;\n}\n\n/**\n * Event detail for multi-option selection events\n */\nexport interface LeMultiOptionSelectDetail {\n  values: LeOptionValue[];\n  options: LeOption[];\n}\n"]}