le-kit 0.5.2 → 0.5.3

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

@@ -8,57 +8,43 @@ const leStackDefaultCss = () => `:host{display:block}:host([hidden]){display:non
 const LeStack = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Direction of the stack layout
+         * @allowedValues horizontal | vertical
+         */
+        this.direction = 'horizontal';
+        /**
+         * Alignment of items on the cross axis
+         * @allowedValues start | center | end | stretch | baseline
+         */
+        this.align = 'stretch';
+        /**
+         * Distribution of items on the main axis
+         * @allowedValues start | center | end | space-between | space-around | space-evenly
+         */
+        this.justify = 'start';
+        /**
+         * Whether items should wrap to multiple lines
+         */
+        this.wrap = false;
+        /**
+         * Alignment of wrapped lines (only applies when wrap is true)
+         * @allowedValues start | center | end | stretch | space-between | space-around
+         */
+        this.alignContent = 'stretch';
+        /**
+         * Whether to reverse the order of items
+         */
+        this.reverse = false;
+        /**
+         * Whether the stack should take full width of its container
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the stack should take full height of its container
+         */
+        this.fullHeight = false;
     }
-    get el() { return index.getElement(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;
@@ -126,8 +112,9 @@ const LeStack = class {
         });
         // 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 (index.h("le-component", { key: '465b00b5165b3c19f0043f5ffaab5081464692dc', component: "le-stack", hostClass: hostClass }, index.h("div", { key: '1787122eea7ee7f2986581ef8ab3c65068ef799f', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: '5be191bf1ea7d4edc2f27a6f97e57a038dc8cc94', 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 }, index.h("slot", { key: '9b11206293f60733a0c59de456513088373ce245' })))));
+        return (index.h("le-component", { key: 'b38f41c08716826a9f495c9b737adee10f67bec8', component: "le-stack", hostClass: hostClass }, index.h("div", { key: 'd9e716473b3395f89a5d1dfcd064e6292565b828', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: 'fc4d044642cbd9d1a25e300fffc8ad689a0133f2', 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 }, index.h("slot", { key: '94e72a818af3bdb4543f86358ea8ecd048ef5055' })))));
     }
+    get el() { return index.getElement(this); }
 };
 LeStack.style = leStackDefaultCss();
 

package/dist/cjs/le-tab-bar.cjs.entry.js

@@ -8,55 +8,85 @@ const LeTabBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leTabChange = index.createEvent(this, "leTabChange");
+        /**
+         * Array of tab options defining the tabs to display.
+         */
+        this.tabs = [];
+        /**
+         * Whether tabs should stretch to fill available width.
+         */
+        this.fullWidth = true;
+        /**
+         * Whether to show labels in icon-only mode.
+         */
+        this.showLabels = false;
+        /**
+         * Position of the tab bar.
+         * @allowedValues top | bottom
+         */
+        this.position = 'top';
+        /**
+         * Size of the tabs.
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Whether to show a border below the tab bar.
+         */
+        this.bordered = true;
+        /**
+         * Internal tab configurations (built from children or tabs prop)
+         */
+        this.tabConfigs = [];
+        /**
+         * Whether we're using declarative mode (le-tab-panel children)
+         */
+        this.isDeclarativeMode = false;
+        /**
+         * Internal state for focused tab index (for keyboard navigation)
+         */
+        this.focusedIndex = 0;
+        this.handleTabClick = (tab) => {
+            this.selectTab(tab);
+        };
+        this.handleKeyDown = (event) => {
+            const { tabConfigs } = this;
+            let newIndex = this.focusedIndex;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    newIndex = this.findNextEnabledTab(-1);
+                    break;
+                case 'ArrowRight':
+                    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;
+                if (tabConfigs[newIndex]) {
+                    this.selectTab(tabConfigs[newIndex]);
+                }
+            }
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Array of tab options defining the tabs to display.
-     */
-    tabs = [];
-    /**
-     * The value of the currently selected tab.
-     */
-    selected;
-    /**
-     * Whether tabs should stretch to fill available width.
-     */
-    fullWidth = true;
-    /**
-     * Whether to show labels in icon-only mode.
-     */
-    showLabels = false;
-    /**
-     * Position of the tab bar.
-     * @allowedValues top | bottom
-     */
-    position = 'top';
-    /**
-     * Size of the tabs.
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether to show a border below the tab bar.
-     */
-    bordered = true;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    tabConfigs = [];
-    /**
-     * Whether we're using declarative mode (le-tab-panel children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Internal state for focused tab index (for keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Emitted when the selected tab changes.
-     */
-    leTabChange;
-    mutationObserver;
     selectedChanged(newValue) {
         const index = this.tabConfigs.findIndex(t => t.value === newValue);
         if (index >= 0) {
@@ -155,46 +185,6 @@ const LeTabBar = class {
         this.selected = value;
         this.leTabChange.emit({ value, option: tab });
     }
-    handleTabClick = (tab) => {
-        this.selectTab(tab);
-    };
-    handleKeyDown = (event) => {
-        const { tabConfigs } = this;
-        let newIndex = this.focusedIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                newIndex = this.findNextEnabledTab(-1);
-                break;
-            case 'ArrowRight':
-                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;
-            if (tabConfigs[newIndex]) {
-                this.selectTab(tabConfigs[newIndex]);
-            }
-        }
-    };
     findNextEnabledTab(direction) {
         const { tabConfigs } = this;
         let index = this.focusedIndex;
@@ -225,12 +215,13 @@ const LeTabBar = class {
             'position-top': this.position === 'top',
             'position-bottom': this.position === 'bottom',
         };
-        return (index.h(index.Host, { key: '71b1a2d80884dc9a494edf55b28bfa178b44f284', class: classes }, index.h("le-component", { key: 'a09f1adff893b3b1f7c2f2ea0115133df906153f', component: "le-tab-bar" }, index.h("div", { key: 'f9b3046469fcaf0a3164fc5bb2038d54916dcb83', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: '2a4ef6c858a7a0c8d9d2942d68183887153101c3', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
+        return (index.h(index.Host, { key: 'f652526506b36c22ce349d7a35177ded9d7bdfdb', class: classes }, index.h("le-component", { key: 'f08e832354f7175492c29aa0761a617f2440b032', component: "le-tab-bar" }, index.h("div", { key: '6bb6f659626795d8dfd2df0eccfd817a6f561223', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: 'c6b64eaf7777645bb1eb760ed25c42a0d657a152', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
             const value = this.getTabValue(tab);
             const isSelected = value === selected;
             return (index.h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, index.h("span", { class: "tab-label" }, tab.label)));
         }))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "selected": ["selectedChanged"],
         "tabs": ["tabsChanged"]

package/dist/cjs/le-tab-panel.cjs.entry.js

@@ -7,44 +7,25 @@ const leTabPanelCss = () => `:host{display:contents;--le-tab-panel-radius:var(--
 const LeTabPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Whether this tab is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether to render the panel content only when active (lazy loading).
+         * When true, content is not rendered until the tab is first selected.
+         * When false (default), content is always in DOM but hidden when inactive.
+         */
+        this.lazy = false;
+        /**
+         * Internal: Whether this panel is currently active (set by parent le-tabs)
+         */
+        this.active = false;
+        /**
+         * Internal: Track if panel has ever been activated (for lazy rendering)
+         */
+        this.hasBeenActive = false;
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The label displayed in the tab button.
-     */
-    label;
-    /**
-     * The value used to identify this tab.
-     * Defaults to the label if not provided.
-     */
-    value;
-    /**
-     * Icon displayed at the start of the tab button.
-     * Can be an emoji, URL, or icon class.
-     */
-    iconStart;
-    /**
-     * Icon displayed at the end of the tab button.
-     */
-    iconEnd;
-    /**
-     * Whether this tab is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether to render the panel content only when active (lazy loading).
-     * When true, content is not rendered until the tab is first selected.
-     * When false (default), content is always in DOM but hidden when inactive.
-     */
-    lazy = false;
-    /**
-     * Internal: Whether this panel is currently active (set by parent le-tabs)
-     */
-    active = false;
-    /**
-     * Internal: Track if panel has ever been activated (for lazy rendering)
-     */
-    hasBeenActive = false;
     activeChanged(isActive) {
         if (isActive && !this.hasBeenActive) {
             this.hasBeenActive = true;
@@ -84,12 +65,13 @@ const LeTabPanel = class {
     }
     render() {
         const shouldRender = this.shouldRenderContent();
-        return (index.h("le-component", { key: '1315534f32fe8cc7f2ff1c0ec0457d30514064d4', component: "le-tab-panel" }, index.h("div", { key: '7544225e28b3be3e09269a669676515dc4ad097c', class: {
+        return (index.h("le-component", { key: '59065fc7bdcc672b1f57c4ae128de9d16a217df4', component: "le-tab-panel" }, index.h("div", { key: 'fedc22f870d44f09e377901ddb899165a732bc9a', class: {
                 'tab-panel': true,
                 'active': this.active,
                 'lazy-hidden': this.lazy && !this.active,
-            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: 'a686c87a4e5a62a6befb425141bd96b59273ec6b', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '76bd67392762a5ddbf8124c5596c6cb37ecf44fa' })))));
+            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: '9bfd050807c1fe1b6565d1412a7c53cff09bef60', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: 'ab002fd0fd28ece94864d2774d35170b3f506881' })))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "active": ["activeChanged"]
     }; }

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

@@ -12,82 +12,58 @@ const LeTab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leClick = index.createEvent(this, "click");
+        /**
+         * Tab variant style
+         * @allowedValues solid | underlined | clear | enclosed | icon-only
+         */
+        this.variant = 'underlined';
+        /**
+         * Position of the tabs when used within a le-tabs component
+         * @allowedValues top | bottom | start | end
+         */
+        this.position = 'top';
+        /**
+         * Tab size
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Whether the tab can get focus
+         * needed for accessibility when used in custom tab implementations
+         */
+        this.focusable = true;
+        /**
+         * Whether the tab is in a selected/active state
+         */
+        this.selected = false;
+        /**
+         * Whether the tab takes full width of its container
+         */
+        this.fullWidth = false;
+        /**
+         * Whether to show the label when in icon-only mode
+         */
+        this.showLabel = false;
+        /**
+         * Whether the tab is disabled
+         */
+        this.disabled = false;
+        /**
+         * Alignment of the tab label without the end icon
+         * @allowedValues start | center | space-between | end
+         */
+        this.align = 'center';
+        this.handleClick = (event) => {
+            // We stop the internal button click from bubbling up
+            event.stopPropagation();
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // And emit our own click event from the host element
+            this.leClick.emit(event);
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Label if it is not provided via slot
-     */
-    label;
-    /**
-     * Value of the tab, defaults to label if not provided
-     */
-    value;
-    /**
-     * Tab variant style
-     * @allowedValues solid | underlined | clear | enclosed | icon-only
-     */
-    variant = 'underlined';
-    /**
-     * Position of the tabs when used within a le-tabs component
-     * @allowedValues top | bottom | start | end
-     */
-    position = 'top';
-    /**
-     * Tab size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the tab can get focus
-     * needed for accessibility when used in custom tab implementations
-     */
-    focusable = true;
-    /**
-     * Whether the tab is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the tab takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Icon only tab image or emoji
-     * if this prop is set, the tab will render only the icon slot
-     */
-    icon;
-    /**
-     * Whether to show the label when in icon-only mode
-     */
-    showLabel = false;
-    /**
-     * Start icon image or emoji
-     */
-    iconStart;
-    /**
-     * End icon image or emoji
-     */
-    iconEnd;
-    /**
-     * Whether the tab is disabled
-     */
-    disabled = false;
-    /**
-     * Optional href to make the tab act as a link
-     */
-    href;
-    /**
-     * Link target when href is set
-     */
-    target;
-    /**
-     * Alignment of the tab label without the end icon
-     * @allowedValues start | center | space-between | end
-     */
-    align = 'center';
     /**
      * Get tab configuration for parent component
      */
@@ -101,21 +77,6 @@ const LeTab = class {
             disabled: this.disabled,
         };
     }
-    /**
-     * Emitted when the tab is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-tab.
-     */
-    leClick;
-    handleClick = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        // And emit our own click event from the host element
-        this.leClick.emit(event);
-    };
     render() {
         const classes = utils.classnames(`variant-${this.variant}`, `size-${this.size}`, `position-${this.position}`, {
             'selected': this.selected,
@@ -127,8 +88,9 @@ const LeTab = class {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { disabled: this.disabled };
-        return (index.h(index.Host, { key: 'a539044017f98ddaa7636df1457b669f56c19d94' }, index.h("le-component", { key: 'b6df3e0738be09d00f3cd802b3cd06af4402e746', component: "le-tab" }, index.h(TagType, { key: 'a37f2d404da74b5b0d99bbb0b9ff57121903ee2d', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (index.h(index.Host, { key: '1c4f36bb0cd97c1fea114d5119425507d133cf55' }, index.h("le-component", { key: '5a8755d8cf973d2f7d9f25e8d984f4a35047c6c2', component: "le-tab" }, index.h(TagType, { key: '875b8ef5905a15e3c114001f3a7b05ce3731e037', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeTab.style = leTabCss();