le-kit 0.5.3 → 0.6.0

package/dist/cjs/le-tabs.cjs.entry.js

@@ -1,297 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-var utils = require('./utils-Dxx9WhWK.js');
-
-const leTabsCss = () => `:host{display:block;--le-tabs-gap:var(--le-spacing-1);--le-tabs-border-color:var(--le-border-color);--le-tabs-padding-y:var(--le-spacing-2);--le-tabs-padding-x:var(--le-spacing-4);--le-tabs-enclosed-bg:var(--le-color-background-secondary)}.le-tabs{display:flex;flex-direction:column}.le-tabs.orientation-vertical{flex-direction:row}.tablist{display:flex;position:relative;border-radius:var(--le-radius-md);gap:var(--le-tabs-gap)}.tablist.wrap-tabs{flex-wrap:wrap}.tablist.overflow-auto{overflow:auto}.tablist.overflow-hidden{overflow:hidden}.tablist.overflow-visible{overflow:visible}.tablist.overflow-scroll{overflow:scroll}.tablist:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.orientation-horizontal .tablist{flex-direction:row;border-bottom:1px solid var(--le-tabs-border-color)}.orientation-vertical .tablist{flex-direction:column;border-right:1px solid var(--le-tabs-border-color);min-width:150px}.full-width .tablist{width:100%}.full-width.orientation-horizontal .tab{flex:1}.variant-underlined .tablist{padding-inline:4px}.variant-pills .tablist{border-radius:calc(1.12rem)}.variant-enclosed .tablist{border:none;gap:0;background-color:var(--le-tabs-enclosed-bg);border-radius:calc(var(--le-radius-md) + var(--le-spacing-1));padding:var(--le-spacing-1)}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.panels{flex:1;min-height:0}.panel{padding:var(--le-tabs-panel-padding, var(--le-spacing-4))}.panel[hidden]{display:none}.orientation-vertical .panels{padding-left:var(--le-spacing-4)}.position-end .panels{order:1}.position-end .tablist{order:2}`;
-
-const LeTabs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leTabChange = index.createEvent(this, "leTabChange");
-        /**
-         * Array of tab options (programmatic mode).
-         * If le-tab-panel children exist, they take precedence.
-         */
-        this.tabs = [];
-        /**
-         * Orientation of the tabs.
-         * @allowedValues horizontal | vertical
-         */
-        this.orientation = 'horizontal';
-        /**
-         * Position of the tabs relative to the panels.
-         * @allowedValues start | end
-         */
-        this.position = 'start';
-        /**
-         * Tab variant style.
-         * @allowedValues underlined | solid | pills | enclosed | icon-only
-         */
-        this.variant = 'underlined';
-        /**
-         * Whether tabs should stretch to fill available width.
-         */
-        this.fullWidth = false;
-        /**
-         * Size of the tabs.
-         * @allowedValues sm | md | lg
-         */
-        this.size = 'medium';
-        /**
-         * Wrap the tabs if they exceed container width.
-         */
-        this.wrap = false;
-        /**
-         * Scroll behavior for overflowing tabs.
-         * @allowedValues auto | hidden | visible | scroll
-         */
-        this.overflow = 'auto';
-        /**
-         * Internal tab configurations (built from children or tabs prop)
-         */
-        this.tabConfigs = [];
-        /**
-         * Internal state for focused tab index (for keyboard navigation)
-         */
-        this.focusedIndex = 0;
-        /**
-         * Whether we're using declarative mode (le-tab-panel children)
-         */
-        this.isDeclarativeMode = false;
-        this.handleTabClick = (config) => {
-            this.selectTab(config);
-        };
-        this.handleKeyDown = (event) => {
-            const { tabConfigs, orientation } = this;
-            const isHorizontal = orientation === 'horizontal';
-            let newIndex = this.focusedIndex;
-            switch (event.key) {
-                case 'ArrowLeft':
-                    if (isHorizontal) {
-                        event.preventDefault();
-                        newIndex = this.findNextEnabledTab(-1);
-                    }
-                    break;
-                case 'ArrowRight':
-                    if (isHorizontal) {
-                        event.preventDefault();
-                        newIndex = this.findNextEnabledTab(1);
-                    }
-                    break;
-                case 'ArrowUp':
-                    if (!isHorizontal) {
-                        event.preventDefault();
-                        newIndex = this.findNextEnabledTab(-1);
-                    }
-                    break;
-                case 'ArrowDown':
-                    if (!isHorizontal) {
-                        event.preventDefault();
-                        newIndex = this.findNextEnabledTab(1);
-                    }
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    newIndex = this.findFirstEnabledTab();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    newIndex = this.findLastEnabledTab();
-                    break;
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    if (tabConfigs[this.focusedIndex]) {
-                        this.selectTab(tabConfigs[this.focusedIndex]);
-                    }
-                    return;
-                default:
-                    return;
-            }
-            if (newIndex !== this.focusedIndex) {
-                this.focusedIndex = newIndex;
-                this.focusTab(newIndex);
-                // Auto-select on focus (recommended for tabs)
-                if (tabConfigs[newIndex]) {
-                    this.selectTab(tabConfigs[newIndex]);
-                }
-            }
-        };
-    }
-    selectedChanged(newValue) {
-        const index = this.tabConfigs.findIndex(t => t.value === newValue);
-        if (index >= 0) {
-            this.focusedIndex = index;
-        }
-        this.updatePanelStates();
-    }
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildTabConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildTabConfigs();
-    }
-    componentWillLoad() {
-        this.buildTabConfigs();
-    }
-    connectedCallback() {
-        // Watch for dynamic changes to children
-        this.mutationObserver = new MutationObserver(() => {
-            this.buildTabConfigs();
-        });
-        this.mutationObserver.observe(this.el, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    async buildTabConfigs() {
-        // Check for le-tab-panel children
-        const panels = Array.from(this.el.querySelectorAll(':scope > le-tab-panel'));
-        if (panels.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const panel of panels) {
-                const config = await panel.getTabConfig();
-                configs.push({ ...config, panel });
-            }
-            this.tabConfigs = configs;
-        }
-        else if (this.tabs.length > 0) {
-            // Programmatic mode - use tabs prop
-            this.isDeclarativeMode = false;
-            this.tabConfigs = this.tabs.map(tab => ({
-                label: tab.label,
-                value: (tab.value !== undefined ? tab.value : tab.label),
-                iconStart: tab.iconStart,
-                iconEnd: tab.iconEnd,
-                disabled: tab.disabled ?? false,
-            }));
-        }
-        else {
-            this.tabConfigs = [];
-        }
-        // Set default selected
-        if (this.selected === undefined && this.tabConfigs.length > 0) {
-            const firstEnabled = this.tabConfigs.find(t => !t.disabled);
-            if (firstEnabled) {
-                this.selected = firstEnabled.value;
-            }
-        }
-        // Initialize focused index
-        if (this.selected !== undefined) {
-            const index = this.tabConfigs.findIndex(t => t.value === this.selected);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-        // Update panel active states
-        this.updatePanelStates();
-    }
-    async updatePanelStates() {
-        if (!this.isDeclarativeMode)
-            return;
-        for (const config of this.tabConfigs) {
-            if (config.panel) {
-                const isActive = config.value === this.selected;
-                await config.panel.setActive(isActive);
-            }
-        }
-    }
-    selectTab(config) {
-        if (config.disabled)
-            return;
-        this.selected = config.value;
-        this.leTabChange.emit({
-            value: config.value,
-            option: {
-                label: config.label,
-                value: config.value,
-                iconStart: config.iconStart,
-                iconEnd: config.iconEnd,
-                disabled: config.disabled,
-            },
-        });
-    }
-    findNextEnabledTab(direction) {
-        const { tabConfigs } = this;
-        let index = this.focusedIndex;
-        const length = tabConfigs.length;
-        for (let i = 0; i < length; i++) {
-            index = (index + direction + length) % length;
-            if (!tabConfigs[index].disabled) {
-                return index;
-            }
-        }
-        return this.focusedIndex;
-    }
-    findFirstEnabledTab() {
-        return this.tabConfigs.findIndex(t => !t.disabled);
-    }
-    findLastEnabledTab() {
-        for (let i = this.tabConfigs.length - 1; i >= 0; i--) {
-            if (!this.tabConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    focusTab(index) {
-        const tablist = this.el.shadowRoot?.querySelector('[role="tablist"]');
-        const tab = tablist?.querySelectorAll('[role="tab"]')[index];
-        tab?.focus();
-    }
-    render() {
-        const { tabConfigs, selected, orientation, variant, fullWidth, size, isDeclarativeMode } = this;
-        const classes = {
-            'le-tabs': true,
-            [`orientation-${orientation}`]: true,
-            [`position-${this.position}`]: true,
-            [`variant-${variant}`]: true,
-            [`size-${size}`]: true,
-            'full-width': fullWidth,
-        };
-        const tabPosition = this.orientation === 'vertical'
-            ? this.position
-            : this.position === 'start'
-                ? 'top'
-                : 'bottom';
-        return (index.h("le-component", { key: '0240e0ae8c8b2513e80e8a032101df47a2041e3d', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: 'b063db57a29d4c212ed81a738c41d7e395f5618c', class: classes }, index.h("div", { key: '01ba40aac8cb13357c668d82daf7c34f7fb104e6', class: {
-                'tablist': true,
-                'wrap-tabs': this.wrap,
-                [`overflow-${this.overflow}`]: true,
-            }, role: "tablist", "aria-orientation": orientation, part: "tablist", onKeyDown: this.handleKeyDown, tabIndex: 0 }, tabConfigs.map(config => {
-            const isSelected = config.value === selected;
-            const tabId = `tab-${config.value}`;
-            const panelId = `panel-${config.value}`;
-            return (index.h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, index.h("span", { class: "tab-label" }, config.label)));
-        })), index.h("div", { key: 'b1e16928f27f5083e94674e80b0ad397eb3e8fec', class: "panels", part: "panels" }, isDeclarativeMode ? (
-        // Declarative mode - render slot for le-tab-panel children
-        index.h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, index.h("slot", null))) : (
-        // Programmatic mode - render named slots
-        tabConfigs.map(config => {
-            const isSelected = config.value === selected;
-            const tabId = `tab-${config.value}`;
-            const panelId = `panel-${config.value}`;
-            return (index.h("div", { key: config.value, id: panelId, class: {
-                    'panel': true,
-                    'panel-active': isSelected,
-                }, role: "tabpanel", part: "panel", "aria-labelledby": tabId, tabIndex: 0, hidden: !isSelected }, index.h("slot", { name: `panel-${config.value}` })));
-        }))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "selected": ["selectedChanged"],
-        "tabs": ["tabsChanged"]
-    }; }
-};
-LeTabs.style = leTabsCss();
-
-exports.le_tabs = LeTabs;
-//# sourceMappingURL=le-tabs.entry.cjs.js.map

package/dist/cjs/le-tag.cjs.entry.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leTagCss = () => `:host{display:inline-flex;--le-tag-font-size:var(--le-font-size-sm);--le-tag-font-weight:var(--le-font-weight-medium);--le-tag-color:var(--le-color-text);--le-tag-bg:var(--le-color-surface-alt);--le-tag-dismiss-size:1.75em}:host([disabled]){opacity:0.5;pointer-events:none}.tag{display:inline-flex;align-items:center;gap:var(--le-tag-gap, 0.375rem);padding:var(--le-tag-padding-y, 0.25rem) var(--le-tag-padding-x, 0.625rem);font-size:var(--le-tag-font-size);font-weight:var(--le-tag-font-weight);line-height:1.4;color:var(--le-tag-color, var(--le-color-text, #1f2937));background:var(--le-tag-bg, var(--le-color-surface-alt, #f3f4f6));border:1px solid var(--le-tag-border-color, transparent);border-radius:var(--le-tag-border-radius, 9999px);white-space:nowrap;user-select:none}:host([size='small']) .tag{--le-tag-font-size:0.75rem;--le-tag-padding-x:0.5rem;--le-tag-padding-y:0.125rem;--le-tag-gap:0.25rem;--le-tag-dismiss-size:1.25em}:host([size='large']) .tag{--le-tag-font-size:1rem;--le-tag-padding-x:0.875rem;--le-tag-padding-y:0.375rem;--le-tag-gap:0.5rem;--le-tag-dismiss-size:2em}:host([variant='primary']) .tag{--le-tag-bg:var(--le-color-primary, #dbeafe);--le-tag-color:var(--le-color-primary-contrast, #1e40af)}:host([variant='success']) .tag{--le-tag-bg:var(--le-color-success, #dcfce7);--le-tag-color:var(--le-color-success-contrast, #166534)}:host([variant='warning']) .tag{--le-tag-bg:var(--le-color-warning-light, #fef3c7);--le-tag-color:var(--le-color-warning-contrast, #92400e)}:host([variant='danger']) .tag{--le-tag-bg:var(--le-color-danger, #fee2e2);--le-tag-color:var(--le-color-danger-contrast, #991b1b)}.tag-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tag-icon img{width:1em;height:1em;object-fit:contain}.tag-label{display:inline-block}.tag-dismiss{display:inline-flex;align-items:center;justify-content:center;width:var(--le-tag-dismiss-size);height:var(--le-tag-dismiss-size);padding:0;margin-block:calc(var(--le-tag-dismiss-size) * -1);margin-right:calc(var(--le-tag-dismiss-size) / 3 * -1);border:none;background:transparent;color:currentColor;opacity:0.6;cursor:pointer;border-radius:50%;transition:opacity 0.15s ease, background-color 0.15s ease}.tag-dismiss:hover{opacity:1;background:rgba(0, 0, 0, 0.1)}.tag-dismiss:focus-visible{outline:2px solid var(--le-color-primary, #3b82f6);outline-offset:1px}.tag-dismiss svg{width:0.75em;height:0.75em}.tag-dismiss:disabled{cursor:not-allowed}`;
-
-const LeTag = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leDismiss = index.createEvent(this, "leDismiss");
-        /**
-         * Whether the tag can be dismissed (shows close button).
-         */
-        this.dismissible = false;
-        /**
-         * Whether the tag is disabled.
-         */
-        this.disabled = false;
-        /**
-         * The size of the tag.
-         */
-        this.size = 'medium';
-        /**
-         * The visual variant of the tag.
-         */
-        this.variant = 'default';
-        this.handleDismiss = (e) => {
-            e.stopPropagation();
-            if (!this.disabled) {
-                this.leDismiss.emit();
-            }
-        };
-    }
-    renderIcon() {
-        if (!this.icon)
-            return null;
-        // Check if it's a URL (starts with http, https, or /)
-        if (this.icon.startsWith('http') || this.icon.startsWith('/')) {
-            return index.h("img", { class: "tag-icon", src: this.icon, alt: "" });
-        }
-        // Otherwise render as text (emoji or icon font)
-        return index.h("span", { class: "tag-icon" }, this.icon);
-    }
-    render() {
-        return (index.h("le-component", { key: '6903620dec3042a396c4e39ed378f59e4889fb5f', component: "le-tag" }, index.h("span", { key: '23a31349e50aeb8a38bfdf22e6151562eaa16a6e', class: "tag" }, this.renderIcon(), index.h("span", { key: '8505dd5c9ed47baf702d947bf687875dd7c8283e', class: "tag-label" }, index.h("le-slot", { key: '1f7b44714f1f1b4f1a1a5af6925b15d6026cc7e4', name: "", tag: "span", type: "text" }, index.h("slot", { key: '7722a7f387284cbc3c8ef38deeff69c7a02282a8' }, this.label))), this.dismissible && (index.h("button", { key: 'ae937d67c269ef0ff504926623ed95061c750232', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: '9cf11ec361d62de7b6ef524c40edad13c1da9c06', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'e919bccb3fa4679f7e808960195d670685f1e0df', d: "M4 4l8 8M12 4l-8 8" })))))));
-    }
-};
-LeTag.style = leTagCss();
-
-exports.le_tag = LeTag;
-//# sourceMappingURL=le-tag.entry.cjs.js.map

package/dist/cjs/le-text.cjs.entry.js

@@ -1,318 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-var utils = require('./utils-Dxx9WhWK.js');
-
-const leTextCss = () => `: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}`;
-
-const LeText = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * The semantic variant/type of text element
-         * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
-         */
-        this.variant = 'p';
-        /**
-         * Text alignment
-         * @allowedValues left | center | right | justify
-         */
-        this.align = 'left';
-        /**
-         * Whether the text should truncate with ellipsis
-         */
-        this.truncate = false;
-        /**
-         * Internal state to track admin mode
-         */
-        this.adminMode = false;
-        /**
-         * The HTML content being edited
-         */
-        this.content = '';
-        /**
-         * Whether the editor is focused (shows toolbar)
-         */
-        this.isFocused = false;
-        /**
-         * Current selection state for toolbar button highlighting
-         */
-        this.selectionState = {
-            isBold: false,
-            isItalic: false,
-            isUnderline: false,
-            isStrikethrough: false,
-            isLink: false,
-            blockType: 'p',
-        };
-        /**
-         * Handle input in the contenteditable
-         */
-        this.handleInput = () => {
-            if (this.editorRef) {
-                this.content = this.editorRef.innerHTML;
-                this.updateSelectionState();
-            }
-        };
-        /**
-         * Handle focus on the editor
-         */
-        this.handleFocus = () => {
-            this.isFocused = true;
-            this.updateSelectionState();
-        };
-        /**
-         * Handle blur on the editor
-         */
-        this.handleBlur = (e) => {
-            // Check if focus moved to toolbar
-            const relatedTarget = e.relatedTarget;
-            const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');
-            if (toolbar?.contains(relatedTarget)) {
-                // Focus moved to toolbar, keep it open
-                return;
-            }
-            // Small delay to allow toolbar clicks to register
-            setTimeout(() => {
-                if (!this.el.shadowRoot?.activeElement) {
-                    this.isFocused = false;
-                    this.syncContentToSlot();
-                }
-            }, 150);
-        };
-        /**
-         * Handle selection change to update toolbar state
-         */
-        this.handleSelectionChange = () => {
-            this.updateSelectionState();
-        };
-        /**
-         * Toggle bold formatting
-         */
-        this.toggleBold = (e) => {
-            e.preventDefault();
-            this.execCommand('bold');
-        };
-        /**
-         * Toggle italic formatting
-         */
-        this.toggleItalic = (e) => {
-            e.preventDefault();
-            this.execCommand('italic');
-        };
-        /**
-         * Toggle underline formatting
-         */
-        this.toggleUnderline = (e) => {
-            e.preventDefault();
-            this.execCommand('underline');
-        };
-        /**
-         * Toggle strikethrough formatting
-         */
-        this.toggleStrikethrough = (e) => {
-            e.preventDefault();
-            this.execCommand('strikeThrough');
-        };
-        /**
-         * Add or edit a link
-         */
-        this.toggleLink = (e) => {
-            e.preventDefault();
-            if (this.selectionState.isLink) {
-                // Remove link
-                this.execCommand('unlink');
-            }
-            else {
-                // Add link
-                const url = prompt('Enter URL:', 'https://');
-                if (url) {
-                    this.execCommand('createLink', url);
-                }
-            }
-        };
-        /**
-         * Change the block type/variant
-         */
-        this.changeVariant = (e) => {
-            const select = e.target;
-            this.variant = select.value;
-        };
-    }
-    connectedCallback() {
-        this.disconnectModeObserver = utils.observeModeChanges(this.el, mode => {
-            const wasAdmin = this.adminMode;
-            this.adminMode = mode === 'admin';
-            if (this.adminMode && !wasAdmin) {
-                // Entering admin mode - read content from slot
-                requestAnimationFrame(() => this.readSlottedContent());
-            }
-            else if (!this.adminMode && wasAdmin) {
-                // Leaving admin mode - sync content back to slot
-                this.syncContentToSlot();
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    onVariantChange() {
-        // When variant changes in admin mode, update the content wrapper
-        if (this.adminMode && this.editorRef) {
-            this.syncContentToSlot();
-        }
-    }
-    /**
-     * Read content from slotted elements
-     */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
-        // Collect all content from assigned nodes
-        let html = '';
-        assignedNodes.forEach(node => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                html += node.textContent;
-            }
-            else if (node.nodeType === Node.ELEMENT_NODE) {
-                html += node.innerHTML || node.textContent;
-            }
-        });
-        this.content = html.trim();
-    }
-    /**
-     * Sync edited content back to the slot
-     */
-    syncContentToSlot() {
-        if (!this.editorRef)
-            return;
-        const newContent = this.editorRef.innerHTML;
-        // Update the light DOM content
-        // We need to update the actual slotted content
-        const slot = this.slotRef;
-        if (slot) {
-            const assignedNodes = slot.assignedNodes({ flatten: true });
-            if (assignedNodes.length > 0) {
-                const firstNode = assignedNodes[0];
-                if (firstNode.nodeType === Node.ELEMENT_NODE) {
-                    firstNode.innerHTML = newContent;
-                }
-                else if (firstNode.nodeType === Node.TEXT_NODE) {
-                    // Replace text node with the new content
-                    const parent = firstNode.parentNode;
-                    if (parent) {
-                        // Create a temporary element to parse HTML
-                        const temp = document.createElement('span');
-                        temp.innerHTML = newContent;
-                        // Replace the text node
-                        parent.replaceChild(temp, firstNode);
-                        // Unwrap the span if it only contains text
-                        if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {
-                            parent.replaceChild(temp.firstChild, temp);
-                        }
-                    }
-                }
-            }
-            else {
-                // No assigned nodes, set innerHTML on the host's light DOM
-                this.el.innerHTML = newContent;
-            }
-        }
-    }
-    /**
-     * Update the selection state for toolbar highlighting
-     */
-    updateSelectionState() {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        this.selectionState = {
-            isBold: document.queryCommandState('bold'),
-            isItalic: document.queryCommandState('italic'),
-            isUnderline: document.queryCommandState('underline'),
-            isStrikethrough: document.queryCommandState('strikeThrough'),
-            isLink: this.isSelectionInLink(selection),
-            blockType: this.variant,
-        };
-    }
-    /**
-     * Check if current selection is within a link
-     */
-    isSelectionInLink(selection) {
-        if (!selection.anchorNode)
-            return false;
-        let node = selection.anchorNode;
-        while (node && node !== this.editorRef) {
-            if (node.nodeName === 'A')
-                return true;
-            node = node.parentNode;
-        }
-        return false;
-    }
-    /**
-     * Execute a formatting command
-     */
-    execCommand(command, value) {
-        // Focus the editor first
-        this.editorRef?.focus();
-        // Execute the command
-        document.execCommand(command, false, value);
-        // Update state
-        this.handleInput();
-        this.updateSelectionState();
-    }
-    /**
-     * Render the formatting toolbar
-     */
-    renderToolbar() {
-        return (index.h("div", { class: "le-text-toolbar" }, index.h("select", { class: "le-text-toolbar-select", onChange: this.changeVariant, onMouseDown: e => e.preventDefault() }, index.h("option", { value: "p", selected: this.variant === 'p' }, "Paragraph"), index.h("option", { value: "h1", selected: this.variant === 'h1' }, "Heading 1"), index.h("option", { value: "h2", selected: this.variant === 'h2' }, "Heading 2"), index.h("option", { value: "h3", selected: this.variant === 'h3' }, "Heading 3"), index.h("option", { value: "h4", selected: this.variant === 'h4' }, "Heading 4"), index.h("option", { value: "h5", selected: this.variant === 'h5' }, "Heading 5"), index.h("option", { value: "h6", selected: this.variant === 'h6' }, "Heading 6"), index.h("option", { value: "quote", selected: this.variant === 'quote' }, "Quote"), index.h("option", { value: "code", selected: this.variant === 'code' }, "Code"), index.h("option", { value: "label", selected: this.variant === 'label' }, "Label"), index.h("option", { value: "small", selected: this.variant === 'small' }, "Small")), index.h("div", { class: "le-text-toolbar-divider" }), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }, onMouseDown: this.toggleBold, title: "Bold (Ctrl+B)" }, index.h("strong", null, "B")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }, onMouseDown: this.toggleItalic, title: "Italic (Ctrl+I)" }, index.h("em", null, "I")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }, onMouseDown: this.toggleUnderline, title: "Underline (Ctrl+U)" }, index.h("span", { style: { textDecoration: 'underline' } }, "U")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }, onMouseDown: this.toggleStrikethrough, title: "Strikethrough" }, index.h("span", { style: { textDecoration: 'line-through' } }, "S")), index.h("div", { class: "le-text-toolbar-divider" }), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }, onMouseDown: this.toggleLink, title: this.selectionState.isLink ? 'Remove link' : 'Add link' }, "\uD83D\uDD17")));
-    }
-    /**
-     * Get the semantic tag for the current variant
-     */
-    getTag() {
-        switch (this.variant) {
-            case 'quote':
-                return 'blockquote';
-            case 'code':
-                return 'pre';
-            case 'label':
-                return 'label';
-            case 'small':
-                return 'small';
-            default:
-                return this.variant; // h1-h6, p
-        }
-    }
-    render() {
-        const Tag = this.getTag();
-        const textStyle = {};
-        if (this.color) {
-            textStyle.color = this.color;
-        }
-        if (this.align) {
-            textStyle.textAlign = this.align;
-        }
-        const textClass = {
-            'le-text': true,
-            [`variant-${this.variant}`]: true,
-            'truncate': this.truncate,
-            [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,
-        };
-        // Admin mode - show rich text editor
-        if (this.adminMode) {
-            return (index.h(index.Host, { class: "admin-mode" }, index.h("le-component", { component: "le-text" }, index.h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), index.h(Tag, { class: textClass, part: "text", style: textStyle }, index.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 })), index.h("div", { class: "hidden-slot" }, index.h("slot", { ref: el => (this.slotRef = el), onSlotchange: () => this.readSlottedContent() }))))));
-        }
-        // Default mode - render semantic element with slotted content
-        return (index.h(index.Host, null, index.h(Tag, { class: textClass, part: "text", style: textStyle }, index.h("slot", { ref: el => (this.slotRef = el) }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "variant": ["onVariantChange"]
-    }; }
-};
-LeText.style = leTextCss();
-
-exports.le_text = LeText;
-//# sourceMappingURL=le-text.entry.cjs.js.map