le-kit 0.1.11 → 0.1.13

package/dist/components/index.js

@@ -0,0 +1,113 @@
+import { i as initializeMode } from './utils.js';
+export { e as configureLeKit, g as generateId, f as getLeKitConfig, a as getMode, c as getTheme, p as parseCommaSeparated, b as setGlobalMode, d as setGlobalTheme, s as slotHasContent } from './utils.js';
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+const globalScripts = initializeMode;
+
+/**
+ * Programmatic API for le-popup component
+ *
+ * These functions allow you to show popups without manually creating elements.
+ *
+ * @example
+ * // Alert
+ * await leAlert('Something happened!');
+ *
+ * // Confirm
+ * const confirmed = await leConfirm('Are you sure?');
+ * if (confirmed) { ... }
+ *
+ * // Prompt
+ * const name = await lePrompt('What is your name?');
+ * if (name !== null) { ... }
+ */
+/**
+ * Show an alert popup with a message
+ * @param message - The message to display
+ * @param options - Optional configuration
+ * @returns Promise that resolves when closed
+ *
+ * @example
+ * await leAlert('File saved successfully!');
+ * await leAlert('Error occurred', { title: 'Error', theme: 'dark' });
+ */
+async function leAlert(message, options = {}) {
+    const popup = createPopupElement(message, { ...options, type: 'alert' });
+    document.body.appendChild(popup);
+    await popup.show();
+    popup.remove();
+}
+/**
+ * Show a confirm popup with OK/Cancel buttons
+ * @param message - The message to display
+ * @param options - Optional configuration
+ * @returns Promise that resolves to true (confirmed) or false (cancelled)
+ *
+ * @example
+ * const confirmed = await leConfirm('Delete this item?');
+ * if (confirmed) {
+ *   deleteItem();
+ * }
+ */
+async function leConfirm(message, options = {}) {
+    const popup = createPopupElement(message, { ...options, type: 'confirm' });
+    document.body.appendChild(popup);
+    const result = await popup.show();
+    popup.remove();
+    return result.confirmed;
+}
+/**
+ * Show a prompt popup with an input field
+ * @param message - The message to display
+ * @param options - Optional configuration (including defaultValue, placeholder)
+ * @returns Promise that resolves to the input value or null if cancelled
+ *
+ * @example
+ * const name = await lePrompt('Enter your name:', {
+ *   title: 'Welcome',
+ *   placeholder: 'John Doe',
+ *   defaultValue: 'Guest'
+ * });
+ * if (name !== null) {
+ *   greetUser(name);
+ * }
+ */
+async function lePrompt(message, options = {}) {
+    const popup = createPopupElement(message, { ...options, type: 'prompt' });
+    document.body.appendChild(popup);
+    const result = await popup.show();
+    popup.remove();
+    return result.confirmed ? (result.value ?? '') : null;
+}
+/**
+ * Create a popup element with the given configuration
+ */
+function createPopupElement(message, options) {
+    const popup = document.createElement('le-popup');
+    popup.message = message;
+    popup.type = options.type || 'alert';
+    if (options.title)
+        popup.popupTitle = options.title;
+    if (options.modal !== undefined)
+        popup.modal = options.modal;
+    if (options.position)
+        popup.position = options.position;
+    if (options.confirmText)
+        popup.confirmText = options.confirmText;
+    if (options.cancelText)
+        popup.cancelText = options.cancelText;
+    if (options.placeholder)
+        popup.placeholder = options.placeholder;
+    if (options.defaultValue)
+        popup.defaultValue = options.defaultValue;
+    if (options.theme)
+        popup.setAttribute('theme', options.theme);
+    return popup;
+}
+
+globalScripts();
+
+export { leAlert, leConfirm, lePrompt };
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;AACO,MAAM,aAAa,GAAGA,cAAe;;ACD5C;;;;;;;;;;;;;;;;AAgBG;AAqCH;;;;;;;;;AASG;AACI,eAAe,OAAO,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACvE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACxE,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,KAAK,CAAC,IAAI,EAAE;IAClB,KAAK,CAAC,MAAM,EAAE;AAChB;AAEA;;;;;;;;;;;AAWG;AACI,eAAe,SAAS,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACzE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAC1E,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,EAAE;IACjC,KAAK,CAAC,MAAM,EAAE;IAEd,OAAO,MAAM,CAAC,SAAS;AACzB;AAEA;;;;;;;;;;;;;;;AAeG;AACI,eAAe,QAAQ,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACxE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AACzE,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,EAAE;IACjC,KAAK,CAAC,MAAM,EAAE;AAEd,IAAA,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE,IAAI,IAAI;AACvD;AAEA;;AAEG;AACH,SAAS,kBAAkB,CAAC,OAAe,EAAE,OAAqB,EAAA;IAChE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAuB;AAEtE,IAAA,KAAK,CAAC,OAAO,GAAG,OAAO;IACvB,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO;IAEpC,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,KAAK;AACnD,IAAA,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK;IAC5D,IAAI,OAAO,CAAC,QAAQ;AAAE,QAAA,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ;IACvD,IAAI,OAAO,CAAC,WAAW;AAAE,QAAA,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;IAChE,IAAI,OAAO,CAAC,UAAU;AAAE,QAAA,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;IAC7D,IAAI,OAAO,CAAC,WAAW;AAAE,QAAA,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;IAChE,IAAI,OAAO,CAAC,YAAY;AAAE,QAAA,KAAK,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY;IACnE,IAAI,OAAO,CAAC,KAAK;QAAE,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;AAE7D,IAAA,OAAO,KAAK;AACd;;;;;;","names":["appGlobalScript"],"sources":["@stencil/core/internal/app-globals","src/components/le-popup/le-popup.api.ts"],"sourcesContent":["import appGlobalScript from '/Users/andreylechev/Projects/le-kit/src/global/app.ts';\nexport const globalScripts = appGlobalScript;\nexport const globalStyles = \":root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--le-spacing-0:0;--le-spacing-1:0.25rem;--le-spacing-2:0.5rem;--le-spacing-3:0.75rem;--le-spacing-4:1rem;--le-spacing-5:1.25rem;--le-spacing-6:1.5rem;--le-spacing-8:2rem;--le-spacing-10:2.5rem;--le-spacing-12:3rem;--le-spacing-16:4rem;--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;--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:1.875rem;--le-font-size-4xl:2.25rem;--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;--le-radius-none:0;--le-radius-xs:0.066rem;--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;--le-transition-fast:100ms;--le-transition-normal:200ms;--le-transition-slow:300ms;--le-transition-easing:cubic-bezier(0.4, 0, 0.2, 1);--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}:root,[theme=\\\"default\\\"]{--le-color-primary:#0088ff;--le-color-primary-light:#4da6ff;--le-color-primary-dark:#0066cc;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6c757d;--le-color-secondary-light:#868e96;--le-color-secondary-dark:#545b62;--le-color-secondary-contrast:#ffffff;--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;--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;--le-color-background:#ffffff;--le-color-background-secondary:#f5f5f5;--le-color-background-tertiary:#eeeeee;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#212121;--le-color-text-secondary:#757575;--le-color-text-disabled:#9e9e9e;--le-color-text-inverse:#ffffff;--le-color-border:#e0e0e0;--le-color-border-light:#eeeeee;--le-color-border-dark:#bdbdbd;--le-border-width:2px;--le-color-border-input:#c4d6e6;--le-color-focus:rgba(0, 136, 255, 0.5);--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;--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)}[theme=\\\"dark\\\"]{--le-color-primary:#4da6ff;--le-color-primary-light:#80c1ff;--le-color-primary-dark:#0088ff;--le-color-primary-contrast:#000000;--le-color-secondary:#868e96;--le-color-secondary-light:#adb5bd;--le-color-secondary-dark:#6c757d;--le-color-secondary-contrast:#000000;--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;--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;--le-color-background:#121212;--le-color-background-secondary:#1e1e1e;--le-color-background-tertiary:#2d2d2d;--le-color-surface:#1e1e1e;--le-color-surface-elevated:#2d2d2d;--le-color-text-primary:#ffffff;--le-color-text-secondary:#b3b3b3;--le-color-text-disabled:#666666;--le-color-text-inverse:#121212;--le-color-border:#333333;--le-color-border-light:#2d2d2d;--le-color-border-dark:#444444;--le-border-width:2px;--le-color-border-input:#515c6b;--le-color-focus:rgba(77, 166, 255, 0.5);--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;--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)}[theme=\\\"gradient\\\"]{--le-color-primary:#8b5cf6;--le-color-primary-light:#a78bfa;--le-color-primary-dark:#7c3aed;--le-color-primary-contrast:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-light:#f472b6;--le-color-secondary-dark:#db2777;--le-color-secondary-contrast:#ffffff;--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;--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;--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-surface:rgba(255, 255, 255, 0.95);--le-color-surface-elevated:#ffffff;--le-color-text-primary:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:rgba(139, 92, 246, 0.3);--le-color-border-light:rgba(139, 92, 246, 0.1);--le-color-border-dark:rgba(139, 92, 246, 0.5);--le-border-width:2px;--le-color-border-input:#eccddd;--le-color-focus:rgba(139, 92, 246, 0.5);--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;--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)}[theme=\\\"minimal\\\"]{--le-color-primary:#111827;--le-color-primary-light:#374151;--le-color-primary-dark:#030712;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6b7280;--le-color-secondary-light:#9ca3af;--le-color-secondary-dark:#4b5563;--le-color-secondary-contrast:#ffffff;--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;--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;--le-color-background:#ffffff;--le-color-background-secondary:#fafafa;--le-color-background-tertiary:#f5f5f5;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#111827;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-light:#f3f4f6;--le-color-border-dark:#d1d5db;--le-border-width:1px;--le-color-border-input:#c8cfdd;--le-color-focus:rgba(17, 24, 39, 0.3);--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;--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)}[theme=\\\"warm\\\"]{--le-color-primary:#ea580c;--le-color-primary-light:#fb923c;--le-color-primary-dark:#c2410c;--le-color-primary-contrast:#ffffff;--le-color-secondary:#b45309;--le-color-secondary-light:#d97706;--le-color-secondary-dark:#92400e;--le-color-secondary-contrast:#ffffff;--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;--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;--le-color-background:#fffbeb;--le-color-background-secondary:#fef3c7;--le-color-background-tertiary:#fde68a;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#78350f;--le-color-text-secondary:#92400e;--le-color-text-disabled:#d97706;--le-color-text-inverse:#ffffff;--le-color-border:#fcd34d;--le-color-border-light:#fde68a;--le-color-border-dark:#fbbf24;--le-border-width:2px;--le-color-border-input:#e7d4c4;--le-color-focus:rgba(234, 88, 12, 0.5);--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;--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)}:root{--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;--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-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;--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);--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}:root,[theme=\\\"default\\\"]{--le-color-primary:#3b82f6;--le-color-primary-hover:#2563eb;--le-color-primary-active:#1d4ed8;--le-color-primary-subtle:#eff6ff;--le-color-on-primary:#ffffff;--le-color-secondary:#64748b;--le-color-secondary-hover:#475569;--le-color-secondary-active:#334155;--le-color-secondary-subtle:#f1f5f9;--le-color-on-secondary:#ffffff;--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;--le-color-background:#ffffff;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.5);--le-color-text:#1e293b;--le-color-text-secondary:#64748b;--le-color-text-muted:#94a3b8;--le-color-text-inverse:#ffffff;--le-color-border:#e2e8f0;--le-color-border-strong:#cbd5e1;--le-color-border-focus:var(--le-color-primary);--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;--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)}[theme=\\\"dark\\\"]{--le-color-primary:#60a5fa;--le-color-primary-hover:#93c5fd;--le-color-primary-active:#3b82f6;--le-color-primary-subtle:#1e3a5f;--le-color-on-primary:#0f172a;--le-color-secondary:#94a3b8;--le-color-secondary-hover:#cbd5e1;--le-color-secondary-active:#64748b;--le-color-secondary-subtle:#1e293b;--le-color-on-secondary:#0f172a;--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;--le-color-background:#0f172a;--le-color-surface:#1e293b;--le-color-surface-raised:#334155;--le-color-surface-overlay:rgba(0, 0, 0, 0.7);--le-color-text:#f1f5f9;--le-color-text-secondary:#94a3b8;--le-color-text-muted:#64748b;--le-color-text-inverse:#0f172a;--le-color-border:#334155;--le-color-border-strong:#475569;--le-color-border-focus:var(--le-color-primary);--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)}[theme=\\\"gradient\\\"]{--le-color-primary:#8b5cf6;--le-color-primary-hover:#a78bfa;--le-color-primary-active:#7c3aed;--le-color-primary-subtle:#f5f3ff;--le-color-on-primary:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-hover:#f472b6;--le-color-secondary-active:#db2777;--le-color-secondary-subtle:#fdf2f8;--le-color-on-secondary:#ffffff;--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;--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);--le-color-text:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--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);--le-radius-sm:6px;--le-radius-md:12px;--le-radius-lg:16px;--le-radius-xl:20px;--le-radius-2xl:28px;--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)}[theme=\\\"minimal\\\"]{--le-color-primary:#374151;--le-color-primary-hover:#1f2937;--le-color-primary-active:#111827;--le-color-primary-subtle:#f3f4f6;--le-color-on-primary:#ffffff;--le-color-secondary:#9ca3af;--le-color-secondary-hover:#6b7280;--le-color-secondary-active:#4b5563;--le-color-secondary-subtle:#f9fafb;--le-color-on-secondary:#ffffff;--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;--le-color-background:#fafafa;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.4);--le-color-text:#111827;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-strong:#d1d5db;--le-color-border-focus:var(--le-color-primary);--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;--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)}[theme=\\\"warm\\\"]{--le-color-primary:#ea580c;--le-color-primary-hover:#f97316;--le-color-primary-active:#c2410c;--le-color-primary-subtle:#fff7ed;--le-color-on-primary:#ffffff;--le-color-secondary:#78716c;--le-color-secondary-hover:#57534e;--le-color-secondary-active:#44403c;--le-color-secondary-subtle:#fafaf9;--le-color-on-secondary:#ffffff;--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;--le-color-background:#fffbf5;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(120, 53, 15, 0.4);--le-color-text:#292524;--le-color-text-secondary:#78716c;--le-color-text-muted:#a8a29e;--le-color-text-inverse:#ffffff;--le-color-border:#e7e5e4;--le-color-border-strong:#d6d3d1;--le-color-border-focus:var(--le-color-primary);--le-radius-sm:4px;--le-radius-md:8px;--le-radius-lg:12px;--le-radius-xl:16px;--le-radius-2xl:24px;--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)}\";\n","/**\n * Programmatic API for le-popup component\n * \n * These functions allow you to show popups without manually creating elements.\n * \n * @example\n * // Alert\n * await leAlert('Something happened!');\n * \n * // Confirm\n * const confirmed = await leConfirm('Are you sure?');\n * if (confirmed) { ... }\n * \n * // Prompt\n * const name = await lePrompt('What is your name?');\n * if (name !== null) { ... }\n */\n\nimport type { PopupType, PopupPosition, PopupResult } from './le-popup';\n\n/**\n * Options for programmatic popup functions\n */\nexport interface PopupOptions {\n  title?: string;\n  type?: PopupType;\n  modal?: boolean;\n  position?: PopupPosition;\n  confirmText?: string;\n  cancelText?: string;\n  placeholder?: string;\n  defaultValue?: string;\n  theme?: string;\n}\n\n/**\n * Interface for the le-popup custom element\n */\ninterface HTMLLePopupElement extends HTMLElement {\n  open: boolean;\n  type: PopupType;\n  popupTitle?: string;\n  message?: string;\n  modal: boolean;\n  position: PopupPosition;\n  confirmText: string;\n  cancelText: string;\n  placeholder: string;\n  defaultValue: string;\n  show(): Promise<PopupResult>;\n  hide(confirmed?: boolean): Promise<void>;\n}\n\n/**\n * Show an alert popup with a message\n * @param message - The message to display\n * @param options - Optional configuration\n * @returns Promise that resolves when closed\n * \n * @example\n * await leAlert('File saved successfully!');\n * await leAlert('Error occurred', { title: 'Error', theme: 'dark' });\n */\nexport async function leAlert(message: string, options: PopupOptions = {}): Promise<void> {\n  const popup = createPopupElement(message, { ...options, type: 'alert' });\n  document.body.appendChild(popup);\n  \n  await popup.show();\n  popup.remove();\n}\n\n/**\n * Show a confirm popup with OK/Cancel buttons\n * @param message - The message to display\n * @param options - Optional configuration\n * @returns Promise that resolves to true (confirmed) or false (cancelled)\n * \n * @example\n * const confirmed = await leConfirm('Delete this item?');\n * if (confirmed) {\n *   deleteItem();\n * }\n */\nexport async function leConfirm(message: string, options: PopupOptions = {}): Promise<boolean> {\n  const popup = createPopupElement(message, { ...options, type: 'confirm' });\n  document.body.appendChild(popup);\n  \n  const result = await popup.show();\n  popup.remove();\n  \n  return result.confirmed;\n}\n\n/**\n * Show a prompt popup with an input field\n * @param message - The message to display\n * @param options - Optional configuration (including defaultValue, placeholder)\n * @returns Promise that resolves to the input value or null if cancelled\n * \n * @example\n * const name = await lePrompt('Enter your name:', { \n *   title: 'Welcome',\n *   placeholder: 'John Doe',\n *   defaultValue: 'Guest'\n * });\n * if (name !== null) {\n *   greetUser(name);\n * }\n */\nexport async function lePrompt(message: string, options: PopupOptions = {}): Promise<string | null> {\n  const popup = createPopupElement(message, { ...options, type: 'prompt' });\n  document.body.appendChild(popup);\n  \n  const result = await popup.show();\n  popup.remove();\n  \n  return result.confirmed ? (result.value ?? '') : null;\n}\n\n/**\n * Create a popup element with the given configuration\n */\nfunction createPopupElement(message: string, options: PopupOptions): HTMLLePopupElement {\n  const popup = document.createElement('le-popup') as HTMLLePopupElement;\n  \n  popup.message = message;\n  popup.type = options.type || 'alert';\n  \n  if (options.title) popup.popupTitle = options.title;\n  if (options.modal !== undefined) popup.modal = options.modal;\n  if (options.position) popup.position = options.position;\n  if (options.confirmText) popup.confirmText = options.confirmText;\n  if (options.cancelText) popup.cancelText = options.cancelText;\n  if (options.placeholder) popup.placeholder = options.placeholder;\n  if (options.defaultValue) popup.defaultValue = options.defaultValue;\n  if (options.theme) popup.setAttribute('theme', options.theme);\n  \n  return popup;\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeBox extends Components.LeBox, HTMLElement {}
+export const LeBox: {
+    prototype: LeBox;
+    new (): LeBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-box.js

@@ -0,0 +1,257 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { h as classnames } from './utils.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$7 } from './le-button2.js';
+import { d as defineCustomElement$4 } from './le-popover2.js';
+
+const leBoxDefaultCss = ":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}";
+
+const LeBox$1 = /*@__PURE__*/ proxyCustomElement(class LeBox extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * Flex grow factor - how much the item should grow relative to siblings
+     * @min 0
+     */
+    grow = 0;
+    /**
+     * Flex shrink factor - how much the item should shrink relative to siblings
+     * @min 0
+     */
+    shrink = 1;
+    /**
+     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+     */
+    basis = 'auto';
+    /**
+     * Width of the box (CSS value like '100px', '50%', 'auto')
+     */
+    width;
+    /**
+     * Height of the box (CSS value)
+     */
+    height;
+    /**
+     * Minimum width constraint
+     */
+    minWidth;
+    /**
+     * Maximum width constraint
+     */
+    maxWidth;
+    /**
+     * Minimum height constraint
+     */
+    minHeight;
+    /**
+     * Maximum height constraint
+     */
+    maxHeight;
+    /**
+     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+     */
+    background;
+    /**
+     * Border radius (e.g., '8px', 'var(--le-radius-md)')
+     */
+    borderRadius;
+    /**
+     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+     */
+    border;
+    /**
+     * Self-alignment override for this item on the cross axis
+     * @allowedValues auto | start | center | end | stretch | baseline
+     */
+    alignSelf = 'auto';
+    /**
+     * Internal horizontal alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    alignContent = 'stretch';
+    /**
+     * Internal vertical alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    justifyContent = 'start';
+    /**
+     * Padding inside the box (CSS value like '8px', '1rem')
+     */
+    padding;
+    /**
+     * Order in the flex container (lower values come first)
+     */
+    order;
+    /**
+     * Whether to display box content as flex (for internal alignment)
+     */
+    displayFlex = false;
+    /**
+     * Direction of internal flex layout when displayFlex is true
+     * @allowedValues horizontal | vertical
+     */
+    innerDirection = 'vertical';
+    /**
+     * Gap between internal flex items when displayFlex is true
+     */
+    innerGap;
+    getAlignSelf() {
+        const alignMap = {
+            auto: 'auto',
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        return alignMap[this.alignSelf] || 'auto';
+    }
+    getContentAlign() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return alignMap[this.alignContent] || 'stretch';
+    }
+    getContentJustify() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return justifyMap[this.justifyContent] || 'flex-start';
+    }
+    render() {
+        // Host styles for flex item behavior
+        const hostStyle = {
+            flexGrow: String(this.grow),
+            flexShrink: String(this.shrink),
+            flexBasis: this.basis,
+            alignSelf: this.getAlignSelf(),
+        };
+        if (this.width)
+            hostStyle.width = this.width;
+        if (this.height)
+            hostStyle.height = this.height;
+        if (this.minWidth)
+            hostStyle.minWidth = this.minWidth;
+        if (this.maxWidth)
+            hostStyle.maxWidth = this.maxWidth;
+        if (this.minHeight)
+            hostStyle.minHeight = this.minHeight;
+        if (this.maxHeight)
+            hostStyle.maxHeight = this.maxHeight;
+        if (this.order !== undefined)
+            hostStyle.order = String(this.order);
+        // Inner content styles
+        const contentStyle = {};
+        if (this.padding) {
+            contentStyle.padding = this.padding;
+        }
+        if (this.background) {
+            contentStyle.background = this.background;
+        }
+        if (this.borderRadius) {
+            contentStyle.borderRadius = this.borderRadius;
+        }
+        if (this.border) {
+            contentStyle.border = this.border;
+        }
+        if (this.displayFlex) {
+            contentStyle.display = 'flex';
+            contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';
+            contentStyle.alignItems = this.getContentAlign();
+            contentStyle.justifyContent = this.getContentJustify();
+            if (this.innerGap) {
+                contentStyle.gap = this.innerGap;
+            }
+        }
+        const hostClass = classnames({
+            'has-grow': this.grow > 0,
+            'display-flex': this.displayFlex,
+            [`inner-${this.innerDirection}`]: this.displayFlex,
+        });
+        return (h(Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
+    }
+    static get style() { return leBoxDefaultCss; }
+}, [769, "le-box", {
+        "grow": [2],
+        "shrink": [2],
+        "basis": [1],
+        "width": [1],
+        "height": [1],
+        "minWidth": [1, "min-width"],
+        "maxWidth": [1, "max-width"],
+        "minHeight": [1, "min-height"],
+        "maxHeight": [1, "max-height"],
+        "background": [1],
+        "borderRadius": [1, "border-radius"],
+        "border": [1],
+        "alignSelf": [1, "align-self"],
+        "alignContent": [1, "align-content"],
+        "justifyContent": [1, "justify-content"],
+        "padding": [1],
+        "order": [2],
+        "displayFlex": [4, "display-flex"],
+        "innerDirection": [1, "inner-direction"],
+        "innerGap": [1, "inner-gap"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-box", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeBox$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeBox = LeBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeBox, defineCustomElement };
+//# sourceMappingURL=le-box.js.map
+
+//# sourceMappingURL=le-box.js.map

package/dist/components/le-box.js.map

@@ -0,0 +1 @@
+{"file":"le-box.js","mappings":"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","names":["LeBox","__stencil_proxyCustomElement"],"sources":["src/components/le-box/le-box.default.css?tag=le-box&encapsulation=shadow","src/components/le-box/le-box.tsx"],"sourcesContent":["/**\n * le-box default styles\n *\n * Flex item properties are applied inline via hostStyle.\n * This CSS handles visual styling and theming.\n */\n\n:host {\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Box container - full size by default */\n.box {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* Content wrapper */\n.content {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  background: var(--le-box-bg, transparent);\n  border-radius: var(--le-box-border-radius, 0);\n  padding: var(--le-box-padding, 0);\n}\n\n/* When displayFlex is enabled, ensure content stretches */\n:host(.display-flex) .content {\n  min-height: 100%;\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible box component for use as a flex item within le-stack.\n *\n * `le-box` wraps content and provides flex item properties like grow, shrink,\n * basis, and self-alignment. It can also control its internal content alignment.\n *\n * @slot - Default slot for box content\n *\n * @cssprop --le-box-bg - Background color\n * @cssprop --le-box-padding - Padding inside the box\n * @cssprop --le-box-border-radius - Border radius\n *\n * @csspart box - The main box container\n * @csspart content - The inner content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-box',\n  styleUrl: 'le-box.default.css',\n  shadow: true,\n})\nexport class LeBox {\n  @Element() el: HTMLElement;\n\n  /**\n   * Flex grow factor - how much the item should grow relative to siblings\n   * @min 0\n   */\n  @Prop() grow: number = 0;\n\n  /**\n   * Flex shrink factor - how much the item should shrink relative to siblings\n   * @min 0\n   */\n  @Prop() shrink: number = 1;\n\n  /**\n   * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')\n   */\n  @Prop() basis: string = 'auto';\n\n  /**\n   * Width of the box (CSS value like '100px', '50%', 'auto')\n   */\n  @Prop() width?: string;\n\n  /**\n   * Height of the box (CSS value)\n   */\n  @Prop() height?: string;\n\n  /**\n   * Minimum width constraint\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Maximum width constraint\n   */\n  @Prop() maxWidth?: string;\n\n  /**\n   * Minimum height constraint\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * Maximum height constraint\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')\n   */\n  @Prop() background?: string;\n\n  /**\n   * Border radius (e.g., '8px', 'var(--le-radius-md)')\n   */\n  @Prop() borderRadius?: string;\n\n  /**\n   * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')\n   */\n  @Prop() border?: string;\n\n  /**\n   * Self-alignment override for this item on the cross axis\n   * @allowedValues auto | start | center | end | stretch | baseline\n   */\n  @Prop() alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'auto';\n\n  /**\n   * Internal horizontal alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  /**\n   * Internal vertical alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() justifyContent: 'start' | 'center' | 'end' | 'stretch' = 'start';\n\n  /**\n   * Padding inside the box (CSS value like '8px', '1rem')\n   */\n  @Prop() padding?: string;\n\n  /**\n   * Order in the flex container (lower values come first)\n   */\n  @Prop() order?: number;\n\n  /**\n   * Whether to display box content as flex (for internal alignment)\n   */\n  @Prop() displayFlex: boolean = false;\n\n  /**\n   * Direction of internal flex layout when displayFlex is true\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() innerDirection: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between internal flex items when displayFlex is true\n   */\n  @Prop() innerGap?: string;\n\n  private getAlignSelf(): string {\n    const alignMap: Record<string, string> = {\n      auto: 'auto',\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.alignSelf] || 'auto';\n  }\n\n  private getContentAlign(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return alignMap[this.alignContent] || 'stretch';\n  }\n\n  private getContentJustify(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return justifyMap[this.justifyContent] || 'flex-start';\n  }\n\n  render() {\n    // Host styles for flex item behavior\n    const hostStyle: { [key: string]: string } = {\n      flexGrow: String(this.grow),\n      flexShrink: String(this.shrink),\n      flexBasis: this.basis,\n      alignSelf: this.getAlignSelf(),\n    };\n\n    if (this.width) hostStyle.width = this.width;\n    if (this.height) hostStyle.height = this.height;\n    if (this.minWidth) hostStyle.minWidth = this.minWidth;\n    if (this.maxWidth) hostStyle.maxWidth = this.maxWidth;\n    if (this.minHeight) hostStyle.minHeight = this.minHeight;\n    if (this.maxHeight) hostStyle.maxHeight = this.maxHeight;\n    if (this.order !== undefined) hostStyle.order = String(this.order);\n\n    // Inner content styles\n    const contentStyle: { [key: string]: string } = {};\n\n    if (this.padding) {\n      contentStyle.padding = this.padding;\n    }\n    if (this.background) {\n      contentStyle.background = this.background;\n    }\n    if (this.borderRadius) {\n      contentStyle.borderRadius = this.borderRadius;\n    }\n    if (this.border) {\n      contentStyle.border = this.border;\n    }\n\n    if (this.displayFlex) {\n      contentStyle.display = 'flex';\n      contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';\n      contentStyle.alignItems = this.getContentAlign();\n      contentStyle.justifyContent = this.getContentJustify();\n      if (this.innerGap) {\n        contentStyle.gap = this.innerGap;\n      }\n    }\n\n    const hostClass = classnames({\n      'has-grow': this.grow > 0,\n      'display-flex': this.displayFlex,\n      [`inner-${this.innerDirection}`]: this.displayFlex,\n    });\n\n    return (\n      <Host style={hostStyle} class={hostClass}>\n        <le-component component=\"le-box\">\n          <div class=\"box\" part=\"box\">\n            <div class=\"content\" part=\"content\" style={contentStyle}>\n              <le-slot\n                name=\"\"\n                description=\"Content inside this flex item\"\n                type=\"slot\"\n                allowed-components=\"le-text,le-card,le-button,le-stack,le-box\"\n              >\n                <slot></slot>\n              </le-slot>\n            </div>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeButton extends Components.LeButton, HTMLElement {}
+export const LeButton: {
+    prototype: LeButton;
+    new (): LeButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-button.js

@@ -0,0 +1,9 @@
+import { L as LeButton$1, e as defineCustomElement$1 } from './le-button2.js';
+
+const LeButton = LeButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeButton, defineCustomElement };
+//# sourceMappingURL=le-button.js.map
+
+//# sourceMappingURL=le-button.js.map

package/dist/components/le-button.js.map

@@ -0,0 +1 @@
+{"file":"le-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}