@lmvz-ds/components 0.39.0 → 0.40.0

package/hydrate/index.js

@@ -15795,7 +15795,7 @@ class LmvzSpinner {
     }; }
 }
 
-const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } `;
+const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;    inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } `;
 
 class LmvzTab {
     constructor(hostRef) {
@@ -15806,7 +15806,7 @@ class LmvzTab {
     value;
     disabled = false;
     selected = false;
-    vertical = false;
+    panel;
     handleMediaSlotChange = () => {
         this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
     };
@@ -15815,7 +15815,7 @@ class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (hAsync(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, hAsync("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, hAsync("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), hAsync("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (hAsync(Host, { key: '8fb0ddc827d31fa1669a7fdaef288be5002a7c53' }, hAsync("button", { key: '72b8f8be2f7ec7d0d2840148d48188382699d9b9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'c951ae74e7b15feff7f32bc87b2e3fd46221b6b4', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '8a06f3a9598bbf90819ff3644874f53b1ed9f840', class: "label" }, hAsync("slot", { key: '98217fca2371ad7b0ded79628895337603a54c2f' })), hAsync("span", { key: '68a11cf2f3d51aa6f4b9a7d2efcce1a1bb0c7640', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzTabCss(); }
@@ -15826,15 +15826,15 @@ class LmvzTab {
             "value": [513],
             "disabled": [516],
             "selected": [516],
-            "vertical": [516]
+            "panel": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["vertical", "vertical"]]
+        "$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["panel", "panel"]]
     }; }
 }
 
-const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  :host([orientation='vertical']) .tablist {   flex-direction: column;   overflow: visible auto; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
+const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
 
 let tabsIdCounter = 0;
 class LmvzTabs extends ReactiveControllerHost {
@@ -15850,7 +15850,6 @@ class LmvzTabs extends ReactiveControllerHost {
         listenerTarget: this.tablistEl,
     });
     value;
-    orientation = 'horizontal';
     lmvzChange;
     resolvedValue;
     constructor(hostRef) {
@@ -15861,12 +15860,11 @@ class LmvzTabs extends ReactiveControllerHost {
     }
     componentWillLoad() {
         super.componentWillLoad();
-        this.syncOrientation();
     }
     componentDidLoad() {
-        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
-        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
-        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange.bind(this));
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange.bind(this));
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         this.handleTabSlotChange();
         if (this.tablistEl) {
             this.focusController.updateListenerTarget(this.tablistEl);
@@ -15874,17 +15872,16 @@ class LmvzTabs extends ReactiveControllerHost {
         super.componentDidLoad();
     }
     disconnectedCallback() {
-        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         super.disconnectedCallback();
     }
+    handleSlotChangeEvent() {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    }
     handleValueChange(newValue) {
         this.applySelection(newValue);
     }
-    handleOrientationChange() {
-        this.syncOrientation();
-        this.syncFocusTargets();
-        this.syncTabOrientation();
-    }
     async initFocus() {
         this.focusController.initFocus();
     }
@@ -15924,23 +15921,22 @@ class LmvzTabs extends ReactiveControllerHost {
     get slottedPanels() {
         return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
     }
-    handleTabSlotChange = () => {
+    handleTabSlotChange() {
         this.syncFocusTargets();
-        this.syncTabOrientation();
         this.wireAriaIds();
         this.applySelection(this.value);
         this.updateIconTabsAttr();
-    };
-    handlePanelSlotChange = () => {
+    }
+    handlePanelSlotChange() {
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
-    };
-    handleTabReady = () => {
+    }
+    handleTabReady() {
         this.syncFocusTargets();
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
         this.updateIconTabsAttr();
-    };
+    }
     updateIconTabsAttr() {
         this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
     }
@@ -15948,34 +15944,31 @@ class LmvzTabs extends ReactiveControllerHost {
         const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
         this.focusController.updateElements(buttons);
     }
-    syncOrientation() {
-        this.removeController(this.focusController);
-        this.focusController.hostDisconnected?.();
-        this.focusController = new DirectionalFocusController(this, {
-            orientation: this.orientation,
-            manageTabIndex: true,
-            enableHomeAndEnd: true,
-            listenerTarget: this.tablistEl,
-        });
-        this.addController(this.focusController);
-        if (this.el.isConnected) {
-            this.focusController.hostConnected?.();
+    resolvePanelForTab(tab, index, panels) {
+        const panelId = tab.getAttribute('panel');
+        if (panelId) {
+            const matched = panels.find((panel) => panel.id === panelId);
+            if (matched)
+                return matched;
         }
+        return panels[index];
     }
-    syncTabOrientation() {
-        const isVertical = this.orientation === 'vertical';
-        this.slottedTabs.forEach((tab) => {
-            tab.toggleAttribute('vertical', isVertical);
-        });
+    warnIfMixedPanelLinking(tabs) {
+        const hasPanelAttr = tabs.some((tab) => tab.hasAttribute('panel'));
+        const missingPanelAttr = tabs.some((tab) => !tab.hasAttribute('panel'));
+        if (hasPanelAttr && missingPanelAttr) {
+            console.warn("[lmvz-tabs] Mixed panel linking: some lmvz-tab elements have a 'panel' attribute and some do not. Use either id-based or positional linking consistently.");
+        }
     }
     wireAriaIds() {
         const tabs = this.slottedTabs;
         const panels = this.slottedPanels;
         const prefix = `lmvz-tabs-${this.instanceId}`;
+        this.warnIfMixedPanelLinking(tabs);
         tabs.forEach((tab, index) => {
             const tabId = tab.id || `${prefix}-tab-${index}`;
             tab.id = tabId;
-            const panel = panels[index];
+            const panel = this.resolvePanelForTab(tab, index, panels);
             if (!panel)
                 return;
             const panelId = panel.id || `${prefix}-panel-${index}`;
@@ -16011,9 +16004,12 @@ class LmvzTabs extends ReactiveControllerHost {
             if (btn)
                 btn.setAttribute('aria-selected', String(isSelected));
         });
-        this.slottedPanels.forEach((panel, index) => {
-            const tab = tabs[index];
-            const isActive = tab?.getAttribute('value') === effectiveValue;
+        const panels = this.slottedPanels;
+        tabs.forEach((tab, index) => {
+            const panel = this.resolvePanelForTab(tab, index, panels);
+            if (!panel)
+                return;
+            const isActive = tab.getAttribute('value') === effectiveValue;
             panel.toggleAttribute('hidden', !isActive);
         });
         const selectedBtn = target.shadowRoot?.querySelector('button');
@@ -16078,14 +16074,11 @@ class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (hAsync(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (hAsync(Host, { key: 'ba02ac9a48c62590b8c986670336b04f82030ad2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'c5c123997d154d676947c8a4f49149ff9e209750', role: "tablist", "aria-orientation": "horizontal", class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: '7e58d17a4ec8e8300b5dfb745cb36154adc9dbcb', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '5e3e44442e0ffb1a51fd325d545fd799d7a9d119', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'a6208761b4422a297a58b863fff22843221644bd', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
-            }],
-        "orientation": [{
-                "handleOrientationChange": 0
             }]
     }; }
     static get style() { return lmvzTabsCss(); }
@@ -16094,16 +16087,15 @@ class LmvzTabs extends ReactiveControllerHost {
         "$tagName$": "lmvz-tabs",
         "$members$": {
             "value": [1537],
-            "orientation": [1537],
             "resolvedValue": [32],
             "initFocus": [64],
             "activateTab": [64],
             "getTabElements": [64],
             "setTabPanelIds": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "slotchange", "handleSlotChangeEvent"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["orientation", "orientation"]]
+        "$attrsToReflect$": [["value", "value"]]
     }; }
 }
 

package/hydrate/index.mjs

@@ -15793,7 +15793,7 @@ class LmvzSpinner {
     }; }
 }
 
-const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } `;
+const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;    inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } `;
 
 class LmvzTab {
     constructor(hostRef) {
@@ -15804,7 +15804,7 @@ class LmvzTab {
     value;
     disabled = false;
     selected = false;
-    vertical = false;
+    panel;
     handleMediaSlotChange = () => {
         this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
     };
@@ -15813,7 +15813,7 @@ class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (hAsync(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, hAsync("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, hAsync("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), hAsync("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (hAsync(Host, { key: '8fb0ddc827d31fa1669a7fdaef288be5002a7c53' }, hAsync("button", { key: '72b8f8be2f7ec7d0d2840148d48188382699d9b9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'c951ae74e7b15feff7f32bc87b2e3fd46221b6b4', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '8a06f3a9598bbf90819ff3644874f53b1ed9f840', class: "label" }, hAsync("slot", { key: '98217fca2371ad7b0ded79628895337603a54c2f' })), hAsync("span", { key: '68a11cf2f3d51aa6f4b9a7d2efcce1a1bb0c7640', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzTabCss(); }
@@ -15824,15 +15824,15 @@ class LmvzTab {
             "value": [513],
             "disabled": [516],
             "selected": [516],
-            "vertical": [516]
+            "panel": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["vertical", "vertical"]]
+        "$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["panel", "panel"]]
     }; }
 }
 
-const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  :host([orientation='vertical']) .tablist {   flex-direction: column;   overflow: visible auto; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
+const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
 
 let tabsIdCounter = 0;
 class LmvzTabs extends ReactiveControllerHost {
@@ -15848,7 +15848,6 @@ class LmvzTabs extends ReactiveControllerHost {
         listenerTarget: this.tablistEl,
     });
     value;
-    orientation = 'horizontal';
     lmvzChange;
     resolvedValue;
     constructor(hostRef) {
@@ -15859,12 +15858,11 @@ class LmvzTabs extends ReactiveControllerHost {
     }
     componentWillLoad() {
         super.componentWillLoad();
-        this.syncOrientation();
     }
     componentDidLoad() {
-        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
-        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
-        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange.bind(this));
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange.bind(this));
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         this.handleTabSlotChange();
         if (this.tablistEl) {
             this.focusController.updateListenerTarget(this.tablistEl);
@@ -15872,17 +15870,16 @@ class LmvzTabs extends ReactiveControllerHost {
         super.componentDidLoad();
     }
     disconnectedCallback() {
-        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         super.disconnectedCallback();
     }
+    handleSlotChangeEvent() {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    }
     handleValueChange(newValue) {
         this.applySelection(newValue);
     }
-    handleOrientationChange() {
-        this.syncOrientation();
-        this.syncFocusTargets();
-        this.syncTabOrientation();
-    }
     async initFocus() {
         this.focusController.initFocus();
     }
@@ -15922,23 +15919,22 @@ class LmvzTabs extends ReactiveControllerHost {
     get slottedPanels() {
         return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
     }
-    handleTabSlotChange = () => {
+    handleTabSlotChange() {
         this.syncFocusTargets();
-        this.syncTabOrientation();
         this.wireAriaIds();
         this.applySelection(this.value);
         this.updateIconTabsAttr();
-    };
-    handlePanelSlotChange = () => {
+    }
+    handlePanelSlotChange() {
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
-    };
-    handleTabReady = () => {
+    }
+    handleTabReady() {
         this.syncFocusTargets();
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
         this.updateIconTabsAttr();
-    };
+    }
     updateIconTabsAttr() {
         this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
     }
@@ -15946,34 +15942,31 @@ class LmvzTabs extends ReactiveControllerHost {
         const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
         this.focusController.updateElements(buttons);
     }
-    syncOrientation() {
-        this.removeController(this.focusController);
-        this.focusController.hostDisconnected?.();
-        this.focusController = new DirectionalFocusController(this, {
-            orientation: this.orientation,
-            manageTabIndex: true,
-            enableHomeAndEnd: true,
-            listenerTarget: this.tablistEl,
-        });
-        this.addController(this.focusController);
-        if (this.el.isConnected) {
-            this.focusController.hostConnected?.();
+    resolvePanelForTab(tab, index, panels) {
+        const panelId = tab.getAttribute('panel');
+        if (panelId) {
+            const matched = panels.find((panel) => panel.id === panelId);
+            if (matched)
+                return matched;
         }
+        return panels[index];
     }
-    syncTabOrientation() {
-        const isVertical = this.orientation === 'vertical';
-        this.slottedTabs.forEach((tab) => {
-            tab.toggleAttribute('vertical', isVertical);
-        });
+    warnIfMixedPanelLinking(tabs) {
+        const hasPanelAttr = tabs.some((tab) => tab.hasAttribute('panel'));
+        const missingPanelAttr = tabs.some((tab) => !tab.hasAttribute('panel'));
+        if (hasPanelAttr && missingPanelAttr) {
+            console.warn("[lmvz-tabs] Mixed panel linking: some lmvz-tab elements have a 'panel' attribute and some do not. Use either id-based or positional linking consistently.");
+        }
     }
     wireAriaIds() {
         const tabs = this.slottedTabs;
         const panels = this.slottedPanels;
         const prefix = `lmvz-tabs-${this.instanceId}`;
+        this.warnIfMixedPanelLinking(tabs);
         tabs.forEach((tab, index) => {
             const tabId = tab.id || `${prefix}-tab-${index}`;
             tab.id = tabId;
-            const panel = panels[index];
+            const panel = this.resolvePanelForTab(tab, index, panels);
             if (!panel)
                 return;
             const panelId = panel.id || `${prefix}-panel-${index}`;
@@ -16009,9 +16002,12 @@ class LmvzTabs extends ReactiveControllerHost {
             if (btn)
                 btn.setAttribute('aria-selected', String(isSelected));
         });
-        this.slottedPanels.forEach((panel, index) => {
-            const tab = tabs[index];
-            const isActive = tab?.getAttribute('value') === effectiveValue;
+        const panels = this.slottedPanels;
+        tabs.forEach((tab, index) => {
+            const panel = this.resolvePanelForTab(tab, index, panels);
+            if (!panel)
+                return;
+            const isActive = tab.getAttribute('value') === effectiveValue;
             panel.toggleAttribute('hidden', !isActive);
         });
         const selectedBtn = target.shadowRoot?.querySelector('button');
@@ -16076,14 +16072,11 @@ class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (hAsync(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (hAsync(Host, { key: 'ba02ac9a48c62590b8c986670336b04f82030ad2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'c5c123997d154d676947c8a4f49149ff9e209750', role: "tablist", "aria-orientation": "horizontal", class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: '7e58d17a4ec8e8300b5dfb745cb36154adc9dbcb', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '5e3e44442e0ffb1a51fd325d545fd799d7a9d119', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'a6208761b4422a297a58b863fff22843221644bd', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
-            }],
-        "orientation": [{
-                "handleOrientationChange": 0
             }]
     }; }
     static get style() { return lmvzTabsCss(); }
@@ -16092,16 +16085,15 @@ class LmvzTabs extends ReactiveControllerHost {
         "$tagName$": "lmvz-tabs",
         "$members$": {
             "value": [1537],
-            "orientation": [1537],
             "resolvedValue": [32],
             "initFocus": [64],
             "activateTab": [64],
             "getTabElements": [64],
             "setTabPanelIds": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "slotchange", "handleSlotChangeEvent"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["orientation", "orientation"]]
+        "$attrsToReflect$": [["value", "value"]]
     }; }
 }
 

package/lmvz-components/lmvz-components.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-DVab4vzV.js";export{s as setNonce}from"./p-DVab4vzV.js";import{g as l}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-efd9d50e",[[593,"lmvz-datepicker",{value:[6145],visibleMonth:[6145,"visible-month"],min:[1],max:[1],locale:[1],firstDayOfWeek:[2,"first-day-of-week"],disabled:[516],readonly:[516],required:[516],name:[513],label:[1],placeholder:[1],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],open:[1540],displayFormat:[1,"display-format"],focusedDate:[32],valueDate:[32],visibleMonthDate:[32],inputText:[32],hasUnparseableInput:[32],isInvalid:[32],nativeError:[32],checkValidity:[64],reportValidity:[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{required:[{handleValidityRelevantPropChange:0}],min:[{handleValidityRelevantPropChange:0}],max:[{handleValidityRelevantPropChange:0}],locale:[{handleDisplayFormatChange:0}],displayFormat:[{handleDisplayFormatChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-d73bb7fd",[[769,"lmvz-modal",{open:[1540],closeLabel:[1,"close-label"],hasHeader:[32]},[[0,"submit","handleFormDialogSubmit"]],{open:[{handleOpenChange:0}]}]]],["p-edec4d09",[[769,"lmvz-message",{type:[513],live:[1],leadingIcon:[4,"leading-icon"],dismissible:[4],closeLabel:[1,"close-label"],actionLabel:[1,"action-label"]}]]],["p-f911691c",[[838,"lmvz-select",{value:[1025],multiple:[516],values:[1040],label:[1],helperText:[1,"helper-text"],error:[6660],errorMessage:[1,"error-message"],disabled:[516],required:[516],name:[513],size:[513],nativeError:[32],selectedLabel:[32],selectedId:[32],activeId:[32],isOpen:[32],optionGroups:[32],focusTrigger:[64],blurTrigger:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"]],{value:[{handleValueChange:0}],values:[{handleValuesChange:0}],required:[{handleRequiredChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-7cbfbc88",[[513,"lmvz-snackbar",{status:[1537],message:[1025],duration:[1026],priority:[1025],actionLabel:[1025,"action-label"],animationClass:[32],show:[64],hide:[64]},null,{status:[{onStatusChange:0}]}]]],["p-335b3867",[[785,"lmvz-link",{href:[513],target:[513],rel:[1],type:[1537],externalLabel:[1,"external-label"]},null,{type:[{normalizeType:0}]}]]],["p-93b781ca",[[769,"lmvz-header",{role:[2561],lmvzActiveNav:[1,"lmvz-active-nav"],initFocus:[64]},null,{lmvzActiveNav:[{handleActiveNavChange:0}]}],[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]]],["p-743616c0",[[257,"lmvz-action"]]],["p-316dd61a",[[774,"lmvz-action-list",{label:[1],initFocus:[64]}]]],["p-c884c76e",[[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]]],["p-f24f5207",[[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[513],disabled:[516],required:[516],error:[6660],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],nativeError:[32],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"]],{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange:0}]}]]],["p-8ba6ec19",[[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]]],["p-e35f49a1",[[578,"lmvz-radio",{label:[1],checked:[1540],value:[1],name:[513],disabled:[516],required:[516],error:[6660],helperText:[1,"helper-text"],form:[513],autofocus:[4],nativeError:[32],focusInput:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange:0}],value:[{handleValueChange:0}],label:[{handleLabelChange:0}]}]]],["p-27e8b4fa",[[513,"lmvz-spinner",{size:[513],ariaLabel:[513,"aria-label"]}]]],["p-3b7203a3",[[785,"lmvz-tab",{value:[513],disabled:[516],selected:[516],vertical:[516]}]]],["p-1ba1af8d",[[769,"lmvz-tabs",{value:[1537],orientation:[1537],resolvedValue:[32],initFocus:[64],activateTab:[64],getTabElements:[64],setTabPanelIds:[64]},null,{value:[{handleValueChange:0}],orientation:[{handleOrientationChange:0}]}]]],["p-773e9d95",[[578,"lmvz-toggle",{label:[1],checked:[1540],disabled:[516],required:[516],name:[1],value:[1],form:[1],focusToggle:[64],blurToggle:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],getInputElement:[64]},null,{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-304c7554",[[769,"lmvz-button-group",{stacked:[516],primaryEnabledAction:[2064],hasActions:[2052,"has-actions"]}]]],["p-87f21ac9",[[769,"lmvz-chip",{type:[1537],size:[1537]},null,{type:[{normalizeType:0}],size:[{normalizeSize:0}]}]]],["p-6aae1df9",[[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],size:[513],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],getInputElement:[64]},null,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-41286514",[[769,"lmvz-popover",{open:[1540],anchor:[1],placement:[1],size:[1],autoFocus:[4,"auto-focus"],containerRole:[1,"container-role"],label:[1],anchorEl:[32],show:[64],hide:[64],toggle:[64]},null,{open:[{handleOpenChange:0}],anchor:[{handleAnchorChange:1}]}]]],["p-ebad823c",[[785,"lmvz-button",{ti:[514,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1],formMethod:[1,"form-method"],name:[1],value:[1],buttonRole:[1,"button-role"]}],[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},null,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]]]],e))));
+import{p as e,b as a}from"./p-DVab4vzV.js";export{s as setNonce}from"./p-DVab4vzV.js";import{g as l}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-efd9d50e",[[593,"lmvz-datepicker",{value:[6145],visibleMonth:[6145,"visible-month"],min:[1],max:[1],locale:[1],firstDayOfWeek:[2,"first-day-of-week"],disabled:[516],readonly:[516],required:[516],name:[513],label:[1],placeholder:[1],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],open:[1540],displayFormat:[1,"display-format"],focusedDate:[32],valueDate:[32],visibleMonthDate:[32],inputText:[32],hasUnparseableInput:[32],isInvalid:[32],nativeError:[32],checkValidity:[64],reportValidity:[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{required:[{handleValidityRelevantPropChange:0}],min:[{handleValidityRelevantPropChange:0}],max:[{handleValidityRelevantPropChange:0}],locale:[{handleDisplayFormatChange:0}],displayFormat:[{handleDisplayFormatChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-d73bb7fd",[[769,"lmvz-modal",{open:[1540],closeLabel:[1,"close-label"],hasHeader:[32]},[[0,"submit","handleFormDialogSubmit"]],{open:[{handleOpenChange:0}]}]]],["p-edec4d09",[[769,"lmvz-message",{type:[513],live:[1],leadingIcon:[4,"leading-icon"],dismissible:[4],closeLabel:[1,"close-label"],actionLabel:[1,"action-label"]}]]],["p-f911691c",[[838,"lmvz-select",{value:[1025],multiple:[516],values:[1040],label:[1],helperText:[1,"helper-text"],error:[6660],errorMessage:[1,"error-message"],disabled:[516],required:[516],name:[513],size:[513],nativeError:[32],selectedLabel:[32],selectedId:[32],activeId:[32],isOpen:[32],optionGroups:[32],focusTrigger:[64],blurTrigger:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"]],{value:[{handleValueChange:0}],values:[{handleValuesChange:0}],required:[{handleRequiredChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-7cbfbc88",[[513,"lmvz-snackbar",{status:[1537],message:[1025],duration:[1026],priority:[1025],actionLabel:[1025,"action-label"],animationClass:[32],show:[64],hide:[64]},null,{status:[{onStatusChange:0}]}]]],["p-335b3867",[[785,"lmvz-link",{href:[513],target:[513],rel:[1],type:[1537],externalLabel:[1,"external-label"]},null,{type:[{normalizeType:0}]}]]],["p-93b781ca",[[769,"lmvz-header",{role:[2561],lmvzActiveNav:[1,"lmvz-active-nav"],initFocus:[64]},null,{lmvzActiveNav:[{handleActiveNavChange:0}]}],[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]]],["p-743616c0",[[257,"lmvz-action"]]],["p-316dd61a",[[774,"lmvz-action-list",{label:[1],initFocus:[64]}]]],["p-c884c76e",[[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]]],["p-f24f5207",[[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[513],disabled:[516],required:[516],error:[6660],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],nativeError:[32],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"]],{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange:0}]}]]],["p-8ba6ec19",[[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]]],["p-e35f49a1",[[578,"lmvz-radio",{label:[1],checked:[1540],value:[1],name:[513],disabled:[516],required:[516],error:[6660],helperText:[1,"helper-text"],form:[513],autofocus:[4],nativeError:[32],focusInput:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange:0}],value:[{handleValueChange:0}],label:[{handleLabelChange:0}]}]]],["p-27e8b4fa",[[513,"lmvz-spinner",{size:[513],ariaLabel:[513,"aria-label"]}]]],["p-143e9621",[[785,"lmvz-tab",{value:[513],disabled:[516],selected:[516],panel:[513]}]]],["p-220e455e",[[769,"lmvz-tabs",{value:[1537],resolvedValue:[32],initFocus:[64],activateTab:[64],getTabElements:[64],setTabPanelIds:[64]},[[0,"slotchange","handleSlotChangeEvent"]],{value:[{handleValueChange:0}]}]]],["p-773e9d95",[[578,"lmvz-toggle",{label:[1],checked:[1540],disabled:[516],required:[516],name:[1],value:[1],form:[1],focusToggle:[64],blurToggle:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],getInputElement:[64]},null,{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-304c7554",[[769,"lmvz-button-group",{stacked:[516],primaryEnabledAction:[2064],hasActions:[2052,"has-actions"]}]]],["p-87f21ac9",[[769,"lmvz-chip",{type:[1537],size:[1537]},null,{type:[{normalizeType:0}],size:[{normalizeSize:0}]}]]],["p-6aae1df9",[[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],size:[513],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],getInputElement:[64]},null,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]]],["p-41286514",[[769,"lmvz-popover",{open:[1540],anchor:[1],placement:[1],size:[1],autoFocus:[4,"auto-focus"],containerRole:[1,"container-role"],label:[1],anchorEl:[32],show:[64],hide:[64],toggle:[64]},null,{open:[{handleOpenChange:0}],anchor:[{handleAnchorChange:1}]}]]],["p-ebad823c",[[785,"lmvz-button",{ti:[514,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1],formMethod:[1,"form-method"],name:[1],value:[1],buttonRole:[1,"button-role"]}],[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},null,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]]]],e))));

package/lmvz-components/p-143e9621.entry.js

@@ -0,0 +1 @@
+import{r as e,g as a,h as t,H as o}from"./p-DVab4vzV.js";const r=class{constructor(a){e(this,a)}get el(){return a(this)}mediaSlotEl;value;disabled=!1;selected=!1;panel;handleMediaSlotChange=()=>{this.el.toggleAttribute("has-media",(this.mediaSlotEl?.assignedElements()??[]).length>0)};componentDidLoad(){this.handleMediaSlotChange(),this.el.dispatchEvent(new CustomEvent("lmvzTabReady",{bubbles:!0,composed:!1}))}render(){return t(o,{key:"8fb0ddc827d31fa1669a7fdaef288be5002a7c53"},t("button",{key:"72b8f8be2f7ec7d0d2840148d48188382699d9b9",part:"button",role:"tab",disabled:this.disabled,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":void 0,tabIndex:0},t("slot",{key:"c951ae74e7b15feff7f32bc87b2e3fd46221b6b4",name:"media",ref:e=>this.mediaSlotEl=e,onSlotchange:this.handleMediaSlotChange}),t("span",{key:"8a06f3a9598bbf90819ff3644874f53b1ed9f840",class:"label"},t("slot",{key:"98217fca2371ad7b0ded79628895337603a54c2f"})),t("span",{key:"68a11cf2f3d51aa6f4b9a7d2efcce1a1bb0c7640","aria-hidden":"true",part:"indicator",class:"indicator"})))}static get delegatesFocus(){return!0}};r.style=" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;    inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } ";export{r as lmvz_tab}

package/lmvz-components/p-220e455e.entry.js

@@ -0,0 +1 @@
+import{g as t,r as e,c as s,h as i,H as a}from"./p-DVab4vzV.js";import{D as n}from"./p-BlkpdeQI.js";import{R as l}from"./p-CICeIanv.js";import"./p-BA3wizqg.js";import"./p-DIyiticz.js";let o=0;const r=class extends l{get el(){return t(this)}instanceId=++o;tabSlotEl;panelSlotEl;tablistEl;focusController=new n(this,{orientation:"horizontal",manageTabIndex:!0,enableHomeAndEnd:!0,listenerTarget:this.tablistEl});value;lmvzChange;resolvedValue;constructor(t){super(),e(this,t),this.lmvzChange=s(this,"lmvzChange",7),this.addController(this.focusController)}componentWillLoad(){super.componentWillLoad()}componentDidLoad(){this.tabSlotEl?.addEventListener("slotchange",this.handleTabSlotChange.bind(this)),this.panelSlotEl?.addEventListener("slotchange",this.handlePanelSlotChange.bind(this)),this.el.addEventListener("lmvzTabReady",this.handleTabReady.bind(this)),this.handleTabSlotChange(),this.tablistEl&&this.focusController.updateListenerTarget(this.tablistEl),super.componentDidLoad()}disconnectedCallback(){this.el.removeEventListener("lmvzTabReady",this.handleTabReady.bind(this)),super.disconnectedCallback()}handleSlotChangeEvent(){this.wireAriaIds(),this.applySelection(this.resolvedValue??this.value)}handleValueChange(t){this.applySelection(t)}async initFocus(){this.focusController.initFocus()}async activateTab(t){const e=this.findTabByValue(t);e&&!this.isTabDisabled(e)&&this.selectTab(t)}async getTabElements(){return this.slottedTabs}async setTabPanelIds(t){const e=this.slottedTabs,s=this.slottedPanels;t.forEach((([t,i],a)=>{const n=e[a],l=s[a],o=`${t}-btn`;if(n){n.id=t;const e=n.shadowRoot?.querySelector("button");e&&(e.id=o,e.setAttribute("aria-controls",i))}l&&(l.id=i,l.setAttribute("aria-labelledby",o))}))}get slottedTabs(){return(this.tabSlotEl?.assignedElements({flatten:!1})??[]).filter((t=>"lmvz-tab"===t.tagName.toLowerCase()))}get slottedPanels(){return this.panelSlotEl?.assignedElements({flatten:!1})??[]}handleTabSlotChange(){this.syncFocusTargets(),this.wireAriaIds(),this.applySelection(this.value),this.updateIconTabsAttr()}handlePanelSlotChange(){this.wireAriaIds(),this.applySelection(this.resolvedValue??this.value)}handleTabReady(){this.syncFocusTargets(),this.wireAriaIds(),this.applySelection(this.resolvedValue??this.value),this.updateIconTabsAttr()}updateIconTabsAttr(){this.el.toggleAttribute("has-icon-tabs",this.slottedTabs.some((t=>t.hasAttribute("has-media"))))}syncFocusTargets(){const t=this.slottedTabs.map((t=>t.shadowRoot?.querySelector("button"))).filter((t=>!!t));this.focusController.updateElements(t)}resolvePanelForTab(t,e,s){const i=t.getAttribute("panel");if(i){const t=s.find((t=>t.id===i));if(t)return t}return s[e]}warnIfMixedPanelLinking(t){const e=t.some((t=>t.hasAttribute("panel"))),s=t.some((t=>!t.hasAttribute("panel")));e&&s&&console.warn("[lmvz-tabs] Mixed panel linking: some lmvz-tab elements have a 'panel' attribute and some do not. Use either id-based or positional linking consistently.")}wireAriaIds(){const t=this.slottedTabs,e=this.slottedPanels,s=`lmvz-tabs-${this.instanceId}`;this.warnIfMixedPanelLinking(t),t.forEach(((t,i)=>{const a=t.id||`${s}-tab-${i}`;t.id=a;const n=this.resolvePanelForTab(t,i,e);if(!n)return;const l=n.id||`${s}-panel-${i}`;n.id=l;const o=t.shadowRoot?.querySelector("button");o&&(o.setAttribute("aria-controls",l),o.setAttribute("id",`${a}-btn`)),n.setAttribute("role",n.getAttribute("role")??"tabpanel"),n.setAttribute("aria-labelledby",`${a}-btn`)}))}applySelection(t){const e=this.slottedTabs;if(!e.length)return;let s=this.findTabByValue(t);if(s&&!this.isTabDisabled(s)||(s=this.findNearestEnabled(t)??void 0),!s)return;const i=s.getAttribute("value")??"";this.resolvedValue=i,this.value!==i&&(this.value=i),e.forEach((t=>{const e=t.getAttribute("value")===i;t.toggleAttribute("selected",e);const s=t.shadowRoot?.querySelector("button");s&&s.setAttribute("aria-selected",String(e))}));const a=this.slottedPanels;e.forEach(((t,e)=>{const s=this.resolvePanelForTab(t,e,a);if(!s)return;const n=t.getAttribute("value")===i;s.toggleAttribute("hidden",!n)}));const n=s.shadowRoot?.querySelector("button");n&&this.focusController.setCurrentElement(n)}isTabDisabled(t){return t.hasAttribute("disabled")||!!t.disabled}findTabByValue(t){return this.slottedTabs.find((e=>e.getAttribute("value")===t))}findNearestEnabled(t){const e=this.slottedTabs,s=e.findIndex((e=>e.getAttribute("value")===t));for(let t=1;t<e.length;t++){const i=e[(s+t)%e.length];if(i&&!this.isTabDisabled(i))return i;const a=e[(s-t+e.length)%e.length];if(a&&!this.isTabDisabled(a))return a}}selectTab(t){t!==this.resolvedValue&&(this.applySelection(t),this.lmvzChange.emit({value:t}))}handleTabClick=t=>{const e=t.target.closest("lmvz-tab");if(!e)return;const s=e.getAttribute("value");s&&!this.isTabDisabled(e)&&this.selectTab(s)};handleKeydown=t=>{if("Enter"!==t.key&&" "!==t.key)return;const e=this.el.ownerDocument.activeElement;if(!e)return;let s=null;for(const t of this.slottedTabs)if(t===e){s=t;break}if(!s)return;const i=s.getAttribute("value");i&&!this.isTabDisabled(s)&&(t.preventDefault(),this.selectTab(i))};render(){return i(a,{key:"ba02ac9a48c62590b8c986670336b04f82030ad2",onClick:this.handleTabClick,onKeydown:this.handleKeydown},i("div",{key:"c5c123997d154d676947c8a4f49149ff9e209750",role:"tablist","aria-orientation":"horizontal",class:"tablist",ref:t=>this.tablistEl=t},i("slot",{key:"7e58d17a4ec8e8300b5dfb745cb36154adc9dbcb",ref:t=>this.tabSlotEl=t})),i("div",{key:"5e3e44442e0ffb1a51fd325d545fd799d7a9d119",part:"panels-container",class:"panels-container"},i("slot",{key:"a6208761b4422a297a58b863fff22843221644bd",name:"panels",ref:t=>this.panelSlotEl=t})))}static get watchers(){return{value:[{handleValueChange:0}]}}};r.style=" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } ";export{r as lmvz_tabs}