npm - le-kit - Versions diffs - 0.1.13 → 0.1.14 - Mend

le-kit 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/dist/core/components/le-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"le-popup.js","mappings":"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","names":["LePopup","__stencil_proxyCustomElement"],"sources":["src-core/components/le-popup/le-popup.css?tag=le-popup&encapsulation=shadow","src-core/components/le-popup/le-popup.tsx"],"sourcesContent":["/* ============================================\n le-popup.css\n Popup/Dialog component using native <dialog>\n Uses CSS variables for easy theming\n ============================================ /\n\n:host {\n display: contents;\n}\n\n/ ============================================\n Native Dialog Element\n ============================================ /\n\n.le-popup-dialog {\n / Reset default dialog styles /\n position: fixed;\n z-index: 100;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: 0;\n border: none;\n background: transparent;\n max-width: none;\n max-height: none;\n overflow: visible;\n \n / Sizing variables /\n --_popup-min-width: var(--le-popup-min-width, 320px);\n --_popup-max-width: var(--le-popup-max-width, min(500px, 90vw));\n --_popup-min-height: var(--le-popup-min-height, auto);\n}\n\n/ Backdrop styling (native ::backdrop pseudo-element) /\n.le-popup-dialog::backdrop {\n background: var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));\n animation: le-popup-backdrop-fade 0.2s ease-out;\n}\n\n@keyframes le-popup-backdrop-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/ ============================================\n Position Variants\n Using margin to position within viewport\n ============================================ /\n\n/ Center (default) /\n.le-popup-position-center {\n margin: auto;\n}\n\n/ Top positions /\n.le-popup-position-top {\n margin: var(--le-space-2xl, 48px) auto auto auto;\n}\n\n.le-popup-position-top-left {\n margin: var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px);\n}\n\n.le-popup-position-top-right {\n margin: var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto;\n}\n\n/ Bottom positions /\n.le-popup-position-bottom {\n margin: auto auto var(--le-space-2xl, 48px) auto;\n}\n\n.le-popup-position-bottom-left {\n margin: auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px);\n}\n\n.le-popup-position-bottom-right {\n margin: auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto;\n}\n\n/ ============================================\n Container (the visible dialog box)\n ============================================ /\n\n.le-popup-container {\n display: flex;\n flex-direction: column;\n min-width: var(--_popup-min-width);\n max-width: var(--_popup-max-width);\n min-height: var(--_popup-min-height);\n max-height: calc(100vh - var(--le-space-2xl, 48px) 2);\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 12px);\n box-shadow: var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n color: var(--le-color-text, #333);\n \n /* Animation /\n animation: le-popup-appear 0.2s ease-out;\n}\n\n@keyframes le-popup-appear {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/ ============================================\n Header\n ============================================ /\n\n.le-popup-header {\n flex-shrink: 0;\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n font-size: var(--le-font-size-lg, 1.125rem);\n font-weight: var(--le-font-weight-semibold, 600);\n color: var(--le-color-text, #333);\n}\n\n/ ============================================\n Body\n ============================================ /\n\n.le-popup-body {\n flex: 1;\n padding: var(--le-space-lg, 24px);\n overflow-y: auto;\n}\n\n.le-popup-message {\n margin: 0;\n font-size: var(--le-font-size-md, 1rem);\n line-height: var(--le-line-height-relaxed, 1.6);\n color: var(--le-color-text, #333);\n}\n\n/ When there's both message and slot content /\n.le-popup-message + ::slotted() {\n margin-top: var(--le-space-md, 16px);\n}\n\n/* ============================================\n Input (for prompt type)\n ============================================ /\n\n.le-popup-input {\n display: block;\n width: 100%;\n margin-top: var(--le-space-md, 16px);\n padding: var(--le-space-sm, 8px) var(--le-space-md, 16px);\n font-family: inherit;\n font-size: var(--le-font-size-md, 1rem);\n color: var(--le-color-text, #333);\n background: var(--le-color-background, #fff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 8px);\n outline: none;\n transition: border-color var(--le-transition-fast, 0.15s ease),\n box-shadow var(--le-transition-fast, 0.15s ease);\n box-sizing: border-box;\n}\n\n.le-popup-input:focus {\n border-color: var(--le-color-primary, #2196f3);\n box-shadow: 0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2));\n}\n\n.le-popup-input::placeholder {\n color: var(--le-color-text-muted, #999);\n}\n\n/ ============================================\n Footer (buttons)\n ============================================ /\n\n.le-popup-footer {\n flex-shrink: 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--le-space-sm, 8px);\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-top: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n}\n\n/ ============================================\n Buttons\n ============================================ /\n\n.le-popup-btn {\n min-width: 80px;\n}\n\n/ ============================================\n Responsive adjustments\n ============================================ /\n\n@media (max-width: 480px) {\n .le-popup-container {\n min-width: calc(100vw - var(--le-space-md, 16px) 2);\n max-width: calc(100vw - var(--le-space-md, 16px) * 2);\n }\n \n .le-popup-footer {\n flex-direction: column-reverse;\n }\n \n .le-popup-btn {\n width: 100%;\n }\n}","import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\n\n/*\n Popup type determines the buttons shown\n /\nexport type PopupType = 'alert' \| 'confirm' \| 'prompt' \| 'custom';\n\n/\n Popup position on the screen\n /\nexport type PopupPosition = 'center' \| 'top' \| 'bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right';\n\n/\n Result returned by the popup when closed\n /\nexport interface PopupResult {\n confirmed: boolean;\n value?: string;\n}\n\n/\n A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n * \n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically \n * via leAlert(), leConfirm(), lePrompt().\n \n @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n * \n * @cmsInternal true\n * @cmsCategory System\n /\n@Component({\n tag: 'le-popup',\n styleUrl: 'le-popup.css',\n shadow: true,\n})\nexport class LePopup {\n @Element() el: HTMLElement;\n\n /\n Whether the popup is currently visible\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n /\n @Prop() type: PopupType = 'alert';\n\n /\n Optional title for the popup header\n /\n @Prop() popupTitle?: string;\n\n /\n Message text to display (for alert/confirm/prompt types)\n /\n @Prop() message?: string;\n\n /\n Whether the popup is modal (blocks interaction with page behind)\n /\n @Prop() modal: boolean = true;\n\n /\n Position of the popup on screen\n /\n @Prop() position: PopupPosition = 'center';\n\n /\n Text for the confirm/OK button\n /\n @Prop() confirmText: string = 'OK';\n\n /\n Text for the cancel button\n /\n @Prop() cancelText: string = 'Cancel';\n\n /\n Placeholder text for prompt input\n /\n @Prop() placeholder: string = '';\n\n /\n Default value for prompt input\n /\n @Prop() defaultValue: string = '';\n\n /\n Whether clicking the backdrop closes the popup (modal only)\n /\n @Prop() closeOnBackdrop: boolean = true;\n\n /\n Internal state for prompt input value\n /\n @State() inputValue: string = '';\n\n /\n Emitted when the popup is confirmed (OK clicked)\n /\n @Event() leConfirm: EventEmitter<PopupResult>;\n\n /\n Emitted when the popup is cancelled (Cancel clicked or dismissed)\n /\n @Event() leCancel: EventEmitter<PopupResult>;\n\n /\n Emitted when the popup opens\n /\n @Event() leOpen: EventEmitter<void>;\n\n /\n Emitted when the popup closes\n /\n @Event() leClose: EventEmitter<PopupResult>;\n\n private dialogEl?: HTMLDialogElement;\n private inputEl?: HTMLInputElement;\n private resolvePromise?: (result: PopupResult) => void;\n\n componentWillLoad() {\n this.inputValue = this.defaultValue;\n }\n\n componentDidLoad() {\n // Native dialog handles Escape key automatically when modal\n // We just need to listen for the cancel event\n this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n }\n\n disconnectedCallback() {\n this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n }\n\n private handleDialogCancel = (e: Event) => {\n e.preventDefault(); // Prevent default close to handle it ourselves\n this.handleCancel();\n };\n\n /\n Opens the popup and returns a promise that resolves when closed\n /\n @Method()\n async show(): Promise<PopupResult> {\n return new Promise((resolve) => {\n this.resolvePromise = resolve;\n this.inputValue = this.defaultValue;\n this.open = true;\n \n // Use requestAnimationFrame to ensure the dialog element is rendered\n requestAnimationFrame(() => {\n if (this.dialogEl) {\n if (this.modal) {\n this.dialogEl.showModal();\n } else {\n this.dialogEl.show();\n }\n \n this.leOpen.emit();\n \n // Focus input for prompt type\n if (this.type === 'prompt' && this.inputEl) {\n this.inputEl.focus();\n this.inputEl.select();\n }\n }\n });\n });\n }\n\n /\n Closes the popup with a result\n /\n @Method()\n async hide(confirmed: boolean = false) {\n const result: PopupResult = {\n confirmed,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n \n this.dialogEl?.close();\n this.open = false;\n this.leClose.emit(result);\n \n if (this.resolvePromise) {\n this.resolvePromise(result);\n this.resolvePromise = undefined;\n }\n }\n\n private handleConfirm = () => {\n const result: PopupResult = {\n confirmed: true,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n this.leConfirm.emit(result);\n this.hide(true);\n };\n\n private handleCancel = () => {\n const result: PopupResult = {\n confirmed: false,\n value: undefined,\n };\n this.leCancel.emit(result);\n this.hide(false);\n };\n\n private handleBackdropClick = (e: MouseEvent) => {\n // Check if click was on the dialog backdrop (outside the dialog box)\n if (this.closeOnBackdrop && e.target === this.dialogEl) {\n const rect = this.dialogEl.getBoundingClientRect();\n const clickedInDialog = (\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom\n );\n if (!clickedInDialog) {\n this.handleCancel();\n }\n }\n };\n\n private handleInputChange = (e: Event) => {\n this.inputValue = (e.target as HTMLInputElement).value;\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && this.type !== 'custom') {\n e.preventDefault();\n this.handleConfirm();\n }\n };\n\n private hasSlot(name: string): boolean {\n return !!this.el.querySelector(`[slot=\"${name}\"]`);\n }\n\n private renderHeader() {\n if (this.hasSlot('header')) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n );\n }\n \n if (this.popupTitle) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n {this.popupTitle}\n </div>\n );\n }\n \n return null;\n }\n\n private renderBody() {\n return (\n <div class=\"le-popup-body\" part=\"body\">\n {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n \n {this.type === 'prompt' && (\n <input\n type=\"text\"\n class=\"le-popup-input\"\n part=\"input\"\n placeholder={this.placeholder}\n value={this.inputValue}\n onInput={this.handleInputChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) => (this.inputEl = el)}\n />\n )}\n \n {/ Default slot for custom content */}\n \n <slot></slot>\n \n </div>\n );\n }\n\n private renderFooter() {\n if (this.hasSlot('footer')) {\n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n );\n }\n \n // For custom type without footer slot, don't render default buttons\n if (this.type === 'custom') {\n return null;\n }\n \n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n {(this.type === 'confirm' \|\| this.type === 'prompt') && (\n <le-button\n variant=\"outlined\"\n part=\"button-cancel\"\n class=\"le-popup-btn\"\n onClick={this.handleCancel}\n >\n {this.cancelText}\n </le-button>\n )}\n <le-button\n variant=\"solid\"\n part=\"button-confirm\"\n class=\"le-popup-btn\"\n onClick={this.handleConfirm}\n >\n {this.confirmText}\n </le-button>\n </div>\n );\n }\n\n render() {\n const positionClass = `le-popup-position-${this.position}`;\n \n return (\n <dialog\n class={`le-popup-dialog ${positionClass}`}\n part=\"dialog\"\n ref={(el) => (this.dialogEl = el)}\n onClick={this.handleBackdropClick}\n >\n \n <div class=\"le-popup-container\" part=\"container\">\n {this.renderHeader()}\n {this.renderBody()}\n {this.renderFooter()}\n </div>\n \n </dialog>\n );\n }\n}\n"],"version":3}
1	+ {"file":"le-popup.js","mappings":"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","names":["LePopup","__stencil_proxyCustomElement"],"sources":["src/components/le-popup/le-popup.css?tag=le-popup&encapsulation=shadow","src/components/le-popup/le-popup.tsx"],"sourcesContent":["/* ============================================\n le-popup.css\n Popup/Dialog component using native <dialog>\n Uses CSS variables for easy theming\n ============================================ /\n\n:host {\n display: contents;\n}\n\n/ ============================================\n Native Dialog Element\n ============================================ /\n\n.le-popup-dialog {\n / Reset default dialog styles /\n position: fixed;\n z-index: 100;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: 0;\n border: none;\n background: transparent;\n max-width: none;\n max-height: none;\n overflow: visible;\n \n / Sizing variables /\n --_popup-min-width: var(--le-popup-min-width, 320px);\n --_popup-max-width: var(--le-popup-max-width, min(500px, 90vw));\n --_popup-min-height: var(--le-popup-min-height, auto);\n}\n\n/ Backdrop styling (native ::backdrop pseudo-element) /\n.le-popup-dialog::backdrop {\n background: var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));\n animation: le-popup-backdrop-fade 0.2s ease-out;\n}\n\n@keyframes le-popup-backdrop-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/ ============================================\n Position Variants\n Using margin to position within viewport\n ============================================ /\n\n/ Center (default) /\n.le-popup-position-center {\n margin: auto;\n}\n\n/ Top positions /\n.le-popup-position-top {\n margin: var(--le-space-2xl, 48px) auto auto auto;\n}\n\n.le-popup-position-top-left {\n margin: var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px);\n}\n\n.le-popup-position-top-right {\n margin: var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto;\n}\n\n/ Bottom positions /\n.le-popup-position-bottom {\n margin: auto auto var(--le-space-2xl, 48px) auto;\n}\n\n.le-popup-position-bottom-left {\n margin: auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px);\n}\n\n.le-popup-position-bottom-right {\n margin: auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto;\n}\n\n/ ============================================\n Container (the visible dialog box)\n ============================================ /\n\n.le-popup-container {\n display: flex;\n flex-direction: column;\n min-width: var(--_popup-min-width);\n max-width: var(--_popup-max-width);\n min-height: var(--_popup-min-height);\n max-height: calc(100vh - var(--le-space-2xl, 48px) 2);\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 12px);\n box-shadow: var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n color: var(--le-color-text, #333);\n \n /* Animation /\n animation: le-popup-appear 0.2s ease-out;\n}\n\n@keyframes le-popup-appear {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/ ============================================\n Header\n ============================================ /\n\n.le-popup-header {\n flex-shrink: 0;\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n font-size: var(--le-font-size-lg, 1.125rem);\n font-weight: var(--le-font-weight-semibold, 600);\n color: var(--le-color-text, #333);\n}\n\n/ ============================================\n Body\n ============================================ /\n\n.le-popup-body {\n flex: 1;\n padding: var(--le-space-lg, 24px);\n overflow-y: auto;\n}\n\n.le-popup-message {\n margin: 0;\n font-size: var(--le-font-size-md, 1rem);\n line-height: var(--le-line-height-relaxed, 1.6);\n color: var(--le-color-text, #333);\n}\n\n/ When there's both message and slot content /\n.le-popup-message + ::slotted() {\n margin-top: var(--le-space-md, 16px);\n}\n\n/* ============================================\n Input (for prompt type)\n ============================================ /\n\n.le-popup-input {\n display: block;\n width: 100%;\n margin-top: var(--le-space-md, 16px);\n padding: var(--le-space-sm, 8px) var(--le-space-md, 16px);\n font-family: inherit;\n font-size: var(--le-font-size-md, 1rem);\n color: var(--le-color-text, #333);\n background: var(--le-color-background, #fff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 8px);\n outline: none;\n transition: border-color var(--le-transition-fast, 0.15s ease),\n box-shadow var(--le-transition-fast, 0.15s ease);\n box-sizing: border-box;\n}\n\n.le-popup-input:focus {\n border-color: var(--le-color-primary, #2196f3);\n box-shadow: 0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2));\n}\n\n.le-popup-input::placeholder {\n color: var(--le-color-text-muted, #999);\n}\n\n/ ============================================\n Footer (buttons)\n ============================================ /\n\n.le-popup-footer {\n flex-shrink: 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--le-space-sm, 8px);\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-top: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n}\n\n/ ============================================\n Buttons\n ============================================ /\n\n.le-popup-btn {\n min-width: 80px;\n}\n\n/ ============================================\n Responsive adjustments\n ============================================ /\n\n@media (max-width: 480px) {\n .le-popup-container {\n min-width: calc(100vw - var(--le-space-md, 16px) 2);\n max-width: calc(100vw - var(--le-space-md, 16px) * 2);\n }\n \n .le-popup-footer {\n flex-direction: column-reverse;\n }\n \n .le-popup-btn {\n width: 100%;\n }\n}","import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\n\n/*\n Popup type determines the buttons shown\n /\nexport type PopupType = 'alert' \| 'confirm' \| 'prompt' \| 'custom';\n\n/\n Popup position on the screen\n /\nexport type PopupPosition = 'center' \| 'top' \| 'bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right';\n\n/\n Result returned by the popup when closed\n /\nexport interface PopupResult {\n confirmed: boolean;\n value?: string;\n}\n\n/\n A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n * \n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically \n * via leAlert(), leConfirm(), lePrompt().\n \n @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n * \n * @cmsInternal true\n * @cmsCategory System\n /\n@Component({\n tag: 'le-popup',\n styleUrl: 'le-popup.css',\n shadow: true,\n})\nexport class LePopup {\n @Element() el: HTMLElement;\n\n /\n Whether the popup is currently visible\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n /\n @Prop() type: PopupType = 'alert';\n\n /\n Optional title for the popup header\n /\n @Prop() popupTitle?: string;\n\n /\n Message text to display (for alert/confirm/prompt types)\n /\n @Prop() message?: string;\n\n /\n Whether the popup is modal (blocks interaction with page behind)\n /\n @Prop() modal: boolean = true;\n\n /\n Position of the popup on screen\n /\n @Prop() position: PopupPosition = 'center';\n\n /\n Text for the confirm/OK button\n /\n @Prop() confirmText: string = 'OK';\n\n /\n Text for the cancel button\n /\n @Prop() cancelText: string = 'Cancel';\n\n /\n Placeholder text for prompt input\n /\n @Prop() placeholder: string = '';\n\n /\n Default value for prompt input\n /\n @Prop() defaultValue: string = '';\n\n /\n Whether clicking the backdrop closes the popup (modal only)\n /\n @Prop() closeOnBackdrop: boolean = true;\n\n /\n Internal state for prompt input value\n /\n @State() inputValue: string = '';\n\n /\n Emitted when the popup is confirmed (OK clicked)\n /\n @Event() leConfirm: EventEmitter<PopupResult>;\n\n /\n Emitted when the popup is cancelled (Cancel clicked or dismissed)\n /\n @Event() leCancel: EventEmitter<PopupResult>;\n\n /\n Emitted when the popup opens\n /\n @Event() leOpen: EventEmitter<void>;\n\n /\n Emitted when the popup closes\n /\n @Event() leClose: EventEmitter<PopupResult>;\n\n private dialogEl?: HTMLDialogElement;\n private inputEl?: HTMLInputElement;\n private resolvePromise?: (result: PopupResult) => void;\n\n componentWillLoad() {\n this.inputValue = this.defaultValue;\n }\n\n componentDidLoad() {\n // Native dialog handles Escape key automatically when modal\n // We just need to listen for the cancel event\n this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n }\n\n disconnectedCallback() {\n this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n }\n\n private handleDialogCancel = (e: Event) => {\n e.preventDefault(); // Prevent default close to handle it ourselves\n this.handleCancel();\n };\n\n /\n Opens the popup and returns a promise that resolves when closed\n /\n @Method()\n async show(): Promise<PopupResult> {\n return new Promise((resolve) => {\n this.resolvePromise = resolve;\n this.inputValue = this.defaultValue;\n this.open = true;\n \n // Use requestAnimationFrame to ensure the dialog element is rendered\n requestAnimationFrame(() => {\n if (this.dialogEl) {\n if (this.modal) {\n this.dialogEl.showModal();\n } else {\n this.dialogEl.show();\n }\n \n this.leOpen.emit();\n \n // Focus input for prompt type\n if (this.type === 'prompt' && this.inputEl) {\n this.inputEl.focus();\n this.inputEl.select();\n }\n }\n });\n });\n }\n\n /\n Closes the popup with a result\n /\n @Method()\n async hide(confirmed: boolean = false) {\n const result: PopupResult = {\n confirmed,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n \n this.dialogEl?.close();\n this.open = false;\n this.leClose.emit(result);\n \n if (this.resolvePromise) {\n this.resolvePromise(result);\n this.resolvePromise = undefined;\n }\n }\n\n private handleConfirm = () => {\n const result: PopupResult = {\n confirmed: true,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n this.leConfirm.emit(result);\n this.hide(true);\n };\n\n private handleCancel = () => {\n const result: PopupResult = {\n confirmed: false,\n value: undefined,\n };\n this.leCancel.emit(result);\n this.hide(false);\n };\n\n private handleBackdropClick = (e: MouseEvent) => {\n // Check if click was on the dialog backdrop (outside the dialog box)\n if (this.closeOnBackdrop && e.target === this.dialogEl) {\n const rect = this.dialogEl.getBoundingClientRect();\n const clickedInDialog = (\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom\n );\n if (!clickedInDialog) {\n this.handleCancel();\n }\n }\n };\n\n private handleInputChange = (e: Event) => {\n this.inputValue = (e.target as HTMLInputElement).value;\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && this.type !== 'custom') {\n e.preventDefault();\n this.handleConfirm();\n }\n };\n\n private hasSlot(name: string): boolean {\n return !!this.el.querySelector(`[slot=\"${name}\"]`);\n }\n\n private renderHeader() {\n if (this.hasSlot('header')) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n );\n }\n \n if (this.popupTitle) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n {this.popupTitle}\n </div>\n );\n }\n \n return null;\n }\n\n private renderBody() {\n return (\n <div class=\"le-popup-body\" part=\"body\">\n {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n \n {this.type === 'prompt' && (\n <input\n type=\"text\"\n class=\"le-popup-input\"\n part=\"input\"\n placeholder={this.placeholder}\n value={this.inputValue}\n onInput={this.handleInputChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) => (this.inputEl = el)}\n />\n )}\n \n {/ Default slot for custom content */}\n <le-slot name=\"\" tag=\"div\" description=\"Custom popup content\" type=\"slot\">\n <slot></slot>\n </le-slot>\n </div>\n );\n }\n\n private renderFooter() {\n if (this.hasSlot('footer')) {\n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n );\n }\n \n // For custom type without footer slot, don't render default buttons\n if (this.type === 'custom') {\n return null;\n }\n \n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n {(this.type === 'confirm' \|\| this.type === 'prompt') && (\n <le-button\n variant=\"outlined\"\n part=\"button-cancel\"\n class=\"le-popup-btn\"\n onClick={this.handleCancel}\n >\n {this.cancelText}\n </le-button>\n )}\n <le-button\n variant=\"solid\"\n part=\"button-confirm\"\n class=\"le-popup-btn\"\n onClick={this.handleConfirm}\n >\n {this.confirmText}\n </le-button>\n </div>\n );\n }\n\n render() {\n const positionClass = `le-popup-position-${this.position}`;\n \n return (\n <dialog\n class={`le-popup-dialog ${positionClass}`}\n part=\"dialog\"\n ref={(el) => (this.dialogEl = el)}\n onClick={this.handleBackdropClick}\n >\n <le-component component=\"le-popup\">\n <div class=\"le-popup-container\" part=\"container\">\n {this.renderHeader()}\n {this.renderBody()}\n {this.renderFooter()}\n </div>\n </le-component>\n </dialog>\n );\n }\n}\n"],"version":3}

package/dist/core/components/le-round-progress.js CHANGED Viewed

@@ -94,7 +94,7 @@ const LeRoundProgress$1 = /*@__PURE__*/ proxyCustomElement(class LeRoundProgress
         return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (h("div", { key: 'de00fb6044bc7499c6af118195ff8586acb00c17', class: "round-progress--container" }, this.getPaths(), h("svg", { key: 'c6750092889a484c92902c25e91ab902d9be2f8a', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: '7d6ed780e2b69708b1bc067876dce45c7c1427db', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '66b2c27cdddb1454b123cd146e78220f99683e6f' })));
+        return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
     }
     static get watchers() { return {
         "value": ["updateValue"],

package/dist/core/components/le-round-progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"le-round-progress.js","mappings":"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","names":["LeRoundProgress","__stencil_proxyCustomElement"],"sources":["src~~-core~~/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src~~-core~~/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /*\n Component lifecycles\n \n Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n /\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /*\n Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n /\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /\n Returns the circular path for the progress stroke\n * and additional paths in the background\n /\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths \|\| !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"le-round-progress.js","mappings":"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","names":["LeRoundProgress","__stencil_proxyCustomElement"],"sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /*\n Component lifecycles\n \n Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n /\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /*\n Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n /\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /\n Returns the circular path for the progress stroke\n * and additional paths in the background\n /\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths \|\| !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/core/components/le-slot.d.ts ADDED Viewed

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

package/dist/core/components/le-stack.js CHANGED Viewed

@@ -1,5 +1,7 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { h as classnames } from './utils.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$7 } from './le-button2.js';
+import { d as defineCustomElement$4 } from './le-popover2.js';
 const 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}";
@@ -127,8 +129,8 @@ const LeStack$1 = /*@__PURE__*/ proxyCustomElement(class LeStack extends HTMLEle
             'full-height': this.fullHeight,
         });
         // Slot style for admin mode - make items display in the same direction
-        `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
-        return (h(Host, { key: '2cb4f4d86677c74c2db364f5d401d7911067c9d2', class: hostClass }, h("div", { key: '4f3a69840cf5c1efd22ef3bb9d18198f8d578a20', class: "stack", part: "stack", style: style }, h("slot", { key: 'ce93b2e01cb09e5351839894464f8f64e203f98e' }))));
+        const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
+        return (h("le-component", { key: 'e1547512915e47e4c5ddbcbcbd3971579e45a140', component: "le-stack", hostClass: hostClass }, h("div", { key: '61a4fd57c61c56a8abac0ae2348e6e48034efc4d', class: "stack", part: "stack", style: style }, h("le-slot", { key: '0ef0f996ce0efcb20a47171197d82e5b326c7e8c', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, h("slot", { key: 'f41f351d8b6dbdaf20756e9bc317a35a0424fc6c' })))));
     }
     static get style() { return leStackDefaultCss; }
 }, [769, "le-stack", {
@@ -148,13 +150,43 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-stack"];
+    const components = ["le-stack", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-stack":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LeStack$1);
             }
             break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }

package/dist/core/components/le-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"le-stack.js","mappings":"~~;;;~~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~~QAAkB~~,CAAA,+BAAA,EAAkC,IAAI,CAAC,gBAAgB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,sBAAsB,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,IAAI,CAAC,aAAa,EAAE;~~QAEtP~~,QACE,~~CAAC~~,~~CAAA~~,~~IAAI~~,~~EAAE~~,~~EAAA~~,~~GAAA~~,~~EAAA,0CAAA,EAAA,KAAK,~~EAAE,SAAS,EAAA,~~EACrB~~,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAA,~~EAExC~~,~~CAAa~~,CAAA,~~MAAA~~,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,~~CAEX~~,~~CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["LeStack","__stencil_proxyCustomElement"],"sources":["src~~-core~~/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src~~-core~~/components/le-stack/le-stack.tsx"],"sourcesContent":["/*\n le-stack default styles\n \n The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n /\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/ Base stack container /\n.stack {\n gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/ Full width/height variants /\n:host(.full-width) {\n width: 100%;\n}\n\n:host(.full-height) {\n height: 100%;\n}\n\n/ Direction-specific defaults /\n:host(.direction-horizontal) .stack {\n min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n min-width: 0;\n}\n","import { Component, Prop, h, Element ~~, Host~~ } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/\n A flexible stack layout component using CSS flexbox.\n \n `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n \n @slot - Default slot for stack items (le-box components recommended)\n \n @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n \n @csspart stack - The main stack container\n \n @cmsEditable true\n * @cmsCategory Layout\n /\n@Component({\n tag: 'le-stack',\n styleUrl: 'le-stack.default.css',\n shadow: true,\n})\nexport class LeStack {\n @Element() el: HTMLElement;\n\n /\n Direction of the stack layout\n * @allowedValues horizontal \| vertical\n /\n @Prop() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n /\n @Prop() gap?: string;\n\n /\n Alignment of items on the cross axis\n * @allowedValues start \| center \| end \| stretch \| baseline\n /\n @Prop() align: 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline' = 'stretch';\n\n /\n Distribution of items on the main axis\n * @allowedValues start \| center \| end \| space-between \| space-around \| space-evenly\n /\n @Prop() justify: 'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' = 'start';\n\n /\n Whether items should wrap to multiple lines\n /\n @Prop() wrap: boolean = false;\n\n /\n Alignment of wrapped lines (only applies when wrap is true)\n * @allowedValues start \| center \| end \| stretch \| space-between \| space-around\n /\n @Prop() alignContent: 'start' \| 'center' \| 'end' \| 'stretch' \| 'space-between' \| 'space-around' = 'stretch';\n\n /\n Whether to reverse the order of items\n /\n @Prop() reverse: boolean = false;\n\n /\n Maximum number of items allowed in the stack (for CMS validation)\n * @min 1\n /\n @Prop() maxItems?: number;\n\n /\n Whether the stack should take full width of its container\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Whether the stack should take full height of its container\n /\n @Prop() fullHeight: boolean = false;\n\n /\n Padding inside the stack container (CSS value)\n */\n @Prop() padding?: string;\n\n private getFlexDirection(): string {\n const base = this.direction === 'vertical' ? 'column' : 'row';\n return this.reverse ? `${base}-reverse` : base;\n }\n\n private getAlignItems(): string {\n const alignMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n return alignMap[this.align] \|\| 'stretch';\n }\n\n private getJustifyContent(): string {\n const justifyMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n 'space-evenly': 'space-evenly',\n };\n return justifyMap[this.justify] \|\| 'flex-start';\n }\n\n private getAlignContent(): string {\n const alignContentMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n };\n return alignContentMap[this.alignContent] \|\| 'stretch';\n }\n\n render() {\n const style: { [key: string]: string } = {\n display: 'flex',\n flexDirection: this.getFlexDirection(),\n alignItems: this.getAlignItems(),\n justifyContent: this.getJustifyContent(),\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n };\n\n if (this.wrap) {\n style.alignContent = this.getAlignContent();\n }\n\n if (this.gap) {\n style.gap = this.gap;\n }\n\n if (this.padding) {\n style.padding = this.padding;\n }\n\n // if (this.fullWidth) {\n // style.width = '100%';\n // }\n\n // if (this.fullHeight) {\n // style.height = '100%';\n // }\n\n const hostClass = classnames(\n `direction-${this.direction}`,\n {\n 'wrap': this.wrap,\n 'reverse': this.reverse,\n 'full-width': this.fullWidth,\n 'full-height': this.fullHeight,\n }\n );\n\n // Slot style for admin mode - make items display in the same direction\n const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap \|\| 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n return (\n <~~Host class~~={hostClass}>\n <div class=\"stack\" part=\"stack\" style={style}>\n \n <slot></slot>\n \n </div>\n </~~Host~~>\n );\n }\n}\n"],"version":3}
1	+ {"file":"le-stack.js","mappings":"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","names":["LeStack","__stencil_proxyCustomElement"],"sources":["src/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src/components/le-stack/le-stack.tsx"],"sourcesContent":["/*\n le-stack default styles\n \n The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n /\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/ Base stack container /\n.stack {\n gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/ Full width/height variants /\n:host(.full-width) {\n width: 100%;\n}\n\n:host(.full-height) {\n height: 100%;\n}\n\n/ Direction-specific defaults /\n:host(.direction-horizontal) .stack {\n min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n min-width: 0;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/\n A flexible stack layout component using CSS flexbox.\n \n `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n \n @slot - Default slot for stack items (le-box components recommended)\n \n @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n \n @csspart stack - The main stack container\n \n @cmsEditable true\n * @cmsCategory Layout\n /\n@Component({\n tag: 'le-stack',\n styleUrl: 'le-stack.default.css',\n shadow: true,\n})\nexport class LeStack {\n @Element() el: HTMLElement;\n\n /\n Direction of the stack layout\n * @allowedValues horizontal \| vertical\n /\n @Prop() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n /\n @Prop() gap?: string;\n\n /\n Alignment of items on the cross axis\n * @allowedValues start \| center \| end \| stretch \| baseline\n /\n @Prop() align: 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline' = 'stretch';\n\n /\n Distribution of items on the main axis\n * @allowedValues start \| center \| end \| space-between \| space-around \| space-evenly\n /\n @Prop() justify: 'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' = 'start';\n\n /\n Whether items should wrap to multiple lines\n /\n @Prop() wrap: boolean = false;\n\n /\n Alignment of wrapped lines (only applies when wrap is true)\n * @allowedValues start \| center \| end \| stretch \| space-between \| space-around\n /\n @Prop() alignContent: 'start' \| 'center' \| 'end' \| 'stretch' \| 'space-between' \| 'space-around' = 'stretch';\n\n /\n Whether to reverse the order of items\n /\n @Prop() reverse: boolean = false;\n\n /\n Maximum number of items allowed in the stack (for CMS validation)\n * @min 1\n /\n @Prop() maxItems?: number;\n\n /\n Whether the stack should take full width of its container\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Whether the stack should take full height of its container\n /\n @Prop() fullHeight: boolean = false;\n\n /\n Padding inside the stack container (CSS value)\n */\n @Prop() padding?: string;\n\n private getFlexDirection(): string {\n const base = this.direction === 'vertical' ? 'column' : 'row';\n return this.reverse ? `${base}-reverse` : base;\n }\n\n private getAlignItems(): string {\n const alignMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n return alignMap[this.align] \|\| 'stretch';\n }\n\n private getJustifyContent(): string {\n const justifyMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n 'space-evenly': 'space-evenly',\n };\n return justifyMap[this.justify] \|\| 'flex-start';\n }\n\n private getAlignContent(): string {\n const alignContentMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n };\n return alignContentMap[this.alignContent] \|\| 'stretch';\n }\n\n render() {\n const style: { [key: string]: string } = {\n display: 'flex',\n flexDirection: this.getFlexDirection(),\n alignItems: this.getAlignItems(),\n justifyContent: this.getJustifyContent(),\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n };\n\n if (this.wrap) {\n style.alignContent = this.getAlignContent();\n }\n\n if (this.gap) {\n style.gap = this.gap;\n }\n\n if (this.padding) {\n style.padding = this.padding;\n }\n\n // if (this.fullWidth) {\n // style.width = '100%';\n // }\n\n // if (this.fullHeight) {\n // style.height = '100%';\n // }\n\n const hostClass = classnames(\n `direction-${this.direction}`,\n {\n 'wrap': this.wrap,\n 'reverse': this.reverse,\n 'full-width': this.fullWidth,\n 'full-height': this.fullHeight,\n }\n );\n\n // Slot style for admin mode - make items display in the same direction\n const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap \|\| 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n return (\n <le-component component=\"le-stack\" hostClass={hostClass}>\n <div class=\"stack\" part=\"stack\" style={style}>\n <le-slot\n name=\"\"\n description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n type=\"slot\"\n allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n slotStyle={slotStyle}\n >\n <slot></slot>\n </le-slot>\n </div>\n </le-component>\n );\n }\n}\n"],"version":3}

package/dist/core/components/le-string-input.js CHANGED Viewed

@@ -1,122 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { h as classnames } from './utils.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(slot[name=description]:empty){display:none}";
-const LeStringInput$1 = /*@__PURE__*/ proxyCustomElement(class LeStringInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "change", 7);
-        this.leInput = createEvent(this, "input", 7);
-    }
-    get el() { return 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(Host, { key: '5c841074ac9288c448c2c09e18530c91bc62e3da', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'b2f7bea3e6c52033153caf9f18df4a815e9de14e', class: "le-input-wrapper" }, this.label && (h("label", { key: 'ce3cb46e176ec1016c93f5742ff0856badfe7d26', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'ea5cbbe1e178f964631aa67ec9833a17c3362be7', class: "le-input-container" }, this.iconStart && (h("span", { key: 'df8b39dcbe87ecb232ed23f2d965c707b16b1b50', class: "icon-start" }, this.iconStart)), h("input", { key: '53aff08b71412d2676c3ff90dc9af6e45d8aa438', 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: 'a726a70aa97b74ecd1a69266bcbfff18b504266b', class: "icon-end" }, this.iconEnd))), h("div", { key: '950270b513255a6dd7a53b80d3827efe3b043aac', class: "le-input-description" }, h("slot", { key: 'cb083064937a07085c11d421d2f42cf700f47892', name: "description" })))));
-    }
-    static get style() { return leStringInputCss; }
-}, [769, "le-string-input", {
-        "mode": [1537],
-        "value": [1537],
-        "name": [1],
-        "type": [1],
-        "label": [1],
-        "iconStart": [1, "icon-start"],
-        "iconEnd": [1, "icon-end"],
-        "placeholder": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "externalId": [1, "external-id"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-string-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LeStringInput$1);
-            }
-            break;
-    } });
-}
+import { i as LeStringInput$1, d as defineCustomElement$1 } from './le-button2.js';
 const LeStringInput = LeStringInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/core/components/le-string-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"le-string-input.js","mappings":"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","names":[~~"LeStringInput","__stencil_proxyCustomElement"~~],"sources":[~~"src-core/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src-core/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(slot[name=description]:empty) {\n display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element , Host } 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 <Host class={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 \n <slot name=\"description\"></slot>\n \n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"le-string-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/core/components/le-text.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { o as observeModeChanges } from './utils.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$7 } from './le-button2.js';
+import { d as defineCustomElement$4 } from './le-popover2.js';
 const 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}";
@@ -322,7 +324,7 @@ const LeText$1 = /*@__PURE__*/ proxyCustomElement(class LeText extends HTMLEleme
         };
         // Admin mode - show rich text editor
         if (this.adminMode) {
-            return (h(Host, { class: "admin-mode" }, h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), h(Tag, { class: textClass, part: "text", style: textStyle }, h("div", { ref: (el) => this.editorRef = el, class: "le-text-editor", contentEditable: true, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleSelectionChange, onMouseUp: this.handleSelectionChange, innerHTML: this.content })), h("div", { class: "hidden-slot" }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: () => this.readSlottedContent() })))));
+            return (h(Host, { class: "admin-mode" }, h("le-component", { component: "le-text" }, h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), h(Tag, { class: textClass, part: "text", style: textStyle }, h("div", { ref: (el) => this.editorRef = el, class: "le-text-editor", contentEditable: true, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleSelectionChange, onMouseUp: this.handleSelectionChange, innerHTML: this.content })), h("div", { class: "hidden-slot" }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: () => this.readSlottedContent() }))))));
         }
         // Default mode - render semantic element with slotted content
         return (h(Host, null, h(Tag, { class: textClass, part: "text", style: textStyle }, h("slot", { ref: (el) => this.slotRef = el }))));
@@ -348,13 +350,43 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-text"];
+    const components = ["le-text", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-text":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LeText$1);
             }
             break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }