le-kit 0.1.4 → 0.1.5

package/dist/{collection/components/le-slot/le-slot.js → le-kit/le-slot.entry.js}

@@ -1,20 +1,14 @@
-import { h, Host } from "@stencil/core";
-import { classnames, observeModeChanges } from "../../utils/utils";
-/**
- * Slot placeholder component for admin/CMS mode.
- *
- * This component renders a visual placeholder for slots when in admin mode,
- * allowing CMS systems to show available drop zones for content or inline editing.
- *
- * In non-admin mode, this component renders nothing and acts as a passthrough.
- *
- * @slot - Default slot for placeholder content or drop zone UI
- *
- * @cmsInternal true
- * @cmsCategory System
- */
-export class LeSlot {
-    el;
+import { r as registerInstance, k as createEvent, h as getElement, l as getAssetPath, i as h, j as Host } from './index-Da-89pOc.js';
+import { o as observeModeChanges, c as classnames } from './utils-FDOApZ53.js';
+
+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 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leSlotChange = createEvent(this, "leSlotChange", 7);
+    }
+    get el() { return getElement(this); }
     /**
      * The type of slot content.
      * - `slot`: Default, shows a dropzone for components (default)
@@ -105,7 +99,7 @@ export class LeSlot {
     leSlotChange;
     disconnectModeObserver;
     connectedCallback() {
-        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
             const wasAdmin = this.adminMode;
             this.adminMode = mode === 'admin';
             // When entering admin mode, read content from slotted elements
@@ -209,8 +203,7 @@ export class LeSlot {
                 if (!this.name && rootNode instanceof ShadowRoot) {
                     const hostComponent = rootNode.host;
                     Array.from(hostComponent.childNodes).forEach(node => {
-                        if (node.nodeType === Node.TEXT_NODE ||
-                            (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
+                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
                             node.remove();
                         }
                     });
@@ -230,7 +223,7 @@ export class LeSlot {
         this.leSlotChange.emit({
             name: this.name,
             value: this.textValue,
-            isValid: this.isValidHtml
+            isValid: this.isValidHtml,
         });
     };
     /**
@@ -266,7 +259,8 @@ export class LeSlot {
      */
     async loadAvailableComponents() {
         try {
-            const response = await fetch('/custom-elements.json');
+            const manifestPath = getAssetPath('assets/custom-elements.json');
+            const response = await fetch(manifestPath);
             const manifest = await response.json();
             const components = [];
             const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
@@ -289,7 +283,7 @@ export class LeSlot {
                     }
                 }
             }
-            this.availableComponents = components;
+            this.availableComponents = components || [];
         }
         catch (error) {
             console.warn('[le-slot] Failed to load component manifest:', error);
@@ -341,17 +335,17 @@ export class LeSlot {
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: 'bae03733e0443c10f1abe8b4c846d3eae0723d3d', class: {
+        return (h(Host, { key: 'af150a31db62d9c3df9a8c10be34b9bb6756d07f', class: {
                 'admin-mode': this.adminMode,
-                'invalid-html': !this.isValidHtml
+                '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', {
                 'le-slot-header-no-label': !displayLabel,
                 'le-slot-header-text': this.type === 'text',
-                'le-slot-header-error': !this.isValidHtml
-            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => this.pickerOpen = true, onLePopoverClose: () => this.pickerOpen = false }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
+                'le-slot-header-error': !this.isValidHtml,
+            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => (this.pickerOpen = true), onLePopoverClose: () => (this.pickerOpen = false) }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
                 this.addComponent(component.tagName);
                 this.pickerOpen = false;
-            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && (h("span", { class: "le-slot-picker-desc" }, component.description)))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
+            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
         // In default mode, just pass through the slot - slotted content renders naturally
         // Note: We use unnamed slot here because named slots from parent component
         // are passed as le-slot's light DOM children
@@ -362,7 +356,7 @@ export class LeSlot {
         // Wrap in a hidden div since slot elements can't have style prop in Stencil
         // Note: We use unnamed slot here because named slots from parent component
         // are passed as le-slot's light DOM children
-        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: this.handleSlotChange })));
+        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
         switch (this.type) {
             case 'text':
                 return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
@@ -382,255 +376,12 @@ export class LeSlot {
                         }
                     });
                 }
-                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: this.handleSlotChange })));
+                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
         }
     }
-    static get is() { return "le-slot"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-slot.default.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-slot.default.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'slot' | 'text' | 'textarea'",
-                    "resolved": "\"slot\" | \"text\" | \"textarea\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'slot'"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label to display in admin mode.\nIf not provided, the slot name will be used."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Description of what content this slot accepts.\nShown in admin mode to guide content editors."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description"
-            },
-            "allowedComponents": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "example",
-                            "text": "\"le-card,le-button,le-text\""
-                        }],
-                    "text": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allowed-components"
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether multiple components can be dropped in this slot."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "true"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether this slot is required to have content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text for text/textarea inputs in admin mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
-            },
-            "tag": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "example",
-                            "text": "\"h3\" - creates <h3 slot=\"header\">content</h3>"
-                        }, {
-                            "name": "example",
-                            "text": "\"p\" - creates <p slot=\"content\">content</p>"
-                        }],
-                    "text": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tag"
-            },
-            "slotStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\"."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "slot-style"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "adminMode": {},
-            "textValue": {},
-            "isValidHtml": {},
-            "availableComponents": {},
-            "pickerOpen": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leSlotChange",
-                "name": "leSlotChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when text content changes in admin mode.\nThe event detail contains the new text value and validity."
-                },
-                "complexType": {
-                    "original": "{ name: string; value: string; isValid: boolean }",
-                    "resolved": "{ name: string; value: string; isValid: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-slot.js.map
+    static get assetsDirs() { return ["../../assets"]; }
+};
+LeSlot.style = leSlotDefaultCss;
+
+export { LeSlot as le_slot };
+//# sourceMappingURL=le-slot.entry.esm.js.map

package/dist/{esm → le-kit}/le-stack.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h as getElement, i as h } from './index-D71TXvJa.js';
-import { c as classnames } from './utils-CJLZrrdC.js';
+import { r as registerInstance, h as getElement, i as h } from './index-Da-89pOc.js';
+import { c as classnames } from './utils-FDOApZ53.js';
 
 const leStackDefaultCss = ":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";
 
@@ -130,4 +130,4 @@ const LeStack = class {
 LeStack.style = leStackDefaultCss;
 
 export { LeStack as le_stack };
-//# sourceMappingURL=le-stack.entry.js.map
+//# sourceMappingURL=le-stack.entry.esm.js.map

package/dist/le-kit/le-string-input.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-string-input.entry.esm.js","sources":["src/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src/components/le-string-input/le-string-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  min-height: var(--le-input-height);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  width: 100%;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-description::has(le-slot > slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-string-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/le-kit/le-string-input.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, k as createEvent, h as getElement, i as h } from './index-Da-89pOc.js';
+import { c as classnames } from './utils-FDOApZ53.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}";
+
+const LeStringInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leChange = createEvent(this, "change", 7);
+        this.leInput = createEvent(this, "input", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * The value of the input
+     */
+    value;
+    /**
+     * The name of the input
+     */
+    name;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type = 'text';
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Icon for the start icon
+     */
+    iconStart;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd;
+    /**
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            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" }))))));
+    }
+};
+LeStringInput.style = leStringInputCss;
+
+export { LeStringInput as le_string_input };
+//# sourceMappingURL=le-string-input.entry.esm.js.map

package/dist/{esm → le-kit}/le-text.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h as getElement, i as h, H as Host } from './index-D71TXvJa.js';
-import { o as observeModeChanges } from './utils-CJLZrrdC.js';
+import { r as registerInstance, h as getElement, i as h, j as Host } from './index-Da-89pOc.js';
+import { o as observeModeChanges } from './utils-FDOApZ53.js';
 
 const leTextDefaultCss = ":host{display:block}:host([hidden]){display:none}.le-text{margin:0;color:var(--le-text-color, var(--le-color-text));font-family:var(--le-font-family);line-height:var(--le-text-line-height, 1.5)}.variant-p{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-normal, 400);color:var(--le-color-text)}.variant-h1{font-size:var(--le-font-size-4xl, 2.5rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.2;color:var(--le-color-text);letter-spacing:-0.02em}.variant-h2{font-size:var(--le-font-size-3xl, 2rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.25;color:var(--le-color-text);letter-spacing:-0.01em}.variant-h3{font-size:var(--le-font-size-2xl, 1.5rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.3;color:var(--le-color-text)}.variant-h4{font-size:var(--le-font-size-xl, 1.25rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.35;color:var(--le-color-text)}.variant-h5{font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.4;color:var(--le-color-text)}.variant-h6{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.45;color:var(--le-color-text);text-transform:uppercase;letter-spacing:0.05em}.variant-code{font-family:var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);font-size:var(--le-font-size-sm, 0.875rem);background:var(--le-color-surface-alt, #f5f5f5);padding:var(--le-space-md);border-radius:var(--le-radius-md);overflow-x:auto;white-space:pre-wrap;color:var(--le-color-text)}.variant-quote{font-size:var(--le-font-size-lg, 1.125rem);font-style:italic;color:var(--le-color-text-secondary);border-left:4px solid var(--le-color-primary);padding-left:var(--le-space-lg);margin-left:0;margin-right:0}.variant-label{font-size:var(--le-font-size-sm, 0.875rem);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text-secondary);text-transform:uppercase;letter-spacing:0.05em}.variant-small{font-size:var(--le-font-size-sm, 0.875rem);color:var(--le-color-text-secondary)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate.max-lines-2,.truncate.max-lines-3,.truncate.max-lines-4,.truncate.max-lines-5{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical}.truncate.max-lines-2{-webkit-line-clamp:2;line-clamp:2}.truncate.max-lines-3{-webkit-line-clamp:3;line-clamp:3}.truncate.max-lines-4{-webkit-line-clamp:4;line-clamp:4}.truncate.max-lines-5{-webkit-line-clamp:5;line-clamp:5}:host([align=\"center\"]) .le-text{text-align:center}:host([align=\"right\"]) .le-text{text-align:right}:host([align=\"justify\"]) .le-text{text-align:justify}.le-text a{color:var(--le-color-primary);text-decoration:underline}.le-text a:hover{color:var(--le-color-primary-dark)}.le-text strong,.le-text b{font-weight:var(--le-font-weight-bold, 700)}.le-text em,.le-text i{font-style:italic}.le-text u{text-decoration:underline}.le-text s,.le-text strike{text-decoration:line-through}";
 
@@ -330,4 +330,4 @@ const LeText = class {
 LeText.style = leTextDefaultCss;
 
 export { LeText as le_text };
-//# sourceMappingURL=le-text.entry.js.map
+//# sourceMappingURL=le-text.entry.esm.js.map

package/dist/{esm → le-kit}/le-turntable.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h as getElement, i as h } from './index-D71TXvJa.js';
+import { r as registerInstance, h as getElement, i as h } from './index-Da-89pOc.js';
 
 const leTurntableCss = ":host{display:block;cursor:grab}div.turntable{width:100%;height:100%;padding:1px}";
 
@@ -134,4 +134,4 @@ const LeTurntable = class {
 LeTurntable.style = leTurntableCss;
 
 export { LeTurntable as le_turntable };
-//# sourceMappingURL=le-turntable.entry.js.map
+//# sourceMappingURL=le-turntable.entry.esm.js.map

package/dist/{esm/utils-CJLZrrdC.js → le-kit/utils-FDOApZ53.js}

@@ -1,4 +1,4 @@
-import { a as getMode } from './index-D71TXvJa.js';
+import { a as getMode } from './index-Da-89pOc.js';
 
 /**
  * Utility functions for le-kit components
@@ -141,6 +141,6 @@ function classnames(...classes) {
 }
 
 export { classnames as c, generateId as g, observeModeChanges as o, parseCommaSeparated as p, slotHasContent as s };
-//# sourceMappingURL=utils-CJLZrrdC.js.map
+//# sourceMappingURL=utils-FDOApZ53.js.map
 
-//# sourceMappingURL=utils-CJLZrrdC.js.map
+//# sourceMappingURL=utils-FDOApZ53.js.map

package/dist/le-kit/{utils-apol-Xc_.js.map → utils-FDOApZ53.js.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-apol-Xc_.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils-FDOApZ53.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":[],"mappings":";;AAAA;;AAEG;AAIH;;AAEG;AACa,SAAA,UAAU,CAAC,MAAA,GAAiB,IAAI,EAAA;IAC9C,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;AAClE;AAEA;;AAEG;AACG,SAAU,mBAAmB,CAAC,KAAyB,EAAA;AAC3D,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,OAAO;SACJ,KAAK,CAAC,GAAG;SACT,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE;SACjB,MAAM,CAAC,OAAO,CAAC;AACpB;AAEA;;AAEG;SACa,cAAc,CAAC,EAAe,EAAE,WAAmB,EAAE,EAAA;AACnE,IAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAU,OAAA,EAAA,QAAQ,CAAI,EAAA,CAAA,GAAG,cAAc;IACnE,OAAO,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,IAAI;AAC5C;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACa,SAAA,kBAAkB,CAChC,EAAe,EACf,QAAgC,EAAA;;AAGhC,IAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;;AAGrB,IAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACvB,KAAC,CAAC;;AAGF,IAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE;AACnB,QAAA,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,KAAA,CAAC;;AAGF,IAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;AACzC,QAAA,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,KAAA,CAAC;;IAGF,IAAI,OAAO,GAAgB,EAAE;IAC7B,OAAO,OAAO,EAAE;QACd,IAAI,OAAO,YAAY,OAAO,IAAI,OAAO,CAAC,aAAa,EAAE;AACvD,YAAA,OAAO,GAAG,OAAO,CAAC,aAAa;AAC/B,YAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;AACxB,gBAAA,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,aAAA,CAAC;;AAEF,YAAA,IAAK,OAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;gBAC7C;;;aAEG;;AAEL,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,EAAE;AAClC,YAAA,IAAI,IAAI,YAAY,UAAU,EAAE;;AAE9B,gBAAA,OAAO,GAAG,IAAI,CAAC,IAAI;AACnB,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,iBAAA,CAAC;;AAEF,gBAAA,IAAK,OAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;oBAC7C;;;iBAEG;gBACL;;;;;AAMN,IAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC;AAEA;;;;;AAKG;AACa,SAAA,UAAU,CAAC,GAAG,OAAc,EAAA;IAC1C,MAAM,MAAM,GAAa,EAAE;AAE3B,IAAA,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACpB,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC3B,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;AACX,aAAA,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC7B,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC;;AAC1B,aAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAClC,YAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;gBAC3C,IAAI,KAAK,EAAE;AACT,oBAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;AAEpB,aAAC,CAAC;;AAEN,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "le-kit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Themable web components library with CMS admin mode support",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",