le-kit 0.1.14 → 0.1.16

package/dist/le-kit/p-txKmCJHv.js

@@ -0,0 +1,2 @@
+import{a as t}from"./p-hmBwv43R.js";function e(t="le"){return`${t}-${Math.random().toString(36).substring(2,9)}`}function r(t){if(!t)return[];return t.split(",").map((t=>t.trim())).filter(Boolean)}function o(t,e=""){const r=e?`[slot="${e}"]`:":not([slot])";return t.querySelector(r)!==null}function i(e,r){r(t(e));const o=new MutationObserver((()=>{r(t(e))}));o.observe(e,{attributes:true,attributeFilter:["mode"]});o.observe(document.documentElement,{attributes:true,attributeFilter:["mode"]});let i=e;while(i){if(i instanceof Element&&i.parentElement){i=i.parentElement;o.observe(i,{attributes:true,attributeFilter:["mode"]});if(i.hasAttribute("mode")){break}}else{const t=i.getRootNode();if(t instanceof ShadowRoot){i=t.host;o.observe(i,{attributes:true,attributeFilter:["mode"]});if(i.hasAttribute("mode")){break}}else{break}}}return()=>o.disconnect()}function n(...t){const e=[];t.forEach((t=>{if(!t)return;if(typeof t==="string"){e.push(t)}else if(Array.isArray(t)){e.push(n(...t))}else if(typeof t==="object"){Object.entries(t).forEach((([t,r])=>{if(r){e.push(t)}}))}}));return e.join(" ")}export{n as c,e as g,i as o,r as p,o as s};
+//# sourceMappingURL=p-txKmCJHv.js.map

package/dist/le-kit/p-txKmCJHv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-txKmCJHv.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":[],"mappings":"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"}

package/dist/themes/base.css

@@ -0,0 +1,89 @@
+/**
+ * Le-Kit Base Design Tokens
+ * 
+ * Structural tokens that rarely change between themes:
+ * - Spacing scale
+ * - Typography (font families, sizes, weights, line heights)
+ * - Transitions
+ * - Z-index layers
+ * 
+ * Import this file along with a theme file (default.css, dark.css, etc.)
+ */
+
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* ============================================
+   * SPACING SCALE
+   * ============================================ */
+  --le-spacing-0: 0;
+  --le-spacing-1: 0.25rem;    /* 4px */
+  --le-spacing-2: 0.5rem;     /* 8px */
+  --le-spacing-3: 0.75rem;    /* 12px */
+  --le-spacing-4: 1rem;       /* 16px */
+  --le-spacing-5: 1.25rem;    /* 20px */
+  --le-spacing-6: 1.5rem;     /* 24px */
+  --le-spacing-8: 2rem;       /* 32px */
+  --le-spacing-10: 2.5rem;    /* 40px */
+  --le-spacing-12: 3rem;      /* 48px */
+  --le-spacing-16: 4rem;      /* 64px */
+
+  /* ============================================
+   * TYPOGRAPHY
+   * ============================================ */
+  --le-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --le-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  
+  /* Font sizes */
+  --le-font-size-xs: 0.75rem;     /* 12px */
+  --le-font-size-sm: 0.875rem;    /* 14px */
+  --le-font-size-md: 1rem;        /* 16px */
+  --le-font-size-lg: 1.125rem;    /* 18px */
+  --le-font-size-xl: 1.25rem;     /* 20px */
+  --le-font-size-2xl: 1.5rem;     /* 24px */
+  --le-font-size-3xl: 1.875rem;   /* 30px */
+  --le-font-size-4xl: 2.25rem;    /* 36px */
+  
+  /* Font weights */
+  --le-font-weight-normal: 400;
+  --le-font-weight-medium: 500;
+  --le-font-weight-semibold: 600;
+  --le-font-weight-bold: 700;
+  
+  /* Line heights */
+  --le-line-height-tight: 1.25;
+  --le-line-height-normal: 1.5;
+  --le-line-height-relaxed: 1.75;
+
+  /* ============================================
+   * RADIUSES
+   * ============================================ */
+  --le-radius-none: 0;
+  --le-radius-xs: 0.066rem;   /* 1px */
+  --le-radius-sm: 0.125rem;   /* 2px */
+  --le-radius-md: 0.25rem;    /* 4px */
+  --le-radius-lg: 0.5rem;     /* 8px */
+  --le-radius-xl: 0.75rem;    /* 12px */
+  --le-radius-2xl: 1rem;      /* 16px */
+  --le-radius-full: 9999px;
+
+  /* ============================================
+   * TRANSITIONS
+   * ============================================ */
+  --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 LAYERS
+   * ============================================ */
+  --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;
+}

package/dist/themes/dark.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Dark Theme
+ * 
+ * Dark mode with light text on dark backgrounds.
+ * 
+ * Usage: set theme="dark" on any element, or import as your default.
+ */
+
+[theme="dark"] {
+  /* Primary brand color - lighter for dark backgrounds */
+  --le-color-primary: #4da6ff;
+  --le-color-primary-light: #80c1ff;
+  --le-color-primary-dark: #0088ff;
+  --le-color-primary-contrast: #000000;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #868e96;
+  --le-color-secondary-light: #adb5bd;
+  --le-color-secondary-dark: #6c757d;
+  --le-color-secondary-contrast: #000000;
+  
+  /* Semantic colors - adjusted for dark mode */
+  --le-color-success: #48c764;
+  --le-color-success-light: #6dd587;
+  --le-color-success-dark: #28a745;
+  --le-color-success-contrast: #000000;
+  
+  --le-color-warning: #ffcd39;
+  --le-color-warning-light: #ffda6a;
+  --le-color-warning-dark: #ffc107;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #e4606d;
+  --le-color-danger-light: #ea868f;
+  --le-color-danger-dark: #dc3545;
+  --le-color-danger-contrast: #000000;
+  
+  --le-color-info: #3ab0c3;
+  --le-color-info-light: #6dc4d3;
+  --le-color-info-dark: #17a2b8;
+  --le-color-info-contrast: #000000;
+  
+  /* Neutral colors - inverted */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #212121;
+  --le-color-gray-100: #424242;
+  --le-color-gray-200: #616161;
+  --le-color-gray-300: #757575;
+  --le-color-gray-400: #9e9e9e;
+  --le-color-gray-500: #bdbdbd;
+  --le-color-gray-600: #e0e0e0;
+  --le-color-gray-700: #eeeeee;
+  --le-color-gray-800: #f5f5f5;
+  --le-color-gray-900: #fafafa;
+  
+  /* Background colors */
+  --le-color-background: #121212;
+  --le-color-background-secondary: #1e1e1e;
+  --le-color-background-tertiary: #2d2d2d;
+  
+  /* Surface colors */
+  --le-color-surface: #1e1e1e;
+  --le-color-surface-elevated: #2d2d2d;
+  --le-color-surface-alt: #334155;
+  
+  /* Text colors */
+  --le-color-text-primary: #ffffff;
+  --le-color-text-secondary: #b3b3b3;
+  --le-color-text-disabled: #666666;
+  --le-color-text-inverse: #121212;
+  
+  /* Border colors */
+  --le-color-border: #333333;
+  --le-color-border-hover: #205e9b;
+  --le-color-border-light: #2d2d2d;
+  --le-color-border-dark: #444444;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #515c6b;
+
+  /* Focus ring */
+  --le-color-focus: rgba(77, 166, 255, 0.15);
+  
+  /* Border radius - same as default */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;
+  --le-radius-md: 0.25rem;
+  --le-radius-lg: 0.5rem;
+  --le-radius-xl: 0.75rem;
+  --le-radius-2xl: 1rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - darker for dark mode */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 90%, transparent);
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
+  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
+}

package/dist/themes/default.css

@@ -0,0 +1,111 @@
+/**
+ * Le-Kit Default Theme
+ * 
+ * Clean, professional light theme with blue primary color.
+ * 
+ * Usage:
+ * 1. As default: import alongside base.css
+ * 2. For switching: set theme="default" on any element
+ * 
+ * To create a custom theme:
+ * 1. Copy this file
+ * 2. Change selector to :root or [theme="your-theme"]
+ * 3. Modify the variables you need
+ */
+
+:root,
+[theme="default"] {
+  /* Primary brand color */
+  --le-color-primary: #0088ff;
+  --le-color-primary-light: #4da6ff;
+  --le-color-primary-dark: #0066cc;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #6c757d;
+  --le-color-secondary-light: #868e96;
+  --le-color-secondary-dark: #545b62;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #28a745;
+  --le-color-success-light: #48c764;
+  --le-color-success-dark: #1e7e34;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #ffc107;
+  --le-color-warning-light: #ffcd39;
+  --le-color-warning-dark: #d39e00;
+  --le-color-warning-contrast: #212529;
+  
+  --le-color-danger: #dc3545;
+  --le-color-danger-light: #e4606d;
+  --le-color-danger-dark: #bd2130;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #17a2b8;
+  --le-color-info-light: #3ab0c3;
+  --le-color-info-dark: #117a8b;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #fafafa;
+  --le-color-gray-100: #f5f5f5;
+  --le-color-gray-200: #eeeeee;
+  --le-color-gray-300: #e0e0e0;
+  --le-color-gray-400: #bdbdbd;
+  --le-color-gray-500: #9e9e9e;
+  --le-color-gray-600: #757575;
+  --le-color-gray-700: #616161;
+  --le-color-gray-800: #424242;
+  --le-color-gray-900: #212121;
+  
+  /* Background colors */
+  --le-color-background: #ffffff;
+  --le-color-background-secondary: #f5f5f5;
+  --le-color-background-tertiary: #eeeeee;
+  
+  /* Surface colors (cards, modals, etc.) */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #e9ebed;
+  
+  /* Text colors */
+  --le-color-text-primary: #212121;
+  --le-color-text-secondary: #757575;
+  --le-color-text-disabled: #9e9e9e;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #e0e0e0;
+  --le-color-border-hover: #9dd1ff;
+  --le-color-border-light: #eeeeee;
+  --le-color-border-dark: #bdbdbd;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #c4d6e6;
+  
+  /* Focus ring */
+  --le-color-focus: rgba(0, 136, 255, 0.15);
+  
+  /* Border radius */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;   /* 2px */
+  --le-radius-md: 0.25rem;    /* 4px */
+  --le-radius-lg: 0.5rem;     /* 8px */
+  --le-radius-xl: 0.75rem;    /* 12px */
+  --le-radius-2xl: 1rem;      /* 16px */
+  --le-radius-full: 9999px;
+  
+  /* Shadows */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+}

package/dist/themes/gradient.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Gradient Theme
+ * 
+ * Modern gradient style with purple accents and rounded corners.
+ * 
+ * Usage: set theme="gradient" on any element, or import as your default.
+ */
+
+[theme="gradient"] {
+  /* Primary brand color - purple */
+  --le-color-primary: #8b5cf6;
+  --le-color-primary-light: #a78bfa;
+  --le-color-primary-dark: #7c3aed;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color - pink */
+  --le-color-secondary: #ec4899;
+  --le-color-secondary-light: #f472b6;
+  --le-color-secondary-dark: #db2777;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #10b981;
+  --le-color-success-light: #34d399;
+  --le-color-success-dark: #059669;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #f59e0b;
+  --le-color-warning-light: #fbbf24;
+  --le-color-warning-dark: #d97706;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #ef4444;
+  --le-color-danger-light: #f87171;
+  --le-color-danger-dark: #dc2626;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #06b6d4;
+  --le-color-info-light: #22d3ee;
+  --le-color-info-dark: #0891b2;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #faf5ff;
+  --le-color-gray-100: #f3e8ff;
+  --le-color-gray-200: #e9d5ff;
+  --le-color-gray-300: #d8b4fe;
+  --le-color-gray-400: #c084fc;
+  --le-color-gray-500: #a855f7;
+  --le-color-gray-600: #9333ea;
+  --le-color-gray-700: #7e22ce;
+  --le-color-gray-800: #6b21a8;
+  --le-color-gray-900: #581c87;
+  
+  /* Background colors */
+  --le-color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --le-color-background-secondary: rgba(255, 255, 255, 0.1);
+  --le-color-background-tertiary: rgba(255, 255, 255, 0.05);
+  
+  /* Surface colors */
+  --le-color-surface: rgba(255, 255, 255, 0.95);
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #e5def5;
+  
+  /* Text colors */
+  --le-color-text-primary: #1f2937;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-disabled: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: rgba(139, 92, 246, 0.3);
+  --le-color-border-hover: rgba(172, 140, 246, 0.4);
+  --le-color-border-light: rgba(139, 92, 246, 0.1);
+  --le-color-border-dark: rgba(139, 92, 246, 0.5);
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #eccddd;
+  
+  /* Focus ring */
+  --le-color-focus: rgba(139, 92, 246, 0.15);
+  
+  /* Border radius - more rounded */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.25rem;
+  --le-radius-md: 0.5rem;
+  --le-radius-lg: 1rem;
+  --le-radius-xl: 1.5rem;
+  --le-radius-2xl: 2rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - purple 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(139, 92, 246, 0.1);
+  --le-shadow-md: 0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);
+  --le-shadow-lg: 0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);
+  --le-shadow-xl: 0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);
+  --le-shadow-2xl: 0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2);
+}

package/dist/themes/index.css

@@ -0,0 +1,76 @@
+/**
+ * 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;
+}
+
+/* Utility class to hide elements when header is shrunk */
+.header-is-shrunk .hidden-on-shrink {
+  display: none;
+}

package/dist/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);
+}