le-kit 0.1.13 → 0.1.15

package/dist/esm/{le-button_6.entry.js → le-button_7.entry.js}

@@ -1,7 +1,8 @@
-import { r as registerInstance, i as createEvent, j as getElement, k as h, F as Fragment, h as getLeKitConfig, l as getAssetPath, H as Host } from './index-CwNQ1GTa.js';
-import { c as classnames, o as observeModeChanges } from './utils-Cf7fMI0j.js';
+import { r as registerInstance, d as createEvent, c as getElement, h, F as Fragment, e as getAssetPath, H as Host, f as getLeKitConfig } from './index-DzgCnDLJ.js';
+import { c as classnames, o as observeModeChanges } from './utils-Dp5xFMCl.js';
+import { leConfirm } from './index.js';
 
-const leButtonDefaultCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:0.4rem;--le-button-padding-y:0.4rem;--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-button-icon-aspect-ratio:1;--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding-y) var(--le-button-padding-x);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing)}.button:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.button:active:not(:disabled){transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.button:disabled{opacity:0.5;cursor:not-allowed}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host>le-component.color-secondary{--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host>le-component.color-success{--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host>le-component.color-warning{--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host>le-component.color-danger{--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host>le-component.color-info{--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host>le-component.variant-solid .button{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host>le-component.variant-outlined .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.variant-clear .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .button{--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host>le-component.size-large .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host>le-component.full-width{display:block;width:100%}:host>le-component.selected .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host>le-component.variant-outlined.selected .button,:host>le-component.variant-clear.selected .button{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .button{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .button{padding:0.75rem}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}";
+const leButtonCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 6px var(--le-color-shadow)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host>le-component.color-secondary{--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host>le-component.color-success{--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host>le-component.color-warning{--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host>le-component.color-danger{--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host>le-component.color-info{--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host>le-component.variant-solid .le-button-container{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host>le-component.variant-outlined .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host>le-component.variant-clear .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .le-button-container{--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host>le-component.size-large .le-button-container{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host>le-component.full-width{display:block;width:100%}:host>le-component.selected .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host>le-component.variant-outlined.selected .le-button-container,:host>le-component.variant-clear.selected .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .le-button-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .le-button-container{padding:0.75rem}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}";
 
 const LeButton = class {
     constructor(hostRef) {
@@ -37,9 +38,18 @@ const LeButton = class {
      */
     fullWidth = false;
     /**
-     * Whether the button displays only an icon (square aspect ratio)
+     * Icon only button image or emoji
+     * if this prop is set, the button will render only the icon slot
      */
-    iconOnly = false;
+    iconOnly;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd;
     /**
      * Whether the button is disabled
      */
@@ -57,6 +67,11 @@ const LeButton = class {
      * Link target when href is set
      */
     target;
+    /**
+     * Alignment of the button label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align = 'center';
     /**
      * Emitted when the button is clicked.
      * This is a custom event that wraps the native click but ensures the target is the le-button.
@@ -81,10 +96,10 @@ const LeButton = class {
         });
         const TagType = this.href ? 'a' : 'button';
         const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
-        return (h("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+        return (h("le-component", { key: 'bf247365c4ceeaccdb05cbbb17604265f1608fa4', component: "le-button", hostClass: classes }, h(TagType, { key: 'a01540b86ace35d55b5635e2e5ce1049f480a788', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd)))))));
     }
 };
-LeButton.style = leButtonDefaultCss;
+LeButton.style = leButtonCss;
 
 const leCheckboxCss = ":host{display:block;--le-checkbox-size:18px;--le-checkbox-color:var(--le-color-primary, #007bff);--le-checkbox-label-color:var(--le-color-text-primary, #333);--le-checkbox-desc-color:var(--le-color-text-secondary, #666);--le-checkbox-border-radius:var(--le-radius-sm, 2px);--le-checkbox-marker-color:var(--le-color-surface, #fff)}.le-checkbox-wrapper{display:flex;flex-direction:column;gap:4px}.le-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}:host([disabled]) .le-checkbox-label{cursor:not-allowed;opacity:0.6}.le-checkbox-input{display:flex;align-items:center;justify-content:center;min-height:1.4em}input[type=\"checkbox\"]{appearance:none;-webkit-appearance:none;width:var(--le-checkbox-size);height:var(--le-checkbox-size);border:var(--le-border-width, 2px) solid var(--le-checkbox-color);border-radius:var(--le-checkbox-border-radius);margin:0;margin-top:2px;position:relative;cursor:inherit;background-color:transparent;transition:background-color 0.2s, border-color 0.2s}input[type=\"checkbox\"]:checked{background-color:var(--le-checkbox-color)}input[type=\"checkbox\"]:checked::after{content:'';position:absolute;left:0;top:0;bottom:calc(var(--le-checkbox-size) / 5);right:0;margin:auto;width:calc(var(--le-checkbox-size) / 4);height:calc(var(--le-checkbox-size) / 2);border:solid var(--le-checkbox-marker-color, #fff);border-width:0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;transform:rotate(45deg)}input[type=\"checkbox\"]:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-checkbox-text{flex:1;flex-wrap:wrap;color:var(--le-checkbox-label-color);line-height:1.5;text-align:start}.le-checkbox-description{margin-left:calc(var(--le-checkbox-size) + 8px);font-size:0.875em;color:var(--le-checkbox-desc-color);line-height:1.4}:host [slot=\"description\"]{margin:0}";
 
@@ -236,11 +251,9 @@ const LeComponent = class {
     async loadComponentMetadata() {
         try {
             // Fetch the manifest from configured URL
-            const { manifestUrl } = getLeKitConfig();
-            const manifestUrlResolved = manifestUrl.startsWith('/')
-                ? getAssetPath(`./assets${manifestUrl}`)
-                : manifestUrl;
-            const response = await fetch(manifestUrlResolved);
+            const { manifestFile } = getLeKitConfig();
+            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
+            const response = await fetch(manifestFileResolved);
             const manifest = await response.json();
             // Find the component definition
             for (const module of manifest.modules) {
@@ -322,6 +335,7 @@ const LeComponent = class {
         }
         // Update local state
         this.propertyValues = { ...this.propertyValues, [attrName]: value };
+        // update the host element the way the parent element mutation observer would catch it?
     }
     /**
      * Delete this component from the DOM
@@ -331,7 +345,7 @@ const LeComponent = class {
             return;
         // Confirm deletion
         const name = this.displayName || this.formatDisplayName(this.component);
-        if (!confirm(`Delete this ${name}?`))
+        if (!leConfirm(`Delete this ${name}?`))
             return;
         // Remove the host element from its parent
         const parent = this.hostElement.parentElement;
@@ -378,10 +392,11 @@ const LeComponent = class {
         // In admin mode, show wrapper with header and settings
         return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
     }
+    static get assetsDirs() { return ["assets"]; }
 };
 LeComponent.style = leComponentCss;
 
-const lePopoverCss = "/* ============================================\n   le-popover.css\n   Popover using native HTML Popover API\n   ============================================ */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-default-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 6px);\n  background: var(--le-color-surface, #fff);\n  color: var(--le-color-text-secondary, #666);\n  font-size: 16px;\n  cursor: pointer;\n  transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n  border-color: var(--le-color-primary, #2196f3);\n  color: var(--le-color-primary, #2196f3);\n  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n   Popover Content (native popover)\n   ============================================ */\n\n.le-popover-content {\n  /* Reset native popover defaults */\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  \n  /* Positioning - will be set via JS */\n  position: fixed;\n  inset: unset;\n  \n  /* Styling */\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 8px);\n  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n  .le-popover-content:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  min-height: 32px;\n}\n\n.le-popover-title {\n  font-weight: var(--le-font-weight-semibold, 600);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--le-color-text-secondary, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: var(--le-radius-sm, 4px);\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popover-body {\n  padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n   Scrollable content\n   ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n  overflow-y: auto;\n}\n";
+const lePopoverCss = "/* ============================================\n   le-popover.css\n   Popover using native HTML Popover API\n   ============================================ */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([trigger-full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-trigger-full-width {\n  display: flex;\n  width: 100%;\n}\n\n.le-popover-default-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 6px);\n  background: var(--le-color-surface, #fff);\n  color: var(--le-color-text-secondary, #666);\n  font-size: 16px;\n  cursor: pointer;\n  transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n  border-color: var(--le-color-primary, #2196f3);\n  color: var(--le-color-primary, #2196f3);\n  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n   Popover Content (native popover)\n   ============================================ */\n\n.le-popover-content {\n  /* Reset native popover defaults */\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  \n  /* Positioning - will be set via JS */\n  position: fixed;\n  inset: unset;\n  \n  /* Styling */\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 8px);\n  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n  .le-popover-content:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  min-height: 32px;\n}\n\n.le-popover-title {\n  font-weight: var(--le-font-weight-semibold, 600);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--le-color-text-secondary, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: var(--le-radius-sm, 4px);\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popover-body {\n  padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n   Scrollable content\n   ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n  overflow-y: auto;\n}\n";
 
 const LePopover = class {
     constructor(hostRef) {
@@ -438,6 +453,10 @@ const LePopover = class {
      * Maximum width for the popover (e.g., '400px', '25rem')
      */
     maxWidth;
+    /**
+     * Should the popover's trigger take full width of its container
+     */
+    triggerFullWidth = false;
     /**
      * Emitted when the popover opens
      */
@@ -446,6 +465,12 @@ const LePopover = class {
      * Emitted when the popover closes
      */
     lePopoverClose;
+    /**
+     * Method to update the popover position from a parent component
+     */
+    async updatePosition() {
+        this._updatePosition();
+    }
     isPositioned = false;
     triggerEl;
     popoverEl;
@@ -507,14 +532,14 @@ const LePopover = class {
     }
     handleScroll = () => {
         if (this.open) {
-            this.updatePosition();
+            this._updatePosition();
         }
     };
     handlePopoverToggle = (event) => {
         if (event.newState === 'open') {
             this.open = true;
             this.addScrollListeners();
-            this.updatePosition();
+            this._updatePosition();
             this.lePopoverOpen.emit();
         }
         else {
@@ -537,7 +562,7 @@ const LePopover = class {
      */
     async show() {
         document.dispatchEvent(new CustomEvent('le-popover-will-open', {
-            detail: { popover: this.el }
+            detail: { popover: this.el },
         }));
         this.popoverEl?.showPopover();
     }
@@ -562,7 +587,7 @@ const LePopover = class {
         event.stopPropagation();
         this.toggle();
     };
-    updatePosition() {
+    _updatePosition() {
         if (!this.triggerEl || !this.popoverEl)
             return;
         const triggerRect = this.triggerEl.getBoundingClientRect();
@@ -604,7 +629,8 @@ const LePopover = class {
         }
         // Adjust alignment for horizontal overflow
         if (position === 'top' || position === 'bottom') {
-            if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
+            if (align === 'start' &&
+                triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
                 align = 'end';
             }
             else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
@@ -715,14 +741,223 @@ const LePopover = class {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return [
-            h("div", { key: '3d2a3b86ddb3be577bd0e976a5a00f25396a97fb', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '9db2e9e2b0bdb25c5a2361115d2094292fe692ec', name: "trigger" }, h("button", { key: '88d78b192f72731f00d6131b92b8d6a4b445d7f9', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '0f2913f160cda5dcbeb20c714219d587196e230b' }, "\u2295")))),
-            h("div", { key: 'b65d2de900ff6e67a62d92d7452db34afde9f257', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '323061fc49c8e0fc9ae541dfc576e551b0a83818', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b1d9f4203966ae6a0bb14186824596643954d6f8', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'd0d335d8c9897ed9ba7bd0370572a8cafa72b044', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '52d3294394b0e1fd49f8c361414e228feed68ea9', class: "le-popover-body" }, h("slot", { key: '16d8691545f2eaa44f136bfea33a1f1d71d18cd7' })))
-        ];
+        return (h(Host, { key: 'f3e1ae33b67abbaa13ac506271961b3dfcfaeec2', "trigger-full-width": this.triggerFullWidth }, h("div", { key: '4fc806cb1b4b59612bd7820d263b54db53f2d6d2', class: classnames('le-popover-trigger', {
+                'le-popover-trigger-full-width': this.triggerFullWidth,
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: 'b62f6201f31246ccbb047b7a6539fd54604cc45e', name: "trigger" }, h("button", { key: '17a1a253776424812e82e4c747d2f0a2414efd48', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '3c9c4d0390222cd3c1afea8f864d7287c3d55a8f' }, "\u2295")))), h("div", { key: '5c786402b8e1c9a5b60894f201de1bccf20f5288', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: el => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: 'b9e810e52400b9f3246621e80ecd432ea4fca3e5', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b4164ebd8da381274b2eca584a221d5fddfcb473', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'e5dc86d2aeef127cf9eaa54af50363a1ad7a80a8', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '4b4cf379cec1e3ec083dc2aa48b5919b35761648', class: "le-popover-body", part: "content" }, h("slot", { key: '767680e6675b50024ec4baa22343e08c26317962' })))));
     }
 };
 LePopover.style = lePopoverCss;
 
+const lePopupCss = ":host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),\n              box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}";
+
+const LePopup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leConfirm = createEvent(this, "leConfirm");
+        this.leCancel = createEvent(this, "leCancel");
+        this.leOpen = createEvent(this, "leOpen");
+        this.leClose = createEvent(this, "leClose");
+    }
+    get el() { return getElement(this); }
+    /**
+     * The mode of the Le Kit (e.g., 'default' or 'admin')
+     */
+    mode = 'default';
+    /**
+     * Whether the popup is currently visible
+     */
+    open = false;
+    /**
+     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+     */
+    type = 'alert';
+    /**
+     * Optional title for the popup header
+     */
+    popupTitle;
+    /**
+     * Message text to display (for alert/confirm/prompt types)
+     */
+    message;
+    /**
+     * Whether the popup is modal (blocks interaction with page behind)
+     */
+    modal = true;
+    /**
+     * Position of the popup on screen
+     */
+    position = 'center';
+    /**
+     * Text for the confirm/OK button
+     */
+    confirmText = 'OK';
+    /**
+     * Text for the cancel button
+     */
+    cancelText = 'Cancel';
+    /**
+     * Placeholder text for prompt input
+     */
+    placeholder = '';
+    /**
+     * Default value for prompt input
+     */
+    defaultValue = '';
+    /**
+     * Whether clicking the backdrop closes the popup (modal only)
+     */
+    closeOnBackdrop = true;
+    /**
+     * Internal state for prompt input value
+     */
+    inputValue = '';
+    /**
+     * Emitted when the popup is confirmed (OK clicked)
+     */
+    leConfirm;
+    /**
+     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
+     */
+    leCancel;
+    /**
+     * Emitted when the popup opens
+     */
+    leOpen;
+    /**
+     * Emitted when the popup closes
+     */
+    leClose;
+    dialogEl;
+    inputEl;
+    resolvePromise;
+    componentWillLoad() {
+        this.inputValue = this.defaultValue;
+    }
+    componentDidLoad() {
+        // Native dialog handles Escape key automatically when modal
+        // We just need to listen for the cancel event
+        this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
+    }
+    disconnectedCallback() {
+        this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
+    }
+    handleDialogCancel = (e) => {
+        e.preventDefault(); // Prevent default close to handle it ourselves
+        this.handleCancel();
+    };
+    /**
+     * Opens the popup and returns a promise that resolves when closed
+     */
+    async show() {
+        return new Promise(resolve => {
+            this.resolvePromise = resolve;
+            this.inputValue = this.defaultValue;
+            this.open = true;
+            // Use requestAnimationFrame to ensure the dialog element is rendered
+            requestAnimationFrame(() => {
+                if (this.dialogEl) {
+                    if (this.modal) {
+                        this.dialogEl.showModal();
+                    }
+                    else {
+                        this.dialogEl.show();
+                    }
+                    this.leOpen.emit();
+                    // Focus input for prompt type
+                    if (this.type === 'prompt' && this.inputEl) {
+                        this.inputEl.focus();
+                        this.inputEl.select();
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Closes the popup with a result
+     */
+    async hide(confirmed = false) {
+        const result = {
+            confirmed,
+            value: this.type === 'prompt' ? this.inputValue : undefined,
+        };
+        this.dialogEl?.close();
+        this.open = false;
+        this.leClose.emit(result);
+        if (this.resolvePromise) {
+            this.resolvePromise(result);
+            this.resolvePromise = undefined;
+        }
+    }
+    handleConfirm = () => {
+        const result = {
+            confirmed: true,
+            value: this.type === 'prompt' ? this.inputValue : undefined,
+        };
+        this.leConfirm.emit(result);
+        this.hide(true);
+    };
+    handleCancel = () => {
+        const result = {
+            confirmed: false,
+            value: undefined,
+        };
+        this.leCancel.emit(result);
+        this.hide(false);
+    };
+    handleBackdropClick = (e) => {
+        // Check if click was on the dialog backdrop (outside the dialog box)
+        if (this.closeOnBackdrop && e.target === this.dialogEl) {
+            const rect = this.dialogEl.getBoundingClientRect();
+            const clickedInDialog = e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom;
+            if (!clickedInDialog) {
+                this.handleCancel();
+            }
+        }
+    };
+    handleInputChange = (e) => {
+        this.inputValue = e.target.value;
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' && this.type !== 'custom') {
+            e.preventDefault();
+            this.handleConfirm();
+        }
+    };
+    hasSlot(name) {
+        return !!this.el.querySelector(`[slot="${name}"]`);
+    }
+    renderHeader() {
+        if (this.hasSlot('header')) {
+            return (h("div", { class: "le-popup-header", part: "header" }, h("slot", { name: "header" })));
+        }
+        if (this.popupTitle) {
+            return (h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
+        }
+        return null;
+    }
+    renderBody() {
+        return (h("div", { class: "le-popup-body", part: "body" }, this.message && h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el) })), h("le-slot", { name: "", tag: "div", description: "Custom popup content", type: "slot" }, h("slot", null))));
+    }
+    renderFooter() {
+        if (this.hasSlot('footer')) {
+            return (h("div", { class: "le-popup-footer", part: "footer" }, h("slot", { name: "footer" })));
+        }
+        // For custom type without footer slot, don't render default buttons
+        if (this.type === 'custom') {
+            return null;
+        }
+        return (h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
+    }
+    render() {
+        const positionClass = `le-popup-position-${this.position}`;
+        return (h("dialog", { key: '20ac8e086b2999191c769a0ee03b1c1182103809', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, h("le-component", { key: '468b1d737c2301b041c2a7a13afc658505f74c5b', component: "le-popup" }, h("div", { key: '829cad08439dc5d0b3f9c78092a46faa016bbec2', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
+    }
+};
+LePopup.style = lePopupCss;
+
 const leSlotDefaultCss = ":host{display:contents;--le-slot-border-color:#0088ff;--le-slot-bg-color:rgba(0, 136, 255, 0.05);--le-slot-header-bg:rgb(218, 238, 255);--le-slot-label-color:#0066cc;--le-slot-description-color:#666;--le-slot-required-color:#e53935;--le-slot-dropzone-min-height:20px;--le-slot-dropzone-border-color:#ccc}.le-slot-container,.le-slot-header,.le-slot-description,.le-slot-dropzone,.le-slot-input{display:none}.hidden-slot{display:none}:host(.admin-mode){display:block;flex:1}:host(.admin-mode) .le-slot-container{position:relative;display:flex;flex-direction:column;border:2px dashed var(--le-slot-border-color);border-radius:4px;background:var(--le-slot-bg-color);margin:4px 0}:host(.admin-mode) .le-slot-header{display:flex;align-items:center;gap:4px;padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-slot-header-bg);border-bottom:1px solid var(--le-slot-border-color);font-size:var(--le-font-size-xs, 11px);font-weight:400;text-transform:capitalize}:host(.admin-mode) .le-slot-header-no-label{justify-content:flex-end;height:16px;border:none;background-color:transparent}.le-slot-label{color:var(--le-slot-label-color);text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-slot-required{color:var(--le-slot-required-color);font-weight:bold}:host(.admin-mode) .le-slot-description{display:block;padding:4px 8px;font-size:12px;color:var(--le-slot-description-color);font-style:italic}:host(.admin-mode) .le-slot-description-icon{display:inline-block;font-size:9px;line-height:1;cursor:pointer;color:var(--le-slot-description-color)}:host(.admin-mode) .le-slot-dropzone{display:block;min-height:var(--le-slot-dropzone-min-height);padding:var(--le-spacing-1, 4px);position:relative}:host(.admin-mode) .le-slot-dropzone:empty::before{content:'Drop content here';display:flex;align-items:center;justify-content:center;position:absolute;inset:8px;border:2px dashed var(--le-slot-dropzone-border-color);border-radius:4px;color:#999;font-size:12px;pointer-events:none}:host(.admin-mode.drag-over) .le-slot-container{border-color:#00cc66;background:rgba(0, 204, 102, 0.1)}:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before{border-color:#00cc66;color:#00cc66;content:'Release to drop'}:host(.admin-mode) .le-slot-input{display:block;padding:var(--le-spacing-1, 4px)}:host(.admin-mode) .le-slot-input input,:host(.admin-mode) .le-slot-input textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--le-slot-dropzone-border-color);border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;background:#fff;color:#333;box-sizing:border-box;transition:border-color 0.2s, box-shadow 0.2s}:host(.admin-mode) .le-slot-input input:focus,:host(.admin-mode) .le-slot-input textarea:focus{outline:none;border-color:var(--le-slot-border-color);box-shadow:0 0 0 3px rgba(0, 136, 255, 0.15)}:host(.admin-mode) .le-slot-input input::placeholder,:host(.admin-mode) .le-slot-input textarea::placeholder{color:#999}:host(.admin-mode) .le-slot-input textarea{resize:vertical;min-height:60px}:host(.admin-mode) .le-slot-input slot{display:none}.le-slot-invalid{color:var(--le-slot-required-color);font-size:10px;margin-left:auto;font-weight:normal;text-transform:none}:host(.admin-mode) .le-slot-input.has-error input,:host(.admin-mode) .le-slot-input.has-error textarea{border-color:var(--le-slot-required-color);background:rgba(229, 57, 53, 0.05)}:host(.admin-mode) .le-slot-input.has-error input:focus,:host(.admin-mode) .le-slot-input.has-error textarea:focus{border-color:var(--le-slot-required-color);box-shadow:0 0 0 3px rgba(229, 57, 53, 0.15)}.le-slot-add-btn{font-size:24px;line-height:0px;width:12px;height:12px}.le-slot-header-no-label .le-slot-add-btn{font-size:16px}.le-slot-button{width:20px;height:20px}:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text{height:0}";
 
 const LeSlot = class {
@@ -981,11 +1216,9 @@ const LeSlot = class {
      */
     async loadAvailableComponents() {
         try {
-            const { manifestUrl } = getLeKitConfig();
-            const manifestUrlResolved = manifestUrl.startsWith('/')
-                ? getAssetPath(`./assets${manifestUrl}`)
-                : manifestUrl;
-            const response = await fetch(manifestUrlResolved);
+            const { manifestFile } = getLeKitConfig();
+            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
+            const response = await fetch(manifestFileResolved);
             const manifest = await response.json();
             const components = [];
             const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
@@ -1060,7 +1293,7 @@ const LeSlot = class {
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: 'e89effa647f07ae271cffc05aad6730b51da6447', class: {
+        return (h(Host, { key: 'da1fce97fbec16e12affe4d53272f406379c229c', class: {
                 'admin-mode': this.adminMode,
                 'invalid-html': !this.isValidHtml,
             }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
@@ -1116,6 +1349,10 @@ const LeStringInput = class {
         this.leInput = createEvent(this, "input");
     }
     get el() { return getElement(this); }
+    /**
+     * Pass the ref of the input element to the parent component
+     */
+    inputRef;
     /**
      * Mode of the popover should be 'default' for internal use
      */
@@ -1148,6 +1385,10 @@ const LeStringInput = class {
      * Placeholder text
      */
     placeholder;
+    /**
+     * Hide description slot
+     */
+    hideDescription = false;
     /**
      * Whether the input is disabled
      */
@@ -1174,7 +1415,7 @@ const LeStringInput = class {
         this.leInput.emit({
             value: this.value,
             name: this.name,
-            externalId: this.externalId
+            externalId: this.externalId,
         });
     };
     handleChange = (ev) => {
@@ -1183,17 +1424,21 @@ const LeStringInput = class {
         this.leChange.emit({
             value: this.value,
             name: this.name,
-            externalId: this.externalId
+            externalId: this.externalId,
         });
     };
     handleClick = (ev) => {
         ev.stopPropagation();
     };
     render() {
-        return (h("le-component", { key: 'd0c69370dae2d1fee5700954e4823d2a03a51331', component: "le-string-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '4acae8d3c34da2a86970a616c493ff210d561f5f', class: "le-input-wrapper" }, this.label && (h("label", { key: '609191b45187b6b1a65d05cd594b149760ac6882', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '36b4caff4468ac7421db03f811cb3ef4a622b001', class: "le-input-container" }, this.iconStart && (h("span", { key: '344f88887fe8270bbef7e26ec1ad5da9fae1f8e4', class: "icon-start" }, this.iconStart)), h("input", { key: '4ba7beeddd7fb3cf23d03e029d11a804764cdd6e', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: '7cdd4b52c3e1a1b18b19e697bdb42431941bba01', class: "icon-end" }, this.iconEnd))), h("div", { key: '113a75aa413e4d95300aeaa97d1ce7a75cf68c7a', class: "le-input-description" }, h("le-slot", { key: '0b37fc14e6df68f6c44cf9001d63a70f019e1cc3', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2674056dc915fabdb4fcbcaa13294a116b9509a6', name: "description" }))))));
+        return (h("le-component", { key: '51f1342de987ff5431a982f472106e1e34868b3a', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: '2c5ad62aff36c5af5a3a5f1eab2038ba15210f89', class: "le-input-wrapper" }, this.label && (h("label", { key: 'bdcd6967df6fef291d5938c04f2fa4bd4a8f3925', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '9bf86514adc36c1f2a112ff981befbd1d95b1d0c', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: '8d5d2221f4361f164df89e34579997f3c99bb9f8', class: "icon-start" }, this.iconStart), h("input", { key: '9cad21ae3f64608754c1f147b61bd1db42fd850c', ref: el => {
+                if (this.inputRef) {
+                    this.inputRef(el);
+                }
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: '39598782f14338e64567227f4df177af6092827c', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '2ad752082be8c3aba9cc611eb93eeb41c3bfa994', class: "le-input-description" }, h("le-slot", { key: 'd42c8a263f3b0542b0a14860ad2f49b2ee4954a5', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '4b689e56d07f003f38d28201b0dee597dbc2f955', name: "description" })))))));
     }
 };
 LeStringInput.style = leStringInputCss;
 
-export { LeButton as le_button, LeCheckbox as le_checkbox, LeComponent as le_component, LePopover as le_popover, LeSlot as le_slot, LeStringInput as le_string_input };
-//# sourceMappingURL=le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map
+export { LeButton as le_button, LeCheckbox as le_checkbox, LeComponent as le_component, LePopover as le_popover, LePopup as le_popup, LeSlot as le_slot, LeStringInput as le_string_input };
+//# sourceMappingURL=le-button.le-checkbox.le-component.le-popover.le-popup.le-slot.le-string-input.entry.js.map

package/dist/esm/le-card.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, j as getElement, k as h } from './index-CwNQ1GTa.js';
-import { c as classnames } from './utils-Cf7fMI0j.js';
+import { r as registerInstance, c as getElement, h } from './index-DzgCnDLJ.js';
+import { c as classnames } from './utils-Dp5xFMCl.js';
 
 const leCardDefaultCss = ":host{display:block;--le-card-bg:var(--le-color-surface);--le-card-border-radius:var(--le-radius-lg);--le-card-shadow:var(--le-shadow-md);--le-card-shadow-elevated:var(--le-shadow-lg);--le-card-shadow-hover:var(--le-shadow-xl);--le-card-padding:var(--le-space-md);--le-card-border-color:var(--le-color-border);--le-card-transition:var(--le-transition-normal)}.card{background:var(--le-card-bg);border-radius:var(--le-card-border-radius);overflow:hidden;color:var(--le-color-text);box-shadow:var(--le-card-shadow)}:host>le-component.variant-outlined .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host>le-component.variant-elevated .card{box-shadow:var(--le-card-shadow-elevated)}:host>le-component.interactive .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host>le-component.interactive .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host>le-component.interactive .card:focus-visible{outline:2px solid var(--le-color-border-focus);outline-offset:2px}.card-header{padding:var(--le-card-padding);padding-bottom:0}.card-header:empty{display:none}.card-content{padding:var(--le-card-padding)}.card-footer{padding:var(--le-card-padding);padding-top:0}.card-footer:empty{display:none}";