@mesgflow/ui-kit 0.6.0 → 0.8.0

package/types/mesgflow-ui-kit-tabs.d.ts

@@ -1,26 +1,42 @@
 import * as _angular_core from '@angular/core';
 import * as i1 from '@angular/aria/tabs';
 import { TabList as TabList$1, TabPanel as TabPanel$1 } from '@angular/aria/tabs';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { MfSize } from '@mesgflow/ui-kit/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
 /**
- * `<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.
  */
 declare class Tab {
     private readonly ariaTab;
     private readonly tabList;
+    /** `TabCount` seçili tonu için okur. */
+    readonly selected: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "button[mfTab]", never, {}, {}, never, never, true, [{ directive: typeof i1.Tab; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "button[mfTab]", ["mfTab"], {}, {}, never, never, true, [{ directive: typeof i1.Tab; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
+}
+
+/**
+ * `<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").
+ */
+declare class TabCount {
+    private readonly tab;
+    private readonly tabList;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabCount, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabCount, "span[mfTabCount]", ["mfTabCount"], {}, {}, never, never, true, never>;
 }
 
 /**
@@ -54,99 +70,171 @@ declare class TabScroller {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabScroller, "[mfTabScroller]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type TabsVariant = 'underline' | 'card';
+/**
+ * - `underline` — hairline ray + kayan 2px çizgi (varsayılan; sayfa içi gezinme).
+ * - `pills` — seçili sekmenin arkasında kayan yumuşak ton hap (araç/filtre çubukları).
+ * - `segmented` — kapalı ray + kayan yükseltilmiş parça (görünüm değiştiriciler).
+ * - `card` — ayrık kutu sekmeler; seçili kutunun kenarında 2px çizgi (belge/düzenleyici).
+ */
+type TabsVariant = 'underline' | 'pills' | 'segmented' | 'card';
 type TabsOrientation = 'horizontal' | 'vertical';
+type TabsAlign = 'start' | 'center' | 'end';
+type TabsSize = MfSize;
 /**
- * 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).
  */
 declare const tabListVariants: (props?: ({
-    variant?: "underline" | "card" | null | undefined;
+    variant?: "underline" | "pills" | "segmented" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
+    align?: "center" | "end" | "start" | null | undefined;
+    fill?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * `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.
+ * 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.
+ */
+declare const tabIndicatorVariants: (props?: ({
+    variant?: "underline" | "pills" | "segmented" | "card" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** İmleç altındaki sekmeyi izleyen yumuşak vurgu (yalnız underline/pills). */
+declare const tabHoverVariants: (props?: ({
+    variant?: "underline" | "pills" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * 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.
  */
 declare const tabVariants: (props?: ({
-    variant?: "underline" | "card" | null | undefined;
+    variant?: "underline" | "pills" | "segmented" | "card" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
+    stretch?: boolean | null | undefined;
+    ownHover?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** `<span mfTabCount>12</span>` — sekme içi sayaç rozeti; seçili sekmede tonlanır. */
+declare const tabCountVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    variant?: "underline" | "pills" | "segmented" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TabSelected = VariantProps<typeof tabVariants>['selected'];
 
 /**
- * `<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ı).
  */
 declare class TabList {
     readonly variant: _angular_core.InputSignal<TabsVariant>;
+    readonly size: _angular_core.InputSignal<_mesgflow_ui_kit_core.MfSize>;
+    /** Yatay: sekmeler satırı eşit paylaşır. */
+    readonly stretch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Yatay hizalama. */
+    readonly align: _angular_core.InputSignal<TabsAlign>;
+    /** İmleci izleyen yumuşak vurgu (yalnız `underline` ve `pills`). */
+    readonly hoverHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly scrollStartLabel: _angular_core.InputSignal<string | undefined>;
     readonly scrollEndLabel: _angular_core.InputSignal<string | undefined>;
     private readonly tabsLabels;
     protected readonly effectiveScrollStartLabel: _angular_core.Signal<string>;
     protected readonly effectiveScrollEndLabel: _angular_core.Signal<string>;
-    /** `mfTab` (bkz. tab.ts) varyantı buradan `inject()` ile okuyor — tek kaynak. */
-    protected readonly ariaTabList: TabList$1;
-    /** `Tab` (tab.ts) bunu `variant()` ile aynı `inject()` deseniyle okuyor — bu yüzden `public`. */
+    /** `Tab`, `TabCount` ve `Tabs` bu sınıfı `inject()` ile okur — tek kaynak. */
+    readonly ariaTabList: TabList$1;
     readonly orientation: _angular_core.Signal<"horizontal" | "vertical">;
-    protected readonly isVertical: _angular_core.Signal<boolean>;
+    readonly isVertical: _angular_core.Signal<boolean>;
+    protected readonly axis: _angular_core.Signal<"y" | "x">;
+    /** Satır kendi hover vurgusunu çiziyor mu — öyleyse sekmeler kendininkini çizmez. */
+    readonly drawsHover: _angular_core.Signal<boolean>;
     protected readonly listClasses: _angular_core.Signal<string>;
     protected readonly indicatorClasses: _angular_core.Signal<string>;
+    protected readonly hoverClasses: _angular_core.Signal<string>;
+    protected readonly hoveredTab: _angular_core.WritableSignal<HTMLElement | null>;
     protected readonly scroller: _angular_core.Signal<TabScroller | undefined>;
     protected readonly showStartArrow: _angular_core.Signal<boolean>;
     protected readonly showEndArrow: _angular_core.Signal<boolean>;
     private readonly rowEl;
-    private readonly indicatorEl;
+    private readonly tabs;
     constructor();
-    private positionIndicator;
+    protected onPointerOver(event: PointerEvent): void;
+    protected onPointerLeave(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabList, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabList, "mf-tab-list", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "scrollStartLabel": { "alias": "scrollStartLabel"; "required": false; "isSignal": true; }; "scrollEndLabel": { "alias": "scrollEndLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.TabList; inputs: { "orientation": "orientation"; "wrap": "wrap"; "softDisabled": "softDisabled"; "focusMode": "focusMode"; "selectionMode": "selectionMode"; "disabled": "disabled"; "selectedTab": "selectedTab"; }; outputs: { "selectedTabChange": "selectedTabChange"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabList, "mf-tab-list", ["mfTabList"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "hoverHighlight": { "alias": "hoverHighlight"; "required": false; "isSignal": true; }; "scrollStartLabel": { "alias": "scrollStartLabel"; "required": false; "isSignal": true; }; "scrollEndLabel": { "alias": "scrollEndLabel"; "required": false; "isSignal": true; }; }, {}, ["tabs"], ["*"], true, [{ directive: typeof i1.TabList; inputs: { "orientation": "orientation"; "wrap": "wrap"; "softDisabled": "softDisabled"; "focusMode": "focusMode"; "selectionMode": "selectionMode"; "disabled": "disabled"; "selectedTab": "selectedTab"; }; outputs: { "selectedTabChange": "selectedTabChange"; }; }]>;
+}
+
+/**
+ * ```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.
+ */
+declare class TabNav {
+    readonly variant: _angular_core.InputSignal<TabsVariant>;
+    readonly size: _angular_core.InputSignal<_mesgflow_ui_kit_core.MfSize>;
+    readonly stretch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly align: _angular_core.InputSignal<TabsAlign>;
+    readonly hoverHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `<nav>` işaret noktasının adı — sayfada birden çok nav varsa zorunlu. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly links;
+    /** Etkin bağlantı değişince göstergeyi yeniden ölçtürür. */
+    protected readonly activeIndex: _angular_core.Signal<number>;
+    readonly drawsHover: _angular_core.Signal<boolean>;
+    protected readonly listClasses: _angular_core.Signal<string>;
+    protected readonly indicatorClasses: _angular_core.Signal<string>;
+    protected readonly hoverClasses: _angular_core.Signal<string>;
+    protected readonly hoveredLink: _angular_core.WritableSignal<HTMLElement | null>;
+    protected onPointerOver(event: PointerEvent): void;
+    protected onPointerLeave(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabNav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabNav, "mf-tab-nav", ["mfTabNav"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "hoverHighlight": { "alias": "hoverHighlight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["links"], ["*"], true, never>;
+}
+/** `a[mfTabLink]` — `mf-tab-nav` içindeki bağlantı; `active` → `aria-current="page"`. */
+declare class TabLink {
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly nav;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabLink, "a[mfTabLink]", ["mfTabLink"], { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -156,24 +244,25 @@ declare class TabList {
  * </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`).
  */
 declare class TabPanel {
+    /** Görünür olunca giriş animasyonu. */
+    readonly animate: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly ariaTabPanel: TabPanel$1;
+    private readonly tabs;
+    protected inVertical(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabPanel, "mf-tab-panel", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.TabPanel; inputs: { "value": "value"; "id": "id"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabPanel, "mf-tab-panel", ["mfTabPanel"], { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.TabPanel; inputs: { "value": "value"; "id": "id"; }; outputs: {}; }]>;
 }
 
 interface TabStripItem {
@@ -248,22 +337,33 @@ declare class TabStrip {
 }
 
 /**
- * `<mf-tabs><mf-tab-list>...</mf-tab-list><mf-tab-panel>...</mf-tab-panel></mf-tabs>`
+ * ```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.
  *
- * 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).
+ * **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`).
  */
 declare class Tabs {
+    private readonly list;
+    /** `TabPanel` panel genişliği için okur. */
+    readonly vertical: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "mf-tabs", ["mfTabs"], {}, {}, never, ["*"], true, [{ directive: typeof i1.Tabs; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "mf-tabs", ["mfTabs"], {}, {}, ["list"], ["*"], true, [{ directive: typeof i1.Tabs; inputs: {}; outputs: {}; }]>;
 }
 
-export { Tab, TabList, TabPanel, TabScroller, TabStrip, Tabs, tabListVariants, tabVariants };
-export type { TabSelected, TabStripItem, TabsOrientation, TabsVariant };
+export { Tab, TabCount, TabLink, TabList, TabNav, TabPanel, TabScroller, TabStrip, Tabs, tabCountVariants, tabHoverVariants, tabIndicatorVariants, tabListVariants, tabVariants };
+export type { TabSelected, TabStripItem, TabsAlign, TabsOrientation, TabsSize, TabsVariant };

package/types/mesgflow-ui-kit-tag-input.d.ts

@@ -15,6 +15,8 @@ declare class TagInput extends ValueAccessorBase<string[]> implements ControlVal
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.InputSignal<boolean>;
+    /** İç `<input>`'un id'si — harici bir `<label for>` / `mf-field for` ile ilişkilendirmek için. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly fullWidth: _angular_core.InputSignal<boolean>;
     /** Verilmezse alttaki `Chip`'in kendi `MF_CHIP_LABELS` düşüşü kullanılır (bkz. `chip.ts`). */
@@ -27,7 +29,7 @@ declare class TagInput extends ValueAccessorBase<string[]> implements ControlVal
     protected commitDraft(): void;
     protected removeTag(tag: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagInput, "mf-tag-input", ["mfTagInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "unique": { "alias": "unique"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagInput, "mf-tag-input", ["mfTagInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "unique": { "alias": "unique"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { TagInput };

package/types/mesgflow-ui-kit-toast.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 
 type ToastTone = 'success' | 'danger' | 'info' | 'warning';
-/** @deprecated `ToastTone` kullan — `'error'` değeri `'danger'`ya taşındı (bkz. plan Faz 1a). */
+/** @deprecated `ToastTone` kullan — `'error'` değeri `'danger'`ya taşındı. */
 type ToastType = ToastTone;
 interface ToastAction {
     label: string;
@@ -19,46 +19,71 @@ interface ToastItem {
     title: string;
     description?: string;
     action?: ToastAction;
-    /** `true` — çıkış animasyonu (`animate-toast-out`) oynuyor, `EXIT_MS` sonra listeden gerçekten kaldırılır (bkz. `dismiss()`). */
+    /** `true` — çıkış animasyonu (`animate-toast-out`) oynuyor, `exitDurationMs()` sonra listeden gerçekten kaldırılır (bkz. `dismiss()`). */
     leaving: boolean;
+    /** Otomatik kapanma süresi (ms) — `0` kalıcı. Host geri sayım çubuğunu buna göre çizer. */
+    duration: number;
+    /** Üzerine gelinince/odaklanınca geri sayım durur (bkz. `pause()`/`resume()`). */
+    paused: boolean;
+    /** `promise()` bekleme durumu — spinner gösterilir, kendiliğinden kapanmaz. */
+    loading: boolean;
+}
+interface ToastPromiseMessages<T> {
+    loading: string;
+    success: string | ((value: T) => string);
+    error: string | ((error: unknown) => string);
+    description?: string;
 }
 /**
  * Uygulamanın tek, global toast kaynağı — signal-first, `providedIn: 'root'`.
  * Görsel katman `ToastHost`'ta (`<mf-toast-host>`, kök seviyede bir kez
- * render edilir) — burası SADECE state. Gömülebilir bir editör host
- * uygulamanın kendi bildirim sistemine bağımlı OLAMAZ, bu yüzden bu servis
- * bir ürün deposunun eski bildirim servisinden kite taşındı (2026-09-07) —
- * artık kütüphanenin kendi parçası.
+ * render edilir) — burası SADECE state.
  *
  * `success`/`error`/`info`/`warning`'in ikinci parametresi HEM düz bir
- * `description` string'i HEM `ToastOptions` kabul eder (geriye dönük
- * uyumluluk — mevcut `toasts.success('Kaydedildi', 'Değişiklikler
- * uygulandı.')` çağrıları DEĞİŞMEDEN çalışmaya devam eder).
+ * `description` string'i HEM `ToastOptions` kabul eder.
+ *
+ * Premium davranışlar (Sonner/Radix Toast ile aynı beklentiler):
+ * - Üzerine gelince / klavyeyle odaklanınca geri sayım DURUR, ayrılınca
+ *   KALAN süreden devam eder (WCAG 2.2.1 "Timing Adjustable").
+ * - `promise()` — tek toast: "Kaydediliyor…" → "Kaydedildi" / hata.
  */
 declare class ToastService {
     readonly items: _angular_core.WritableSignal<ToastItem[]>;
     /**
-     * `ToastHost` tarafından kuruluşta ayarlanır (bkz. `toast-host.ts`
-     * `[limit]` input'u) — aynı anda gösterilecek AZAMİ toast sayısı,
-     * aşılırsa EN ESKİ (henüz çıkış animasyonu oynamayan) toast'lar ANINDA
-     * (animasyonsuz) kaldırılır. `null` (varsayılan) → sınırsız.
+     * `ToastHost` tarafından kuruluşta ayarlanır — aynı anda gösterilecek
+     * AZAMİ toast sayısı, aşılırsa EN ESKİ (henüz çıkış animasyonu oynamayan)
+     * toast'lar ANINDA kaldırılır. `null` (varsayılan) → sınırsız.
      */
     readonly limit: _angular_core.WritableSignal<number | null>;
     private nextId;
-    success(title: string, options?: string | ToastOptions): void;
-    error(title: string, options?: string | ToastOptions): void;
-    info(title: string, options?: string | ToastOptions): void;
-    warning(title: string, options?: string | ToastOptions): void;
+    private readonly timers;
+    success(title: string, options?: string | ToastOptions): number;
+    error(title: string, options?: string | ToastOptions): number;
+    info(title: string, options?: string | ToastOptions): number;
+    warning(title: string, options?: string | ToastOptions): number;
+    /**
+     * `await toasts.promise(save(), { loading: 'Kaydediliyor…', success: 'Kaydedildi', error: 'Kaydedilemedi' })`
+     * — tek bir toast bekleme → sonuç durumuna GEÇER (yeni toast açılmaz).
+     * Promise'in kendi sonucunu/hatasını olduğu gibi geri döndürür/fırlatır.
+     */
+    promise<T>(task: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T>;
+    /** Geri sayımı durdurur (host: `mouseenter`/`focusin`). */
+    pause(id: number): void;
+    /** Kalan süreden devam eder (host: `mouseleave`/`focusout`). */
+    resume(id: number): void;
     /**
      * İki aşamalı: önce `leaving:true` işaretler (panel `animate-toast-out`
-     * oynatır — bkz. `toast-host.html`), `EXIT_MS` sonra listeden gerçekten
-     * çıkarır. Zaten çıkış oynayan bir öğede tekrar çağrılırsa (ör. kullanıcı
-     * X'e hızlı hızlı tıklarsa) YOK SAYILIR — `list.map` idempotent.
+     * oynatır), `exitDurationMs()` sonra listeden gerçekten çıkarır. Zaten
+     * çıkış oynayan bir öğede tekrar çağrılırsa YOK SAYILIR.
      */
     dismiss(id: number): void;
-    /** Şu an gösterilen (henüz çıkış oynamayan) TÜM toast'ları kapatır — her biri kendi çıkış animasyonuyla, `dismiss()`'in aynısı, tek tek. */
+    /** Şu an gösterilen (henüz çıkış oynamayan) TÜM toast'ları kapatır — her biri kendi çıkış animasyonuyla. */
     dismissAll(): void;
     private push;
+    private settle;
+    private arm;
+    private clearTimer;
+    private patch;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
@@ -75,6 +100,7 @@ declare class ToastHost {
     protected readonly toasts: ToastService;
     protected readonly iconFor: (type: ToastTone) => string;
     protected readonly chipBgFor: (type: ToastTone) => string;
+    protected readonly countdownClassFor: (type: ToastTone) => string;
     protected readonly cardClassFor: (item: ToastItem) => string;
     /** Kapat butonunun `aria-label`'ı — toast'ın kendi başlığıyla birleştirilir. Verilmezse `MF_TOAST_LABELS`. */
     readonly dismissLabel: _angular_core.InputSignal<string | undefined>;
@@ -91,4 +117,4 @@ declare class ToastHost {
 }
 
 export { ToastHost, ToastService };
-export type { ToastAction, ToastItem, ToastOptions, ToastPosition, ToastTone, ToastType };
+export type { ToastAction, ToastItem, ToastOptions, ToastPosition, ToastPromiseMessages, ToastTone, ToastType };

package/types/mesgflow-ui-kit-tooltip.d.ts

@@ -15,11 +15,11 @@ type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
  * </ng-template>
  * ```
  *
- * Düz metin YOLU (ayrı bir Angular component/`ComponentPortal` kurmadan) ham
- * bir DOM node'u ile çiziliyor — statik metin için fazla makine olurdu.
- * Şablon YOLU `TemplatePortal` kullanır (gerçek Angular içeriği — binding/
- * directive/başka bir bileşen barındırabilir), bunun için `ViewContainerRef`
- * gerekiyor.
+ * Erişilebilirlik: balon açıkken tetikleyiciye `aria-describedby` eklenir
+ * (tetikleyicinin `aria-label`'ı balon metniyle AYNIYSA eklenmez — ekran
+ * okuyucu aynı cümleyi iki kez okumasın). Konum ortak `overlayPositions()`
+ * üreticisinden gelir: balon tetikleyiciden dışarı doğru büyür, taşmada
+ * karşı tarafa çevrilir.
  */
 declare class Tooltip implements OnDestroy {
     /** Boş string verilirse (ve `mfTooltipContent` de yoksa) tooltip tamamen devre dışı kalır (ör. koşullu etiketler için). */
@@ -30,6 +30,7 @@ declare class Tooltip implements OnDestroy {
     private readonly overlay;
     private readonly elementRef;
     private readonly viewContainerRef;
+    private readonly bubbleId;
     private overlayRef?;
     private bubbleEl?;
     private showHandle?;
@@ -37,16 +38,18 @@ declare class Tooltip implements OnDestroy {
     protected show(): void;
     /**
      * Public: `SearchInput` gibi, kendi state değişimiyle tooltip'i ANINDA
-     * kapatmak isteyen tüketiciler için (bkz. search-input.ts `expand()`) —
-     * BİLEREK senkron: tooltip hover/focus/Escape gibi yüksek frekanslı,
-     * anlık etkileşimlerle kapanıyor, `Popover`'ın gecikmeli-dispose deseni
-     * (bkz. `popover.ts` `EXIT_MS`) burada gereksiz karmaşıklık + testlerin
-     * beklediği "blur → anında kaldırılır" sözleşmesini bozardı (bkz.
-     * `tooltip.spec.ts`). Giriş animasyonu (`show()`teki `animate-overlay-in`)
-     * yeterli — önceden tooltip'in HİÇ animasyonu yoktu (gerçek bulgu).
+     * kapatmak isteyen tüketiciler için (bkz. search-input.ts `expand()`).
+     *
+     * Erişilebilirlik ağacından ANINDA çıkar (`role`/`aria-describedby`
+     * kaldırılır — ekran okuyucu ve testler için "blur → kaldırıldı"
+     * sözleşmesi korunur), görsel balon ise `animate-overlay-out` oynatıp
+     * `exitDurationMs()` sonra dispose edilir. Yeni bir hover bu sırada yeni
+     * bir balon açabilir — eski ref bağımsız olarak kapanır.
      */
     hide(): void;
     ngOnDestroy(): void;
+    private describe;
+    private undescribe;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tooltip, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tooltip, "[mfTooltip], [mfTooltipContent]", ["mfTooltip"], { "mfTooltip": { "alias": "mfTooltip"; "required": false; "isSignal": true; }; "mfTooltipContent": { "alias": "mfTooltipContent"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/mesgflow-ui-kit-transfer-list.d.ts

@@ -0,0 +1,34 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { ListboxOption } from '@mesgflow/ui-kit/listbox';
+
+type Side = 'left' | 'right';
+/**
+ * `<mf-transfer-list [options]="permissions" [(value)]="granted" />`
+ *
+ * İki listeli seçim (izinler, alan eşleme, sütun seçimi): solda seçilebilir,
+ * sağda seçilmiş öğeler. Her panel kendi araması ve çoklu seçimli
+ * `mf-listbox`'ı (ok tuşları, Shift+ok aralık, typeahead) ile gelir; ortadaki
+ * düğmeler işaretlileri ya da tümünü taşır. `value` sağ taraftaki değerler.
+ */
+declare class TransferList<V> {
+    readonly options: _angular_core.InputSignal<ListboxOption<V>[]>;
+    /** Sağ taraftaki (seçilmiş) değerler. */
+    readonly value: _angular_core.ModelSignal<V[]>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfTransferListLabels>;
+    protected readonly sides: Side[];
+    protected readonly query: _angular_core.WritableSignal<Record<Side, string>>;
+    protected readonly checked: _angular_core.WritableSignal<Record<Side, V[]>>;
+    protected readonly leftOptions: _angular_core.Signal<ListboxOption<V>[]>;
+    protected readonly rightOptions: _angular_core.Signal<ListboxOption<V>[]>;
+    protected readonly filtered: _angular_core.Signal<Record<Side, ListboxOption<V>[]>>;
+    protected countText(side: Side): string;
+    protected setQuery(side: Side, text: string): void;
+    protected setChecked(side: Side, values: V[]): void;
+    protected move(from: Side): void;
+    protected moveAll(from: Side): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TransferList<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TransferList<any>, "mf-transfer-list", ["mfTransferList"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { TransferList };