le-kit 0.5.1 → 0.5.3

package/dist/components/le-tab2.js

@@ -17,82 +17,58 @@ const LeTab = /*@__PURE__*/ proxyCustomElement(class LeTab extends HTMLElement {
         }
         this.__attachShadow();
         this.leClick = createEvent(this, "click", 7);
+        /**
+         * 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 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
      */
@@ -106,21 +82,6 @@ const LeTab = /*@__PURE__*/ proxyCustomElement(class LeTab extends HTMLElement {
             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 = classnames(`variant-${this.variant}`, `size-${this.size}`, `position-${this.position}`, {
             'selected': this.selected,
@@ -132,10 +93,11 @@ const LeTab = /*@__PURE__*/ proxyCustomElement(class LeTab extends HTMLElement {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { disabled: this.disabled };
-        return (h(Host, { key: 'a539044017f98ddaa7636df1457b669f56c19d94' }, h("le-component", { key: 'b6df3e0738be09d00f3cd802b3cd06af4402e746', component: "le-tab" }, h(TagType, { key: 'a37f2d404da74b5b0d99bbb0b9ff57121903ee2d', class: classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (h("div", { class: "icon-only" }, h("div", { class: "icon" }, this.icon), this.showLabel && h("span", { class: "icon-label" }, this.label))) : (h(Fragment, null, h("span", { class: "le-tab-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, h("slot", null, this.label))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (h(Host, { key: '1c4f36bb0cd97c1fea114d5119425507d133cf55' }, h("le-component", { key: '5a8755d8cf973d2f7d9f25e8d984f4a35047c6c2', component: "le-tab" }, h(TagType, { key: '875b8ef5905a15e3c114001f3a7b05ce3731e037', class: classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (h("div", { class: "icon-only" }, h("div", { class: "icon" }, this.icon), this.showLabel && h("span", { class: "icon-label" }, this.label))) : (h(Fragment, null, h("span", { class: "le-tab-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, h("slot", null, this.label))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
+    get el() { return this; }
     static get style() { return leTabCss(); }
-}, [769, "le-tab", {
+}, [257, "le-tab", {
         "mode": [1537],
         "label": [1],
         "value": [1],

package/dist/components/le-tab2.js.map

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

package/dist/components/le-tabs.js

@@ -15,68 +15,116 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
         }
         this.__attachShadow();
         this.leTabChange = createEvent(this, "leTabChange", 7);
+        /**
+         * Array of tab options (programmatic mode).
+         * If le-tab-panel children exist, they take precedence.
+         */
+        this.tabs = [];
+        /**
+         * Orientation of the tabs.
+         * @allowedValues horizontal | vertical
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Position of the tabs relative to the panels.
+         * @allowedValues start | end
+         */
+        this.position = 'start';
+        /**
+         * Tab variant style.
+         * @allowedValues underlined | solid | pills | enclosed | icon-only
+         */
+        this.variant = 'underlined';
+        /**
+         * Whether tabs should stretch to fill available width.
+         */
+        this.fullWidth = false;
+        /**
+         * Size of the tabs.
+         * @allowedValues sm | md | lg
+         */
+        this.size = 'medium';
+        /**
+         * Wrap the tabs if they exceed container width.
+         */
+        this.wrap = false;
+        /**
+         * Scroll behavior for overflowing tabs.
+         * @allowedValues auto | hidden | visible | scroll
+         */
+        this.overflow = 'auto';
+        /**
+         * Internal tab configurations (built from children or tabs prop)
+         */
+        this.tabConfigs = [];
+        /**
+         * Internal state for focused tab index (for keyboard navigation)
+         */
+        this.focusedIndex = 0;
+        /**
+         * Whether we're using declarative mode (le-tab-panel children)
+         */
+        this.isDeclarativeMode = false;
+        this.handleTabClick = (config) => {
+            this.selectTab(config);
+        };
+        this.handleKeyDown = (event) => {
+            const { tabConfigs, orientation } = this;
+            const isHorizontal = orientation === 'horizontal';
+            let newIndex = this.focusedIndex;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    if (isHorizontal) {
+                        event.preventDefault();
+                        newIndex = this.findNextEnabledTab(-1);
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (isHorizontal) {
+                        event.preventDefault();
+                        newIndex = this.findNextEnabledTab(1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    if (!isHorizontal) {
+                        event.preventDefault();
+                        newIndex = this.findNextEnabledTab(-1);
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (!isHorizontal) {
+                        event.preventDefault();
+                        newIndex = this.findNextEnabledTab(1);
+                    }
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newIndex = this.findFirstEnabledTab();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newIndex = this.findLastEnabledTab();
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    if (tabConfigs[this.focusedIndex]) {
+                        this.selectTab(tabConfigs[this.focusedIndex]);
+                    }
+                    return;
+                default:
+                    return;
+            }
+            if (newIndex !== this.focusedIndex) {
+                this.focusedIndex = newIndex;
+                this.focusTab(newIndex);
+                // Auto-select on focus (recommended for tabs)
+                if (tabConfigs[newIndex]) {
+                    this.selectTab(tabConfigs[newIndex]);
+                }
+            }
+        };
     }
-    get el() { return 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) {
@@ -178,65 +226,6 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
             },
         });
     }
-    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;
@@ -279,7 +268,7 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
             : this.position === 'start'
                 ? 'top'
                 : 'bottom';
-        return (h("le-component", { key: '9a92363db43231088e476bca66dbbf47f26ebf34', component: "le-tabs", hostClass: classnames(classes) }, h("div", { key: '3c14f3367e2b281090721e5521bfa8a3b53f5b97', class: classes }, h("div", { key: 'cd4aad46f9a8e1ec5760f9388a0c4149556bfb06', class: {
+        return (h("le-component", { key: '0240e0ae8c8b2513e80e8a032101df47a2041e3d', component: "le-tabs", hostClass: classnames(classes) }, h("div", { key: 'b063db57a29d4c212ed81a738c41d7e395f5618c', class: classes }, h("div", { key: '01ba40aac8cb13357c668d82daf7c34f7fb104e6', class: {
                 'tablist': true,
                 'wrap-tabs': this.wrap,
                 [`overflow-${this.overflow}`]: true,
@@ -288,7 +277,7 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
             const tabId = `tab-${config.value}`;
             const panelId = `panel-${config.value}`;
             return (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 }, h("span", { class: "tab-label" }, config.label)));
-        })), h("div", { key: '0b34e9ab8ce8f0e31ad9392bc3a6a60c92a0aa00', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        })), h("div", { key: 'b1e16928f27f5083e94674e80b0ad397eb3e8fec', class: "panels", part: "panels" }, isDeclarativeMode ? (
         // Declarative mode - render slot for le-tab-panel children
         h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, h("slot", null))) : (
         // Programmatic mode - render named slots
@@ -302,12 +291,13 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
                 }, role: "tabpanel", part: "panel", "aria-labelledby": tabId, tabIndex: 0, hidden: !isSelected }, h("slot", { name: `panel-${config.value}` })));
         }))))));
     }
+    get el() { return this; }
     static get watchers() { return {
         "selected": ["selectedChanged"],
         "tabs": ["tabsChanged"]
     }; }
     static get style() { return leTabsCss(); }
-}, [769, "le-tabs", {
+}, [257, "le-tabs", {
         "tabs": [16],
         "selected": [1032],
         "orientation": [1],

package/dist/components/le-tabs.js.map

@@ -1 +1 @@
-{"file":"le-tabs.js","mappings":"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","names":["LeTabs","__stencil_proxyCustomElement"],"sources":["src/components/le-tabs/le-tabs.css?tag=le-tabs&encapsulation=shadow","src/components/le-tabs/le-tabs.tsx"],"sourcesContent":["/**\n * le-tabs - Default mode styles\n */\n\n:host {\n  display: block;\n  --le-tabs-gap: var(--le-spacing-1);\n  --le-tabs-border-color: var(--le-border-color);\n  --le-tabs-padding-y: var(--le-spacing-2);\n  --le-tabs-padding-x: var(--le-spacing-4);\n  --le-tabs-enclosed-bg: var(--le-color-background-secondary);\n}\n\n.le-tabs {\n  display: flex;\n  flex-direction: column;\n}\n\n.le-tabs.orientation-vertical {\n  flex-direction: row;\n}\n\n/* ============================================\n * TABLIST\n * ============================================ */\n\n.tablist {\n  display: flex;\n  position: relative;\n  border-radius: var(--le-radius-md);\n  gap: var(--le-tabs-gap);\n}\n.tablist.wrap-tabs {\n  flex-wrap: wrap;\n}\n.tablist.overflow-auto {\n  overflow: auto;\n}\n.tablist.overflow-hidden {\n  overflow: hidden;\n}\n.tablist.overflow-visible {\n  overflow: visible;\n}\n.tablist.overflow-scroll {\n  overflow: scroll;\n}\n.tablist:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.orientation-horizontal .tablist {\n  flex-direction: row;\n  border-bottom: 1px solid var(--le-tabs-border-color);\n}\n\n.orientation-vertical .tablist {\n  flex-direction: column;\n  border-right: 1px solid var(--le-tabs-border-color);\n  min-width: 150px;\n}\n\n.full-width .tablist {\n  width: 100%;\n}\n\n.full-width.orientation-horizontal .tab {\n  flex: 1;\n}\n\n/* ============================================\n * VARIANT: UNDERLINED\n * ============================================ */\n\n.variant-underlined .tablist {\n  padding-inline: 4px;\n}\n\n/* ============================================\n * VARIANT: PILLS\n * ============================================ */\n\n.variant-pills .tablist {\n  border-radius: calc(1.12rem);\n}\n\n\n/* ============================================\n * VARIANT: ENCLOSED\n * ============================================ */\n\n.variant-enclosed .tablist {\n  border: none;\n  gap: 0;\n  background-color: var(--le-tabs-enclosed-bg);\n  border-radius: calc(var(--le-radius-md) + var(--le-spacing-1));\n  padding: var(--le-spacing-1);\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 * PANELS\n * ============================================ */\n\n.panels {\n  flex: 1;\n  min-height: 0;\n}\n\n.panel {\n  padding: var(--le-tabs-panel-padding, var(--le-spacing-4));\n}\n\n.panel[hidden] {\n  display: none;\n}\n\n.orientation-vertical .panels {\n  padding-left: var(--le-spacing-4);\n}\n\n.position-end .panels {\n  order: 1;\n}\n.position-end .tablist {\n  order: 2;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\nimport { classnames } from '../../utils/utils';\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n  panel?: HTMLElement & { setActive: (active: boolean) => Promise<void> };\n}\n\n/**\n * A flexible tabs component for organizing content into tabbed panels.\n *\n * Supports two modes:\n * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content\n * 2. **Programmatic**: Use the `tabs` prop with named slots for content\n *\n * Full keyboard navigation and ARIA support included.\n *\n * @slot - Default slot for le-tab-panel children (declarative mode)\n * @slot panel-{value} - Named slots for panel content (programmatic mode)\n *\n * @cssprop --le-tabs-border-color - Border color for tab list\n * @cssprop --le-tabs-gap - Gap between tabs\n * @cssprop --le-tabs-indicator-color - Active tab indicator color\n * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons\n * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons\n *\n * @csspart tablist - The tab button container (role=\"tablist\")\n * @csspart tab - Individual tab buttons\n * @csspart tab-active - The currently active tab\n * @csspart panels - Container for panel content\n * @csspart panel - Individual panel containers\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tabs',\n  styleUrl: 'le-tabs.css',\n  shadow: true,\n})\nexport class LeTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Array of tab options (programmatic mode).\n   * If le-tab-panel children exist, they take precedence.\n   */\n  @Prop() tabs: LeOption[] = [];\n\n  /**\n   * The value of the currently selected tab.\n   * If not provided, defaults to the first tab.\n   */\n  @Prop({ mutable: true }) selected?: LeOptionValue;\n\n  /**\n   * Orientation of the tabs.\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Position of the tabs relative to the panels.\n   * @allowedValues start | end\n   */\n  @Prop() position: 'start' | 'end' = 'start';\n\n  /**\n   * Tab variant style.\n   * @allowedValues underlined | solid | pills | enclosed | icon-only\n   */\n  @Prop() variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only' = 'underlined';\n\n  /**\n   * Whether tabs should stretch to fill available width.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size of the tabs.\n   * @allowedValues sm | md | lg\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Wrap the tabs if they exceed container width.\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Scroll behavior for overflowing tabs.\n   * @allowedValues auto | hidden | visible | scroll\n   */\n  @Prop() overflow: 'auto' | 'hidden' | 'visible' | 'scroll' = 'auto';\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private tabConfigs: TabConfig[] = [];\n\n  /**\n   * Internal state for focused tab index (for keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Whether we're using declarative mode (le-tab-panel children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\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    this.updatePanelStates();\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  }\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 panels = Array.from(this.el.querySelectorAll(':scope > le-tab-panel')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (panels.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const panel of panels) {\n        const config = await panel.getTabConfig();\n        configs.push({ ...config, panel });\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    // Update panel active states\n    this.updatePanelStates();\n  }\n\n  private async updatePanelStates() {\n    if (!this.isDeclarativeMode) return;\n\n    for (const config of this.tabConfigs) {\n      if (config.panel) {\n        const isActive = config.value === this.selected;\n        await config.panel.setActive(isActive);\n      }\n    }\n  }\n\n  private selectTab(config: TabConfig) {\n    if (config.disabled) return;\n\n    this.selected = config.value;\n    this.leTabChange.emit({\n      value: config.value,\n      option: {\n        label: config.label,\n        value: config.value,\n        iconStart: config.iconStart,\n        iconEnd: config.iconEnd,\n        disabled: config.disabled,\n      },\n    });\n  }\n\n  private handleTabClick = (config: TabConfig) => {\n    this.selectTab(config);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { tabConfigs, orientation } = this;\n    const isHorizontal = orientation === 'horizontal';\n\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(-1);\n        }\n        break;\n      case 'ArrowRight':\n        if (isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(1);\n        }\n        break;\n      case 'ArrowUp':\n        if (!isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(-1);\n        }\n        break;\n      case 'ArrowDown':\n        if (!isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(1);\n        }\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      this.focusTab(newIndex);\n      // Auto-select on focus (recommended for tabs)\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(t => !t.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  private focusTab(index: number) {\n    const tablist = this.el.shadowRoot?.querySelector('[role=\"tablist\"]');\n    const tab = tablist?.querySelectorAll('[role=\"tab\"]')[index] as HTMLElement;\n    tab?.focus();\n  }\n\n  render() {\n    const { tabConfigs, selected, orientation, variant, fullWidth, size, isDeclarativeMode } = this;\n\n    const classes = {\n      'le-tabs': true,\n      [`orientation-${orientation}`]: true,\n      [`position-${this.position}`]: true,\n      [`variant-${variant}`]: true,\n      [`size-${size}`]: true,\n      'full-width': fullWidth,\n    };\n\n    const tabPosition =\n      this.orientation === 'vertical'\n        ? this.position\n        : this.position === 'start'\n        ? 'top'\n        : 'bottom';\n\n    return (\n      <le-component component=\"le-tabs\" hostClass={classnames(classes)}>\n        <div class={classes}>\n          <div\n            class={{\n              'tablist': true,\n              'wrap-tabs': this.wrap,\n              [`overflow-${this.overflow}`]: true,\n            }}\n            role=\"tablist\"\n            aria-orientation={orientation}\n            part=\"tablist\"\n            onKeyDown={this.handleKeyDown}\n            tabIndex={0}\n          >\n            {tabConfigs.map(config => {\n              const isSelected = config.value === selected;\n              const tabId = `tab-${config.value}`;\n              const panelId = `panel-${config.value}`;\n\n              return (\n                <le-tab\n                  key={config.value}\n                  id={tabId}\n                  class=\"tab\"\n                  mode=\"default\"\n                  variant={this.variant}\n                  selected={isSelected}\n                  disabled={config.disabled}\n                  size={this.size}\n                  position={tabPosition}\n                  align={this.orientation === 'vertical' ? 'start' : 'center'}\n                  role=\"tab\"\n                  part={isSelected ? 'tab tab-active' : 'tab'}\n                  aria-selected={isSelected ? 'true' : 'false'}\n                  aria-controls={panelId}\n                  aria-disabled={config.disabled ? 'true' : undefined}\n                  focusable={false}\n                  onClick={() => this.handleTabClick(config)}\n                  iconStart={config.iconStart}\n                  iconEnd={config.iconEnd}\n                >\n                  <span class=\"tab-label\">{config.label}</span>\n                </le-tab>\n              );\n            })}\n          </div>\n\n          <div class=\"panels\" part=\"panels\">\n            {isDeclarativeMode ? (\n              // Declarative mode - render slot for le-tab-panel children\n              <le-slot\n                name=\"\"\n                description=\"Tab panels\"\n                type=\"slot\"\n                allowedComponents=\"le-tab-panel\"\n              >\n                <slot></slot>\n              </le-slot>\n            ) : (\n              // Programmatic mode - render named slots\n              tabConfigs.map(config => {\n                const isSelected = config.value === selected;\n                const tabId = `tab-${config.value}`;\n                const panelId = `panel-${config.value}`;\n\n                return (\n                  <div\n                    key={config.value}\n                    id={panelId}\n                    class={{\n                      'panel': true,\n                      'panel-active': isSelected,\n                    }}\n                    role=\"tabpanel\"\n                    part=\"panel\"\n                    aria-labelledby={tabId}\n                    tabIndex={0}\n                    hidden={!isSelected}\n                  >\n                    <slot name={`panel-${config.value}`}></slot>\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-tabs.js","mappings":"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","names":["LeTabs","__stencil_proxyCustomElement"],"sources":["src/components/le-tabs/le-tabs.css?tag=le-tabs&encapsulation=shadow","src/components/le-tabs/le-tabs.tsx"],"sourcesContent":["/**\n * le-tabs - Default mode styles\n */\n\n:host {\n  display: block;\n  --le-tabs-gap: var(--le-spacing-1);\n  --le-tabs-border-color: var(--le-border-color);\n  --le-tabs-padding-y: var(--le-spacing-2);\n  --le-tabs-padding-x: var(--le-spacing-4);\n  --le-tabs-enclosed-bg: var(--le-color-background-secondary);\n}\n\n.le-tabs {\n  display: flex;\n  flex-direction: column;\n}\n\n.le-tabs.orientation-vertical {\n  flex-direction: row;\n}\n\n/* ============================================\n * TABLIST\n * ============================================ */\n\n.tablist {\n  display: flex;\n  position: relative;\n  border-radius: var(--le-radius-md);\n  gap: var(--le-tabs-gap);\n}\n.tablist.wrap-tabs {\n  flex-wrap: wrap;\n}\n.tablist.overflow-auto {\n  overflow: auto;\n}\n.tablist.overflow-hidden {\n  overflow: hidden;\n}\n.tablist.overflow-visible {\n  overflow: visible;\n}\n.tablist.overflow-scroll {\n  overflow: scroll;\n}\n.tablist:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.orientation-horizontal .tablist {\n  flex-direction: row;\n  border-bottom: 1px solid var(--le-tabs-border-color);\n}\n\n.orientation-vertical .tablist {\n  flex-direction: column;\n  border-right: 1px solid var(--le-tabs-border-color);\n  min-width: 150px;\n}\n\n.full-width .tablist {\n  width: 100%;\n}\n\n.full-width.orientation-horizontal .tab {\n  flex: 1;\n}\n\n/* ============================================\n * VARIANT: UNDERLINED\n * ============================================ */\n\n.variant-underlined .tablist {\n  padding-inline: 4px;\n}\n\n/* ============================================\n * VARIANT: PILLS\n * ============================================ */\n\n.variant-pills .tablist {\n  border-radius: calc(1.12rem);\n}\n\n\n/* ============================================\n * VARIANT: ENCLOSED\n * ============================================ */\n\n.variant-enclosed .tablist {\n  border: none;\n  gap: 0;\n  background-color: var(--le-tabs-enclosed-bg);\n  border-radius: calc(var(--le-radius-md) + var(--le-spacing-1));\n  padding: var(--le-spacing-1);\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 * PANELS\n * ============================================ */\n\n.panels {\n  flex: 1;\n  min-height: 0;\n}\n\n.panel {\n  padding: var(--le-tabs-panel-padding, var(--le-spacing-4));\n}\n\n.panel[hidden] {\n  display: none;\n}\n\n.orientation-vertical .panels {\n  padding-left: var(--le-spacing-4);\n}\n\n.position-end .panels {\n  order: 1;\n}\n.position-end .tablist {\n  order: 2;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\nimport { classnames } from '../../utils/utils';\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n  panel?: HTMLElement & { setActive: (active: boolean) => Promise<void> };\n}\n\n/**\n * A flexible tabs component for organizing content into tabbed panels.\n *\n * Supports two modes:\n * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content\n * 2. **Programmatic**: Use the `tabs` prop with named slots for content\n *\n * Full keyboard navigation and ARIA support included.\n *\n * @slot - Default slot for le-tab-panel children (declarative mode)\n * @slot panel-{value} - Named slots for panel content (programmatic mode)\n *\n * @cssprop --le-tabs-border-color - Border color for tab list\n * @cssprop --le-tabs-gap - Gap between tabs\n * @cssprop --le-tabs-indicator-color - Active tab indicator color\n * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons\n * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons\n *\n * @csspart tablist - The tab button container (role=\"tablist\")\n * @csspart tab - Individual tab buttons\n * @csspart tab-active - The currently active tab\n * @csspart panels - Container for panel content\n * @csspart panel - Individual panel containers\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tabs',\n  styleUrl: 'le-tabs.css',\n  shadow: true,\n})\nexport class LeTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Array of tab options (programmatic mode).\n   * If le-tab-panel children exist, they take precedence.\n   */\n  @Prop() tabs: LeOption[] = [];\n\n  /**\n   * The value of the currently selected tab.\n   * If not provided, defaults to the first tab.\n   */\n  @Prop({ mutable: true }) selected?: LeOptionValue;\n\n  /**\n   * Orientation of the tabs.\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Position of the tabs relative to the panels.\n   * @allowedValues start | end\n   */\n  @Prop() position: 'start' | 'end' = 'start';\n\n  /**\n   * Tab variant style.\n   * @allowedValues underlined | solid | pills | enclosed | icon-only\n   */\n  @Prop() variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only' = 'underlined';\n\n  /**\n   * Whether tabs should stretch to fill available width.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size of the tabs.\n   * @allowedValues sm | md | lg\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Wrap the tabs if they exceed container width.\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Scroll behavior for overflowing tabs.\n   * @allowedValues auto | hidden | visible | scroll\n   */\n  @Prop() overflow: 'auto' | 'hidden' | 'visible' | 'scroll' = 'auto';\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private tabConfigs: TabConfig[] = [];\n\n  /**\n   * Internal state for focused tab index (for keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Whether we're using declarative mode (le-tab-panel children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\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    this.updatePanelStates();\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  }\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 panels = Array.from(this.el.querySelectorAll(':scope > le-tab-panel')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (panels.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const panel of panels) {\n        const config = await panel.getTabConfig();\n        configs.push({ ...config, panel });\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    // Update panel active states\n    this.updatePanelStates();\n  }\n\n  private async updatePanelStates() {\n    if (!this.isDeclarativeMode) return;\n\n    for (const config of this.tabConfigs) {\n      if (config.panel) {\n        const isActive = config.value === this.selected;\n        await config.panel.setActive(isActive);\n      }\n    }\n  }\n\n  private selectTab(config: TabConfig) {\n    if (config.disabled) return;\n\n    this.selected = config.value;\n    this.leTabChange.emit({\n      value: config.value,\n      option: {\n        label: config.label,\n        value: config.value,\n        iconStart: config.iconStart,\n        iconEnd: config.iconEnd,\n        disabled: config.disabled,\n      },\n    });\n  }\n\n  private handleTabClick = (config: TabConfig) => {\n    this.selectTab(config);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { tabConfigs, orientation } = this;\n    const isHorizontal = orientation === 'horizontal';\n\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(-1);\n        }\n        break;\n      case 'ArrowRight':\n        if (isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(1);\n        }\n        break;\n      case 'ArrowUp':\n        if (!isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(-1);\n        }\n        break;\n      case 'ArrowDown':\n        if (!isHorizontal) {\n          event.preventDefault();\n          newIndex = this.findNextEnabledTab(1);\n        }\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      this.focusTab(newIndex);\n      // Auto-select on focus (recommended for tabs)\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(t => !t.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  private focusTab(index: number) {\n    const tablist = this.el.shadowRoot?.querySelector('[role=\"tablist\"]');\n    const tab = tablist?.querySelectorAll('[role=\"tab\"]')[index] as HTMLElement;\n    tab?.focus();\n  }\n\n  render() {\n    const { tabConfigs, selected, orientation, variant, fullWidth, size, isDeclarativeMode } = this;\n\n    const classes = {\n      'le-tabs': true,\n      [`orientation-${orientation}`]: true,\n      [`position-${this.position}`]: true,\n      [`variant-${variant}`]: true,\n      [`size-${size}`]: true,\n      'full-width': fullWidth,\n    };\n\n    const tabPosition =\n      this.orientation === 'vertical'\n        ? this.position\n        : this.position === 'start'\n        ? 'top'\n        : 'bottom';\n\n    return (\n      <le-component component=\"le-tabs\" hostClass={classnames(classes)}>\n        <div class={classes}>\n          <div\n            class={{\n              'tablist': true,\n              'wrap-tabs': this.wrap,\n              [`overflow-${this.overflow}`]: true,\n            }}\n            role=\"tablist\"\n            aria-orientation={orientation}\n            part=\"tablist\"\n            onKeyDown={this.handleKeyDown}\n            tabIndex={0}\n          >\n            {tabConfigs.map(config => {\n              const isSelected = config.value === selected;\n              const tabId = `tab-${config.value}`;\n              const panelId = `panel-${config.value}`;\n\n              return (\n                <le-tab\n                  key={config.value}\n                  id={tabId}\n                  class=\"tab\"\n                  mode=\"default\"\n                  variant={this.variant}\n                  selected={isSelected}\n                  disabled={config.disabled}\n                  size={this.size}\n                  position={tabPosition}\n                  align={this.orientation === 'vertical' ? 'start' : 'center'}\n                  role=\"tab\"\n                  part={isSelected ? 'tab tab-active' : 'tab'}\n                  aria-selected={isSelected ? 'true' : 'false'}\n                  aria-controls={panelId}\n                  aria-disabled={config.disabled ? 'true' : undefined}\n                  focusable={false}\n                  onClick={() => this.handleTabClick(config)}\n                  iconStart={config.iconStart}\n                  iconEnd={config.iconEnd}\n                >\n                  <span class=\"tab-label\">{config.label}</span>\n                </le-tab>\n              );\n            })}\n          </div>\n\n          <div class=\"panels\" part=\"panels\">\n            {isDeclarativeMode ? (\n              // Declarative mode - render slot for le-tab-panel children\n              <le-slot\n                name=\"\"\n                description=\"Tab panels\"\n                type=\"slot\"\n                allowedComponents=\"le-tab-panel\"\n              >\n                <slot></slot>\n              </le-slot>\n            ) : (\n              // Programmatic mode - render named slots\n              tabConfigs.map(config => {\n                const isSelected = config.value === selected;\n                const tabId = `tab-${config.value}`;\n                const panelId = `panel-${config.value}`;\n\n                return (\n                  <div\n                    key={config.value}\n                    id={panelId}\n                    class={{\n                      'panel': true,\n                      'panel-active': isSelected,\n                    }}\n                    role=\"tabpanel\"\n                    part=\"panel\"\n                    aria-labelledby={tabId}\n                    tabIndex={0}\n                    hidden={!isSelected}\n                  >\n                    <slot name={`panel-${config.value}`}></slot>\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}