@mesgflow/ui-kit 0.6.0 → 0.7.0

package/fesm2022/mesgflow-ui-kit-tabs.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, signal, DestroyRef, afterNextRender, effect, Directive, viewChild, afterRenderEffect, Component, model, output } from '@angular/core';
+import { inject, ElementRef, input, computed, signal, DestroyRef, afterNextRender, effect, Directive, booleanAttribute, viewChild, contentChildren, afterRenderEffect, Component, forwardRef, contentChild, model, output } from '@angular/core';
 import * as i1 from '@angular/aria/tabs';
-import { TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from '@angular/aria/tabs';
-import { isRtl, scrollFromInlineStart, MF_TABS_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { TabList as TabList$1, Tab as Tab$1, Tabs as Tabs$1, TabPanel as TabPanel$1 } from '@angular/aria/tabs';
+import { isRtl, scrollFromInlineStart, transitionRecipe, focusRecipe, controlSize, MF_TABS_LABELS, cn, SlidingIndicator } from '@mesgflow/ui-kit/core';
 import { Button } from '@mesgflow/ui-kit/button';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { cva } from 'class-variance-authority';
@@ -106,131 +106,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 /**
- * Bkz. `tab-list.ts`. `underline`'da ray AYRI, kayan bir `<span>` (JS ile
- * konumlanır — bkz. `TabList.positionIndicator`); `card`'da ray HER sekmenin
- * kendi `box-shadow`'unda yaşar (bkz. `tabVariants` compound'u), çünkü
- * `card` görünümünde her sekme zaten kendi kenarlığıyla ayrık bir kutu —
- * kayan tek bir gösterge o kutuların üstünden "kayarak" geçmezdi, doğal
- * durmazdı. `relative` — kayan gösterge `absolute` konumlanıyor buna göre.
- *
- * `orientation` ekseni sol dikey grup rayı gerektiren ekranlar için eklendi —
- * `@angular/aria/tabs`'ın ARIA/klavye desteği zaten yön-agnostik
- * (`hostDirectives`'in `orientation` girdisi, bkz. `tab-list.ts`), eksik
- * olan sadece bu görsel katmandı.
+ * Sekme satırı (`#row`). `relative` — kayan göstergeler `absolute` konumlanır ve
+ * satır onların `offsetParent`'ı. `fill`: satır rayı tüm genişliğe yayılsın mı
+ * (underline'ın hairline'ı, `stretch`, `align` ≠ start).
  */
 const tabListVariants = cva('relative flex', {
     variants: {
         variant: {
-            underline: 'gap-1',
+            underline: 'gap-1 border-hairline',
+            pills: 'gap-1',
+            segmented: 'gap-0.5 rounded-lg bg-surface-alt p-0.5',
             card: 'gap-1.5',
         },
         orientation: {
             horizontal: 'min-w-max items-center',
             vertical: 'w-full flex-col items-stretch',
         },
+        align: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+        },
+        fill: { true: 'w-full', false: '' },
+    },
+    compoundVariants: [
+        { variant: 'underline', orientation: 'horizontal', class: 'border-b' },
+        { variant: 'underline', orientation: 'vertical', class: 'border-s' },
+    ],
+    defaultVariants: { variant: 'underline', orientation: 'horizontal', align: 'start', fill: false },
+});
+/**
+ * Seçili sekmeyi izleyen kayan öğe (`[mfSlidingIndicator]`). Motor yalnız ana
+ * ekseni (konum + genişlik/yükseklik) yazar; çapraz eksen buradan gelir.
+ * `card`'da kayan gösterge YOK — ayrık kutuların arasından kayması doğal durmaz.
+ */
+const tabIndicatorVariants = cva('', {
+    variants: {
+        variant: {
+            underline: 'rounded-full bg-accent-fill',
+            pills: 'rounded-md bg-primary-tint',
+            segmented: 'rounded-md bg-surface shadow-1',
+            card: 'hidden',
+        },
+        orientation: { horizontal: '', vertical: '' },
     },
+    compoundVariants: [
+        { variant: 'underline', orientation: 'horizontal', class: '-bottom-px h-0.5' },
+        { variant: 'underline', orientation: 'vertical', class: '-start-px w-0.5' },
+        { variant: 'pills', orientation: 'horizontal', class: 'inset-y-0' },
+        { variant: 'pills', orientation: 'vertical', class: 'inset-x-0' },
+        { variant: 'segmented', orientation: 'horizontal', class: 'inset-y-0.5' },
+        { variant: 'segmented', orientation: 'vertical', class: 'inset-x-0.5' },
+    ],
+    defaultVariants: { variant: 'underline', orientation: 'horizontal' },
+});
+/** İmleç altındaki sekmeyi izleyen yumuşak vurgu (yalnız underline/pills). */
+const tabHoverVariants = cva('rounded-md bg-state-hover', {
+    variants: {
+        variant: { underline: '', pills: '' },
+        orientation: { horizontal: '', vertical: '' },
+    },
+    compoundVariants: [
+        { variant: 'underline', orientation: 'horizontal', class: 'inset-y-1' },
+        { variant: 'underline', orientation: 'vertical', class: 'inset-x-1' },
+        { variant: 'pills', orientation: 'horizontal', class: 'inset-y-0' },
+        { variant: 'pills', orientation: 'vertical', class: 'inset-x-0' },
+    ],
     defaultVariants: { variant: 'underline', orientation: 'horizontal' },
 });
 /**
- * `selected`/`disabled` burada `aria-selected`/`aria-disabled` CSS
- * seçicileriyle DEĞİL, `Tab`'ın kendi `computed()`'ıyla (bkz. `tab.ts`)
- * okunan sinyal değerleriyle besleniyor — kod tabanındaki yerleşik desen
- * (Select'in `optionClasses`, Table'ın `rowClasses`) TS'te hesaplanan koşullu
- * class, CSS attribute-selector değil.
+ * Sekme (`button[mfTab]`, `a[mfTabLink]`, TabStrip). Seçili durum yalnız RENK
+ * değiştirir — `font-medium` her durumda, genişlik zıplaması olmaz. `ownHover`:
+ * satır hover vurgusunu kendisi çizmiyorsa sekme kendi hover zeminini çizer.
+ * `selected`/`disabled` CSS öznitelik seçicisiyle değil, sekmenin kendi
+ * sinyalleriyle besleniyor (Select `optionClasses`, Table `rowClasses` deseni).
+ *
+ * Odak halkası İÇERİDE (`-outline-offset-2`): sekmeler taşma kaydırıcısının
+ * (`overflow: auto`) içinde; dışa taşan halka kapsayıcı kenarında kırpılıyordu.
  */
-const tabVariants = cva('relative inline-flex shrink-0 cursor-pointer appearance-none items-center gap-1.5 whitespace-nowrap border-0 bg-transparent text-sm text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', {
+const tabVariants = cva('relative inline-flex shrink-0 cursor-pointer appearance-none items-center justify-center gap-1.5 whitespace-nowrap border-0 bg-transparent font-medium text-fg-muted no-underline active:scale-[0.99] ' +
+    transitionRecipe +
+    ' ' +
+    focusRecipe +
+    ' focus-visible:-outline-offset-2', {
     variants: {
         variant: {
-            underline: 'rounded-sm px-3 py-2',
-            card: 'rounded-sm border border-transparent px-3 py-1.5',
+            underline: 'rounded-md',
+            pills: 'rounded-md',
+            segmented: 'rounded-md',
+            card: 'rounded-sm border border-transparent',
+        },
+        size: {
+            sm: controlSize.sm,
+            md: controlSize.md,
+            lg: controlSize.lg,
         },
         orientation: {
             horizontal: '',
             vertical: 'w-full justify-start text-start',
         },
         selected: {
-            true: '',
-            false: 'hover:bg-surface-alt hover:text-fg',
+            true: 'text-fg',
+            false: 'hover:text-fg',
         },
         disabled: {
             true: 'pointer-events-none opacity-50 active:scale-100',
             false: '',
         },
+        stretch: { true: 'flex-1', false: '' },
+        ownHover: { true: '', false: '' },
     },
     compoundVariants: [
-        { variant: 'underline', selected: true, class: 'text-fg font-semibold' },
-        /*
-         * `card` — aktif sekme `bg-canvas` (içerik zeminiyle birleşir) + 2px dolu
-         * ray. Yatayda alt kenar, dikeyde ön (sol) kenar — dikey grup rayı bunu
-         * kullanıyor. Ray rengi `--mf-accent-fill` (mode-swapped: light 900 /
-         * dark 400) — diğer TÜM "ray" kullanımlarıyla (Sidebar aktif nav,
-         * Table seçili satır, ikisi de `border-s-accent-fill`) TUTARLI. `var()`
-         * `@theme inline`'ın `--color-accent-fill` katmanını DEĞİL doğrudan
-         * `--mf-*`'i hedefliyor — `box-shadow` arbitrary value'su bir utility
-         * DEĞİL, Tailwind'in "bu inline değişkeni emit et" taramasına
-         * güvenmek yerine kaynağa doğrudan bağlanmak daha sağlam.
-         */
+        { selected: false, ownHover: true, class: 'hover:bg-state-hover' },
+        { variant: 'pills', selected: true, class: 'text-primary-tint-fg' },
+        {
+            variant: 'card',
+            selected: true,
+            class: "border-border bg-canvas after:pointer-events-none after:absolute after:rounded-full after:bg-accent-fill after:content-['']",
+        },
         {
             variant: 'card',
             orientation: 'horizontal',
             selected: true,
-            class: 'border-border bg-canvas text-fg font-semibold shadow-[inset_0_-2px_0_0_var(--mf-accent-fill)]',
+            class: 'after:inset-x-0 after:bottom-0 after:h-0.5',
         },
         {
             variant: 'card',
             orientation: 'vertical',
             selected: true,
-            class: 'border-border bg-canvas text-fg font-semibold shadow-[inset_2px_0_0_0_var(--mf-accent-fill)]',
+            class: 'after:inset-y-0 after:start-0 after:w-0.5',
         },
     ],
     defaultVariants: {
         variant: 'underline',
+        size: 'md',
         orientation: 'horizontal',
         selected: false,
         disabled: false,
+        stretch: false,
+        ownHover: true,
     },
 });
+/** `<span mfTabCount>12</span>` — sekme içi sayaç rozeti; seçili sekmede tonlanır. */
+const tabCountVariants = cva('inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums ' +
+    transitionRecipe, {
+    variants: {
+        selected: {
+            true: 'bg-primary-tint text-primary-tint-fg',
+            false: 'bg-surface-alt text-fg-muted',
+        },
+        variant: { underline: '', pills: '', segmented: '', card: '' },
+    },
+    compoundVariants: [
+        // Hap zaten primary-tint — sayaç üstünde ayrışsın diye yüzey rengi.
+        { variant: 'pills', selected: true, class: 'bg-surface text-fg shadow-1' },
+        { variant: 'segmented', selected: true, class: 'bg-surface-alt text-fg' },
+    ],
+    defaultVariants: { selected: false, variant: 'underline' },
+});
 
 /**
- * `<mf-tab-list [(selectedTab)]="active" variant="underline">…</mf-tab-list>`
- * — `mf-tabs` içine konur, `mfTab` butonlarını sarar. ARIA/klavye
- * (Ok tuşları/Home/End) `@angular/aria/tabs`'ın `TabList` pattern'inden
- * `hostDirectives` ile geliyor (bkz. `tabs.ts` üstündeki not).
- *
- * İki premium detay burada yaşıyor:
- * 1. **Kayan ray göstergesi** (`underline` varyantı) — aktif sekme
- *    değişince `positionIndicator()` DOM'dan `[aria-selected="true"]`
- *    elemanın `offsetLeft`/`offsetWidth`'ini (yatayda) ya da `offsetTop`/
- *    `offsetHeight`'ını (dikeyde) ölçüp göstergeyi kaydırıyor (emsal:
- *    `table-pagination.ts`'in odak restorasyonundaki `afterRenderEffect` +
- *    `viewChild(ElementRef)` deseni). `ResizeObserver` yeniden boyutlanmada
- *    (font yüklenmesi, viewport) yeniden ölçer. `card` varyantında AYRI bir
- *    gösterge YOK — ray her sekmenin kendi `box-shadow`'unda yaşıyor
- *    (bkz. tabs.variants.ts).
- * 2. **Taşma yönetimi** — `mfTabScroller` (bkz. o dosya) kaydırma+kenar
- *    solma maskesi sağlıyor; ok butonları SADECE o yönde taşma varken
- *    render edilir. Aktif sekme değişince görünür alana kaydırılır.
+ * `<mf-tab-list [(selectedTab)]="active" variant="pills" size="sm">…</mf-tab-list>`
+ * — `mf-tabs` içine konur, `mfTab` düğmelerini sarar. ARIA/klavye (oklar,
+ * Home/End, Enter/Boşluk) `@angular/aria/tabs`'ın `TabList`'inden
+ * `hostDirectives` ile gelir; `orientation`/`selectedTab`/`selectionMode`…
+ * oradan iletilir (burada ikinci kez `input()` TANIMLANMAZ — NG2017).
  *
- * `tab-list.html`'deki sarmalayıcı `<div>`'in çapraz eksen hizalaması BİLEREK
- * yöne göre koşullu: dikeyde (`flex-col`) çapraz eksen GENİŞLİK olur, `items-
- * center` orada "çocukları raya GERME, kendi içerik genişliğine küçült" demek
- * — bu, genişliğin `mfTabScroller`/`#row`/butonlara hiç iletilmemesine ve
- * `truncate`'in (role-form.html'deki İngilizce grup adlarıyla canlı
- * doğrulandı) hiç devreye girmeden ham/elipsissiz kırpılmasına yol açan
- * GERÇEK bir bugdu. `items-stretch` çapraz ekseni doğru şekilde geriyor —
- * bunu tekrar `items-center`'a "sadeleştirme".
+ * Premium katman:
+ * - **Kayan gösterge** — `underline` çizgisi, `pills` hapı, `segmented` parçası
+ *   tek motorla (`[mfSlidingIndicator]`, core) yay eğrisiyle kayar. `card`'da
+ *   seçili çizgi her kutunun kendisinde (bkz. tabs.variants.ts).
+ * - **Hover izleme** — `hoverHighlight` (underline/pills): imlecin altındaki
+ *   sekmenin arkasında ikinci bir yumuşak vurgu kayar; dokunmatikte yok.
+ * - **Boyut** `sm | md | lg` — Button/Input ile aynı kontrol yüksekliği merdiveni.
+ * - **Yerleşim** — `stretch` (sekmeler eşit genişler), `align` (yatay hizalama);
+ *   `orientation="vertical"` olunca `mf-tabs` kendiliğinden yan yana yerleşir.
+ * - **Taşma** — `mfTabScroller` kaydırma + kenar maskesi; oklar yalnız taşma
+ *   varken çıkar, seçili sekme görünür alana kaydırılır.
+ * - Hiçbir sekme bağlı değilse ilk etkin sekme seçilir.
  *
- * `orientation` girdisi `@angular/aria`'nın `TabList` pattern'inden
- * `hostDirectives` ile geliyor (ARIA/klavye zaten yön-agnostik) — burada
- * ikinci kez `input()` olarak TANIMLANMIYOR (NG2017, bkz. `TabPanel.
- * preserveContent`'teki aynı kısıt), `ariaTabList.orientation()` üzerinden
- * `protected readonly orientation` olarak okunuyor; `Tab` (tab.ts) bunu
- * `variant()` ile aynı `inject()` deseniyle ebeveynden alıyor.
+ * `tab-list.html`'deki sarmalayıcının dikeydeki `items-stretch`'i BİLEREK —
+ * `items-center` genişliği scroller/satır/sekmelere iletmiyor, `truncate`
+ * hiç devreye girmiyordu (gerçek bir hataydı).
  */
 class TabList {
     variant = input('underline', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Yatay: sekmeler satırı eşit paylaşır. */
+    stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Yatay hizalama. */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** İmleci izleyen yumuşak vurgu (yalnız `underline` ve `pills`). */
+    hoverHighlight = input(true, { ...(ngDevMode ? { debugName: "hoverHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     scrollStartLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "scrollStartLabel" }] : /* istanbul ignore next */ []));
     scrollEndLabel = input(/* @ts-ignore */
@@ -240,17 +310,37 @@ class TabList {
     ...(ngDevMode ? [{ debugName: "effectiveScrollStartLabel" }] : /* istanbul ignore next */ []));
     effectiveScrollEndLabel = computed(() => this.scrollEndLabel() ?? this.tabsLabels().scrollEnd, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveScrollEndLabel" }] : /* istanbul ignore next */ []));
-    /** `mfTab` (bkz. tab.ts) varyantı buradan `inject()` ile okuyor — tek kaynak. */
+    /** `Tab`, `TabCount` ve `Tabs` bu sınıfı `inject()` ile okur — tek kaynak. */
     ariaTabList = inject(TabList$1);
-    /** `Tab` (tab.ts) bunu `variant()` ile aynı `inject()` deseniyle okuyor — bu yüzden `public`. */
     orientation = computed(() => this.ariaTabList.orientation(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
-    listClasses = computed(() => cn(tabListVariants({ variant: this.variant(), orientation: this.orientation() })), /* @ts-ignore */
+    axis = computed(() => (this.isVertical() ? 'y' : 'x'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+    /** Satır kendi hover vurgusunu çiziyor mu — öyleyse sekmeler kendininkini çizmez. */
+    drawsHover = computed(() => this.hoverHighlight() && (this.variant() === 'underline' || this.variant() === 'pills'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawsHover" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => {
+        const vertical = this.isVertical();
+        return cn(tabListVariants({
+            variant: this.variant(),
+            orientation: this.orientation(),
+            align: vertical ? 'start' : this.align(),
+            fill: !vertical &&
+                (this.variant() === 'underline' || this.stretch() || this.align() !== 'start'),
+        }));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
-    indicatorClasses = computed(() => cn('pointer-events-none absolute rounded-full bg-accent-fill opacity-0 transition-[transform,width,height,opacity] duration-base ease-emphasis', this.isVertical() ? 'top-0 left-0 w-0.5' : 'bottom-0 left-0 h-0.5'), /* @ts-ignore */
+    indicatorClasses = computed(() => tabIndicatorVariants({ variant: this.variant(), orientation: this.orientation() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : /* istanbul ignore next */ []));
+    hoverClasses = computed(() => tabHoverVariants({
+        variant: this.variant() === 'pills' ? 'pills' : 'underline',
+        orientation: this.orientation(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverClasses" }] : /* istanbul ignore next */ []));
+    hoveredTab = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredTab" }] : /* istanbul ignore next */ []));
     scroller = viewChild(TabScroller, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
     showStartArrow = computed(() => this.scroller()?.canScrollStart() ?? false, /* @ts-ignore */
@@ -259,50 +349,39 @@ class TabList {
     ...(ngDevMode ? [{ debugName: "showEndArrow" }] : /* istanbul ignore next */ []));
     rowEl = viewChild('row', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowEl" }] : /* istanbul ignore next */ []));
-    indicatorEl = viewChild('indicator', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicatorEl" }] : /* istanbul ignore next */ []));
+    tabs = contentChildren(Tab$1, { ...(ngDevMode ? { debugName: "tabs" } : /* istanbul ignore next */ {}), descendants: true });
     constructor() {
-        const destroyRef = inject(DestroyRef);
         afterRenderEffect(() => {
             this.ariaTabList.selectedTab();
-            this.positionIndicator();
+            const active = this.rowEl()?.nativeElement.querySelector('[aria-selected="true"]');
+            if (active)
+                this.scroller()?.scrollIntoViewIfNeeded(active);
         });
+        // Bağlı bir seçim yoksa ilk etkin sekme — boş bir panel alanı hiç görünmesin.
         afterNextRender(() => {
-            const row = this.rowEl()?.nativeElement;
-            if (!row || typeof ResizeObserver === 'undefined')
+            if (this.ariaTabList.selectedTab() !== undefined)
                 return;
-            const observer = new ResizeObserver(() => this.positionIndicator());
-            observer.observe(row);
-            destroyRef.onDestroy(() => observer.disconnect());
+            const first = this.tabs().find((tab) => !tab.disabled());
+            if (first)
+                this.ariaTabList.open(first.value());
         });
     }
-    positionIndicator() {
-        const row = this.rowEl()?.nativeElement;
-        const indicator = this.indicatorEl()?.nativeElement;
-        if (!row || !indicator)
+    onPointerOver(event) {
+        if (!this.drawsHover() || event.pointerType === 'touch')
             return;
-        const active = row.querySelector('[aria-selected="true"]');
-        if (!active) {
-            indicator.style.opacity = '0';
-            return;
-        }
-        indicator.style.opacity = '1';
-        if (this.isVertical()) {
-            indicator.style.transform = `translateY(${active.offsetTop}px)`;
-            indicator.style.height = `${active.offsetHeight}px`;
-        }
-        else {
-            indicator.style.transform = `translateX(${active.offsetLeft}px)`;
-            indicator.style.width = `${active.offsetWidth}px`;
-        }
-        this.scroller()?.scrollIntoViewIfNeeded(active);
+        const tab = event.target?.closest('[role="tab"]:not([aria-disabled="true"])');
+        if (tab)
+            this.hoveredTab.set(tab);
+    }
+    onPointerLeave() {
+        this.hoveredTab.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabList, isStandalone: true, selector: "mf-tab-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "indicatorEl", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TabList, inputs: ["orientation", "orientation", "wrap", "wrap", "softDisabled", "softDisabled", "focusMode", "focusMode", "selectionMode", "selectionMode", "disabled", "disabled", "selectedTab", "selectedTab"], outputs: ["selectedTabChange", "selectedTabChange"] }], ngImport: i0, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\">\r\n    <div #row [class]=\"listClasses()\">\r\n      <ng-content />\r\n      @if (variant() === 'underline') {\r\n        <span #indicator [class]=\"indicatorClasses()\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabList, isStandalone: true, selector: "mf-tab-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hoverHighlight: { classPropertyName: "hoverHighlight", publicName: "hoverHighlight", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.shrink-0": "isVertical()" }, classAttribute: "block min-w-0" }, queries: [{ propertyName: "tabs", predicate: Tab$1, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }], exportAs: ["mfTabList"], hostDirectives: [{ directive: i1.TabList, inputs: ["orientation", "orientation", "wrap", "wrap", "softDisabled", "softDisabled", "focusMode", "focusMode", "selectionMode", "selectionMode", "disabled", "disabled", "selectedTab", "selectedTab"], outputs: ["selectedTabChange", "selectedTabChange"] }], ngImport: i0, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\" class=\"grow\">\r\n    <div\r\n      #row\r\n      [class]=\"listClasses()\"\r\n      (pointerover)=\"onPointerOver($event)\"\r\n      (pointerleave)=\"onPointerLeave()\"\r\n    >\r\n      <!-- G\u00F6stergeler i\u00E7erikten \u00D6NCE: `relative` sekmeler onlar\u0131n \u00FCst\u00FCne boyan\u0131r. -->\r\n      @if (drawsHover()) {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-hover\r\n          [axis]=\"axis()\"\r\n          [target]=\"hoveredTab()\"\r\n          [class]=\"hoverClasses()\"\r\n        ></span>\r\n      }\r\n      @if (variant() !== 'card') {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-indicator\r\n          [axis]=\"axis()\"\r\n          [track]=\"ariaTabList.selectedTab()\"\r\n          [class]=\"indicatorClasses()\"\r\n        ></span>\r\n      }\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }, { kind: "directive", type: SlidingIndicator, selector: "[mfSlidingIndicator]", inputs: ["axis", "target", "track", "container"], exportAs: ["mfSlidingIndicator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-tab-list', imports: [Button, Icon, TabScroller], hostDirectives: [
+            args: [{ selector: 'mf-tab-list', exportAs: 'mfTabList', imports: [Button, Icon, TabScroller, SlidingIndicator], hostDirectives: [
                         {
                             directive: TabList$1,
                             inputs: [
@@ -316,42 +395,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             ],
                             outputs: ['selectedTabChange'],
                         },
-                    ], host: { class: 'block' }, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\">\r\n    <div #row [class]=\"listClasses()\">\r\n      <ng-content />\r\n      @if (variant() === 'underline') {\r\n        <span #indicator [class]=\"indicatorClasses()\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabScroller), { isSignal: true }] }], rowEl: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }], indicatorEl: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }] } });
+                    ], host: { class: 'block min-w-0', '[class.shrink-0]': 'isVertical()' }, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\" class=\"grow\">\r\n    <div\r\n      #row\r\n      [class]=\"listClasses()\"\r\n      (pointerover)=\"onPointerOver($event)\"\r\n      (pointerleave)=\"onPointerLeave()\"\r\n    >\r\n      <!-- G\u00F6stergeler i\u00E7erikten \u00D6NCE: `relative` sekmeler onlar\u0131n \u00FCst\u00FCne boyan\u0131r. -->\r\n      @if (drawsHover()) {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-hover\r\n          [axis]=\"axis()\"\r\n          [target]=\"hoveredTab()\"\r\n          [class]=\"hoverClasses()\"\r\n        ></span>\r\n      }\r\n      @if (variant() !== 'card') {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-indicator\r\n          [axis]=\"axis()\"\r\n          [track]=\"ariaTabList.selectedTab()\"\r\n          [class]=\"indicatorClasses()\"\r\n        ></span>\r\n      }\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], hoverHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverHighlight", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabScroller), { isSignal: true }] }], rowEl: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab$1), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
- * `<button mfTab value="genel">Genel</button>` — bir `mf-tab-list` içine
- * konur. ARIA/klavye/seçim davranışı `@angular/aria/tabs`'ın `Tab`
- * pattern'inden `hostDirectives` ile geliyor (bkz. `tabs.ts` üstündeki not);
- * bu directive sadece görsel katmanı ekliyor. `value`/`disabled`/`id`
- * girdileri `hostDirectives`'in `inputs` listesiyle dışarı açıldı — tüketici
- * doğrudan `[value]`/`[disabled]` bağlar, `ngTab` attribute'unu YAZMAZ.
+ * `<button mfTab value="genel"><span mfIcon [size]="16">tune</span>Genel <span mfTabCount>3</span></button>`
  *
- * Varyant (`underline`/`card`) ebeveyn `mf-tab-list`'ten `inject()` ile
- * okunuyor — `Tab` kendi varyant girdisini TAŞIMIYOR, tek kaynak listede.
+ * ARIA/klavye/seçim `@angular/aria/tabs`'ın `Tab`'ından `hostDirectives` ile
+ * gelir; `value`/`disabled`/`id` doğrudan bağlanır (`ngTab` YAZILMAZ). Görünüm
+ * (varyant, boyut, yön, stretch) ebeveyn `mf-tab-list`'ten `inject()` ile
+ * okunur — sekme kendi görünüm girdisini TAŞIMAZ, tek kaynak liste.
  */
 class Tab {
     ariaTab = inject(Tab$1);
     tabList = inject(TabList, { optional: true });
-    classes = computed(() => cn(tabVariants({
-        variant: this.tabList?.variant() ?? 'underline',
-        orientation: this.tabList?.orientation() ?? 'horizontal',
-        selected: this.ariaTab.selected(),
-        disabled: this.ariaTab.disabled(),
-    })), /* @ts-ignore */
+    /** `TabCount` seçili tonu için okur. */
+    selected = computed(() => this.ariaTab.selected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const list = this.tabList;
+        const vertical = list?.isVertical() ?? false;
+        return cn(tabVariants({
+            variant: list?.variant() ?? 'underline',
+            size: list?.size() ?? 'md',
+            orientation: vertical ? 'vertical' : 'horizontal',
+            selected: this.ariaTab.selected(),
+            disabled: this.ariaTab.disabled(),
+            stretch: !vertical && (list?.stretch() ?? false),
+            ownHover: !(list?.drawsHover() ?? false),
+        }));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: Tab, isStandalone: true, selector: "button[mfTab]", host: { properties: { "attr.type": "'button'", "class": "classes()" } }, hostDirectives: [{ directive: i1.Tab, inputs: ["value", "value", "disabled", "disabled", "id", "id"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: Tab, isStandalone: true, selector: "button[mfTab]", host: { properties: { "attr.type": "'button'", "class": "classes()" } }, exportAs: ["mfTab"], hostDirectives: [{ directive: i1.Tab, inputs: ["value", "value", "disabled", "disabled", "id", "id"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[mfTab]',
+                    exportAs: 'mfTab',
                     hostDirectives: [{ directive: Tab$1, inputs: ['value', 'disabled', 'id'] }],
                     host: { '[attr.type]': "'button'", '[class]': 'classes()' },
                 }]
         }] });
 
+/**
+ * `<button mfTab value="inbox">Gelen <span mfTabCount>12</span></button>`
+ *
+ * Sekme içi sayaç rozeti — seçili sekmede tonlanır (`pills`'te hap zaten ton
+ * olduğu için yüzey rengine döner). Görsel bir ektir: ekran okuyucu sayıyı
+ * sekme adının parçası olarak okur ("Gelen 12").
+ */
+class TabCount {
+    tab = inject(Tab, { optional: true });
+    tabList = inject(TabList, { optional: true });
+    classes = computed(() => cn(tabCountVariants({
+        selected: this.tab?.selected() ?? false,
+        variant: this.tabList?.variant() ?? 'underline',
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabCount, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: TabCount, isStandalone: true, selector: "span[mfTabCount]", host: { properties: { "class": "classes()" } }, exportAs: ["mfTabCount"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabCount, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[mfTabCount]',
+                    exportAs: 'mfTabCount',
+                    host: { '[class]': 'classes()' },
+                }]
+        }] });
+
+/**
+ * ```html
+ * <mf-tab-nav ariaLabel="Proje">
+ *   <a mfTabLink routerLink="overview" routerLinkActive #o="routerLinkActive" [active]="o.isActive">Genel bakış</a>
+ *   <a mfTabLink routerLink="settings" routerLinkActive #s="routerLinkActive" [active]="s.isActive">Ayarlar</a>
+ * </mf-tab-nav>
+ * ```
+ *
+ * Sayfalar arası GEZİNME için sekme görünümü — `mf-tabs` ile aynı varyantlar,
+ * boyutlar ve kayan gösterge, ama semantik olarak bir `<nav>` + bağlantılar:
+ * `role="tab"`/ok tuşu YOK (gezinen bağlantıda sekme rolü WAI-ARIA'da yanlış
+ * desen), etkin bağlantı `aria-current="page"` taşır, klavye doğal Tab/Enter.
+ * Kit `@angular/router`'a bağımlı değil — `active`'i tüketici bağlar
+ * (`routerLinkActive` ya da kendi durumu). Yalnız yatay; dikey gezinme Sidebar'ın işi.
+ */
+class TabNav {
+    variant = input('underline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    hoverHighlight = input(true, { ...(ngDevMode ? { debugName: "hoverHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `<nav>` işaret noktasının adı — sayfada birden çok nav varsa zorunlu. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    links = contentChildren(forwardRef(() => TabLink), { ...(ngDevMode ? { debugName: "links" } : /* istanbul ignore next */ {}), descendants: true });
+    /** Etkin bağlantı değişince göstergeyi yeniden ölçtürür. */
+    activeIndex = computed(() => this.links().findIndex((l) => l.active()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    drawsHover = computed(() => this.hoverHighlight() && (this.variant() === 'underline' || this.variant() === 'pills'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawsHover" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => cn(tabListVariants({
+        variant: this.variant(),
+        orientation: 'horizontal',
+        align: this.align(),
+        fill: this.variant() === 'underline' || this.stretch() || this.align() !== 'start',
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    indicatorClasses = computed(() => tabIndicatorVariants({ variant: this.variant(), orientation: 'horizontal' }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : /* istanbul ignore next */ []));
+    hoverClasses = computed(() => tabHoverVariants({
+        variant: this.variant() === 'pills' ? 'pills' : 'underline',
+        orientation: 'horizontal',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverClasses" }] : /* istanbul ignore next */ []));
+    hoveredLink = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredLink" }] : /* istanbul ignore next */ []));
+    onPointerOver(event) {
+        if (!this.drawsHover() || event.pointerType === 'touch')
+            return;
+        const link = event.target?.closest('a[mfTabLink]');
+        if (link)
+            this.hoveredLink.set(link);
+    }
+    onPointerLeave() {
+        this.hoveredLink.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabNav, isStandalone: true, selector: "mf-tab-nav", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hoverHighlight: { classPropertyName: "hoverHighlight", publicName: "hoverHighlight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => TabLink), descendants: true, isSignal: true }], exportAs: ["mfTabNav"], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel() || null\">\r\n  <div mfTabScroller>\r\n    <div\r\n      [class]=\"listClasses()\"\r\n      (pointerover)=\"onPointerOver($event)\"\r\n      (pointerleave)=\"onPointerLeave()\"\r\n    >\r\n      @if (drawsHover()) {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-hover\r\n          [target]=\"hoveredLink()\"\r\n          [class]=\"hoverClasses()\"\r\n        ></span>\r\n      }\r\n      @if (variant() !== 'card') {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-indicator\r\n          target='[aria-current=\"page\"]'\r\n          [track]=\"activeIndex()\"\r\n          [class]=\"indicatorClasses()\"\r\n        ></span>\r\n      }\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: SlidingIndicator, selector: "[mfSlidingIndicator]", inputs: ["axis", "target", "track", "container"], exportAs: ["mfSlidingIndicator"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabNav, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tab-nav', exportAs: 'mfTabNav', imports: [SlidingIndicator, TabScroller], host: { class: 'block min-w-0' }, template: "<nav [attr.aria-label]=\"ariaLabel() || null\">\r\n  <div mfTabScroller>\r\n    <div\r\n      [class]=\"listClasses()\"\r\n      (pointerover)=\"onPointerOver($event)\"\r\n      (pointerleave)=\"onPointerLeave()\"\r\n    >\r\n      @if (drawsHover()) {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-hover\r\n          [target]=\"hoveredLink()\"\r\n          [class]=\"hoverClasses()\"\r\n        ></span>\r\n      }\r\n      @if (variant() !== 'card') {\r\n        <span\r\n          mfSlidingIndicator\r\n          data-tab-indicator\r\n          target='[aria-current=\"page\"]'\r\n          [track]=\"activeIndex()\"\r\n          [class]=\"indicatorClasses()\"\r\n        ></span>\r\n      }\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n</nav>\r\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], hoverHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverHighlight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], links: [{ type: i0.ContentChildren, args: [forwardRef(() => TabLink), { ...{ descendants: true }, isSignal: true }] }] } });
+/** `a[mfTabLink]` — `mf-tab-nav` içindeki bağlantı; `active` → `aria-current="page"`. */
+class TabLink {
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    nav = inject(TabNav, { optional: true });
+    classes = computed(() => {
+        const nav = this.nav;
+        return cn(tabVariants({
+            variant: nav?.variant() ?? 'underline',
+            size: nav?.size() ?? 'md',
+            orientation: 'horizontal',
+            selected: this.active(),
+            stretch: nav?.stretch() ?? false,
+            ownHover: !(nav?.drawsHover() ?? false),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TabLink, isStandalone: true, selector: "a[mfTabLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-current": "active() ? 'page' : null", "class": "classes()" } }, exportAs: ["mfTabLink"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[mfTabLink]',
+                    exportAs: 'mfTabLink',
+                    host: {
+                        '[attr.aria-current]': "active() ? 'page' : null",
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+/**
+ * ```html
+ * <mf-tabs>
+ *   <mf-tab-list [(selectedTab)]="tab" variant="pills" orientation="vertical" class="w-56">
+ *     <button mfTab value="profile">Profil</button>
+ *     <button mfTab value="billing">Faturalandırma</button>
+ *   </mf-tab-list>
+ *   <mf-tab-panel value="profile"><ng-template ngTabContent>…</ng-template></mf-tab-panel>
+ *   <mf-tab-panel value="billing"><ng-template ngTabContent>…</ng-template></mf-tab-panel>
+ * </mf-tabs>
+ * ```
+ *
+ * `@angular/aria/tabs` kompozisyonu: `Tabs`/`TabList`/`Tab`/`TabPanel` her biri
+ * aria'nın aynı adlı yapı taşını `hostDirectives` ile taşır (ARIA rolleri,
+ * roving tabindex, ok tuşları, Home/End) — kit yalnız görsel katmanı ekler.
+ *
+ * **Dikey yerleşim otomatik:** liste `orientation="vertical"` olunca kök yan
+ * yana (`flex`) dizilir, paneller kalan alanı doldurur. Yönün tek kaynağı
+ * listedir (ARIA `aria-orientation` orada); liste genişliği tüketicinin
+ * `class`'ı (ör. `w-56`).
+ */
+class Tabs {
+    list = contentChild(TabList, { ...(ngDevMode ? { debugName: "list" } : /* istanbul ignore next */ {}), descendants: true });
+    /** `TabPanel` panel genişliği için okur. */
+    vertical = computed(() => this.list()?.isVertical() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: Tabs, isStandalone: true, selector: "mf-tabs", host: { properties: { "class.flex": "vertical()", "class.items-start": "vertical()", "class.gap-6": "vertical()" }, classAttribute: "block" }, queries: [{ propertyName: "list", first: true, predicate: TabList, descendants: true, isSignal: true }], exportAs: ["mfTabs"], hostDirectives: [{ directive: i1.Tabs }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-tabs',
+                    exportAs: 'mfTabs',
+                    hostDirectives: [Tabs$1],
+                    host: {
+                        class: 'block',
+                        '[class.flex]': 'vertical()',
+                        '[class.items-start]': 'vertical()',
+                        '[class.gap-6]': 'vertical()',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { list: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabList), { ...{ descendants: true }, isSignal: true }] }] } });
+
 /**
  * ```html
  * <mf-tab-panel value="genel">
@@ -359,37 +615,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * </mf-tab-panel>
  * ```
  *
- * `ngTabContent` (`@angular/aria/tabs`'ın `TabContent`'i) doğrudan
- * kullanılır — ayrı bir `appTabContent` sarmalayıcı YOK, tek katmanlı bir
- * yapıya sarmalayıcı eklemenin karşılığı yok (bkz. `TabContent`'in kendi
- * `DeferredContent` mekanizması, panel aktif olana kadar içeriği hiç
- * oluşturmaz — lazy). `<ng-content />` bilerek TEK satır: panelin kendi
- * `role="tabpanel"`/`tabindex`/`inert` host bağlamaları `hostDirectives`'ten
- * geliyor, ekstra bir sarmalayıcıya gerek yok.
+ * `ngTabContent` (`@angular/aria/tabs`'ın `TabContent`'i) doğrudan kullanılır —
+ * içerik panel ilk kez etkinleşene kadar oluşturulmaz (lazy). `preserveContent`
+ * `hostDirectives` ile yeniden iletilemiyor (NG2017), bu yüzden açık değil.
  *
- * `[class.hidden]` ELLE eklendi — `AriaTabPanel`'in `inert` attribute'u
- * elemanı erişilebilirlik ağacından/etkileşimden çıkarıyor ama GÖRSEL olarak
- * gizlemiyor (kütüphanenin kendi dokümantasyonu: "Proper styling is required
- * for visual hiding" — gerçek bulgu, ui-kit'te pasif panellerin boş
- * dolgulu kutular olarak GÖRÜNÜR kaldığı görüldü).
+ * - `[class.hidden]` ELLE — aria'nın `inert`'i paneli erişilebilirlik ağacından
+ *   çıkarır ama GÖRSEL olarak gizlemez (kütüphanenin kendi notu).
+ * - **Geçiş:** görünür olan panel `animate-panel-in` ile solarak/hafifçe
+ *   yükselerek gelir; `display:none → block` animasyonu kendiliğinden yeniden
+ *   başlatır. `[animate]="false"` kapatır; azaltılmış harekette zaten yok.
+ * - Dikey `mf-tabs` içinde kalan genişliği doldurur (`flex-1 min-w-0`).
  */
 class TabPanel {
+    /** Görünür olunca giriş animasyonu. */
+    animate = input(true, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaTabPanel = inject(TabPanel$1);
+    tabs = inject(Tabs, { optional: true });
+    inVertical() {
+        return this.tabs?.vertical() ?? false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TabPanel, isStandalone: true, selector: "mf-tab-panel", host: { properties: { "class.hidden": "!ariaTabPanel.visible()" }, classAttribute: "block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring" }, hostDirectives: [{ directive: i1.TabPanel, inputs: ["value", "value", "id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TabPanel, isStandalone: true, selector: "mf-tab-panel", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden": "!ariaTabPanel.visible()", "class.animate-panel-in": "animate()", "class.flex-1": "inVertical()", "class.min-w-0": "inVertical()" }, classAttribute: "block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring" }, exportAs: ["mfTabPanel"], hostDirectives: [{ directive: i1.TabPanel, inputs: ["value", "value", "id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-tab-panel',
+                    exportAs: 'mfTabPanel',
                     hostDirectives: [{ directive: TabPanel$1, inputs: ['value', 'id'] }],
                     host: {
+                        // Host metadata STATİK olmalı (linker import edilmiş sabiti çözemez) — focusRecipe'in literal hâli.
                         class: 'block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',
                         '[class.hidden]': '!ariaTabPanel.visible()',
+                        '[class.animate-panel-in]': 'animate()',
+                        '[class.flex-1]': 'inVertical()',
+                        '[class.min-w-0]': 'inVertical()',
                     },
                     template: '<ng-content />',
                 }]
-        }] });
+        }], propDecorators: { animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }] } });
 
 /**
  * `<mf-tab-strip [items]="items()" [(activeKey)]="active" (close)="onClose($event)" />`
@@ -458,7 +722,12 @@ class TabStrip {
     rowEl = viewChild('row', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowEl" }] : /* istanbul ignore next */ []));
     tabClasses(item) {
-        return cn(tabVariants({ variant: 'card', selected: item.key === this.activeKey(), disabled: false }), 'pe-1.5');
+        return cn(tabVariants({
+            variant: 'card',
+            size: 'sm',
+            selected: item.key === this.activeKey(),
+            disabled: false,
+        }), 'pe-1.5');
     }
     tabIndexFor(item) {
         const focused = this.focusedKey() ?? this.activeKey();
@@ -526,44 +795,16 @@ class TabStrip {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabStrip, isStandalone: true, selector: "mf-tab-strip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange", close: "close", itemContextMenu: "itemContextMenu" }, host: { attributes: { "role": "tablist" }, classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }], exportAs: ["mfTabStrip"], ngImport: i0, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabStrip, isStandalone: true, selector: "mf-tab-strip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange", close: "close", itemContextMenu: "itemContextMenu" }, host: { attributes: { "role": "tablist" }, classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }], exportAs: ["mfTabStrip"], ngImport: i0, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStrip, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-tab-strip', exportAs: 'mfTabStrip', imports: [Icon, TabScroller], host: { class: 'block', role: 'tablist' }, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mf-tab-strip', exportAs: 'mfTabStrip', imports: [Icon, TabScroller], host: { class: 'block', role: 'tablist' }, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }, { type: i0.Output, args: ["activeKeyChange"] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], itemContextMenu: [{ type: i0.Output, args: ["itemContextMenu"] }], scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabScroller), { isSignal: true }] }], rowEl: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }] } });
 
-/**
- * `<mf-tabs><mf-tab-list>...</mf-tab-list><mf-tab-panel>...</mf-tab-panel></mf-tabs>`
- *
- * Salt bir kapsayıcı — tüm ARIA/klavye/state mantığı `@angular/aria/tabs`'ın
- * `Tabs` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.
- * projects/ui-kit/README.md "a11y checklist": "mümkün olduğunca `@angular/aria`...
- * elle ARIA yazmak son çare"). `hostDirectives`, ana bileşenin (`mf-tabs`)
- * host elemanına `Tabs`'ın DI sağlayıcısını (`TABS` token) ekliyor — alttaki
- * `mf-tab-list`/`mf-tab-panel` bunu `inject()` ile bulup kendini
- * kaydediyor, template'te `ngTabs` attribute'unu ELLE yazmaya gerek yok
- * (`hostDirectives`'te selector yok sayılır, bkz. Angular directive
- * composition API).
- */
-class Tabs {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: Tabs, isStandalone: true, selector: "mf-tabs", host: { classAttribute: "block" }, exportAs: ["mfTabs"], hostDirectives: [{ directive: i1.Tabs }], ngImport: i0, template: '<ng-content />', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mf-tabs',
-                    exportAs: 'mfTabs',
-                    hostDirectives: [Tabs$1],
-                    host: { class: 'block' },
-                    template: '<ng-content />',
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Tab, TabList, TabPanel, TabScroller, TabStrip, Tabs, tabListVariants, tabVariants };
+export { Tab, TabCount, TabLink, TabList, TabNav, TabPanel, TabScroller, TabStrip, Tabs, tabCountVariants, tabHoverVariants, tabIndicatorVariants, tabListVariants, tabVariants };
 //# sourceMappingURL=mesgflow-ui-kit-tabs.mjs.map