le-kit 0.5.2 → 0.5.4

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

@@ -1,133 +0,0 @@
-import { r as registerInstance, a as getElement, h } from './index-DFTm5BqT.js';
-import { c as classnames } from './utils-DZYCZLrF.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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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;
-    }
-    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("le-component", { key: '465b00b5165b3c19f0043f5ffaab5081464692dc', component: "le-stack", hostClass: hostClass }, h("div", { key: '1787122eea7ee7f2986581ef8ab3c65068ef799f', class: "stack", part: "stack", style: style }, 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 }, h("slot", { key: '9b11206293f60733a0c59de456513088373ce245' })))));
-    }
-};
-LeStack.style = leStackDefaultCss();
-
-export { LeStack as le_stack };
-//# sourceMappingURL=le-stack.entry.js.map

package/dist/esm/le-stack.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-stack.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -1,240 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DFTm5BqT.js';
-
-const leTabBarCss = () => `:host{display:block;--le-tab-bar-background:var(--le-color-surface);--le-tab-bar-border-color:var(--le-color-border);--le-tab-bar-gap:var(--le-spacing-2);--le-tab-bar-padding-y:var(--le-spacing-2);--le-tab-bar-padding-x:var(--le-spacing-1);background:var(--le-tab-bar-background);padding:var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x)}:host([full-width]){width:100%}:host(.bordered.position-top){border-bottom:1px solid var(--le-tab-bar-border-color)}:host(.bordered.position-bottom){border-top:1px solid var(--le-tab-bar-border-color)}.tablist{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-around;gap:var(--le-tab-bar-gap, var(--le-spacing-1));width:100%}.tab{display:inline-flex;align-items:flex-start;justify-content:space-around;gap:var(--le-spacing-2);position:relative;background:transparent;border:none;cursor:pointer}.tab-disabled{opacity:0.5;cursor:not-allowed}.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}.tab-description{font-size:var(--le-font-size-xs);font-weight:var(--le-font-weight-normal);color:var(--le-text-tertiary);margin-left:var(--le-spacing-1)}`;
-
-const LeTabBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leTabChange = createEvent(this, "leTabChange");
-    }
-    get el() { return 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) {
-            this.focusedIndex = index;
-        }
-    }
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildTabConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildTabConfigs();
-    }
-    componentWillLoad() {
-        this.buildTabConfigs();
-        if (this.selected === undefined && this.tabs.length > 0) {
-            const firstEnabled = this.tabs.find(tab => !tab.disabled);
-            if (firstEnabled) {
-                this.selected = this.getTabValue(firstEnabled);
-            }
-        }
-        if (this.selected !== undefined) {
-            const index = this.getTabIndex(this.selected);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    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 tabs = Array.from(this.el.querySelectorAll(':scope > le-tab'));
-        if (tabs.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const tab of tabs) {
-                const config = await tab.getTabConfig();
-                configs.push({ ...config });
-            }
-            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;
-            }
-        }
-    }
-    getTabValue(tab) {
-        return tab.value !== undefined ? tab.value : tab.label;
-    }
-    getTabIndex(value) {
-        return this.tabs.findIndex(tab => this.getTabValue(tab) === value);
-    }
-    selectTab(tab) {
-        if (tab.disabled)
-            return;
-        const value = this.getTabValue(tab);
-        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;
-        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(tab => !tab.disabled);
-    }
-    findLastEnabledTab() {
-        for (let i = this.tabConfigs.length - 1; i >= 0; i--) {
-            if (!this.tabConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    render() {
-        const { tabConfigs, selected, size, bordered } = this;
-        const classes = {
-            'le-tab-bar': true,
-            'bordered': bordered,
-            'position-top': this.position === 'top',
-            'position-bottom': this.position === 'bottom',
-        };
-        return (h(Host, { key: '71b1a2d80884dc9a494edf55b28bfa178b44f284', class: classes }, h("le-component", { key: 'a09f1adff893b3b1f7c2f2ea0115133df906153f', component: "le-tab-bar" }, h("div", { key: 'f9b3046469fcaf0a3164fc5bb2038d54916dcb83', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, h("le-slot", { key: '2a4ef6c858a7a0c8d9d2942d68183887153101c3', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
-            const value = this.getTabValue(tab);
-            const isSelected = value === selected;
-            return (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) }, h("span", { class: "tab-label" }, tab.label)));
-        }))))));
-    }
-    static get watchers() { return {
-        "selected": ["selectedChanged"],
-        "tabs": ["tabsChanged"]
-    }; }
-};
-LeTabBar.style = leTabBarCss();
-
-export { LeTabBar as le_tab_bar };
-//# sourceMappingURL=le-tab-bar.entry.js.map

package/dist/esm/le-tab-bar.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-tab-bar.entry.js","sources":["src/components/le-tab-bar/le-tab-bar.css?tag=le-tab-bar&encapsulation=shadow","src/components/le-tab-bar/le-tab-bar.tsx"],"sourcesContent":["/**\n * le-tab-bar - Default mode styles\n */\n\n:host {\n  display: block;\n  --le-tab-bar-background: var(--le-color-surface);\n  --le-tab-bar-border-color: var(--le-color-border);\n  --le-tab-bar-gap: var(--le-spacing-2);\n  --le-tab-bar-padding-y: var(--le-spacing-2);\n  --le-tab-bar-padding-x: var(--le-spacing-1);\n\n  background: var(--le-tab-bar-background);\n  padding: var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x);\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n:host(.bordered.position-top) {\n  border-bottom: 1px solid var(--le-tab-bar-border-color);\n}\n:host(.bordered.position-bottom) {\n  border-top: 1px solid var(--le-tab-bar-border-color);\n}\n\n/* ============================================\n * TABLIST\n * ============================================ */\n\n.tablist {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: space-around;\n  gap: var(--le-tab-bar-gap, var(--le-spacing-1));\n  width: 100%;\n}\n\n/* ============================================\n * TAB BUTTON BASE\n * ============================================ */\n\n.tab {\n  display: inline-flex;\n  align-items: flex-start;\n  justify-content: space-around;\n  gap: var(--le-spacing-2);\n  position: relative;\n  \n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.tab-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ============================================\n * TAB ICON\n * ============================================ */\n\n.tab-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  height: 1em;\n  font-size: 1.1em;\n}\n\n.tab-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ============================================\n * TAB DESCRIPTION\n * ============================================ */\n\n.tab-description {\n  font-size: var(--le-font-size-xs);\n  font-weight: var(--le-font-weight-normal);\n  color: var(--le-text-tertiary);\n  margin-left: var(--le-spacing-1);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  icon?: string;\n  href?: string;\n  disabled: boolean;\n}\n\n/**\n * A presentational tab bar component without panels.\n *\n * Use this for navigation/routing scenarios where you manage the content\n * externally based on the selection events. For tabs with built-in panels,\n * use `le-tabs` instead.\n *\n * @cssprop --le-tab-bar-border-color - Border color\n * @cssprop --le-tab-bar-gap - Gap between tabs\n * @cssprop --le-tab-bar-indicator-color - Active indicator color\n * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs\n * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs\n *\n * @csspart tablist - The tab button container\n * @csspart tab - Individual tab buttons\n * @csspart tab-active - The currently active tab\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tab-bar',\n  styleUrl: 'le-tab-bar.css',\n  shadow: true,\n})\nexport class LeTabBar {\n  @Element() el: HTMLElement;\n\n  /**\n   * Array of tab options defining the tabs to display.\n   */\n  @Prop() tabs: LeOption[] = [];\n\n  /**\n   * The value of the currently selected tab.\n   */\n  @Prop({ mutable: true }) selected?: LeOptionValue;\n\n  /**\n   * Whether tabs should stretch to fill available width.\n   */\n  @Prop() fullWidth: boolean = true;\n\n  /**\n   * Whether to show labels in icon-only mode.\n   */\n  @Prop() showLabels: boolean = false;\n\n  /**\n   * Position of the tab bar.\n   * @allowedValues top | bottom\n   */\n  @Prop() position: 'top' | 'bottom' = 'top';\n\n  /**\n   * Size of the tabs.\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to show a border below the tab bar.\n   */\n  @Prop() bordered: boolean = true;\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private tabConfigs: TabConfig[] = [];\n\n  /**\n   * Whether we're using declarative mode (le-tab-panel children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\n\n  /**\n   * Internal state for focused tab index (for keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Emitted when the selected tab changes.\n   */\n  @Event() leTabChange: EventEmitter<LeOptionSelectDetail>;\n\n  private mutationObserver?: MutationObserver;\n\n  @Watch('selected')\n  selectedChanged(newValue: LeOptionValue) {\n    const index = this.tabConfigs.findIndex(t => t.value === newValue);\n    if (index >= 0) {\n      this.focusedIndex = index;\n    }\n  }\n\n  @Watch('tabs')\n  tabsChanged() {\n    if (!this.isDeclarativeMode) {\n      this.buildTabConfigs();\n    }\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.buildTabConfigs();\n  }\n\n  componentWillLoad() {\n    this.buildTabConfigs();\n    if (this.selected === undefined && this.tabs.length > 0) {\n      const firstEnabled = this.tabs.find(tab => !tab.disabled);\n      if (firstEnabled) {\n        this.selected = this.getTabValue(firstEnabled);\n      }\n    }\n    if (this.selected !== undefined) {\n      const index = this.getTabIndex(this.selected);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  connectedCallback() {\n    // Watch for dynamic changes to children\n    this.mutationObserver = new MutationObserver(() => {\n      this.buildTabConfigs();\n    });\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async buildTabConfigs() {\n    // Check for le-tab-panel children\n    const tabs = Array.from(this.el.querySelectorAll(':scope > le-tab')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (tabs.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const tab of tabs) {\n        const config = await tab.getTabConfig();\n        configs.push({ ...config });\n      }\n\n      this.tabConfigs = configs;\n    } else if (this.tabs.length > 0) {\n      // Programmatic mode - use tabs prop\n      this.isDeclarativeMode = false;\n      this.tabConfigs = this.tabs.map(tab => ({\n        label: tab.label,\n        value: (tab.value !== undefined ? tab.value : tab.label) as string,\n        iconStart: tab.iconStart,\n        iconEnd: tab.iconEnd,\n        disabled: tab.disabled ?? false,\n      }));\n    } else {\n      this.tabConfigs = [];\n    }\n\n    // Set default selected\n    if (this.selected === undefined && this.tabConfigs.length > 0) {\n      const firstEnabled = this.tabConfigs.find(t => !t.disabled);\n      if (firstEnabled) {\n        this.selected = firstEnabled.value;\n      }\n    }\n\n    // Initialize focused index\n    if (this.selected !== undefined) {\n      const index = this.tabConfigs.findIndex(t => t.value === this.selected);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  private getTabValue(tab: LeOption): LeOptionValue {\n    return tab.value !== undefined ? tab.value : tab.label;\n  }\n\n  private getTabIndex(value: LeOptionValue): number {\n    return this.tabs.findIndex(tab => this.getTabValue(tab) === value);\n  }\n\n  private selectTab(tab: LeOption) {\n    if (tab.disabled) return;\n\n    const value = this.getTabValue(tab);\n    this.selected = value;\n    this.leTabChange.emit({ value, option: tab });\n  }\n\n  private handleTabClick = (tab: LeOption) => {\n    this.selectTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { tabConfigs } = this;\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = this.findNextEnabledTab(-1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = this.findNextEnabledTab(1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = this.findFirstEnabledTab();\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = this.findLastEnabledTab();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (tabConfigs[this.focusedIndex]) {\n          this.selectTab(tabConfigs[this.focusedIndex]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.focusedIndex) {\n      this.focusedIndex = newIndex;\n      if (tabConfigs[newIndex]) {\n        this.selectTab(tabConfigs[newIndex]);\n      }\n    }\n  };\n\n  private findNextEnabledTab(direction: 1 | -1): number {\n    const { tabConfigs } = this;\n    let index = this.focusedIndex;\n    const length = tabConfigs.length;\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length;\n      if (!tabConfigs[index].disabled) {\n        return index;\n      }\n    }\n    return this.focusedIndex;\n  }\n\n  private findFirstEnabledTab(): number {\n    return this.tabConfigs.findIndex(tab => !tab.disabled);\n  }\n\n  private findLastEnabledTab(): number {\n    for (let i = this.tabConfigs.length - 1; i >= 0; i--) {\n      if (!this.tabConfigs[i].disabled) return i;\n    }\n    return 0;\n  }\n\n  render() {\n    const { tabConfigs, selected, size, bordered } = this;\n\n    const classes = {\n      'le-tab-bar': true,\n      'bordered': bordered,\n      'position-top': this.position === 'top',\n      'position-bottom': this.position === 'bottom',\n    };\n\n    return (\n      <Host class={classes}>\n        <le-component component=\"le-tab-bar\">\n          <div\n            class=\"tablist\"\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            part=\"tablist\"\n            onKeyDown={this.handleKeyDown}\n          >\n            <le-slot name=\"\" type=\"slot\" allowedComponents=\"le-tab\">\n              {tabConfigs.map(tab => {\n                const value = this.getTabValue(tab);\n                const isSelected = value === selected;\n\n                return (\n                  <le-tab\n                    key={value}\n                    class=\"tab\"\n                    role=\"tab\"\n                    variant=\"icon-only\"\n                    label={tab.label}\n                    value={tab.value}\n                    icon={tab.icon}\n                    href={tab.href}\n                    selected={isSelected}\n                    disabled={tab.disabled}\n                    showLabel={this.showLabels}\n                    size={size}\n                    part={isSelected ? 'tab tab-active' : 'tab'}\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-disabled={tab.disabled ? 'true' : undefined}\n                    tabIndex={-1}\n                    onClick={() => this.handleTabClick(tab)}\n                  >\n                    <span class=\"tab-label\">{tab.label}</span>\n                  </le-tab>\n                );\n              })}\n            </le-slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,98 +0,0 @@
-import { r as registerInstance, a as getElement, h } from './index-DFTm5BqT.js';
-
-const leTabPanelCss = () => `:host{display:contents;--le-tab-panel-radius:var(--le-radius-md);--le-tab-panel-padding:var(--le-spacing-4)}.tab-panel{margin-top:4px;display:none;border-radius:var(--le-tab-panel-radius);padding:var(--le-tab-panel-padding)}.tab-panel.active{display:block}.tab-panel:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.tab-panel.lazy-hidden{display:none}`;
-
-const LeTabPanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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;
-        }
-    }
-    /**
-     * Get the effective value (value or label as fallback)
-     */
-    async getValue() {
-        return this.value ?? this.label;
-    }
-    /**
-     * Get tab configuration for parent component
-     */
-    async getTabConfig() {
-        return {
-            label: this.label,
-            value: this.value ?? this.label,
-            iconStart: this.iconStart,
-            iconEnd: this.iconEnd,
-            disabled: this.disabled,
-        };
-    }
-    /**
-     * Set the active state (called by parent le-tabs)
-     */
-    async setActive(isActive) {
-        this.active = isActive;
-    }
-    /**
-     * Check if panel should render content
-     */
-    shouldRenderContent() {
-        if (!this.lazy)
-            return true;
-        return this.hasBeenActive;
-    }
-    render() {
-        const shouldRender = this.shouldRenderContent();
-        return (h("le-component", { key: '1315534f32fe8cc7f2ff1c0ec0457d30514064d4', component: "le-tab-panel" }, h("div", { key: '7544225e28b3be3e09269a669676515dc4ad097c', 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 }, h("le-slot", { key: 'a686c87a4e5a62a6befb425141bd96b59273ec6b', name: "", description: "Tab panel content", type: "slot" }, shouldRender && h("slot", { key: '76bd67392762a5ddbf8124c5596c6cb37ecf44fa' })))));
-    }
-    static get watchers() { return {
-        "active": ["activeChanged"]
-    }; }
-};
-LeTabPanel.style = leTabPanelCss();
-
-export { LeTabPanel as le_tab_panel };
-//# sourceMappingURL=le-tab-panel.entry.js.map

package/dist/esm/le-tab-panel.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-tab-panel.entry.js","sources":["src/components/le-tab-panel/le-tab-panel.css?tag=le-tab-panel&encapsulation=shadow","src/components/le-tab-panel/le-tab-panel.tsx"],"sourcesContent":["/**\n * le-tab-panel - Styles\n */\n\n:host {\n  display: contents;\n  --le-tab-panel-radius: var(--le-radius-md);\n  --le-tab-panel-padding: var(--le-spacing-4);\n}\n\n.tab-panel {\n  margin-top: 4px;\n  display: none;\n  border-radius: var(--le-tab-panel-radius);\n  padding: var(--le-tab-panel-padding);\n}\n\n.tab-panel.active {\n  display: block;\n}\n\n.tab-panel:focus-visible {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n/* For lazy panels that have been rendered but are now hidden */\n.tab-panel.lazy-hidden {\n  display: none;\n}\n","import { Component, Prop, h, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A tab panel component used as a child of le-tabs.\n *\n * Each le-tab-panel defines both the tab button label and the panel content.\n * The parent le-tabs component automatically reads these panels and creates\n * the tab interface.\n *\n * @slot - Default slot for panel content\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tab-panel',\n  styleUrl: 'le-tab-panel.css',\n  shadow: true,\n})\nexport class LeTabPanel {\n  @Element() el: HTMLLeTabPanelElement;\n\n  /**\n   * The label displayed in the tab button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The value used to identify this tab.\n   * Defaults to the label if not provided.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Icon displayed at the start of the tab button.\n   * Can be an emoji, URL, or icon class.\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Icon displayed at the end of the tab button.\n   */\n  @Prop() iconEnd?: string;\n\n  /**\n   * Whether this tab is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to render the panel content only when active (lazy loading).\n   * When true, content is not rendered until the tab is first selected.\n   * When false (default), content is always in DOM but hidden when inactive.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * Internal: Whether this panel is currently active (set by parent le-tabs)\n   */\n  @State() active: boolean = false;\n\n  /**\n   * Internal: Track if panel has ever been activated (for lazy rendering)\n   */\n  @State() hasBeenActive: boolean = false;\n\n  @Watch('active')\n  activeChanged(isActive: boolean) {\n    if (isActive && !this.hasBeenActive) {\n      this.hasBeenActive = true;\n    }\n  }\n\n  /**\n   * Get the effective value (value or label as fallback)\n   */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.value ?? this.label;\n  }\n\n  /**\n   * Get tab configuration for parent component\n   */\n  @Method()\n  async getTabConfig(): Promise<{\n    label: string;\n    value: string;\n    iconStart?: string;\n    iconEnd?: string;\n    disabled: boolean;\n  }> {\n    return {\n      label: this.label,\n      value: this.value ?? this.label,\n      iconStart: this.iconStart,\n      iconEnd: this.iconEnd,\n      disabled: this.disabled,\n    };\n  }\n\n  /**\n   * Set the active state (called by parent le-tabs)\n   */\n  @Method()\n  async setActive(isActive: boolean) {\n    this.active = isActive;\n  }\n\n  /**\n   * Check if panel should render content\n   */\n  private shouldRenderContent(): boolean {\n    if (!this.lazy) return true;\n    return this.hasBeenActive;\n  }\n\n  render() {\n    const shouldRender = this.shouldRenderContent();\n\n    return (\n      <le-component component=\"le-tab-panel\">\n        <div\n          class={{\n            'tab-panel': true,\n            'active': this.active,\n            'lazy-hidden': this.lazy && !this.active,\n          }}\n          role=\"tabpanel\"\n          aria-hidden={!this.active ? 'true' : undefined}\n          tabIndex={this.active ? 0 : -1}\n        >\n          <le-slot name=\"\" description=\"Tab panel content\" type=\"slot\">\n            {shouldRender && <slot></slot>}\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,wXAAwX,CAAC;;MCmBzY,UAAU,GAAA,MAAA;;;;;AAGrB;;AAEG;AACK,IAAA,KAAK;AAEb;;;AAGG;AACK,IAAA,KAAK;AAEb;;;AAGG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;;AAIG;IACK,IAAI,GAAY,KAAK;AAE7B;;AAEG;IACM,MAAM,GAAY,KAAK;AAEhC;;AAEG;IACM,aAAa,GAAY,KAAK;AAGvC,IAAA,aAAa,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACnC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;;AAI7B;;AAEG;AAEH,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;;AAGjC;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;QAOhB,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGH;;AAEG;IAEH,MAAM,SAAS,CAAC,QAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;AAGxB;;AAEG;IACK,mBAAmB,GAAA;QACzB,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QAC3B,OAAO,IAAI,CAAC,aAAa;;IAG3B,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAE/C,QACE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,SAAS,EAAC,cAAc,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,aAAa,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM;AACzC,aAAA,EACD,IAAI,EAAC,UAAU,EAAA,aAAA,EACF,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,EAAA,EAE9B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,EAAE,EAAC,WAAW,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,EACzD,YAAY,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACtB,CACN,CACO;;;;;;;;;;"}