le-kit 0.1.14 → 0.1.16

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

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-CHzu3ydp.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) {
+        index.registerInstance(this, hostRef);
+    }
+    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;
+        }
+    }
+    /**
+     * 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 (index.h("le-component", { key: '7535af661c66a3e0f895b43c34ec2003a20977f9', component: "le-tab-panel" }, index.h("div", { key: '611858453c00a66a0510a570b0198594f6c19330', 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: 'e154ef618cecb4d21bde2a383c557515dd9f4ca1', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '0c4b8905c656b0c14c21216c7c1cbc1eb0696ead' })))));
+    }
+    static get watchers() { return {
+        "active": ["activeChanged"]
+    }; }
+};
+LeTabPanel.style = leTabPanelCss;
+
+exports.le_tab_panel = LeTabPanel;
+//# sourceMappingURL=le-tab-panel.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-tab-panel.entry.cjs.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":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,0XAA0X;;MCmBnY,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,QACEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,SAAS,EAAC,cAAc,EAAA,EACpCA,OAAA,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,EAE9BA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,EAAE,EAAC,WAAW,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,EACzD,YAAY,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACtB,CACN,CACO;;;;;;;;;;"}

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

@@ -0,0 +1,133 @@
+'use strict';
+
+var index = require('./index-CHzu3ydp.js');
+var utils = require('./utils-CYOKcOW8.js');
+
+const leTabCss = ":host{display:inline-block;--le-tab-border-radius:var(--le-radius-md);--le-tab-padding-x:var(--le-spacing-4);--le-tab-padding-y:var(--le-spacing-2);--le-tab-padding:var(--le-tab-padding-y) var(--le-tab-padding-x);--le-tab-small-padding:0.25rem;--le-tab-font-size:var(--le-font-size-md);--le-tab-font-weight:var(--le-font-weight-medium);--le-tab-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-tab-icon-aspect-ratio:1;--le-tab-icon-only-aspect-ratio:2.5;--le-tab-color:var(--le-color-text-primary);--le-selected-tab-color:var(--le-color-primary);--le-selected-icon-only-tab-background:color-mix(in srgb, var(--_tab-bg) 10%, transparent);--_tab-bg:var(--le-color-primary);--_tab-bg-hover:var(--le-color-primary-dark);--_tab-bg-system:var(--le-color-black);--_tab-color:var(--le-tab-color);--_tab-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-tab-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-tab-padding);color:var(--_tab-color);font-family:var(--le-font-family-base);font-size:var(--le-tab-font-size);font-weight:var(--le-tab-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-tab-transition) var(--le-transition-easing),\n    border-color var(--le-tab-transition) var(--le-transition-easing),\n    box-shadow var(--le-tab-transition) var(--le-transition-easing),\n    transform var(--le-tab-transition) var(--le-transition-easing)}.le-tab-container:hover:not(:disabled){color:var(--le-selected-tab-color)}.le-tab-container:focus-visible{outline:none}.le-tab-container:disabled{opacity:0.5;cursor:not-allowed}.le-tab-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}.le-tab-container.variant-underlined{background:transparent;border:2px solid transparent;border-radius:0}.le-tab-container.variant-underlined.position-start,.le-tab-container.variant-underlined.position-end{border-block-width:0}.le-tab-container.variant-underlined.position-start{padding-inline-start:0}.le-tab-container.variant-underlined.position-top,.le-tab-container.variant-underlined.position-bottom{border-inline-width:0}.le-tab-container.variant-underlined.position-start.selected{border-inline-end-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-end.selected{border-inline-start-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-top.selected{border-bottom-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-bottom.selected{border-top-color:var(--_tab-border-color)}.le-tab-container.variant-solid{background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-solid.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-pills{background:transparent;border-radius:var(--le-radius-full);border:none}.le-tab-container.variant-pills.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-enclosed{padding-block:var(--le-spacing-1);background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-enclosed.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-icon-only{border:none;padding:0;background:transparent;color:var(--_tab-color)}.le-tab-container.variant-icon-only .icon-only{flex-direction:column}.le-tab-container.variant-icon-only .icon{display:flex;align-items:center;justify-content:center;min-height:var(--le-font-size-3xl);aspect-ratio:var(--le-tab-icon-only-aspect-ratio);font-size:var(--le-font-size-2xl);border-radius:var(--le-radius-full)}.le-tab-container.variant-icon-only .icon-label{margin-top:var(--le-spacing-1);font-size:var(--le-font-size-2xs)}.le-tab-container.variant-icon-only.selected{color:var(--le-selected-tab-color)}.le-tab-container.variant-icon-only.selected .icon{background:var(--le-selected-icon-only-tab-background)}.le-tab-container.variant-icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.variant-icon-only .content{display:none}.le-tab-container.size-small{--le-tab-padding-x:0.4rem;--le-tab-padding-y:0.3rem;--le-tab-padding-top:0.35rem;--le-tab-font-size:var(--le-tab-small-font-size, var(--le-font-size-xs))}.le-tab-container.size-large{--le-tab-padding-x:0.9rem;--le-tab-padding-y:0.6rem;--le-tab-font-size:var(--le-font-size-xl)}.le-tab-container.full-width{display:block;width:100%}.le-tab-container.variant-underlined.selected,.le-tab-container.variant-clear.selected{color:var(--le-selected-tab-color)}:host>le-component.icon-only .le-tab-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-tab-icon-aspect-ratio, 1)}.le-tab-container.icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.icon-only.size-large{padding:0.75rem}.le-tab-container.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-tab-align-start{justify-content:flex-start}.le-tab-align-center{justify-content:center}.le-tab-align-space-between{justify-content:space-between}.le-tab-align-end{justify-content:flex-end}";
+
+const LeTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leClick = index.createEvent(this, "click");
+    }
+    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
+     */
+    async getTabConfig() {
+        return {
+            label: this.label,
+            value: this.value ?? this.label,
+            icon: this.icon,
+            iconStart: this.iconStart,
+            iconEnd: this.iconEnd,
+            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,
+            'full-width': this.fullWidth,
+            'icon-only': this.icon !== undefined,
+            'disabled': this.disabled,
+        });
+        const TagType = this.href ? 'a' : 'button';
+        const attrs = this.href
+            ? { href: this.href, target: this.target, role: 'button' }
+            : { disabled: this.disabled };
+        return (index.h(index.Host, { key: '6632a9b9df74dab0cb6bd638f35b55cc4a573e0e' }, index.h("le-component", { key: '3ed311094833d6e8819c35b1eaf69456dcb47773', component: "le-tab" }, index.h(TagType, { key: 'b9a3ca7a85e228da9a25ff9fc14a79cd9b4ffc41', 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))))))));
+    }
+};
+LeTab.style = leTabCss;
+
+exports.le_tab = LeTab;
+//# sourceMappingURL=le-tab.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-tab.entry.cjs.js","sources":["src/components/le-tab/le-tab.css?tag=le-tab&encapsulation=shadow","src/components/le-tab/le-tab.tsx"],"sourcesContent":["/**\n * Default mode styles for le-button\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: inline-block;\n  \n  /* Component-specific tokens */\n  --le-tab-border-radius: var(--le-radius-md);\n  --le-tab-padding-x: var(--le-spacing-4);\n  --le-tab-padding-y: var(--le-spacing-2);\n  --le-tab-padding: var(--le-tab-padding-y) var(--le-tab-padding-x);\n  --le-tab-small-padding: 0.25rem;\n  --le-tab-font-size: var(--le-font-size-md);\n  --le-tab-font-weight: var(--le-font-weight-medium);\n  --le-tab-transition: var(--le-transition-fast);\n  --le-transition-easing: ease-in-out;\n  --le-tab-icon-aspect-ratio: 1;\n  --le-tab-icon-only-aspect-ratio: 2.5;\n  --le-tab-color: var(--le-color-text-primary);\n  --le-selected-tab-color: var(--le-color-primary);\n  --le-selected-icon-only-tab-background: color-mix(in srgb, var(--_tab-bg) 10%, transparent);\n  \n  /* Internal state variables - set by color classes */\n  --_tab-bg: var(--le-color-primary);\n  --_tab-bg-hover: var(--le-color-primary-dark);\n  --_tab-bg-system: var(--le-color-black);\n  --_tab-color: var(--le-tab-color);\n  --_tab-border-color: var(--le-color-primary);\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n.le-tab-container {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-3);\n  width: 100%;\n  padding: var(--le-tab-padding);\n  color: var(--_tab-color);\n  font-family: var(--le-font-family-base);\n  font-size: var(--le-tab-font-size);\n  font-weight: var(--le-tab-font-weight);\n  line-height: var(--le-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition: \n    background-color var(--le-tab-transition) var(--le-transition-easing),\n    border-color var(--le-tab-transition) var(--le-transition-easing),\n    box-shadow var(--le-tab-transition) var(--le-transition-easing),\n    transform var(--le-tab-transition) var(--le-transition-easing);\n}\n\n.le-tab-container:hover:not(:disabled) {\n  color: var(--le-selected-tab-color);\n}\n\n.le-tab-container:focus-visible {\n  outline: none;\n}\n\n.le-tab-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.le-tab-label {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-2);\n}\n\n/* ===========================================\n * STYLE VARIANTS\n * =========================================== */\n\n/* Underlined (default for tabs), depends on the position (top, bottom, start, end) */\n.le-tab-container.variant-underlined {\n  background: transparent;\n  border: 2px solid transparent;\n  border-radius: 0;\n}\n.le-tab-container.variant-underlined.position-start,\n.le-tab-container.variant-underlined.position-end {\n  border-block-width: 0;\n}\n.le-tab-container.variant-underlined.position-start {\n  padding-inline-start: 0;\n}\n.le-tab-container.variant-underlined.position-top,\n.le-tab-container.variant-underlined.position-bottom {\n  border-inline-width: 0;\n}\n.le-tab-container.variant-underlined.position-start.selected {\n  border-inline-end-color: var(--_tab-border-color);\n}\n.le-tab-container.variant-underlined.position-end.selected {\n  border-inline-start-color: var(--_tab-border-color);\n}\n.le-tab-container.variant-underlined.position-top.selected {\n  border-bottom-color: var(--_tab-border-color);\n}\n.le-tab-container.variant-underlined.position-bottom.selected {\n  border-top-color: var(--_tab-border-color);\n}\n\n/* Solid (default) - already styled by color classes */\n.le-tab-container.variant-solid {\n  background: transparent;\n  border-radius: var(--le-tab-border-radius);\n  border: none;\n}\n.le-tab-container.variant-solid.selected {\n  background: var(--_tab-bg);\n  color: var(--le-color-on-primary);\n}\n\n/* Pills */\n.le-tab-container.variant-pills {\n  background: transparent;\n  border-radius: var(--le-radius-full);\n  border: none;\n}\n.le-tab-container.variant-pills.selected {\n  background: var(--_tab-bg);\n  color: var(--le-color-on-primary);\n}\n\n/* Enclosed */\n.le-tab-container.variant-enclosed {\n  padding-block: var(--le-spacing-1);\n  background: transparent;\n  border-radius: var(--le-tab-border-radius);\n  border: none;\n}\n.le-tab-container.variant-enclosed.selected {\n  background: var(--_tab-bg);\n  color: var(--le-color-on-primary);\n}\n\n/* Icon only (used in le-tab-bar - mobile navigation) */\n.le-tab-container.variant-icon-only {\n  border: none;\n  padding: 0;\n  background: transparent;\n  color: var(--_tab-color);\n}\n.le-tab-container.variant-icon-only .icon-only {\n  flex-direction: column;\n}\n.le-tab-container.variant-icon-only .icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--le-font-size-3xl);\n  aspect-ratio: var(--le-tab-icon-only-aspect-ratio);\n  font-size: var(--le-font-size-2xl);\n  border-radius: var(--le-radius-full);\n}\n.le-tab-container.variant-icon-only .icon-label {\n  margin-top: var(--le-spacing-1);\n  font-size: var(--le-font-size-2xs);\n}\n\n.le-tab-container.variant-icon-only.selected {\n  color: var(--le-selected-tab-color);\n}\n.le-tab-container.variant-icon-only.selected .icon {\n  background: var(--le-selected-icon-only-tab-background);\n}\n.le-tab-container.variant-icon-only.size-small {\n  padding: var(--le-tab-small-padding, 0.25rem);\n}\n.le-tab-container.variant-icon-only .content {\n  display: none;\n}\n\n\n/* ===========================================\n * SIZES\n * =========================================== */\n.le-tab-container.size-small {\n  --le-tab-padding-x: 0.4rem;\n  --le-tab-padding-y: 0.3rem;\n  --le-tab-padding-top: 0.35rem;\n  --le-tab-font-size: var(--le-tab-small-font-size, var(--le-font-size-xs));\n}\n\n.le-tab-container.size-large {\n  --le-tab-padding-x: 0.9rem;\n  --le-tab-padding-y: 0.6rem;\n  --le-tab-font-size: var(--le-font-size-xl);\n}\n\n/* ===========================================\n * STATES & MODIFIERS\n * =========================================== */\n\n/* Full width */\n.le-tab-container.full-width {\n  display: block;\n  width: 100%;\n}\n\n.le-tab-container.variant-underlined.selected,\n.le-tab-container.variant-clear.selected {\n  color: var(--le-selected-tab-color);\n}\n\n/* Icon only */\n:host > le-component.icon-only .le-tab-container {\n  padding: 0.5rem;\n  padding-bottom: 0.6rem;\n  aspect-ratio: var(--le-tab-icon-aspect-ratio, 1);\n}\n\n.le-tab-container.icon-only.size-small {\n  padding: var(--le-tab-small-padding, 0.25rem);\n}\n\n.le-tab-container.icon-only.size-large {\n  padding: 0.75rem;\n}\n\n/* Hide content in icon-only mode */\n.le-tab-container.icon-only .content {\n  display: none;\n}\n\n/* ===========================================\n * CONTENT (le-slot wrapper)\n * =========================================== */\n.content {\n  display: inline;\n}\n\n.content:empty {\n  display: none;\n}\n\n/* ===========================================\n * ICON WRAPPERS & SLOTS\n * =========================================== */\n.icon-start,\n.icon-only,\n.icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-start:empty,\n.icon-only:empty,\n.icon-end:empty {\n  display: none;\n}\n\n::slotted([slot=\"icon-start\"]),\n::slotted([slot=\"icon-only\"]),\n::slotted([slot=\"icon-end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125em;\n  height: 1.125em;\n}\n\n/* ===========================================\n * ALIGNMENT MODIFIERS\n * =========================================== */\n.le-tab-align-start {\n  justify-content: flex-start;\n}\n.le-tab-align-center {\n  justify-content: center;\n}\n.le-tab-align-space-between {\n  justify-content: space-between;\n}\n.le-tab-align-end {\n  justify-content: flex-end;\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible tab component with multiple variants and states.\n *\n * @slot - Tab text content\n * @slot icon-only - Icon for icon-only tabs\n *\n * @cssprop --le-tab-bg - Tab background color\n * @cssprop --le-tab-color - Tab text color\n * @cssprop --le-tab-border-radius - Tab border radius\n * @cssprop --le-tab-padding-x - Tab horizontal padding\n * @cssprop --le-tab-padding-y - Tab vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The tab content wrapper\n * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-tab',\n  styleUrl: 'le-tab.css',\n  shadow: true,\n})\nexport class LeTab {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Label if it is not provided via slot\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the tab, defaults to label if not provided\n   */\n  @Prop() value?: string;\n\n  /**\n   * Tab variant style\n   * @allowedValues solid | underlined | clear | enclosed | icon-only\n   */\n  @Prop() variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only' = 'underlined';\n\n  /**\n   * Position of the tabs when used within a le-tabs component\n   * @allowedValues top | bottom | start | end\n   */\n  @Prop() position: 'top' | 'bottom' | 'start' | 'end' = 'top';\n\n  /**\n   * Tab size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab can get focus\n   * needed for accessibility when used in custom tab implementations\n   */\n  @Prop() focusable: boolean = true;\n\n  /**\n   * Whether the tab is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the tab takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Icon only tab image or emoji\n   * if this prop is set, the tab will render only the icon slot\n   */\n  @Prop() icon?: string | Node;\n\n  /**\n   * Whether to show the label when in icon-only mode\n   */\n  @Prop() showLabel: boolean = false;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to make the tab act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Alignment of the tab label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Get tab configuration for parent component\n   */\n  @Method()\n  async getTabConfig(): Promise<{\n    label: string;\n    value: string;\n    icon: string | Node;\n    iconStart?: string | Node;\n    iconEnd?: string | Node;\n    disabled: boolean;\n  }> {\n    return {\n      label: this.label,\n      value: this.value ?? this.label,\n      icon: this.icon,\n      iconStart: this.iconStart,\n      iconEnd: this.iconEnd,\n      disabled: this.disabled,\n    };\n  }\n\n  /**\n   * Emitted when the tab is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-tab.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(\n      `variant-${this.variant}`,\n      `size-${this.size}`,\n      `position-${this.position}`,\n      {\n        'selected': this.selected,\n        'full-width': this.fullWidth,\n        'icon-only': this.icon !== undefined,\n        'disabled': this.disabled,\n      },\n    );\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.href, target: this.target, role: 'button' }\n      : { disabled: this.disabled };\n\n    return (\n      <Host>\n        <le-component component=\"le-tab\">\n          <TagType\n            class={classnames('le-tab-container', `le-tab-align-${this.align}`, classes)}\n            part=\"button\"\n            {...attrs}\n            onClick={this.handleClick}\n            tabIndex={this.focusable ? 0 : -1}\n          >\n            {this.icon !== undefined ? (\n              <div class=\"icon-only\">\n                <div class=\"icon\">{this.icon}</div>\n                {this.showLabel && <span class=\"icon-label\">{this.label}</span>}\n              </div>\n            ) : (\n              <Fragment>\n                <span class=\"le-tab-label\">\n                  {this.iconStart && (\n                    <span class=\"icon-start\" part=\"icon-start\">\n                      {this.iconStart}\n                    </span>\n                  )}\n                  <le-slot\n                    name=\"\"\n                    description=\"Tab text\"\n                    type=\"text\"\n                    class=\"content\"\n                    part=\"content\"\n                  >\n                    <slot>{this.label}</slot>\n                  </le-slot>\n                </span>\n                {this.iconEnd && (\n                  <span class=\"icon-end\" part=\"icon-end\">\n                    {this.iconEnd}\n                  </span>\n                )}\n              </Fragment>\n            )}\n          </TagType>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"names":["classnames","h","Host","Fragment"],"mappings":"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"}

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

@@ -0,0 +1,307 @@
+'use strict';
+
+var index = require('./index-CHzu3ydp.js');
+var utils = require('./utils-CYOKcOW8.js');
+
+const leTabsCss = ":host{display:block;--le-tabs-gap:var(--le-spacing-1);--le-tabs-border-color:var(--le-border-color);--le-tabs-padding-y:var(--le-spacing-2);--le-tabs-padding-x:var(--le-spacing-4);--le-tabs-enclosed-bg:var(--le-color-background-secondary)}.le-tabs{display:flex;flex-direction:column}.le-tabs.orientation-vertical{flex-direction:row}.tablist{display:flex;position:relative;border-radius:var(--le-radius-md);gap:var(--le-tabs-gap)}.tablist.wrap-tabs{flex-wrap:wrap}.tablist.overflow-auto{overflow:auto}.tablist.overflow-hidden{overflow:hidden}.tablist.overflow-visible{overflow:visible}.tablist.overflow-scroll{overflow:scroll}.tablist:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.orientation-horizontal .tablist{flex-direction:row;border-bottom:1px solid var(--le-tabs-border-color)}.orientation-vertical .tablist{flex-direction:column;border-right:1px solid var(--le-tabs-border-color);min-width:150px}.full-width .tablist{width:100%}.full-width.orientation-horizontal .tab{flex:1}.variant-underlined .tablist{padding-inline:4px}.variant-pills .tablist{border-radius:calc(1.12rem)}.variant-enclosed .tablist{border:none;gap:0;background-color:var(--le-tabs-enclosed-bg);border-radius:calc(var(--le-radius-md) + var(--le-spacing-1));padding:var(--le-spacing-1)}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.panels{flex:1;min-height:0}.panel{padding:var(--le-tabs-panel-padding, var(--le-spacing-4))}.panel[hidden]{display:none}.orientation-vertical .panels{padding-left:var(--le-spacing-4)}.position-end .panels{order:1}.position-end .tablist{order:2}";
+
+const LeTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leTabChange = index.createEvent(this, "leTabChange");
+    }
+    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) {
+            this.focusedIndex = index;
+        }
+        this.updatePanelStates();
+    }
+    tabsChanged() {
+        if (!this.isDeclarativeMode) {
+            this.buildTabConfigs();
+        }
+    }
+    handleSlotChange() {
+        this.buildTabConfigs();
+    }
+    componentWillLoad() {
+        this.buildTabConfigs();
+    }
+    connectedCallback() {
+        // Watch for dynamic changes to children
+        this.mutationObserver = new MutationObserver(() => {
+            this.buildTabConfigs();
+        });
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    async buildTabConfigs() {
+        // Check for le-tab-panel children
+        const panels = Array.from(this.el.querySelectorAll(':scope > le-tab-panel'));
+        if (panels.length > 0) {
+            // Declarative mode - build from children
+            this.isDeclarativeMode = true;
+            const configs = [];
+            for (const panel of panels) {
+                const config = await panel.getTabConfig();
+                configs.push({ ...config, panel });
+            }
+            this.tabConfigs = configs;
+        }
+        else if (this.tabs.length > 0) {
+            // Programmatic mode - use tabs prop
+            this.isDeclarativeMode = false;
+            this.tabConfigs = this.tabs.map(tab => ({
+                label: tab.label,
+                value: (tab.value !== undefined ? tab.value : tab.label),
+                iconStart: tab.iconStart,
+                iconEnd: tab.iconEnd,
+                disabled: tab.disabled ?? false,
+            }));
+        }
+        else {
+            this.tabConfigs = [];
+        }
+        // Set default selected
+        if (this.selected === undefined && this.tabConfigs.length > 0) {
+            const firstEnabled = this.tabConfigs.find(t => !t.disabled);
+            if (firstEnabled) {
+                this.selected = firstEnabled.value;
+            }
+        }
+        // Initialize focused index
+        if (this.selected !== undefined) {
+            const index = this.tabConfigs.findIndex(t => t.value === this.selected);
+            if (index >= 0) {
+                this.focusedIndex = index;
+            }
+        }
+        // Update panel active states
+        this.updatePanelStates();
+    }
+    async updatePanelStates() {
+        if (!this.isDeclarativeMode)
+            return;
+        for (const config of this.tabConfigs) {
+            if (config.panel) {
+                const isActive = config.value === this.selected;
+                await config.panel.setActive(isActive);
+            }
+        }
+    }
+    selectTab(config) {
+        if (config.disabled)
+            return;
+        this.selected = config.value;
+        this.leTabChange.emit({
+            value: config.value,
+            option: {
+                label: config.label,
+                value: config.value,
+                iconStart: config.iconStart,
+                iconEnd: config.iconEnd,
+                disabled: config.disabled,
+            },
+        });
+    }
+    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;
+        const length = tabConfigs.length;
+        for (let i = 0; i < length; i++) {
+            index = (index + direction + length) % length;
+            if (!tabConfigs[index].disabled) {
+                return index;
+            }
+        }
+        return this.focusedIndex;
+    }
+    findFirstEnabledTab() {
+        return this.tabConfigs.findIndex(t => !t.disabled);
+    }
+    findLastEnabledTab() {
+        for (let i = this.tabConfigs.length - 1; i >= 0; i--) {
+            if (!this.tabConfigs[i].disabled)
+                return i;
+        }
+        return 0;
+    }
+    focusTab(index) {
+        const tablist = this.el.shadowRoot?.querySelector('[role="tablist"]');
+        const tab = tablist?.querySelectorAll('[role="tab"]')[index];
+        tab?.focus();
+    }
+    render() {
+        const { tabConfigs, selected, orientation, variant, fullWidth, size, isDeclarativeMode } = this;
+        const classes = {
+            'le-tabs': true,
+            [`orientation-${orientation}`]: true,
+            [`position-${this.position}`]: true,
+            [`variant-${variant}`]: true,
+            [`size-${size}`]: true,
+            'full-width': fullWidth,
+        };
+        const tabPosition = this.orientation === 'vertical'
+            ? this.position
+            : this.position === 'start'
+                ? 'top'
+                : 'bottom';
+        return (index.h("le-component", { key: '27955ca3e6823a430cba21b8a3830dac4cbf23a9', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: 'f6f732307d85bd778fc5c0fc002a47aeb2c1e269', class: classes }, index.h("div", { key: '96908f34cd62d42915a80f3197fd32ef72a8ba93', class: {
+                'tablist': true,
+                'wrap-tabs': this.wrap,
+                [`overflow-${this.overflow}`]: true,
+            }, role: "tablist", "aria-orientation": orientation, part: "tablist", onKeyDown: this.handleKeyDown, tabIndex: 0 }, tabConfigs.map(config => {
+            const isSelected = config.value === selected;
+            const tabId = `tab-${config.value}`;
+            const panelId = `panel-${config.value}`;
+            return (index.h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, index.h("span", { class: "tab-label" }, config.label)));
+        })), index.h("div", { key: '69a47db5fdad33cdcb17a4f21b8731c80e519933', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        // Declarative mode - render slot for le-tab-panel children
+        index.h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, index.h("slot", null))) : (
+        // Programmatic mode - render named slots
+        tabConfigs.map(config => {
+            const isSelected = config.value === selected;
+            const tabId = `tab-${config.value}`;
+            const panelId = `panel-${config.value}`;
+            return (index.h("div", { key: config.value, id: panelId, class: {
+                    'panel': true,
+                    'panel-active': isSelected,
+                }, role: "tabpanel", part: "panel", "aria-labelledby": tabId, tabIndex: 0, hidden: !isSelected }, index.h("slot", { name: `panel-${config.value}` })));
+        }))))));
+    }
+    static get watchers() { return {
+        "selected": ["selectedChanged"],
+        "tabs": ["tabsChanged"]
+    }; }
+};
+LeTabs.style = leTabsCss;
+
+exports.le_tabs = LeTabs;
+//# sourceMappingURL=le-tabs.entry.cjs.js.map