npm - le-kit - Versions diffs - 0.1.15 → 0.1.16 - Mend

le-kit 0.1.15 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/dist/components/le-tab-bar.js.map CHANGED Viewed

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

package/dist/components/le-tab-panel.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$6, e as defineCustomElement$7, f as defineCustomElement$8 } from './le-button2.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$5, e as defineCustomElement$8, f as defineCustomElement$9, g as defineCustomElement$a } from './le-button2.js';
+import { d as defineCustomElement$7 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$6 } from './le-popover2.js';
 const leTabPanelCss = ":host{display:contents;--le-tab-panel-radius:var(--le-radius-md);--le-tab-panel-padding:var(--le-spacing-4)}.tab-panel{margin-top:4px;display:none;border-radius:var(--le-tab-panel-radius);padding:var(--le-tab-panel-padding)}.tab-panel.active{display:block}.tab-panel:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.tab-panel.lazy-hidden{display:none}";
@@ -88,11 +89,11 @@ const LeTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class LeTabPanel extends H
     }
     render() {
         const shouldRender = this.shouldRenderContent();
-        return (h("le-component", { key: '833fff0575be50b91cebfd864020813b9a8011ab', component: "le-tab-panel" }, h("div", { key: '7315936be235a0d9cf75b56b4b30989c89a36c10', class: {
+        return (h("le-component", { key: '7535af661c66a3e0f895b43c34ec2003a20977f9', component: "le-tab-panel" }, h("div", { key: '611858453c00a66a0510a570b0198594f6c19330', class: {
                 'tab-panel': true,
                 'active': this.active,
                 'lazy-hidden': this.lazy && !this.active,
-            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, h("le-slot", { key: 'cec03d1882e0316d31a0f217cc1ad6decdc15edc', name: "", description: "Tab panel content", type: "slot" }, shouldRender && h("slot", { key: 'cae2bc7193c4c423733c35b7a5d4a80d8a2ded95' })))));
+            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, h("le-slot", { key: 'e154ef618cecb4d21bde2a383c557515dd9f4ca1', name: "", description: "Tab panel content", type: "slot" }, shouldRender && h("slot", { key: '0c4b8905c656b0c14c21216c7c1cbc1eb0696ead' })))));
     }
     static get watchers() { return {
         "active": ["activeChanged"]
@@ -117,7 +118,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-tab-panel", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input"];
+    const components = ["le-tab-panel", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-tab-panel":
             if (!customElements.get(tagName)) {
@@ -126,25 +127,35 @@ function defineCustomElement$1() {
             break;
         case "le-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "le-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "le-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
             }
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/le-tab-panel.js.map CHANGED Viewed

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

package/dist/components/le-tab2.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { h as classnames } from './utils.js';
-import { d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, c as defineCustomElement$5, e as defineCustomElement$6, f as defineCustomElement$7 } from './le-button2.js';
-import { d as defineCustomElement$4 } from './le-popover2.js';
+import { d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, c as defineCustomElement$4, e as defineCustomElement$7, f as defineCustomElement$8, g as defineCustomElement$9 } from './le-button2.js';
+import { d as defineCustomElement$6 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$5 } from './le-popover2.js';
 const leTabCss = ":host{display:inline-block;--le-tab-border-radius:var(--le-radius-md);--le-tab-padding-x:var(--le-spacing-4);--le-tab-padding-y:var(--le-spacing-2);--le-tab-padding:var(--le-tab-padding-y) var(--le-tab-padding-x);--le-tab-small-padding:0.25rem;--le-tab-font-size:var(--le-font-size-md);--le-tab-font-weight:var(--le-font-weight-medium);--le-tab-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-tab-icon-aspect-ratio:1;--le-tab-icon-only-aspect-ratio:2.5;--le-tab-color:var(--le-color-text-primary);--le-selected-tab-color:var(--le-color-primary);--le-selected-icon-only-tab-background:color-mix(in srgb, var(--_tab-bg) 10%, transparent);--_tab-bg:var(--le-color-primary);--_tab-bg-hover:var(--le-color-primary-dark);--_tab-bg-system:var(--le-color-black);--_tab-color:var(--le-tab-color);--_tab-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-tab-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-tab-padding);color:var(--_tab-color);font-family:var(--le-font-family-base);font-size:var(--le-tab-font-size);font-weight:var(--le-tab-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-tab-transition) var(--le-transition-easing),\n    border-color var(--le-tab-transition) var(--le-transition-easing),\n    box-shadow var(--le-tab-transition) var(--le-transition-easing),\n    transform var(--le-tab-transition) var(--le-transition-easing)}.le-tab-container:hover:not(:disabled){color:var(--le-selected-tab-color)}.le-tab-container:focus-visible{outline:none}.le-tab-container:disabled{opacity:0.5;cursor:not-allowed}.le-tab-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}.le-tab-container.variant-underlined{background:transparent;border:2px solid transparent;border-radius:0}.le-tab-container.variant-underlined.position-start,.le-tab-container.variant-underlined.position-end{border-block-width:0}.le-tab-container.variant-underlined.position-start{padding-inline-start:0}.le-tab-container.variant-underlined.position-top,.le-tab-container.variant-underlined.position-bottom{border-inline-width:0}.le-tab-container.variant-underlined.position-start.selected{border-inline-end-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-end.selected{border-inline-start-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-top.selected{border-bottom-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-bottom.selected{border-top-color:var(--_tab-border-color)}.le-tab-container.variant-solid{background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-solid.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-pills{background:transparent;border-radius:var(--le-radius-full);border:none}.le-tab-container.variant-pills.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-enclosed{padding-block:var(--le-spacing-1);background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-enclosed.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-icon-only{border:none;padding:0;background:transparent;color:var(--_tab-color)}.le-tab-container.variant-icon-only .icon-only{flex-direction:column}.le-tab-container.variant-icon-only .icon{display:flex;align-items:center;justify-content:center;min-height:var(--le-font-size-3xl);aspect-ratio:var(--le-tab-icon-only-aspect-ratio);font-size:var(--le-font-size-2xl);border-radius:var(--le-radius-full)}.le-tab-container.variant-icon-only .icon-label{margin-top:var(--le-spacing-1);font-size:var(--le-font-size-2xs)}.le-tab-container.variant-icon-only.selected{color:var(--le-selected-tab-color)}.le-tab-container.variant-icon-only.selected .icon{background:var(--le-selected-icon-only-tab-background)}.le-tab-container.variant-icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.variant-icon-only .content{display:none}.le-tab-container.size-small{--le-tab-padding-x:0.4rem;--le-tab-padding-y:0.3rem;--le-tab-padding-top:0.35rem;--le-tab-font-size:var(--le-tab-small-font-size, var(--le-font-size-xs))}.le-tab-container.size-large{--le-tab-padding-x:0.9rem;--le-tab-padding-y:0.6rem;--le-tab-font-size:var(--le-font-size-xl)}.le-tab-container.full-width{display:block;width:100%}.le-tab-container.variant-underlined.selected,.le-tab-container.variant-clear.selected{color:var(--le-selected-tab-color)}:host>le-component.icon-only .le-tab-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-tab-icon-aspect-ratio, 1)}.le-tab-container.icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.icon-only.size-large{padding:0.75rem}.le-tab-container.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-tab-align-start{justify-content:flex-start}.le-tab-align-center{justify-content:center}.le-tab-align-space-between{justify-content:space-between}.le-tab-align-end{justify-content:flex-end}";
@@ -128,7 +129,7 @@ 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: '134cc19fd8fc3d2bd0ad6655a4512494d384229b' }, h("le-component", { key: '9469e74c3440e3a6658157ee150edf7eff54d1fd', component: "le-tab" }, h(TagType, { key: '214c0014fc973b5d3c1815f00fc9533f9a1a8a53', 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: '6632a9b9df74dab0cb6bd638f35b55cc4a573e0e' }, h("le-component", { key: '3ed311094833d6e8819c35b1eaf69456dcb47773', component: "le-tab" }, h(TagType, { key: 'b9a3ca7a85e228da9a25ff9fc14a79cd9b4ffc41', 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))))))));
     }
     static get style() { return leTabCss; }
 }, [769, "le-tab", {
@@ -155,7 +156,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-tab", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input"];
+    const components = ["le-tab", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-tab":
             if (!customElements.get(tagName)) {
@@ -164,25 +165,35 @@ function defineCustomElement() {
             break;
         case "le-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "le-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "le-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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

	@@ -1 +1 @@
1	- {"file":"le-tab2.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,ygLAAygL;;MCsC7gL,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;;;;;;;;;;AAGhB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;;AAGG;IACK,OAAO,GAAgE,YAAY;AAE3F;;;AAGG;IACK,QAAQ,GAAuC,KAAK;AAE5D;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;;AAGG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;;AAGG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,MAAM;AAEd;;;AAGG;IACK,KAAK,GAAiD,QAAQ;AAEtE;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;QAQhB,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAC/B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGH;;;AAGG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;;QAE5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB;;;AAIF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,EACzB,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,EACnB,YAAY,IAAI,CAAC,QAAQ,CAAA,CAAE,EAC3B;YACE,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC5B,YAAA,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;YACpC,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,SAAA,CACF;AAED,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC;AACjB,cAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ;cACtD,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;QAE/B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,QAAQ,EAAA,EAC9B,CAAC,CAAA,OAAO,EACN,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,CAAC,kBAAkB,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,OAAO,CAAC,EAC5E,IAAI,EAAC,QAAQ,EACT,GAAA,KAAK,EACT,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE,IAEhC,IAAI,CAAC,IAAI,KAAK,SAAS,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EAClC,IAAI,CAAC,SAAS,IAAI,YAAM,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC3D,KAEN,EAAC,QAAQ,EAAA,IAAA,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,EAAA,EACvC,IAAI,CAAC,SAAS,CACV,CACR,EACD,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,EAAE,EACP,WAAW,EAAC,UAAU,EACtB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EAAA,EAEd,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACjB,CACL,EACN,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,IACnC,IAAI,CAAC,OAAO,CACR,CACR,CACQ,CACZ,CACO,CACG,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
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}

package/dist/components/le-tabs.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { h as classnames } from './utils.js';
-import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$7, e as defineCustomElement$8, f as defineCustomElement$9 } from './le-button2.js';
-import { d as defineCustomElement$6 } from './le-popover2.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$9, f as defineCustomElement$a, g as defineCustomElement$b } from './le-button2.js';
+import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$7 } from './le-popover2.js';
 import { d as defineCustomElement$2 } from './le-tab2.js';
 const leTabsCss = ":host{display:block;--le-tabs-gap:var(--le-spacing-1);--le-tabs-border-color:var(--le-border-color);--le-tabs-padding-y:var(--le-spacing-2);--le-tabs-padding-x:var(--le-spacing-4);--le-tabs-enclosed-bg:var(--le-color-background-secondary)}.le-tabs{display:flex;flex-direction:column}.le-tabs.orientation-vertical{flex-direction:row}.tablist{display:flex;position:relative;border-radius:var(--le-radius-md);gap:var(--le-tabs-gap)}.tablist.wrap-tabs{flex-wrap:wrap}.tablist.overflow-auto{overflow:auto}.tablist.overflow-hidden{overflow:hidden}.tablist.overflow-visible{overflow:visible}.tablist.overflow-scroll{overflow:scroll}.tablist:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.orientation-horizontal .tablist{flex-direction:row;border-bottom:1px solid var(--le-tabs-border-color)}.orientation-vertical .tablist{flex-direction:column;border-right:1px solid var(--le-tabs-border-color);min-width:150px}.full-width .tablist{width:100%}.full-width.orientation-horizontal .tab{flex:1}.variant-underlined .tablist{padding-inline:4px}.variant-pills .tablist{border-radius:calc(1.12rem)}.variant-enclosed .tablist{border:none;gap:0;background-color:var(--le-tabs-enclosed-bg);border-radius:calc(var(--le-radius-md) + var(--le-spacing-1));padding:var(--le-spacing-1)}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.panels{flex:1;min-height:0}.panel{padding:var(--le-tabs-panel-padding, var(--le-spacing-4))}.panel[hidden]{display:none}.orientation-vertical .panels{padding-left:var(--le-spacing-4)}.position-end .panels{order:1}.position-end .tablist{order:2}";
@@ -278,7 +279,7 @@ const LeTabs$1 = /*@__PURE__*/ proxyCustomElement(class LeTabs extends HTMLEleme
             : this.position === 'start'
                 ? 'top'
                 : 'bottom';
-        return (h("le-component", { key: '4cb40197e3d9c9558d5c348d1598d26406ad26e7', component: "le-tabs", hostClass: classnames(classes) }, h("div", { key: 'f44489820b7a55f93eb023f23b205894932a540d', class: classes }, h("div", { key: 'fa7f9452dd13c8745a441982c27903b4aa219816', class: {
+        return (h("le-component", { key: '27955ca3e6823a430cba21b8a3830dac4cbf23a9', component: "le-tabs", hostClass: classnames(classes) }, h("div", { key: 'f6f732307d85bd778fc5c0fc002a47aeb2c1e269', class: classes }, h("div", { key: '96908f34cd62d42915a80f3197fd32ef72a8ba93', class: {
                 'tablist': true,
                 'wrap-tabs': this.wrap,
                 [`overflow-${this.overflow}`]: true,
@@ -287,7 +288,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: 'c7a26667df9b91db40c035f33de67721a049fca2', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        })), h("div", { key: '69a47db5fdad33cdcb17a4f21b8731c80e519933', 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
@@ -327,7 +328,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-tabs", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input", "le-tab"];
+    const components = ["le-tabs", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input", "le-tab"];
     components.forEach(tagName => { switch (tagName) {
         case "le-tabs":
             if (!customElements.get(tagName)) {
@@ -336,25 +337,35 @@ function defineCustomElement$1() {
             break;
         case "le-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "le-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "le-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

	@@ -1 +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}
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}