le-kit 0.5.2 → 0.5.3

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

@@ -28,67 +28,117 @@ import { classnames } from "../../utils/utils";
  * @cmsCategory Navigation
  */
 export class LeTabs {
-    el;
-    /**
-     * 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;
+    constructor() {
+        /**
+         * 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]);
+                }
+            }
+        };
+    }
     selectedChanged(newValue) {
         const index = this.tabConfigs.findIndex(t => t.value === newValue);
         if (index >= 0) {
@@ -190,65 +240,6 @@ export class LeTabs {
             },
         });
     }
-    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;
@@ -291,7 +282,7 @@ export class LeTabs {
             : 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,
@@ -300,7 +291,7 @@ export class LeTabs {
             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

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

@@ -1 +1 @@
-{"version":3,"file":"le-tabs.js","sourceRoot":"","sources":["../../../src/components/le-tabs/le-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/le-tabs/le-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/le-tag/le-tag.js

@@ -39,45 +39,30 @@ import { h } from "@stencil/core";
  * ```
  */
 export class LeTag {
-    /**
-     * The text label to display in the tag.
-     */
-    label;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Icon to display before the label.
-     * Can be an emoji, URL, or icon name.
-     */
-    icon;
-    /**
-     * Whether the tag can be dismissed (shows close button).
-     */
-    dismissible = false;
-    /**
-     * Whether the tag is disabled.
-     */
-    disabled = false;
-    /**
-     * The size of the tag.
-     */
-    size = 'medium';
-    /**
-     * The visual variant of the tag.
-     */
-    variant = 'default';
-    /**
-     * Emitted when the dismiss button is clicked.
-     */
-    leDismiss;
-    handleDismiss = (e) => {
-        e.stopPropagation();
-        if (!this.disabled) {
-            this.leDismiss.emit();
-        }
-    };
+    constructor() {
+        /**
+         * Whether the tag can be dismissed (shows close button).
+         */
+        this.dismissible = false;
+        /**
+         * Whether the tag is disabled.
+         */
+        this.disabled = false;
+        /**
+         * The size of the tag.
+         */
+        this.size = 'medium';
+        /**
+         * The visual variant of the tag.
+         */
+        this.variant = 'default';
+        this.handleDismiss = (e) => {
+            e.stopPropagation();
+            if (!this.disabled) {
+                this.leDismiss.emit();
+            }
+        };
+    }
     renderIcon() {
         if (!this.icon)
             return null;
@@ -89,7 +74,7 @@ export class LeTag {
         return h("span", { class: "tag-icon" }, this.icon);
     }
     render() {
-        return (h("le-component", { key: '8c76ae38877bbb3ba35588adadee0cf61b76ffed', component: "le-tag" }, h("span", { key: 'a2dd1709505e58baada6fb9b40312e207435e8a6', class: "tag" }, this.renderIcon(), h("span", { key: '99bac5f6df170af17de5550b9f0489538e9760bc', class: "tag-label" }, h("le-slot", { key: '41740e400b168986980e8ff93187af9828cca5f9', name: "", tag: "span", type: "text" }, h("slot", { key: 'd823f3dc74c1e49b89fe5fff2df9d7e244d7d591' }, this.label))), this.dismissible && (h("button", { key: '96a058e3cab2d7fb091e1e6ec77404f8cf80358c', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, h("svg", { key: 'bfbb3f7c73aef6f06f5c45e98d4047d2aa629f2c', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '16a68b9458ccd806415d5ef8bda7fa1513cdf46d', d: "M4 4l8 8M12 4l-8 8" })))))));
+        return (h("le-component", { key: '6903620dec3042a396c4e39ed378f59e4889fb5f', component: "le-tag" }, h("span", { key: '23a31349e50aeb8a38bfdf22e6151562eaa16a6e', class: "tag" }, this.renderIcon(), h("span", { key: '8505dd5c9ed47baf702d947bf687875dd7c8283e', class: "tag-label" }, h("le-slot", { key: '1f7b44714f1f1b4f1a1a5af6925b15d6026cc7e4', name: "", tag: "span", type: "text" }, h("slot", { key: '7722a7f387284cbc3c8ef38deeff69c7a02282a8' }, this.label))), this.dismissible && (h("button", { key: 'ae937d67c269ef0ff504926623ed95061c750232', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, h("svg", { key: '9cf11ec361d62de7b6ef524c40edad13c1da9c06', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e919bccb3fa4679f7e808960195d670685f1e0df', d: "M4 4l8 8M12 4l-8 8" })))))));
     }
     static get is() { return "le-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-tag/le-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-tag.js","sourceRoot":"","sources":["../../../src/components/le-tag/le-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAMH,MAAM,OAAO,KAAK;IAChB;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACqC,IAAI,CAAsB;IAElE;;;OAGG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACsB,IAAI,GAAiC,QAAQ,CAAC;IAEvE;;OAEG;IACsB,OAAO,GAA6D,SAAS,CAAC;IAEvG;;OAEG;IACM,SAAS,CAAqB;IAE/B,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;QACxC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEM,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAE5B,sDAAsD;QACtD,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9D,OAAO,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG,CAAC;QACzD,CAAC;QAED,gDAAgD;QAChD,OAAO,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,qEAAc,SAAS,EAAC,QAAQ;YAC9B,6DAAM,KAAK,EAAC,KAAK;gBACd,IAAI,CAAC,UAAU,EAAE;gBAClB,6DAAM,KAAK,EAAC,WAAW;oBACrB,gEAAS,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;wBACrC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACjB,CACL;gBACN,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAa,QAAQ;oBACjH,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG;wBACzE,6DAAM,CAAC,EAAC,oBAAoB,GAAG,CAC3B,CACC,CACV,CACI,CACM,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * A tag/chip component for displaying labels with optional dismiss functionality.\n *\n * @cmsEditable false\n * @cmsCategory Form\n *\n * @slot - Default slot for custom content (overrides label prop)\n *\n * @example Basic tag\n * ```html\n * <le-tag label=\"JavaScript\"></le-tag>\n * ```\n *\n * @example Dismissible tag\n * ```html\n * <le-tag label=\"Remove me\" dismissible></le-tag>\n * ```\n *\n * @example With icon\n * ```html\n * <le-tag label=\"Settings\" icon=\"⚙️\"></le-tag>\n * ```\n *\n * @example Different sizes\n * ```html\n * <le-tag label=\"Small\" size=\"small\"></le-tag>\n * <le-tag label=\"Medium\" size=\"medium\"></le-tag>\n * <le-tag label=\"Large\" size=\"large\"></le-tag>\n * ```\n *\n * @example Different variants\n * ```html\n * <le-tag label=\"Default\" variant=\"default\"></le-tag>\n * <le-tag label=\"Primary\" variant=\"primary\"></le-tag>\n * <le-tag label=\"Success\" variant=\"success\"></le-tag>\n * <le-tag label=\"Warning\" variant=\"warning\"></le-tag>\n * <le-tag label=\"Danger\" variant=\"danger\"></le-tag>\n * ```\n */\n@Component({\n  tag: 'le-tag',\n  styleUrl: 'le-tag.css',\n  shadow: true,\n})\nexport class LeTag {\n  /**\n   * The text label to display in the tag.\n   */\n  @Prop() label: string;\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   * Icon to display before the label.\n   * Can be an emoji, URL, or icon name.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the tag can be dismissed (shows close button).\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the tag is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The size of the tag.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The visual variant of the tag.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Emitted when the dismiss button is clicked.\n   */\n  @Event() leDismiss: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (!this.disabled) {\n      this.leDismiss.emit();\n    }\n  };\n\n  private renderIcon() {\n    if (!this.icon) return null;\n\n    // Check if it's a URL (starts with http, https, or /)\n    if (this.icon.startsWith('http') || this.icon.startsWith('/')) {\n      return <img class=\"tag-icon\" src={this.icon} alt=\"\" />;\n    }\n\n    // Otherwise render as text (emoji or icon font)\n    return <span class=\"tag-icon\">{this.icon}</span>;\n  }\n\n  render() {\n    return (\n      <le-component component=\"le-tag\">\n        <span class=\"tag\">\n          {this.renderIcon()}\n          <span class=\"tag-label\">\n            <le-slot name=\"\" tag=\"span\" type=\"text\">\n              <slot>{this.label}</slot>\n            </le-slot>\n          </span>\n          {this.dismissible && (\n            <button type=\"button\" class=\"tag-dismiss\" onClick={this.handleDismiss} disabled={this.disabled} aria-label=\"Remove\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 4l8 8M12 4l-8 8\" />\n              </svg>\n            </button>\n          )}\n        </span>\n      </le-component>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-tag.js","sourceRoot":"","sources":["../../../src/components/le-tag/le-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAMH,MAAM,OAAO,KAAK;IALlB;QAsBE;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QAErC;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACsB,SAAI,GAAiC,QAAQ,CAAC;QAEvE;;WAEG;QACsB,YAAO,GAA6D,SAAS,CAAC;QAO/F,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;KAmCH;IAjCS,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAE5B,sDAAsD;QACtD,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9D,OAAO,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG,CAAC;QACzD,CAAC;QAED,gDAAgD;QAChD,OAAO,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,qEAAc,SAAS,EAAC,QAAQ;YAC9B,6DAAM,KAAK,EAAC,KAAK;gBACd,IAAI,CAAC,UAAU,EAAE;gBAClB,6DAAM,KAAK,EAAC,WAAW;oBACrB,gEAAS,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;wBACrC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACjB,CACL;gBACN,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAa,QAAQ;oBACjH,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG;wBACzE,6DAAM,CAAC,EAAC,oBAAoB,GAAG,CAC3B,CACC,CACV,CACI,CACM,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * A tag/chip component for displaying labels with optional dismiss functionality.\n *\n * @cmsEditable false\n * @cmsCategory Form\n *\n * @slot - Default slot for custom content (overrides label prop)\n *\n * @example Basic tag\n * ```html\n * <le-tag label=\"JavaScript\"></le-tag>\n * ```\n *\n * @example Dismissible tag\n * ```html\n * <le-tag label=\"Remove me\" dismissible></le-tag>\n * ```\n *\n * @example With icon\n * ```html\n * <le-tag label=\"Settings\" icon=\"⚙️\"></le-tag>\n * ```\n *\n * @example Different sizes\n * ```html\n * <le-tag label=\"Small\" size=\"small\"></le-tag>\n * <le-tag label=\"Medium\" size=\"medium\"></le-tag>\n * <le-tag label=\"Large\" size=\"large\"></le-tag>\n * ```\n *\n * @example Different variants\n * ```html\n * <le-tag label=\"Default\" variant=\"default\"></le-tag>\n * <le-tag label=\"Primary\" variant=\"primary\"></le-tag>\n * <le-tag label=\"Success\" variant=\"success\"></le-tag>\n * <le-tag label=\"Warning\" variant=\"warning\"></le-tag>\n * <le-tag label=\"Danger\" variant=\"danger\"></le-tag>\n * ```\n */\n@Component({\n  tag: 'le-tag',\n  styleUrl: 'le-tag.css',\n  shadow: true,\n})\nexport class LeTag {\n  /**\n   * The text label to display in the tag.\n   */\n  @Prop() label: string;\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   * Icon to display before the label.\n   * Can be an emoji, URL, or icon name.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the tag can be dismissed (shows close button).\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the tag is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The size of the tag.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The visual variant of the tag.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Emitted when the dismiss button is clicked.\n   */\n  @Event() leDismiss: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (!this.disabled) {\n      this.leDismiss.emit();\n    }\n  };\n\n  private renderIcon() {\n    if (!this.icon) return null;\n\n    // Check if it's a URL (starts with http, https, or /)\n    if (this.icon.startsWith('http') || this.icon.startsWith('/')) {\n      return <img class=\"tag-icon\" src={this.icon} alt=\"\" />;\n    }\n\n    // Otherwise render as text (emoji or icon font)\n    return <span class=\"tag-icon\">{this.icon}</span>;\n  }\n\n  render() {\n    return (\n      <le-component component=\"le-tag\">\n        <span class=\"tag\">\n          {this.renderIcon()}\n          <span class=\"tag-label\">\n            <le-slot name=\"\" tag=\"span\" type=\"text\">\n              <slot>{this.label}</slot>\n            </le-slot>\n          </span>\n          {this.dismissible && (\n            <button type=\"button\" class=\"tag-dismiss\" onClick={this.handleDismiss} disabled={this.disabled} aria-label=\"Remove\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 4l8 8M12 4l-8 8\" />\n              </svg>\n            </button>\n          )}\n        </span>\n      </le-component>\n    );\n  }\n}\n"]}