@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-tabs.mjs

@@ -0,0 +1,794 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, computed, Injectable, InjectionToken, DestroyRef, model, viewChild, viewChildren, effect, untracked, TemplateRef, Directive, contentChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
+import { filter } from 'rxjs';
+import * as i1 from '@angular/aria/tabs';
+import { TabList, Tab, TabPanel, TabContent, Tabs } from '@angular/aria/tabs';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger } from '@malva-ui/core/popup';
+import { MlvList, MlvListItem } from '@malva-ui/core/list';
+import { MLV_TABS_I18N } from '@malva-ui/i18n';
+import * as i2 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective } from '@malva-ui/cdk/density';
+import { MlvRtlService, MlvStructural } from '@malva-ui/cdk/utils';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+class MlvTabItem {
+    elementRef = inject((ElementRef));
+    /**
+     * Whether this tab is currently selected. Drives the active styling only —
+     * `aria-selected`, `role="tab"`, roving `tabindex` and `aria-controls` are
+     * provided by the `@angular/aria` `ngTab` directive applied on this element
+     * by the parent `mlv-tab-group`.
+     */
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Whether this tab is disabled. Drives the disabled styling only. */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted on click or Enter/Space when not disabled. Enter/Space stop
+     * propagation so the aria `ngTabList` keyboard handler does not additionally
+     * activate the (roving-)focused tab; this preserves the historical behaviour
+     * where keyboard activation targets the tab receiving the event.
+     */
+    activate = output();
+    /**
+     * Programmatically focuses this tab item. Used by the parent
+     * `mlv-tab-group` when promoting an overflow tab into the visible header.
+     */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvTabItem, isStandalone: true, selector: "mlv-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "!disabled() && activate.emit()", "keydown.enter": "!disabled() && activate.emit(); $event.stopPropagation()", "keydown.space": "!disabled() && activate.emit(); $event.stopPropagation(); $event.preventDefault()" }, properties: { "class.mlv-tab-item--active": "active()", "class.mlv-tab-item--disabled": "disabled()" }, classAttribute: "mlv-tab-item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer mlv.components{.mlv-tab-item{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem}[class*=--tight] .mlv-tab-item:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tab-item[class*=--tight]{padding:.375rem .625rem;font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-tab-item:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tab-item[class*=--compact]{padding:.5rem .75rem;font-size:var(--mlv-font-size-s)}[class*=--spacious] .mlv-tab-item:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-tab-item[class*=--spacious]{padding:1rem 1.25rem;font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-tab-item:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-tab-item[class*=--airy]{padding:1.25rem 1.5rem;font-size:var(--mlv-font-size-l)}.mlv-tab-item{cursor:pointer;border:none;background:none;color:var(--mlv-text-secondary);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal),background-color var(--mlv-duration-normal);outline:none}.mlv-tab-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-xs)}.mlv-tab-item--active{color:var(--mlv-text-action)}.mlv-tab-item--disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-tab-item,.mlv-tab-item *,.mlv-tab-item:before,.mlv-tab-item:after,[class^=mlv-tab-item__],[class*=\" mlv-tab-item__\"],[class^=mlv-tab-item--],[class*=\" mlv-tab-item--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tab-item', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-tab-item',
+                        '[class.mlv-tab-item--active]': 'active()',
+                        '[class.mlv-tab-item--disabled]': 'disabled()',
+                        '(click)': '!disabled() && activate.emit()',
+                        '(keydown.enter)': '!disabled() && activate.emit(); $event.stopPropagation()',
+                        '(keydown.space)': '!disabled() && activate.emit(); $event.stopPropagation(); $event.preventDefault()',
+                    }, styles: ["@layer mlv.components{.mlv-tab-item{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem}[class*=--tight] .mlv-tab-item:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tab-item[class*=--tight]{padding:.375rem .625rem;font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-tab-item:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tab-item[class*=--compact]{padding:.5rem .75rem;font-size:var(--mlv-font-size-s)}[class*=--spacious] .mlv-tab-item:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-tab-item[class*=--spacious]{padding:1rem 1.25rem;font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-tab-item:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-tab-item[class*=--airy]{padding:1.25rem 1.5rem;font-size:var(--mlv-font-size-l)}.mlv-tab-item{cursor:pointer;border:none;background:none;color:var(--mlv-text-secondary);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal),background-color var(--mlv-duration-normal);outline:none}.mlv-tab-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-xs)}.mlv-tab-item--active{color:var(--mlv-text-action)}.mlv-tab-item--disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-tab-item,.mlv-tab-item *,.mlv-tab-item:before,.mlv-tab-item:after,[class^=mlv-tab-item__],[class*=\" mlv-tab-item__\"],[class^=mlv-tab-item--],[class*=\" mlv-tab-item--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+
+/**
+ * Wrapper for the active panel content. `role="tabpanel"`, the panel `id` and
+ * `aria-labelledby` (panel → tab) are supplied by the `@angular/aria`
+ * `ngTabPanel` directive applied on this element by the parent
+ * `mlv-tab-group`; this component only owns the panel styling/animation slot.
+ */
+class MlvTabContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvTabContent, isStandalone: true, selector: "mlv-tab-content", host: { classAttribute: "mlv-tab-content" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer mlv.components{@keyframes tab-content-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes tab-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.25rem)}}.mlv-tab-content{display:block}.mlv-tab-content--enter{animation:tab-content-enter var(--mlv-tab-content-enter-duration, var(--mlv-duration-normal)) var(--mlv-ease-out-strong) both}.mlv-tab-content--leave{animation:tab-content-leave var(--mlv-tab-content-leave-duration, var(--mlv-duration-fast)) var(--mlv-ease-out-strong) both}@media(prefers-reduced-motion:reduce){.mlv-tab-content--enter,.mlv-tab-content--leave{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tab-content', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-tab-content',
+                    }, styles: ["@layer mlv.components{@keyframes tab-content-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes tab-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.25rem)}}.mlv-tab-content{display:block}.mlv-tab-content--enter{animation:tab-content-enter var(--mlv-tab-content-enter-duration, var(--mlv-duration-normal)) var(--mlv-ease-out-strong) both}.mlv-tab-content--leave{animation:tab-content-leave var(--mlv-tab-content-leave-duration, var(--mlv-duration-fast)) var(--mlv-ease-out-strong) both}@media(prefers-reduced-motion:reduce){.mlv-tab-content--enter,.mlv-tab-content--leave{animation:none}}}\n"] }]
+        }] });
+
+class MlvTabsService {
+    tabs = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** How many tabs fit in the header. -1 means no overflow (all fit). */
+    maxVisibleCount = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxVisibleCount" }] : /* istanbul ignore next */ []));
+    /** A tab value forced into the visible area (selected from overflow popup). */
+    forcedVisibleValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forcedVisibleValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible tabs with swap logic:
+     * - If a forced tab exists and is beyond maxVisibleCount,
+     *   it replaces the last naturally-visible tab.
+     *
+     * Example: tabs=[t1,t2,t3,t4,t5], max=3, forced=t4
+     *   visible=[t1,t2,t4], overflow=[t3,t5]
+     */
+    visibleTabs = computed(() => {
+        const all = this.tabs();
+        const max = this.maxVisibleCount();
+        if (max < 0 || max >= all.length)
+            return all;
+        const forced = this.forcedVisibleValue();
+        const forcedIndex = forced !== null ? all.findIndex((t) => t.value() === forced) : -1;
+        // Forced tab is already in the visible range or doesn't exist
+        if (forcedIndex < 0 || forcedIndex < max) {
+            return all.slice(0, max);
+        }
+        // Swap: take first (max-1), then the forced tab. `Math.max(0, …)` guards the
+        // `max === 0` case (all tabs overflow) so the forced/active tab is the sole
+        // visible tab instead of duplicating the last natural tab.
+        const visible = all.slice(0, Math.max(0, max - 1));
+        visible.push(all[forcedIndex]);
+        return visible;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    overflowTabs = computed(() => {
+        const all = this.tabs();
+        const max = this.maxVisibleCount();
+        if (max < 0 || max >= all.length)
+            return [];
+        const forced = this.forcedVisibleValue();
+        const forcedIndex = forced !== null ? all.findIndex((t) => t.value() === forced) : -1;
+        // No forced tab or forced is already visible
+        if (forcedIndex < 0 || forcedIndex < max) {
+            return all.slice(max);
+        }
+        // The last naturally-visible tab (index max-1) goes to overflow, plus all
+        // original overflow tabs except the forced one. When `max === 0` there is no
+        // last-natural tab to demote (guarded below).
+        const overflow = [];
+        if (max - 1 >= 0) {
+            overflow.push(all[max - 1]);
+        }
+        for (let i = max; i < all.length; i++) {
+            if (i !== forcedIndex) {
+                overflow.push(all[i]);
+            }
+        }
+        return overflow;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowTabs" }] : /* istanbul ignore next */ []));
+    register(tab) {
+        this.tabs.update((tabs) => [...tabs, tab]);
+    }
+    unregister(tab) {
+        this.tabs.update((tabs) => tabs.filter((t) => t !== tab));
+        if (this.forcedVisibleValue() === tab.value()) {
+            this.forcedVisibleValue.set(null);
+        }
+    }
+    forceVisible(value) {
+        this.forcedVisibleValue.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabsService, decorators: [{
+            type: Injectable
+        }] });
+
+const TAB_GROUP = new InjectionToken('TAB_GROUP');
+
+class MlvTabGroup {
+    /** @private Scoped service tracking tab registration and visible/overflow split. */
+    _tabsService = inject(MlvTabsService);
+    _rtlService = inject(MlvRtlService);
+    /**
+     * @private Effective direction of this tab group, tracking both the global
+     * direction and any `[dir]` scope above the host. Drives indicator
+     * re-measurement.
+     */
+    _direction = this._rtlService.elementDirection(inject((ElementRef)));
+    /** @private Destroy reference used to tear down the resize observer. */
+    _destroyRef = inject(DestroyRef);
+    /**
+     * @private Router used for routed-mode active detection and navigation.
+     * `null` when `RouterModule`/`provideRouter` is not present, keeping non-routed
+     * tab groups fully functional without a router.
+     */
+    _router = inject(Router, { optional: true });
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_TABS_I18N);
+    /** @private Native ResizeObserver watching the tab-list header for overflow recalculation. */
+    _resizeObserver = null;
+    /**
+     * @private Trailing debounce timer for the ResizeObserver. Coalesces the burst
+     * of resize callbacks fired during a drag into a single recalculation so tabs
+     * do not flip between the row and the overflow menu on every frame.
+     */
+    _resizeDebounceTimer = null;
+    /**
+     * @private Cache of each tab's natural (fully-rendered) header width, keyed by
+     * tab value. Populated the first time all tabs are rendered and reused on every
+     * subsequent recalculation so we never have to briefly expand the DOM to all
+     * tabs to re-measure — which is what caused the "dizzy" flicker feedback loop.
+     */
+    _tabWidths = new Map();
+    /** @private Measured width of the "More (N)" overflow trigger (falls back to 100). */
+    _moreButtonWidth = 0;
+    /** @private Trailing debounce (ms) applied to ResizeObserver-driven recalculation. */
+    static _RESIZE_DEBOUNCE_MS = 64;
+    /**
+     * @private Extra px of clearance an overflowed tab must gain before it is
+     * allowed back into the visible row. Provides hysteresis so a tab does not
+     * oscillate in/out at boundary widths.
+     */
+    static _HYSTERESIS_PX = 24;
+    /** @private True when popup closed because an item was selected (skip focus restoration). */
+    _popupClosedBySelection = false;
+    orientation = model('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    activeTab = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual style of the tab header. `'underline'` (default) shows a sliding
+     * indicator bar; `'boxed'` fills the active tab with a rounded surface and
+     * hides the indicator. Orthogonal to `orientation` — composes with both
+     * horizontal and vertical layouts.
+     */
+    appearance = input('underline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal True when at least one registered tab carries a `[routerLink]`
+     * (its `urlTree()` is non-null). In routed mode the active tab is derived from
+     * the URL via `Router.isActive` rather than from click/keyboard selection, and
+     * the auto-select-first + aria-selection paths defer to the route.
+     */
+    _isRouted = computed(() => this._tabsService.tabs().some((t) => t.urlTree() !== null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isRouted" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Bridges the public `activeTab` model to the aria `ngTabList`
+     * `selectedTab` model input (`string | undefined`). An empty `activeTab`
+     * maps to `undefined` (no tab selected) so aria does not try to match a tab
+     * whose value is the empty string.
+     */
+    selectedTab = computed(() => this.activeTab() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    /** @internal Tracks which overflow item has tabindex=0. */
+    overflowFocusedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowFocusedIndex" }] : /* istanbul ignore next */ []));
+    tabListRef = viewChild('tabListRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []));
+    indicatorRef = viewChild('indicatorRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorRef" }] : /* istanbul ignore next */ []));
+    morePopupRef = viewChild('morePopup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "morePopupRef" }] : /* istanbul ignore next */ []));
+    tabItems = viewChildren(MlvTabItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The "More (N)" overflow trigger button, present only while overflow
+     * is active. An own-template element, so a signal view query replaces the
+     * former `querySelector('.mlv-tab-group__more-trigger')` used when measuring
+     * the trigger's width during overflow layout.
+     */
+    _moreTriggerRef = viewChild('moreTrigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_moreTriggerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The overflow popup's focusable menu-item elements, in DOM order.
+     * They are declared in this component's own template (inside `mlvPopupContent`),
+     * so a signal view query resolves them even though the popup renders in a
+     * detached overlay — replacing a `querySelectorAll('[data-overflow-item-index]')`
+     * for the Arrow-key navigation inside the overflow menu.
+     */
+    _overflowItemRefs = viewChildren('overflowItem', { ...(ngDevMode ? { debugName: "_overflowItemRefs" } : /* istanbul ignore next */ {}), read: ElementRef });
+    visibleTabs = computed(() => this._tabsService.visibleTabs(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    overflowTabs = computed(() => this._tabsService.overflowTabs(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowTabs" }] : /* istanbul ignore next */ []));
+    activeContentTemplate = computed(() => {
+        const value = this.activeTab();
+        const tabs = this._tabsService.tabs();
+        const activeTabComp = tabs.find((t) => t.value() === value);
+        return activeTabComp?.contentTemplate()?.templateRef ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeContentTemplate" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Auto-select first tab if none is set. Suppressed in routed mode where the
+        // URL owns the active tab (see `_syncActiveFromRoute`).
+        effect(() => {
+            if (this._isRouted())
+                return;
+            const tabs = this._tabsService.tabs();
+            const active = this.activeTab();
+            if (tabs.length > 0 &&
+                (!active || !tabs.some((t) => t.value() === active))) {
+                this.activeTab.set(tabs[0].value());
+            }
+        });
+        // ─── Routed mode ─────────────────────────────────────────────────────────
+        // When any child <mlv-tab> carries a [routerLink], derive `activeTab` from
+        // the current URL instead of click/keyboard selection. The routerLink is a
+        // URL carrier on the display:none def node; because the header tab is
+        // rendered separately, routerLinkActive cannot style it, so active state is
+        // owned here via Router.isActive. Intentional, not a workaround.
+        const router = this._router;
+        if (router) {
+            router.events
+                .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed())
+                .subscribe(() => this._syncActiveFromRoute());
+            // The router may already be settled (no further NavigationEnd will fire),
+            // so run an initial sync once routed tabs register. Only `_isRouted()` /
+            // `tabs()` are tracked; the set itself is untracked to avoid a feedback
+            // loop through `activeTab`.
+            effect(() => {
+                if (!this._isRouted())
+                    return;
+                this._tabsService.tabs();
+                untracked(() => this._syncActiveFromRoute());
+            });
+        }
+        // Pin the active tab into the visible row. When overflow is active this
+        // swaps the active tab into the last visible slot (identical to picking it
+        // from the overflow popup) so the active tab ALWAYS keeps a rendered
+        // `ngTab`. That is essential: if the active tab's `ngTab` is torn down (e.g.
+        // a resize repartition pushes it into overflow), `@angular/aria` desyncs its
+        // `selectedTab` model, marks the active `ngTabPanel` inert and the deferred
+        // `ngTabContent` destroys the panel body permanently. Keeping the active
+        // tab visible prevents that teardown, so the active content survives any
+        // resize/repartition.
+        effect(() => {
+            const active = this.activeTab();
+            this._tabsService.forcedVisibleValue.set(active || null);
+        });
+        // Update indicator position when active tab or visible tabs change
+        effect(() => {
+            this.activeTab();
+            this.visibleTabs();
+            this.tabItems();
+            // Mirroring the header moves every tab without resizing it, so neither
+            // the ResizeObserver nor the item queries fire. The direction is its own
+            // dependency, scoped to this host so a `[dir]` on any ancestor counts —
+            // not just a document-level flip.
+            this._direction();
+            this._updateIndicator();
+        });
+    }
+    ngAfterViewInit() {
+        this._setupResizeObserver();
+        this._destroyRef.onDestroy(() => this._teardownResizeObserver());
+    }
+    // ─── Public API ──────────────────────────────────────────────────────────
+    selectTab(value) {
+        const tab = this._tabsService.tabs().find((t) => t.value() === value);
+        if (tab?.disabled())
+            return;
+        // Routed tab: navigation is the source of truth. Trigger it and let the
+        // resulting NavigationEnd update `activeTab` via `_syncActiveFromRoute` — do
+        // NOT set `activeTab` directly (that would desync the header from the URL).
+        const urlTree = tab?.urlTree() ?? null;
+        if (urlTree && this._router) {
+            this._router.navigateByUrl(urlTree);
+            return;
+        }
+        this.activeTab.set(value);
+    }
+    /**
+     * @internal Bridges the aria `ngTabList` `selectedTab` output back to the
+     * public `activeTab` model. Ignores `undefined` (aria emits it transiently
+     * before the default selection settles) so the auto-select effect keeps
+     * ownership of the initial value.
+     */
+    _onSelectedTabChange(value) {
+        // In routed mode the URL owns `activeTab`; ignore aria's optimistic
+        // selection so the header cannot desync from the route (navigation,
+        // triggered via `selectTab`, drives `activeTab` through NavigationEnd).
+        if (this._isRouted())
+            return;
+        if (value !== undefined && value !== this.activeTab()) {
+            this.activeTab.set(value);
+        }
+    }
+    selectOverflowTab(value) {
+        this._popupClosedBySelection = true;
+        this._tabsService.forceVisible(value);
+        this.selectTab(value);
+        // Close popup then focus the newly promoted visible tab
+        this.morePopupRef()?.opened.set(false);
+        requestAnimationFrame(() => {
+            const items = this.tabItems();
+            const visibleTabs = this.visibleTabs();
+            const idx = visibleTabs.findIndex((t) => t.value() === value);
+            if (idx >= 0 && items[idx]) {
+                items[idx].focus();
+            }
+        });
+    }
+    isActive(value) {
+        return this.activeTab() === value;
+    }
+    // ─── Routed mode helpers ─────────────────────────────────────────────────
+    /**
+     * @private Sets `activeTab` to the first tab whose routerLink target is active
+     * for the current URL (per its `linkActiveOptions`). No-op when not routed or
+     * when no tab matches (the route stays the source of truth).
+     */
+    _syncActiveFromRoute() {
+        if (!this._isRouted())
+            return;
+        const match = this._tabsService
+            .tabs()
+            .find((t) => this._isTabActiveByRoute(t));
+        if (match && match.value() !== this.activeTab()) {
+            this.activeTab.set(match.value());
+        }
+    }
+    /**
+     * @private Whether a tab's routerLink `urlTree` is active for the current URL,
+     * honouring its `linkActiveOptions`.
+     */
+    _isTabActiveByRoute(tab) {
+        const router = this._router;
+        const urlTree = tab.urlTree();
+        if (!router || !urlTree)
+            return false;
+        const opts = tab.linkActiveOptions();
+        // `Router.isActive` reads an object argument as raw `IsActiveMatchOptions`
+        // and would silently ignore an `{ exact }` key, so map the RouterLinkActive
+        // `{ exact }` shorthand through the boolean overload (matching Angular's own
+        // RouterLinkActive), and pass a full `IsActiveMatchOptions` straight through.
+        return this._isFullMatchOptions(opts)
+            ? router.isActive(urlTree, opts)
+            : router.isActive(urlTree, opts.exact);
+    }
+    /**
+     * @private Type guard distinguishing a full `IsActiveMatchOptions` object from
+     * the `{ exact: boolean }` shorthand (mirrors Angular's internal check).
+     */
+    _isFullMatchOptions(opts) {
+        const o = opts;
+        return !!(o.paths || o.matrixParams || o.queryParams || o.fragment);
+    }
+    // ─── Overflow popup handling ─────────────────────────────────────────────
+    /** Opens the overflow popup and focuses the first overflow item after render. */
+    openOverflowPopup() {
+        this.overflowFocusedIndex.set(0);
+        this.morePopupRef()?.opened.set(true);
+    }
+    /**
+     * Called when the overflow popup finishes opening.
+     * Focuses the first (or active) overflow item.
+     */
+    onMorePopupAfterOpened() {
+        // Active overflow tab gets initial focus, otherwise first item
+        const overflowTabs = this.overflowTabs();
+        const activeIdx = overflowTabs.findIndex((t) => this.isActive(t.value()));
+        const targetIdx = activeIdx >= 0 ? activeIdx : 0;
+        this.overflowFocusedIndex.set(targetIdx);
+        this._overflowItemRefs()[targetIdx]?.nativeElement.focus();
+    }
+    /**
+     * Called when the overflow popup finishes closing.
+     * Returns focus to the active visible tab unless the popup was closed by
+     * selecting an item (focus goes to the promoted tab instead).
+     */
+    onMorePopupAfterClosed() {
+        if (this._popupClosedBySelection) {
+            this._popupClosedBySelection = false;
+            return;
+        }
+        const items = this.tabItems();
+        const activeIdx = this.visibleTabs().findIndex((t) => this.isActive(t.value()));
+        items[activeIdx >= 0 ? activeIdx : 0]?.focus();
+    }
+    /**
+     * Keydown handler on the overflow list wrapper inside the popup.
+     * Up/Down arrows navigate between items; Escape closes the popup.
+     */
+    onOverflowKeydown(event) {
+        const items = this._overflowItemRefs().map((ref) => ref.nativeElement);
+        const count = items.length;
+        if (count === 0)
+            return;
+        const key = this._rtlService.normalizeArrowKey(event);
+        if (key === DOWN_ARROW) {
+            event.preventDefault();
+            this.overflowFocusedIndex.update((i) => Math.min(i + 1, count - 1));
+            items[this.overflowFocusedIndex()]?.focus();
+        }
+        else if (key === UP_ARROW) {
+            event.preventDefault();
+            this.overflowFocusedIndex.update((i) => Math.max(i - 1, 0));
+            items[this.overflowFocusedIndex()]?.focus();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.morePopupRef()?.opened.set(false);
+            // afterClosed will restore focus to last focused visible tab
+        }
+    }
+    // ─── Private helpers ─────────────────────────────────────────────────────
+    /** @private Repositions the active-tab indicator bar via CSS custom properties. */
+    _updateIndicator() {
+        queueMicrotask(() => {
+            const items = this.tabItems();
+            const indicatorEl = this.indicatorRef()?.nativeElement;
+            if (!indicatorEl)
+                return;
+            const activeItem = items.find((_, i) => this.visibleTabs()[i] && this.isActive(this.visibleTabs()[i].value()));
+            if (!activeItem) {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-width', '0');
+                indicatorEl.style.setProperty('--mlv-tab-indicator-height', '0');
+                return;
+            }
+            const el = activeItem.elementRef.nativeElement;
+            if (this.orientation() === 'horizontal') {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-left', `${el.offsetLeft}px`);
+                indicatorEl.style.setProperty('--mlv-tab-indicator-width', `${el.offsetWidth}px`);
+            }
+            else {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-top', `${el.offsetTop}px`);
+                indicatorEl.style.setProperty('--mlv-tab-indicator-height', `${el.offsetHeight}px`);
+            }
+        });
+    }
+    /** @private Attaches a ResizeObserver to the header to recalculate overflow on width changes. */
+    _setupResizeObserver() {
+        if (this.orientation() === 'vertical')
+            return;
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Debounce (trailing): a drag fires the observer many times per second.
+        // Coalescing them into one recalculation after the width settles is the
+        // first line of defence against the flickering "dizzy" repartition.
+        this._resizeObserver = new ResizeObserver(() => {
+            if (this._resizeDebounceTimer !== null) {
+                clearTimeout(this._resizeDebounceTimer);
+            }
+            this._resizeDebounceTimer = setTimeout(() => {
+                this._resizeDebounceTimer = null;
+                this._recalculateOverflow();
+            }, MlvTabGroup._RESIZE_DEBOUNCE_MS);
+        });
+        this._resizeObserver.observe(headerEl);
+    }
+    /** @private Disconnects and clears the header ResizeObserver and its debounce timer. */
+    _teardownResizeObserver() {
+        if (this._resizeDebounceTimer !== null) {
+            clearTimeout(this._resizeDebounceTimer);
+            this._resizeDebounceTimer = null;
+        }
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+    }
+    /**
+     * @private Updates the visible/overflow split for the current header width.
+     *
+     * Unlike the previous implementation it does NOT reset the rendered set to
+     * "show all" on every call. Tab widths are cached (keyed by value) the first
+     * time every tab is rendered; afterwards the split is computed purely from the
+     * cache and the container width. That removes the measure→mutate→re-measure
+     * feedback loop (moving a tab to overflow no longer changes what we measure),
+     * which — together with the ResizeObserver debounce and the hysteresis in
+     * {@link _computeFittingCount} — kills the flickering repartition.
+     */
+    _recalculateOverflow() {
+        if (this.orientation() === 'vertical') {
+            this._tabsService.maxVisibleCount.set(-1);
+            return;
+        }
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        // Refresh the cache from whatever is currently rendered (no DOM mutation).
+        this._captureRenderedWidths();
+        const allTabs = this._tabsService.tabs();
+        const missingWidth = allTabs.some((t) => !this._tabWidths.has(t.value()));
+        if (missingWidth) {
+            // Cold cache (first run) or new tabs added: render every tab once so we
+            // can capture the missing widths, then apply. This is the ONLY branch
+            // that expands the DOM, and only runs until the cache is warm — so
+            // steady-state resizes never flash the full tab set.
+            this._tabsService.maxVisibleCount.set(-1);
+            requestAnimationFrame(() => {
+                this._captureRenderedWidths();
+                this._applyOverflowFit();
+            });
+            return;
+        }
+        this._applyOverflowFit();
+    }
+    /**
+     * @private Captures the natural widths of the currently-rendered tab items
+     * (and the "More" trigger) into the width cache, keyed by tab value. Zero
+     * widths (detached / not laid out) are ignored so a transient render never
+     * poisons the cache.
+     */
+    _captureRenderedWidths() {
+        const items = this.tabItems();
+        const visible = this._tabsService.visibleTabs();
+        items.forEach((item, i) => {
+            const value = visible[i]?.value();
+            const width = item.elementRef.nativeElement.offsetWidth;
+            if (value && width > 0) {
+                this._tabWidths.set(value, width);
+            }
+        });
+        const moreEl = this._moreTriggerRef()?.nativeElement;
+        if (moreEl && moreEl.offsetWidth > 0) {
+            this._moreButtonWidth = moreEl.offsetWidth;
+        }
+    }
+    /**
+     * @private Applies the cached-width overflow computation to the service and
+     * repositions the indicator.
+     */
+    _applyOverflowFit() {
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        const allTabs = this._tabsService.tabs();
+        const widths = allTabs.map((t) => this._tabWidths.get(t.value()) ?? 0);
+        const fittingCount = this._computeFittingCount(widths, headerEl.clientWidth, this._moreButtonWidth || 100, this._tabsService.maxVisibleCount());
+        this._tabsService.maxVisibleCount.set(fittingCount);
+        this._updateIndicator();
+    }
+    /**
+     * @private Pure overflow fit calculation. Returns how many leading tabs fit in
+     * `containerWidth`, or `-1` when every tab fits with no "More" button.
+     *
+     * Hysteresis: a tab that is currently in the overflow region
+     * (`i >= currentMax`) must clear the boundary by an extra
+     * {@link _HYSTERESIS_PX} before it is allowed back into the visible row. A
+     * currently-visible tab leaves as soon as it no longer fits. This asymmetric
+     * threshold means the two states around a boundary width can never both be
+     * satisfied, so the split cannot oscillate between adjacent widths.
+     *
+     * @param widths Natural width of each tab, in DOM order.
+     * @param containerWidth Available header content width.
+     * @param moreButtonWidth Width reserved for the "More (N)" trigger.
+     * @param currentMax The current `maxVisibleCount` (`-1` = all visible).
+     */
+    _computeFittingCount(widths, containerWidth, moreButtonWidth, currentMax) {
+        const total = widths.reduce((sum, w) => sum + w, 0);
+        // Everything fits without needing a "More" button.
+        if (total <= containerWidth)
+            return -1;
+        let accumulated = 0;
+        let count = 0;
+        for (let i = 0; i < widths.length; i++) {
+            const wasOverflowed = currentMax >= 0 && i >= currentMax;
+            const margin = wasOverflowed ? MlvTabGroup._HYSTERESIS_PX : 0;
+            if (accumulated + widths[i] + moreButtonWidth + margin <=
+                containerWidth) {
+                accumulated += widths[i];
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        return count;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTabGroup, isStandalone: true, selector: "mlv-tab-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orientation: "orientationChange", activeTab: "activeTabChange" }, host: { properties: { "class.mlv-tab-group--horizontal": "orientation() === \"horizontal\"", "class.mlv-tab-group--vertical": "orientation() === \"vertical\"", "class.mlv-tab-group--appearance-boxed": "appearance() === 'boxed'" }, classAttribute: "mlv-tab-group" }, providers: [
+            MlvTabsService,
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'tab-group' },
+            {
+                provide: TAB_GROUP,
+                useExisting: MlvTabGroup,
+            },
+        ], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabListRef"], descendants: true, isSignal: true }, { propertyName: "indicatorRef", first: true, predicate: ["indicatorRef"], descendants: true, isSignal: true }, { propertyName: "morePopupRef", first: true, predicate: ["morePopup"], descendants: true, isSignal: true }, { propertyName: "tabItems", predicate: MlvTabItem, descendants: true, isSignal: true }, { propertyName: "_moreTriggerRef", first: true, predicate: ["moreTrigger"], descendants: true, isSignal: true }, { propertyName: "_overflowItemRefs", predicate: ["overflowItem"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.Tabs }, { directive: i2.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<div\n  class=\"mlv-tab-group__header\"\n  ngTabList\n  [orientation]=\"orientation()\"\n  [wrap]=\"false\"\n  [softDisabled]=\"false\"\n  selectionMode=\"follow\"\n  [selectedTab]=\"selectedTab()\"\n  (selectedTabChange)=\"_onSelectedTabChange($event)\"\n  #tabListRef\n>\n  @for (tab of visibleTabs(); track tab.value(); let i = $index) {\n  <mlv-tab-item\n    ngTab\n    [value]=\"tab.value()\"\n    [active]=\"isActive(tab.value())\"\n    [disabled]=\"tab.disabled()\"\n    (activate)=\"selectTab(tab.value())\"\n  >\n    @if (tab.defTemplate(); as def) {\n    <!--\n      The label is rendered directly inside the roving `role=\"tab\"`\n      (<mlv-tab-item>, ngTab). Routed tabs do NOT wrap it in an <a href>: an\n      anchor is inherently interactive, and nesting it inside `role=\"tab\"` fails\n      the axe `nested-interactive` rule (a11y is a hard requirement). Navigation\n      is driven by the tab-item's `activate` output \u2192 selectTab() \u2192\n      router.navigateByUrl() for both click and keyboard, and the URL is fully\n      deep-linkable; the only thing lost versus a nested anchor is native\n      middle-click / open-in-new-tab, an accepted trade-off.\n    -->\n    <ng-template\n      [ngTemplateOutlet]=\"def.templateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: false }\"\n    />\n    }\n  </mlv-tab-item>\n  } @if (overflowTabs().length > 0) {\n  <button\n    type=\"button\"\n    #moreTrigger\n    class=\"mlv-tab-group__more-trigger\"\n    [mlvPopupTrigger]=\"morePopup\"\n    triggerOn=\"click\"\n    [ariaHasPopup]=\"'menu'\"\n    [attr.aria-expanded]=\"morePopupRef()?.opened() ?? false\"\n    [attr.aria-label]=\"_i18n().moreTabs\"\n  >\n    More ({{ overflowTabs().length }})\n  </button>\n  <mlv-popup\n    #morePopup\n    [hasShadow]=\"true\"\n    (afterOpened)=\"onMorePopupAfterOpened()\"\n    (afterClosed)=\"onMorePopupAfterClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div tabindex=\"-1\" (keydown)=\"onOverflowKeydown($event)\">\n        <mlv-list listRole=\"menu\" appearance=\"menu\">\n          @for (tab of overflowTabs(); track tab.value(); let i = $index) {\n          <mlv-list-item\n            #overflowItem\n            itemRole=\"menuitemradio\"\n            [class.mlv-list-item--active]=\"isActive(tab.value())\"\n            [attr.tabindex]=\"overflowFocusedIndex() === i ? 0 : -1\"\n            [attr.data-overflow-item-index]=\"i\"\n            [attr.aria-disabled]=\"tab.disabled() || null\"\n            [attr.aria-checked]=\"isActive(tab.value())\"\n            (click)=\"selectOverflowTab(tab.value())\"\n            (keydown.enter)=\"selectOverflowTab(tab.value()); $event.stopPropagation()\"\n            (keydown.space)=\"selectOverflowTab(tab.value()); $event.stopPropagation(); $event.preventDefault()\"\n          >\n            @if (tab.defTemplate(); as def) {\n            <ng-template\n              [ngTemplateOutlet]=\"def.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: true }\"\n            />\n            }\n          </mlv-list-item>\n          }\n        </mlv-list>\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n\n  <div class=\"mlv-tab-group__indicator\" #indicatorRef></div>\n</div>\n\n<div class=\"mlv-tab-group__body\">\n  @if (activeContentTemplate(); as tmpl) {\n  <mlv-tab-content ngTabPanel [value]=\"activeTab()\">\n    <ng-template ngTabContent>\n      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n    </ng-template>\n  </mlv-tab-content>\n  }\n  <!--\n    Inert stub panels for the visible-but-inactive tabs. Every `ngTab` must\n    resolve to a corresponding `ngTabPanel` (aria wires `aria-controls` and\n    validates the pairing). The active tab renders the real `mlv-tab-content`\n    above; the remaining visible tabs get an empty, `ngTabContent`-carrying\n    panel so their `aria-controls` resolves without rendering duplicate content.\n  -->\n  @for (tab of visibleTabs(); track tab.value()) { @if (!isActive(tab.value()))\n  {\n  <div class=\"mlv-tab-group__panel-stub\" ngTabPanel [value]=\"tab.value()\">\n    <ng-template ngTabContent></ng-template>\n  </div>\n  } }\n</div>\n", styles: ["@layer mlv.components{.mlv-tab-group{display:flex;flex-direction:column;min-width:0}.mlv-tab-group--vertical{flex-direction:row}.mlv-tab-group__header{display:flex;position:relative;overflow:hidden;min-width:0}.mlv-tab-group--horizontal .mlv-tab-group__header{flex-direction:row;align-items:stretch;box-shadow:inset 0 -.0625rem 0 var(--mlv-border-subtle)}.mlv-tab-group--vertical .mlv-tab-group__header{flex-direction:column;align-items:stretch;box-shadow:inset -.0625rem 0 0 var(--mlv-border-subtle)}.mlv-tab-group__indicator{position:absolute;background:var(--mlv-background-accent-1);transition:left var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),top var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),width var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),height var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong)}.mlv-tab-group--horizontal .mlv-tab-group__indicator{bottom:0;height:.125rem;left:var(--mlv-tab-indicator-left, 0);width:var(--mlv-tab-indicator-width, 0)}.mlv-tab-group--vertical .mlv-tab-group__indicator{inset-inline-end:0;width:.125rem;--mlv-tab-indicator-left: auto;top:var(--mlv-tab-indicator-top, 0);height:var(--mlv-tab-indicator-height, 0)}.mlv-tab-group__more-trigger{display:inline-flex;align-items:center;gap:.25rem;padding:.75rem 1rem;cursor:pointer;border:none;background:none;color:var(--mlv-palette-neutral-400);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal)}.mlv-tab-group__more-trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-s)}.mlv-tab-group__body{flex:1;min-width:0;min-height:0}.mlv-tab-group__panel-stub{display:none}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{content:\"\";position:absolute;background:var(--mlv-border-normal)}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{left:0;right:0;bottom:0;height:.125rem}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{top:0;bottom:0;right:0;width:.125rem}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header{box-shadow:none;width:fit-content;max-width:100%;background:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-xl);padding:.1875rem;gap:.125rem}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header{height:fit-content}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-background-raised);border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs));box-shadow:var(--mlv-shadow-raised);z-index:0}.mlv-tab-group--appearance-boxed.mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__indicator{top:.1875rem;bottom:.1875rem;height:auto}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__indicator{left:.1875rem;right:.1875rem;width:auto}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs))}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled){background:var(--mlv-background-neutral-1-hover)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item.mlv-tab-item--active{color:var(--mlv-text-primary)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs))}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover{background:var(--mlv-background-neutral-1-hover)}[mlvTheme=dark] .mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-palette-neutral-700)}@media(prefers-reduced-motion:reduce){.mlv-tab-group,.mlv-tab-group *,.mlv-tab-group:before,.mlv-tab-group:after,[class^=mlv-tab-group__],[class*=\" mlv-tab-group__\"],[class^=mlv-tab-group--],[class*=\" mlv-tab-group--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabList, selector: "[ngTabList]", inputs: ["orientation", "wrap", "softDisabled", "focusMode", "selectionMode", "selectedTab", "disabled"], outputs: ["selectedTabChange"], exportAs: ["ngTabList"] }, { kind: "directive", type: Tab, selector: "[ngTab]", inputs: ["id", "disabled", "value"], exportAs: ["ngTab"] }, { kind: "directive", type: TabPanel, selector: "[ngTabPanel]", inputs: ["id", "value"], exportAs: ["ngTabPanel"] }, { kind: "directive", type: TabContent, selector: "ng-template[ngTabContent]", exportAs: ["ngTabContent"] }, { kind: "component", type: MlvTabItem, selector: "mlv-tab-item", inputs: ["active", "disabled"], outputs: ["activate"] }, { kind: "component", type: MlvTabContent, selector: "mlv-tab-content" }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvList, selector: "mlv-list", inputs: ["listRole", "variant", "appearance"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tab-group', imports: [
+                        NgTemplateOutlet,
+                        TabList,
+                        Tab,
+                        TabPanel,
+                        TabContent,
+                        MlvTabItem,
+                        MlvTabContent,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvList,
+                        MlvListItem,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        Tabs,
+                        { directive: MlvDensityDirective, inputs: ['mlvDensity: mlvDensity'] },
+                    ], providers: [
+                        MlvTabsService,
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'tab-group' },
+                        {
+                            provide: TAB_GROUP,
+                            useExisting: MlvTabGroup,
+                        },
+                    ], host: {
+                        class: 'mlv-tab-group',
+                        '[class.mlv-tab-group--horizontal]': 'orientation() === "horizontal"',
+                        '[class.mlv-tab-group--vertical]': 'orientation() === "vertical"',
+                        '[class.mlv-tab-group--appearance-boxed]': "appearance() === 'boxed'",
+                    }, template: "<div\n  class=\"mlv-tab-group__header\"\n  ngTabList\n  [orientation]=\"orientation()\"\n  [wrap]=\"false\"\n  [softDisabled]=\"false\"\n  selectionMode=\"follow\"\n  [selectedTab]=\"selectedTab()\"\n  (selectedTabChange)=\"_onSelectedTabChange($event)\"\n  #tabListRef\n>\n  @for (tab of visibleTabs(); track tab.value(); let i = $index) {\n  <mlv-tab-item\n    ngTab\n    [value]=\"tab.value()\"\n    [active]=\"isActive(tab.value())\"\n    [disabled]=\"tab.disabled()\"\n    (activate)=\"selectTab(tab.value())\"\n  >\n    @if (tab.defTemplate(); as def) {\n    <!--\n      The label is rendered directly inside the roving `role=\"tab\"`\n      (<mlv-tab-item>, ngTab). Routed tabs do NOT wrap it in an <a href>: an\n      anchor is inherently interactive, and nesting it inside `role=\"tab\"` fails\n      the axe `nested-interactive` rule (a11y is a hard requirement). Navigation\n      is driven by the tab-item's `activate` output \u2192 selectTab() \u2192\n      router.navigateByUrl() for both click and keyboard, and the URL is fully\n      deep-linkable; the only thing lost versus a nested anchor is native\n      middle-click / open-in-new-tab, an accepted trade-off.\n    -->\n    <ng-template\n      [ngTemplateOutlet]=\"def.templateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: false }\"\n    />\n    }\n  </mlv-tab-item>\n  } @if (overflowTabs().length > 0) {\n  <button\n    type=\"button\"\n    #moreTrigger\n    class=\"mlv-tab-group__more-trigger\"\n    [mlvPopupTrigger]=\"morePopup\"\n    triggerOn=\"click\"\n    [ariaHasPopup]=\"'menu'\"\n    [attr.aria-expanded]=\"morePopupRef()?.opened() ?? false\"\n    [attr.aria-label]=\"_i18n().moreTabs\"\n  >\n    More ({{ overflowTabs().length }})\n  </button>\n  <mlv-popup\n    #morePopup\n    [hasShadow]=\"true\"\n    (afterOpened)=\"onMorePopupAfterOpened()\"\n    (afterClosed)=\"onMorePopupAfterClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div tabindex=\"-1\" (keydown)=\"onOverflowKeydown($event)\">\n        <mlv-list listRole=\"menu\" appearance=\"menu\">\n          @for (tab of overflowTabs(); track tab.value(); let i = $index) {\n          <mlv-list-item\n            #overflowItem\n            itemRole=\"menuitemradio\"\n            [class.mlv-list-item--active]=\"isActive(tab.value())\"\n            [attr.tabindex]=\"overflowFocusedIndex() === i ? 0 : -1\"\n            [attr.data-overflow-item-index]=\"i\"\n            [attr.aria-disabled]=\"tab.disabled() || null\"\n            [attr.aria-checked]=\"isActive(tab.value())\"\n            (click)=\"selectOverflowTab(tab.value())\"\n            (keydown.enter)=\"selectOverflowTab(tab.value()); $event.stopPropagation()\"\n            (keydown.space)=\"selectOverflowTab(tab.value()); $event.stopPropagation(); $event.preventDefault()\"\n          >\n            @if (tab.defTemplate(); as def) {\n            <ng-template\n              [ngTemplateOutlet]=\"def.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: true }\"\n            />\n            }\n          </mlv-list-item>\n          }\n        </mlv-list>\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n\n  <div class=\"mlv-tab-group__indicator\" #indicatorRef></div>\n</div>\n\n<div class=\"mlv-tab-group__body\">\n  @if (activeContentTemplate(); as tmpl) {\n  <mlv-tab-content ngTabPanel [value]=\"activeTab()\">\n    <ng-template ngTabContent>\n      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n    </ng-template>\n  </mlv-tab-content>\n  }\n  <!--\n    Inert stub panels for the visible-but-inactive tabs. Every `ngTab` must\n    resolve to a corresponding `ngTabPanel` (aria wires `aria-controls` and\n    validates the pairing). The active tab renders the real `mlv-tab-content`\n    above; the remaining visible tabs get an empty, `ngTabContent`-carrying\n    panel so their `aria-controls` resolves without rendering duplicate content.\n  -->\n  @for (tab of visibleTabs(); track tab.value()) { @if (!isActive(tab.value()))\n  {\n  <div class=\"mlv-tab-group__panel-stub\" ngTabPanel [value]=\"tab.value()\">\n    <ng-template ngTabContent></ng-template>\n  </div>\n  } }\n</div>\n", styles: ["@layer mlv.components{.mlv-tab-group{display:flex;flex-direction:column;min-width:0}.mlv-tab-group--vertical{flex-direction:row}.mlv-tab-group__header{display:flex;position:relative;overflow:hidden;min-width:0}.mlv-tab-group--horizontal .mlv-tab-group__header{flex-direction:row;align-items:stretch;box-shadow:inset 0 -.0625rem 0 var(--mlv-border-subtle)}.mlv-tab-group--vertical .mlv-tab-group__header{flex-direction:column;align-items:stretch;box-shadow:inset -.0625rem 0 0 var(--mlv-border-subtle)}.mlv-tab-group__indicator{position:absolute;background:var(--mlv-background-accent-1);transition:left var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),top var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),width var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong),height var(--mlv-tab-indicator-duration, var(--mlv-duration-normal)) var(--mlv-ease-in-out-strong)}.mlv-tab-group--horizontal .mlv-tab-group__indicator{bottom:0;height:.125rem;left:var(--mlv-tab-indicator-left, 0);width:var(--mlv-tab-indicator-width, 0)}.mlv-tab-group--vertical .mlv-tab-group__indicator{inset-inline-end:0;width:.125rem;--mlv-tab-indicator-left: auto;top:var(--mlv-tab-indicator-top, 0);height:var(--mlv-tab-indicator-height, 0)}.mlv-tab-group__more-trigger{display:inline-flex;align-items:center;gap:.25rem;padding:.75rem 1rem;cursor:pointer;border:none;background:none;color:var(--mlv-palette-neutral-400);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal)}.mlv-tab-group__more-trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-s)}.mlv-tab-group__body{flex:1;min-width:0;min-height:0}.mlv-tab-group__panel-stub{display:none}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{content:\"\";position:absolute;background:var(--mlv-border-normal)}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{left:0;right:0;bottom:0;height:.125rem}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{top:0;bottom:0;right:0;width:.125rem}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header{box-shadow:none;width:fit-content;max-width:100%;background:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-xl);padding:.1875rem;gap:.125rem}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header{height:fit-content}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-background-raised);border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs));box-shadow:var(--mlv-shadow-raised);z-index:0}.mlv-tab-group--appearance-boxed.mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__indicator{top:.1875rem;bottom:.1875rem;height:auto}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__indicator{left:.1875rem;right:.1875rem;width:auto}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs))}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled){background:var(--mlv-background-neutral-1-hover)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item.mlv-tab-item--active{color:var(--mlv-text-primary)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - var(--mlv-radius-xs))}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover{background:var(--mlv-background-neutral-1-hover)}[mlvTheme=dark] .mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-palette-neutral-700)}@media(prefers-reduced-motion:reduce){.mlv-tab-group,.mlv-tab-group *,.mlv-tab-group:before,.mlv-tab-group:after,[class^=mlv-tab-group__],[class*=\" mlv-tab-group__\"],[class^=mlv-tab-group--],[class*=\" mlv-tab-group--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }, { type: i0.Output, args: ["orientationChange"] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabListRef', { isSignal: true }] }], indicatorRef: [{ type: i0.ViewChild, args: ['indicatorRef', { isSignal: true }] }], morePopupRef: [{ type: i0.ViewChild, args: ['morePopup', { isSignal: true }] }], tabItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvTabItem), { isSignal: true }] }], _moreTriggerRef: [{ type: i0.ViewChild, args: ['moreTrigger', { isSignal: true }] }], _overflowItemRefs: [{ type: i0.ViewChildren, args: ['overflowItem', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+
+class MlvTabDef {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTabDef, isStandalone: true, selector: "[mlvTabDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTabDef]',
+                }]
+        }] });
+
+class MlvTabContentDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabContentDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTabContentDef, isStandalone: true, selector: "[mlvTabContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabContentDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTabContent]',
+                }]
+        }] });
+
+class MlvTab {
+    /** @private Scoped tabs service the tab registers/unregisters itself with. */
+    _tabsService = inject(MlvTabsService);
+    /** @private DestroyRef used to unregister the tab on destroy. */
+    _destroyRef = inject(DestroyRef);
+    /**
+     * @private Native `RouterLink` directive applied to this `<mlv-tab>` when the
+     * consumer sets `[routerLink]` (optional/self — `null` for non-routed tabs).
+     *
+     * The `routerLink` sits on the `display:none` `<mlv-tab>` def node purely as a
+     * URL *carrier*: the header tab is rendered separately by `mlv-tab-group`, so
+     * `routerLinkActive` cannot style it and active state is derived explicitly
+     * from `Router.isActive` (see `MlvTabGroup` routed-mode notes). This is
+     * intentional, not a workaround to be removed later.
+     */
+    _routerLink = inject(RouterLink, {
+        optional: true,
+        self: true,
+    });
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** When `true`, prevents the tab from being activated. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Match options controlling when this routed tab is treated as active, mirroring
+     * `RouterLinkActive.routerLinkActiveOptions`. Accepts the `{ exact: boolean }`
+     * shorthand or a full `IsActiveMatchOptions`. Defaults to `{ exact: false }`
+     * (subset match). Only consulted when a `[routerLink]` is present.
+     */
+    linkActiveOptions = input({
+        exact: false,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkActiveOptions" }] : /* istanbul ignore next */ []));
+    defTemplate = contentChild(MlvTabDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defTemplate" }] : /* istanbul ignore next */ []));
+    contentTemplate = contentChild(MlvTabContentDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * The `UrlTree` this tab links to, or `null` when no `[routerLink]` is applied.
+     * A non-null value on any tab switches the parent `mlv-tab-group` into routed
+     * mode, where the active tab is derived from the current URL.
+     */
+    urlTree() {
+        return this._routerLink?.urlTree ?? null;
+    }
+    ngOnInit() {
+        this._tabsService.register(this);
+        this._destroyRef.onDestroy(() => this._tabsService.unregister(this));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvTab, isStandalone: true, selector: "mlv-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "defTemplate", first: true, predicate: MlvTabDef, descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: MlvTabContentDef, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-tab',
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'display: none',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], defTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTabDef), { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTabContentDef), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvTab, MlvTabContent, MlvTabContentDef, MlvTabDef, MlvTabGroup, MlvTabItem, MlvTabsService, TAB_GROUP };
+//# sourceMappingURL=malva-ui-core-tabs.mjs.map