le-kit 0.1.3 → 0.1.4

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

@@ -1,188 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { e as classnames, f as defineCustomElement$2, h as defineCustomElement$3, j as defineCustomElement$5, k as defineCustomElement$6, l 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}";
-
-const LeStack$1 = /*@__PURE__*/ proxyCustomElement(class LeStack extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    get el() { return this; }
-    /**
-     * Direction of the stack layout
-     * @allowedValues horizontal | vertical
-     */
-    direction = 'horizontal';
-    /**
-     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
-     */
-    gap;
-    /**
-     * Alignment of items on the cross axis
-     * @allowedValues start | center | end | stretch | baseline
-     */
-    align = 'stretch';
-    /**
-     * Distribution of items on the main axis
-     * @allowedValues start | center | end | space-between | space-around | space-evenly
-     */
-    justify = 'start';
-    /**
-     * Whether items should wrap to multiple lines
-     */
-    wrap = false;
-    /**
-     * Alignment of wrapped lines (only applies when wrap is true)
-     * @allowedValues start | center | end | stretch | space-between | space-around
-     */
-    alignContent = 'stretch';
-    /**
-     * Whether to reverse the order of items
-     */
-    reverse = false;
-    /**
-     * Maximum number of items allowed in the stack (for CMS validation)
-     * @min 1
-     */
-    maxItems;
-    /**
-     * Whether the stack should take full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Whether the stack should take full height of its container
-     */
-    fullHeight = false;
-    /**
-     * Padding inside the stack container (CSS value)
-     */
-    padding;
-    getFlexDirection() {
-        const base = this.direction === 'vertical' ? 'column' : 'row';
-        return this.reverse ? `${base}-reverse` : base;
-    }
-    getAlignItems() {
-        const alignMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            baseline: 'baseline',
-        };
-        return alignMap[this.align] || 'stretch';
-    }
-    getJustifyContent() {
-        const justifyMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-            'space-evenly': 'space-evenly',
-        };
-        return justifyMap[this.justify] || 'flex-start';
-    }
-    getAlignContent() {
-        const alignContentMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-        };
-        return alignContentMap[this.alignContent] || 'stretch';
-    }
-    render() {
-        const style = {
-            display: 'flex',
-            flexDirection: this.getFlexDirection(),
-            alignItems: this.getAlignItems(),
-            justifyContent: this.getJustifyContent(),
-            flexWrap: this.wrap ? 'wrap' : 'nowrap',
-        };
-        if (this.wrap) {
-            style.alignContent = this.getAlignContent();
-        }
-        if (this.gap) {
-            style.gap = this.gap;
-        }
-        if (this.padding) {
-            style.padding = this.padding;
-        }
-        // if (this.fullWidth) {
-        //   style.width = '100%';
-        // }
-        // if (this.fullHeight) {
-        //   style.height = '100%';
-        // }
-        const hostClass = classnames(`direction-${this.direction}`, {
-            'wrap': this.wrap,
-            'reverse': this.reverse,
-            'full-width': this.fullWidth,
-            'full-height': this.fullHeight,
-        });
-        // Slot style for admin mode - make items display in the same direction
-        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(Host, { class: hostClass }, h("div", { key: '61a4fd57c61c56a8abac0ae2348e6e48034efc4d', class: "stack", part: "stack", style: style }, h("slot", { key: 'f41f351d8b6dbdaf20756e9bc317a35a0424fc6c' }))));
-    }
-    static get style() { return leStackDefaultCss; }
-}, [769, "le-stack", {
-        "direction": [1],
-        "gap": [1],
-        "align": [1],
-        "justify": [1],
-        "wrap": [4],
-        "alignContent": [1, "align-content"],
-        "reverse": [4],
-        "maxItems": [2, "max-items"],
-        "fullWidth": [4, "full-width"],
-        "fullHeight": [4, "full-height"],
-        "padding": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-stack", "le-button", "le-checkbox", "le-popover", "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-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeStack = LeStack$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeStack, defineCustomElement };
-//# sourceMappingURL=le-stack.js.map
-
-//# sourceMappingURL=le-stack.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

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

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

@@ -1,9 +0,0 @@
-import { q as LeStringInput$1, f as defineCustomElement$1 } from './le-button2.js';
-
-const LeStringInput = LeStringInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeStringInput, defineCustomElement };
-//# sourceMappingURL=le-string-input.js.map
-
-//# sourceMappingURL=le-string-input.js.map

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

@@ -1 +0,0 @@
-{"file":"le-string-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/core/components/le-text.d.ts

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

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

@@ -1,388 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as observeModeChanges, f as defineCustomElement$2, h as defineCustomElement$3, j as defineCustomElement$5, k as defineCustomElement$6, l 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}";
-
-const LeText$1 = /*@__PURE__*/ proxyCustomElement(class LeText extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    get el() { return this; }
-    /**
-     * The semantic variant/type of text element
-     * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
-     */
-    variant = 'p';
-    /**
-     * Text alignment
-     * @allowedValues left | center | right | justify
-     */
-    align = 'left';
-    /**
-     * Text color (CSS value or theme token)
-     */
-    color;
-    /**
-     * Whether the text should truncate with ellipsis
-     */
-    truncate = false;
-    /**
-     * Maximum number of lines before truncating (requires truncate=true)
-     */
-    maxLines;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * The HTML content being edited
-     */
-    content = '';
-    /**
-     * Whether the editor is focused (shows toolbar)
-     */
-    isFocused = false;
-    /**
-     * Current selection state for toolbar button highlighting
-     */
-    selectionState = {
-        isBold: false,
-        isItalic: false,
-        isUnderline: false,
-        isStrikethrough: false,
-        isLink: false,
-        blockType: 'p',
-    };
-    /**
-     * Reference to the contenteditable element
-     */
-    editorRef;
-    /**
-     * Reference to the slot element
-     */
-    slotRef;
-    disconnectModeObserver;
-    connectedCallback() {
-        this.disconnectModeObserver = 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;
-            }
-        }
-    }
-    /**
-     * Handle input in the contenteditable
-     */
-    handleInput = () => {
-        if (this.editorRef) {
-            this.content = this.editorRef.innerHTML;
-            this.updateSelectionState();
-        }
-    };
-    /**
-     * Handle focus on the editor
-     */
-    handleFocus = () => {
-        this.isFocused = true;
-        this.updateSelectionState();
-    };
-    /**
-     * Handle blur on the editor
-     */
-    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
-     */
-    handleSelectionChange = () => {
-        this.updateSelectionState();
-    };
-    /**
-     * 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();
-    }
-    /**
-     * Toggle bold formatting
-     */
-    toggleBold = (e) => {
-        e.preventDefault();
-        this.execCommand('bold');
-    };
-    /**
-     * Toggle italic formatting
-     */
-    toggleItalic = (e) => {
-        e.preventDefault();
-        this.execCommand('italic');
-    };
-    /**
-     * Toggle underline formatting
-     */
-    toggleUnderline = (e) => {
-        e.preventDefault();
-        this.execCommand('underline');
-    };
-    /**
-     * Toggle strikethrough formatting
-     */
-    toggleStrikethrough = (e) => {
-        e.preventDefault();
-        this.execCommand('strikeThrough');
-    };
-    /**
-     * Add or edit a link
-     */
-    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
-     */
-    changeVariant = (e) => {
-        const select = e.target;
-        this.variant = select.value;
-    };
-    /**
-     * Render the formatting toolbar
-     */
-    renderToolbar() {
-        return (h("div", { class: "le-text-toolbar" }, h("select", { class: "le-text-toolbar-select", onChange: this.changeVariant, onMouseDown: (e) => e.preventDefault() }, h("option", { value: "p", selected: this.variant === 'p' }, "Paragraph"), h("option", { value: "h1", selected: this.variant === 'h1' }, "Heading 1"), h("option", { value: "h2", selected: this.variant === 'h2' }, "Heading 2"), h("option", { value: "h3", selected: this.variant === 'h3' }, "Heading 3"), h("option", { value: "h4", selected: this.variant === 'h4' }, "Heading 4"), h("option", { value: "h5", selected: this.variant === 'h5' }, "Heading 5"), h("option", { value: "h6", selected: this.variant === 'h6' }, "Heading 6"), h("option", { value: "quote", selected: this.variant === 'quote' }, "Quote"), h("option", { value: "code", selected: this.variant === 'code' }, "Code"), h("option", { value: "label", selected: this.variant === 'label' }, "Label"), h("option", { value: "small", selected: this.variant === 'small' }, "Small")), h("div", { class: "le-text-toolbar-divider" }), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }, onMouseDown: this.toggleBold, title: "Bold (Ctrl+B)" }, h("strong", null, "B")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }, onMouseDown: this.toggleItalic, title: "Italic (Ctrl+I)" }, h("em", null, "I")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }, onMouseDown: this.toggleUnderline, title: "Underline (Ctrl+U)" }, h("span", { style: { textDecoration: 'underline' } }, "U")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }, onMouseDown: this.toggleStrikethrough, title: "Strikethrough" }, h("span", { style: { textDecoration: 'line-through' } }, "S")), h("div", { class: "le-text-toolbar-divider" }), 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 (h(Host, { class: "admin-mode" }, h(Host, { class: "" }, 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 }))));
-    }
-    static get watchers() { return {
-        "variant": ["onVariantChange"]
-    }; }
-    static get style() { return leTextDefaultCss; }
-}, [769, "le-text", {
-        "variant": [1537],
-        "align": [513],
-        "color": [1],
-        "truncate": [4],
-        "maxLines": [2, "max-lines"],
-        "adminMode": [32],
-        "content": [32],
-        "isFocused": [32],
-        "selectionState": [32]
-    }, undefined, {
-        "variant": ["onVariantChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-text", "le-button", "le-checkbox", "le-popover", "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-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeText = LeText$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeText, defineCustomElement };
-//# sourceMappingURL=le-text.js.map
-
-//# sourceMappingURL=le-text.js.map