le-kit 0.5.1 → 0.5.3

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

@@ -9,68 +9,116 @@ 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]);
+                }
+            }
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Array of tab options (programmatic mode).
-     * If le-tab-panel children exist, they take precedence.
-     */
-    tabs = [];
-    /**
-     * The value of the currently selected tab.
-     * If not provided, defaults to the first tab.
-     */
-    selected;
-    /**
-     * Orientation of the tabs.
-     * @allowedValues horizontal | vertical
-     */
-    orientation = 'horizontal';
-    /**
-     * Position of the tabs relative to the panels.
-     * @allowedValues start | end
-     */
-    position = 'start';
-    /**
-     * Tab variant style.
-     * @allowedValues underlined | solid | pills | enclosed | icon-only
-     */
-    variant = 'underlined';
-    /**
-     * Whether tabs should stretch to fill available width.
-     */
-    fullWidth = false;
-    /**
-     * Size of the tabs.
-     * @allowedValues sm | md | lg
-     */
-    size = 'medium';
-    /**
-     * Wrap the tabs if they exceed container width.
-     */
-    wrap = false;
-    /**
-     * Scroll behavior for overflowing tabs.
-     * @allowedValues auto | hidden | visible | scroll
-     */
-    overflow = 'auto';
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    tabConfigs = [];
-    /**
-     * Internal state for focused tab index (for keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Whether we're using declarative mode (le-tab-panel children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Emitted when the selected tab changes.
-     */
-    leTabChange;
-    mutationObserver;
     selectedChanged(newValue) {
         const index = this.tabConfigs.findIndex(t => t.value === newValue);
         if (index >= 0) {
@@ -172,65 +220,6 @@ const LeTabs = class {
             },
         });
     }
-    handleTabClick = (config) => {
-        this.selectTab(config);
-    };
-    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]);
-            }
-        }
-    };
     findNextEnabledTab(direction) {
         const { tabConfigs } = this;
         let index = this.focusedIndex;
@@ -273,7 +262,7 @@ const LeTabs = class {
             : this.position === 'start'
                 ? 'top'
                 : 'bottom';
-        return (index.h("le-component", { key: '9a92363db43231088e476bca66dbbf47f26ebf34', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: '3c14f3367e2b281090721e5521bfa8a3b53f5b97', class: classes }, index.h("div", { key: 'cd4aad46f9a8e1ec5760f9388a0c4149556bfb06', class: {
+        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,
@@ -282,7 +271,7 @@ const LeTabs = class {
             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: '0b34e9ab8ce8f0e31ad9392bc3a6a60c92a0aa00', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        })), 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
@@ -296,6 +285,7 @@ const LeTabs = class {
                 }, 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"]

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

@@ -8,46 +8,29 @@ 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();
+            }
+        };
     }
-    /**
-     * The text label to display in the tag.
-     */
-    label;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Icon to display before the label.
-     * Can be an emoji, URL, or icon name.
-     */
-    icon;
-    /**
-     * Whether the tag can be dismissed (shows close button).
-     */
-    dismissible = false;
-    /**
-     * Whether the tag is disabled.
-     */
-    disabled = false;
-    /**
-     * The size of the tag.
-     */
-    size = 'medium';
-    /**
-     * The visual variant of the tag.
-     */
-    variant = 'default';
-    /**
-     * Emitted when the dismiss button is clicked.
-     */
-    leDismiss;
-    handleDismiss = (e) => {
-        e.stopPropagation();
-        if (!this.disabled) {
-            this.leDismiss.emit();
-        }
-    };
     renderIcon() {
         if (!this.icon)
             return null;
@@ -59,7 +42,7 @@ const LeTag = class {
         return index.h("span", { class: "tag-icon" }, this.icon);
     }
     render() {
-        return (index.h("le-component", { key: '8c76ae38877bbb3ba35588adadee0cf61b76ffed', component: "le-tag" }, index.h("span", { key: 'a2dd1709505e58baada6fb9b40312e207435e8a6', class: "tag" }, this.renderIcon(), index.h("span", { key: '99bac5f6df170af17de5550b9f0489538e9760bc', class: "tag-label" }, index.h("le-slot", { key: '41740e400b168986980e8ff93187af9828cca5f9', name: "", tag: "span", type: "text" }, index.h("slot", { key: 'd823f3dc74c1e49b89fe5fff2df9d7e244d7d591' }, this.label))), this.dismissible && (index.h("button", { key: '96a058e3cab2d7fb091e1e6ec77404f8cf80358c', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: 'bfbb3f7c73aef6f06f5c45e98d4047d2aa629f2c', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '16a68b9458ccd806415d5ef8bda7fa1513cdf46d', d: "M4 4l8 8M12 4l-8 8" })))))));
+        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();

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

@@ -8,62 +8,137 @@ const leTextCss = () => `:host{display:block}:host([hidden]){display:none}.le-te
 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;
+        };
     }
-    get el() { return index.getElement(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 = utils.observeModeChanges(this.el, mode => {
             const wasAdmin = this.adminMode;
@@ -145,47 +220,6 @@ const LeText = class {
             }
         }
     }
-    /**
-     * 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
      */
@@ -228,58 +262,6 @@ const LeText = class {
         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
      */
@@ -325,6 +307,7 @@ const LeText = class {
         // 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"]
     }; }