le-kit 0.5.2 → 0.5.4

package/dist/themes/gradient.css

@@ -1,104 +0,0 @@
-/**
- * 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);
-  --le-color-backdrop: rgba(139, 92, 246, 0.15);
-  
-  /* 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

@@ -1,76 +0,0 @@
-/**
- * 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

@@ -1,104 +0,0 @@
-/**
- * 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;
-  --le-color-backdrop: rgba(17, 24, 39, 0.15);
-  
-  /* 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/themes/warm.css

@@ -1,104 +0,0 @@
-/**
- * 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;
-  --le-color-backdrop: rgba(234, 88, 12, 0.15);
-  
-  /* 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/types/components/le-bar/le-bar.d.ts

@@ -1,131 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export interface LeBarOverflowChangeDetail {
-    /** IDs of items that are currently overflowing (in the "more" popover) */
-    overflowingIds: string[];
-    /** Whether hamburger mode is active */
-    hamburgerActive: boolean;
-}
-/**
- * A flexible bar component that handles overflow gracefully.
- *
- * Items are slotted children. The bar measures which items fit on the first
- * row and handles overflow according to the `overflow` prop.
- *
- * @slot - Bar items (children will be measured for overflow)
- * @slot more - Custom "more" button content
- * @slot hamburger - Custom hamburger button content
- * @slot start-arrow - Custom left scroll arrow
- * @slot end-arrow - Custom right scroll arrow
- * @slot all-menu - Custom "show all" menu button
- *
- * @csspart container - The main bar container
- * @csspart item - Individual items in the bar
- * @csspart more-button - The "more" overflow button
- * @csspart hamburger-button - The hamburger menu button
- * @csspart arrow-start - The start (left) scroll arrow
- * @csspart arrow-end - The end (right) scroll arrow
- * @csspart all-menu-button - The "show all" menu button
- * @csspart popover-content - The popover content wrapper
- *
- * @cmsEditable true
- * @cmsCategory Layout
- */
-export declare class LeBar {
-    el: HTMLElement;
-    /**
-     * Overflow behavior when items don't fit on one row.
-     * - `more`: Overflow items appear in a "more" dropdown
-     * - `scroll`: Items scroll horizontally with optional arrows
-     * - `hamburger`: All items go into a hamburger menu if any overflow
-     * - `wrap`: Items wrap to additional rows
-     */
-    overflow: 'more' | 'scroll' | 'hamburger' | 'wrap';
-    /**
-     * Alignment of items within the bar (maps to justify-content).
-     */
-    alignItems: 'start' | 'end' | 'center' | 'stretch';
-    /**
-     * Show scroll arrows when overflow is "scroll".
-     */
-    arrows: boolean;
-    /**
-     * Disable the internal overflow popover.
-     * When true, the bar still detects overflow and hides items,
-     * but doesn't render its own popover. Use this when providing
-     * custom overflow handling via the leBarOverflowChange event.
-     */
-    disablePopover: boolean;
-    /**
-     * Minimum number of visible items required when using "more" overflow mode.
-     * If fewer items would be visible, the bar falls back to hamburger mode.
-     * Only applies when overflow is "more".
-     */
-    minVisibleItems: number;
-    /**
-     * Show an "all items" menu button.
-     * - `false`: Don't show
-     * - `true` or `'end'`: Show at end
-     * - `'start'`: Show at start
-     */
-    showAllMenu: boolean | 'start' | 'end';
-    /**
-     * Emitted when overflow state changes.
-     */
-    leBarOverflowChange: EventEmitter<LeBarOverflowChangeDetail>;
-    /** Whether the hamburger/more popover is open */
-    private popoverOpen;
-    /** Whether hamburger mode is active (for hamburger overflow) */
-    private hamburgerActive;
-    /** IDs of items that are overflowing */
-    private overflowingIds;
-    /** Whether we can scroll left */
-    private canScrollStart;
-    /** Whether we can scroll right */
-    private canScrollEnd;
-    /** Whether the all-menu popover is open */
-    private allMenuOpen;
-    /** Current height of the items container (for overflow handling) */
-    private containerHeight;
-    private itemsContainerEl?;
-    private moreButtonEl?;
-    private resizeObserver?;
-    private mutationObserver?;
-    private instanceId;
-    private itemMap;
-    private pendingRecalc;
-    handleOverflowChange(): void;
-    handleSlotChange(): void;
-    connectedCallback(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
-    disconnectedCallback(): void;
-    /**
-     * Force recalculation of overflow state.
-     */
-    recalculate(): Promise<void>;
-    private setupObservers;
-    private observeContainer;
-    private scheduleOverflowRecalc;
-    private resetOverflowState;
-    private getSlottedItems;
-    private getItemId;
-    private computeOverflow;
-    private emitOverflowChange;
-    private updateScrollState;
-    private handleScroll;
-    private scrollToStart;
-    private scrollToEnd;
-    private togglePopover;
-    private closePopover;
-    private toggleAllMenu;
-    private closeAllMenu;
-    private handleItemClick;
-    private renderMoreButton;
-    private renderHamburgerButton;
-    private renderScrollArrows;
-    private renderAllMenuButton;
-    private renderPopoverContent;
-    private renderOverflowPopover;
-    private renderAllMenuPopover;
-    render(): any;
-}

package/dist/types/components/le-box/le-box.d.ts

@@ -1,111 +0,0 @@
-/**
- * A flexible box component for use as a flex item within le-stack.
- *
- * `le-box` wraps content and provides flex item properties like grow, shrink,
- * basis, and self-alignment. It can also control its internal content alignment.
- *
- * @slot - Default slot for box content
- *
- * @cssprop --le-box-bg - Background color
- * @cssprop --le-box-padding - Padding inside the box
- * @cssprop --le-box-border-radius - Border radius
- *
- * @csspart box - The main box container
- * @csspart content - The inner content wrapper
- *
- * @cmsEditable true
- * @cmsCategory Layout
- */
-export declare class LeBox {
-    el: HTMLElement;
-    /**
-     * Flex grow factor - how much the item should grow relative to siblings
-     * @min 0
-     */
-    grow: number;
-    /**
-     * Flex shrink factor - how much the item should shrink relative to siblings
-     * @min 0
-     */
-    shrink: number;
-    /**
-     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
-     */
-    basis: string;
-    /**
-     * Width of the box (CSS value like '100px', '50%', 'auto')
-     */
-    width?: string;
-    /**
-     * Height of the box (CSS value)
-     */
-    height?: string;
-    /**
-     * Minimum width constraint
-     */
-    minWidth?: string;
-    /**
-     * Maximum width constraint
-     */
-    maxWidth?: string;
-    /**
-     * Minimum height constraint
-     */
-    minHeight?: string;
-    /**
-     * Maximum height constraint
-     */
-    maxHeight?: string;
-    /**
-     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
-     */
-    background?: string;
-    /**
-     * Border radius (e.g., '8px', 'var(--le-radius-md)')
-     */
-    borderRadius?: string;
-    /**
-     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
-     */
-    border?: string;
-    /**
-     * Self-alignment override for this item on the cross axis
-     * @allowedValues auto | start | center | end | stretch | baseline
-     */
-    alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    /**
-     * Internal horizontal alignment of content
-     * @allowedValues start | center | end | stretch
-     */
-    alignContent: 'start' | 'center' | 'end' | 'stretch';
-    /**
-     * Internal vertical alignment of content
-     * @allowedValues start | center | end | stretch
-     */
-    justifyContent: 'start' | 'center' | 'end' | 'stretch';
-    /**
-     * Padding inside the box (CSS value like '8px', '1rem')
-     */
-    padding?: string;
-    /**
-     * Order in the flex container (lower values come first)
-     */
-    order?: number;
-    /**
-     * Whether to display box content as flex (for internal alignment)
-     */
-    displayFlex: boolean;
-    /**
-     * Direction of internal flex layout when displayFlex is true
-     * @allowedValues horizontal | vertical
-     */
-    innerDirection: 'horizontal' | 'vertical';
-    /**
-     * Gap between internal flex items when displayFlex is true
-     */
-    innerGap?: string;
-    private getAlignSelf;
-    private getContentAlign;
-    private getContentJustify;
-    render(): any;
-}