le-kit 0.1.14 → 0.1.16

package/dist/{core/components → components}/le-button2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath, Host, Fragment } from '@stencil/core/internal/client';
 import { h as classnames, o as observeModeChanges, f as getLeKitConfig } from './utils.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
+import { a as leConfirm } from './le-popup.api.js';
+import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$7 } from './le-popover2.js';
 
 const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
 
@@ -15,6 +17,10 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
         this.leInput = createEvent(this, "input", 7);
     }
     get el() { return this; }
+    /**
+     * Pass the ref of the input element to the parent component
+     */
+    inputRef;
     /**
      * Mode of the popover should be 'default' for internal use
      */
@@ -47,6 +53,10 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
      * Placeholder text
      */
     placeholder;
+    /**
+     * Hide description slot
+     */
+    hideDescription = false;
     /**
      * Whether the input is disabled
      */
@@ -73,7 +83,7 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
         this.leInput.emit({
             value: this.value,
             name: this.name,
-            externalId: this.externalId
+            externalId: this.externalId,
         });
     };
     handleChange = (ev) => {
@@ -82,17 +92,22 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
         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: 'c51b121a5ff8458f80de07929467d92cff44de9b', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: '450fa313236401fcb762267f426d0556f90ef200', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c01ed376e563f472d84c9943a4a542c1ec2cb39c', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'e41a98671f3bc61e06f66c773536967d60c97df0', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: 'c6eb682444e091378281b7a2e739ef872ca28973', class: "icon-start" }, this.iconStart), h("input", { key: 'bc7f9055dcae290e132f4c91887e5f90427209d4', 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: '3470d5c95e208e52b1913369d734e1d741164633', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '97a123be35907f950c7480352cee29c32e486fe4', class: "le-input-description" }, h("le-slot", { key: '490c2a425b3b58f050aced5dcffc530f624c0957', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'a34ff8c6300a36d6c65ca5d9a77352459f1c85cc', name: "description" })))))));
     }
     static get style() { return leStringInputCss; }
 }, [769, "le-string-input", {
+        "inputRef": [16],
         "mode": [1537],
         "value": [1537],
         "name": [1],
@@ -101,15 +116,16 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
         "iconStart": [1, "icon-start"],
         "iconEnd": [1, "icon-end"],
         "placeholder": [1],
+        "hideDescription": [4, "hide-description"],
         "disabled": [4],
         "readonly": [4],
         "externalId": [1, "external-id"]
     }]);
-function defineCustomElement$4() {
+function defineCustomElement$6() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-string-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    const components = ["le-string-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-string-input":
             if (!customElements.get(tagName)) {
@@ -133,19 +149,29 @@ function defineCustomElement$4() {
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
-        case "le-slot":
+        case "le-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "le-string-input":
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
     } });
 }
 
@@ -488,7 +514,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: '0ffbcff05009d390a4de52aac1395c4c769ed948', class: {
+        return (h(Host, { key: '938f14c8d8e46d834031cbfab6756a55bc59307d', 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', {
@@ -550,11 +576,11 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
         "availableComponents": [32],
         "pickerOpen": [32]
     }]);
-function defineCustomElement$3() {
+function defineCustomElement$5() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-slot", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    const components = ["le-slot", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-slot":
             if (!customElements.get(tagName)) {
@@ -578,19 +604,576 @@ function defineCustomElement$3() {
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
+            }
+            break;
+        case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
             }
             break;
         case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+    } });
+}
+
+const leSelectCss = ":host{display:inline-block;min-width:150px;--le-select-color:var(--le-color-text, #1f2937);--le-select-border-radius:var(--le-radius-md);--le-select-content-padding:var(--le-spacing-2)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.select-trigger{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0;--le-button-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);font-size:var(--le-select-font-size, 0.875rem);font-family:inherit;line-height:1.4;color:var(--le-select-color);background:var(--le-select-bg, var(--le-color-surface, #fff));border-radius:var(--le-select-border-radius);cursor:pointer;text-align:left;transition:border-color 0.15s ease, box-shadow 0.15s ease}.select-trigger:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.select-trigger:not(.has-value) .trigger-label{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.trigger-icon-end{width:16px;height:16px}.trigger-icon img{width:100%;height:100%;object-fit:contain}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--le-color-text)}.trigger-label::not(.has-value){color:var(--le-color-text-disabled, #9ca3af)}le-button::part(icon-end){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;transition:transform 0.2s ease}le-button::part(icon-end) svg{width:1rem;height:1rem}le-button.is-open::part(icon-end){transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}";
+
+const LeSelect = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "leChange", 7);
+        this.leOpen = createEvent(this, "leOpen", 7);
+        this.leClose = createEvent(this, "leClose", 7);
+    }
+    get el() { return this; }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected value.
+     */
+    value;
+    /**
+     * Placeholder text when no option is selected.
+     */
+    placeholder = 'Select an option';
+    /**
+     * Whether the select is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the select should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the select.
+     */
+    size = 'medium';
+    /**
+     * Visual variant of the select.
+     */
+    variant = 'default';
+    /**
+     * Whether the input is searchable.
+     */
+    searchable = false;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText = 'No results found';
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open = false;
+    /**
+     * Emitted when the selected value changes.
+     */
+    leChange;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    selectedOption;
+    searchQuery = '';
+    dropdownEl;
+    inputEl;
+    handleValueChange() {
+        this.updateSelectedOption();
+    }
+    handleOptionsChange() {
+        this.updateSelectedOption();
+    }
+    componentWillLoad() {
+        this.updateSelectedOption();
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    updateSelectedOption() {
+        if (this.value !== undefined) {
+            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
+        }
+        else {
+            this.selectedOption = undefined;
+        }
+    }
+    filterOption = (option, query) => {
+        if (!query)
+            return true;
+        const searchLower = query.toLowerCase();
+        return (option.label.toLowerCase().includes(searchLower) ||
+            (option.description?.toLowerCase().includes(searchLower) ?? false));
+    };
+    handleOptionSelect = (e) => {
+        this.value = e.detail.value;
+        this.selectedOption = e.detail.option;
+        this.leChange.emit(e.detail);
+    };
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+        // Focus search input if searchable
+        if (this.searchable) {
+            setTimeout(() => {
+                this.inputEl?.focus();
+            }, 50);
+        }
+    };
+    handleDropdownClose = () => {
+        this.open = false;
+        this.leClose.emit();
+    };
+    handleTriggerClick = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.toggle();
+        }
+    };
+    handleTriggerKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.dropdownEl?.show();
+        }
+    };
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchQuery = target.value;
+    };
+    /**
+     * Opens the dropdown.
+     */
+    async showDropdown() {
+        await this.dropdownEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hideDropdown() {
+        await this.dropdownEl?.hide();
+    }
+    renderIcon(icon) {
+        if (!icon)
+            return null;
+        if (icon.startsWith('http') || icon.startsWith('/')) {
+            return h("img", { class: "trigger-icon", src: icon, alt: "" });
+        }
+        return h("span", { class: "trigger-icon" }, icon);
+    }
+    render() {
+        const hasValue = this.selectedOption !== undefined;
+        return (h("le-component", { key: 'f41bf4f086925b6b37a0131a51e4f7e354797ed5', component: "le-select" }, h("le-dropdown-base", { key: '08db701f6b1f7e2c428ea0cc9ee4046c22759757', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: 'f994667c5360905a9e6340f0f0331bea55523418', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+                'select-trigger': true,
+                'has-value': hasValue,
+                'is-open': this.open,
+            }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
+                ? this.renderIcon(this.selectedOption.iconStart)
+                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: 'c807e00d21193e558dcf1b601c4aa5f78144fd14', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'c285d28f7b0093580484b8d077c4f2ddd014aa2e', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '1dd31e5840a29e3a7e181c80182c20ea5ca28bcb', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '0acb27fafae47b56808e1b1ee20e45c7cb0cfa3e', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+    static get style() { return leSelectCss; }
+}, [769, "le-select", {
+        "options": [1],
+        "value": [1032],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [4],
+        "name": [1],
+        "fullWidth": [4, "full-width"],
+        "size": [513],
+        "variant": [513],
+        "searchable": [4],
+        "emptyText": [1, "empty-text"],
+        "open": [1540],
+        "selectedOption": [32],
+        "searchQuery": [32],
+        "showDropdown": [64],
+        "hideDropdown": [64]
+    }, undefined, {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }]);
+function defineCustomElement$4() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-select", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeSelect);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
+        case "le-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+    } });
+}
+
+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 = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leConfirm = createEvent(this, "leConfirm", 7);
+        this.leCancel = createEvent(this, "leCancel", 7);
+        this.leOpen = createEvent(this, "leOpen", 7);
+        this.leClose = createEvent(this, "leClose", 7);
+    }
+    get el() { return 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()))));
+    }
+    static get style() { return lePopupCss; }
+}, [769, "le-popup", {
+        "mode": [1537],
+        "open": [1540],
+        "type": [1],
+        "popupTitle": [1, "popup-title"],
+        "message": [1],
+        "modal": [4],
+        "position": [1],
+        "confirmText": [1, "confirm-text"],
+        "cancelText": [1, "cancel-text"],
+        "placeholder": [1],
+        "defaultValue": [1, "default-value"],
+        "closeOnBackdrop": [4, "close-on-backdrop"],
+        "inputValue": [32],
+        "show": [64],
+        "hide": [64]
+    }]);
+function defineCustomElement$3() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-popup", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-popup":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LePopup);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
     } });
 }
 
@@ -778,6 +1361,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         }
         // 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
@@ -787,7 +1371,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
             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;
@@ -812,7 +1396,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         const enumMatch = type.match(/^'[^']+'/);
         if (enumMatch) {
             const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("le-select", { options: [...options.map(opt => ({ label: opt, value: opt }))], "full-width": true, value: value ?? attr.default?.replace(/'/g, ''), placeholder: attr.default?.replace(/'/g, ''), onLeChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
         }
         // Boolean type
         if (type === 'boolean') {
@@ -849,7 +1433,7 @@ function defineCustomElement$2() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-component", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    const components = ["le-component", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-component":
             if (!customElements.get(tagName)) {
@@ -871,21 +1455,36 @@ function defineCustomElement$2() {
                 defineCustomElement$2();
             }
             break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
-        case "le-slot":
+        case "le-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "le-string-input":
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
     } });
 }
 
@@ -956,7 +1555,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-checkbox":
             if (!customElements.get(tagName)) {
@@ -980,23 +1579,33 @@ function defineCustomElement$1() {
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
-        case "le-slot":
+        case "le-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "le-string-input":
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
     } });
 }
 
-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 = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLElement {
     constructor(registerHost) {
@@ -1036,9 +1645,18 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
      */
     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;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
      */
-    iconOnly = false;
+    iconEnd;
     /**
      * Whether the button is disabled
      */
@@ -1056,6 +1674,11 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
      * 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.
@@ -1080,9 +1703,9 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
         });
         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)))))));
     }
-    static get style() { return leButtonDefaultCss; }
+    static get style() { return leButtonCss; }
 }, [769, "le-button", {
         "mode": [1537],
         "variant": [1],
@@ -1090,17 +1713,20 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
         "size": [1],
         "selected": [4],
         "fullWidth": [516, "full-width"],
-        "iconOnly": [4, "icon-only"],
+        "iconOnly": [1, "icon-only"],
+        "iconStart": [1, "icon-start"],
+        "iconEnd": [1, "icon-end"],
         "disabled": [4],
         "type": [1],
         "href": [1],
-        "target": [1]
+        "target": [1],
+        "align": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-button", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    const components = ["le-button", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-button":
             if (!customElements.get(tagName)) {
@@ -1124,23 +1750,33 @@ function defineCustomElement() {
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
-        case "le-slot":
+        case "le-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "le-string-input":
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
     } });
 }
 
-export { LeButton as L, defineCustomElement$3 as a, defineCustomElement$2 as b, defineCustomElement$1 as c, defineCustomElement$4 as d, defineCustomElement as e, LeCheckbox as f, LeComponent as g, LeSlot as h, LeStringInput as i };
+export { LeButton as L, defineCustomElement$5 as a, defineCustomElement$4 as b, defineCustomElement$3 as c, defineCustomElement$6 as d, defineCustomElement$2 as e, defineCustomElement$1 as f, defineCustomElement as g, LeCheckbox as h, LeComponent as i, LePopup as j, LeSelect as k, LeSlot as l, LeStringInput as m };
 //# sourceMappingURL=le-button2.js.map
 
 //# sourceMappingURL=le-button2.js.map