@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -1,9 +1,17 @@
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
-import { CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { MfPlacement } from '@mesgflow/ui-kit/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
-type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top' | 'bottom' | 'left' | 'right' | 'right-start';
+/**
+ * Tüm `MfPlacement` değerleri — `left`/`right` MANTIKSAL (RTL'de çevrilir).
+ * `right-start`: tetikleyicinin ÜSTÜYLE hizalı (Sidebar daraltılmış nav
+ * flyout'u gibi çok satırlı panellerde `right`in dikey ortalaması paneli
+ * beklenmedik yönde kaydırır), 8px boşlukla.
+ */
+type PopoverPlacement = MfPlacement;
 /**
  * `<button cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="open.set(true)">...</button>`
  * `<mf-popover [origin]="trigger" [(open)]="open">...içerik (ng-content)...</mf-popover>`
@@ -23,7 +31,7 @@ type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
 declare class Popover {
     readonly origin: _angular_core.InputSignal<CdkOverlayOrigin>;
     readonly open: _angular_core.ModelSignal<boolean>;
-    readonly placement: _angular_core.InputSignal<PopoverPlacement>;
+    readonly placement: _angular_core.InputSignal<MfPlacement>;
     readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
     /** Backdrop şeffaf ama TIKLANABİLİR — dışarı tıklayınca kapanması için var, görsel karartma YOK. */
     readonly hasBackdrop: _angular_core.InputSignal<boolean>;
@@ -36,7 +44,7 @@ declare class Popover {
      * yazabilir — ör. `Select`'in bir seçenek tıklamasında `this.open.set(false)`
      * çağırması). `attached()` ise CDK'ya bağlanan GERÇEK durum: `open()`
      * `false`'a düştüğünde panel ANINDA kaldırılmaz, `closing` işaretlenip
-     * `animate-overlay-out` oynatılır, `EXIT_MS` sonra `attached` da `false`
+     * `animate-overlay-out` oynatılır, `exitDurationMs()` sonra `attached` da `false`
      * olur. Bu ikili, `DialogService.open()`'daki `closePredicate` gecikmesiyle
      * AYNI doktrini CDK Overlay tarafında uyguluyor (CDK'nın `cdkConnectedOverlay`'i
      * Dialog'un aksine bir "kapanışı ertele" kancası SUNMUYOR, bu yüzden
@@ -45,7 +53,7 @@ declare class Popover {
     protected readonly attached: _angular_core.WritableSignal<boolean>;
     protected readonly closing: _angular_core.WritableSignal<boolean>;
     private exitTimer?;
-    protected readonly positions: _angular_core.Signal<ConnectedPosition[]>;
+    protected readonly positions: _angular_core.Signal<_angular_cdk_overlay.ConnectedPosition[]>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     protected close(): void;

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

@@ -1,32 +1,53 @@
 import * as _angular_core from '@angular/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
+type ProgressVariant = 'linear' | 'ring';
+type ProgressTone = Exclude<MfTone, 'neutral'>;
 /**
- * `<mf-progress [value]="42" />` (belirlenmiş) veya `<mf-progress
- * indeterminate />` (belirsiz — yükleme/tarama gibi süresi bilinmeyen
- * işlemler). `animate-progress-slide` keyframe'i `Table`'ın `showStaleOverlay`
- * şeridiyle AYNI (tokens.css'te tek tanım, bkz. table.html) — iki yerde ayrı
- * ayrı animasyon TANIMLANMADI.
+ * `<mf-progress [value]="42" />` · `<mf-progress indeterminate />` ·
+ * `<mf-progress variant="ring" [value]="72" showValue />`
+ *
+ * - `linear` (varsayılan): ince çubuk; belirsiz modda kayan şerit
+ *   (`animate-progress-slide`, Table'ın yenileme göstergesiyle aynı).
+ * - `ring`: dairesel gösterge — `stroke-dashoffset` geçişiyle akıcı dolar,
+ *   belirsiz modda döner (`animate-spin-slow`). `showValue` ortada yüzdeyi yazar.
+ * - `tone`: dolgu rengi (kota uyarısı, hata vb.).
+ *
+ * `role="progressbar"` + `aria-valuenow` (belirsizde yazılmaz) host'ta.
  */
 declare class Progress {
     readonly value: _angular_core.InputSignal<number>;
-    readonly indeterminate: _angular_core.InputSignal<boolean>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | null | undefined>;
-    /** `role="progressbar"` için ARIA gerektirdiği erişilebilir ad — bağlamına göre (ör. "Loading", "File upload") override edilmeli; verilmezse `MF_PROGRESS_LABELS`. */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<ProgressVariant>;
+    readonly tone: _angular_core.InputSignal<ProgressTone>;
+    /** Yalnızca `ring`: ortada yüzde metni. */
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `role="progressbar"` için erişilebilir ad — verilmezse `MF_PROGRESS_LABELS`. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     private readonly progressLabels;
     protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
     protected readonly clampedValue: _angular_core.Signal<number>;
-    protected readonly trackClasses: _angular_core.Signal<string>;
+    protected readonly ring: _angular_core.Signal<{
+        size: number;
+        stroke: number;
+    }>;
+    protected readonly radius: _angular_core.Signal<number>;
+    protected readonly circumference: _angular_core.Signal<number>;
+    protected readonly dashOffset: _angular_core.Signal<number>;
+    protected readonly ringToneClass: _angular_core.Signal<string>;
+    protected readonly barToneClass: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "mf-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "mf-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare const progressTrackVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ProgressSize = VariantProps<typeof progressTrackVariants>['size'];
 
 export { Progress, progressTrackVariants };
-export type { ProgressSize };
+export type { ProgressSize, ProgressTone, ProgressVariant };

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

@@ -39,8 +39,8 @@ declare class RadioGroup<T = unknown> implements ControlValueAccessor {
 
 /**
  * `<input type="radio" mfRadio [value]="'pro'" />` — `Checkbox` (bkz.
- * checkbox.ts) ile AYNI "native accent-color" deseni, `rounded-full` dışında
- * fark yok. Bir `mf-radio-group` ATASI ZORUNLU — `name`/`checked`/`disabled`
+ * checkbox.ts) ile AYNI desen — native input + `mf-radio` görsel katmanı
+ * (styles/tokens/controls.css, yay eğrisiyle büyüyen nokta). Bir `mf-radio-group` ATASI ZORUNLU — `name`/`checked`/`disabled`
  * DI ile ondan okunur (bkz. `radio-group.ts`'in JSDoc'u); grup dışında
  * kullanılırsa `inject(RadioGroup)` hata fırlatır (fail-fast).
  */

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

@@ -18,6 +18,8 @@ import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
 declare class SearchInput extends ValueAccessorBase<string> implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** İç `<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 | undefined>;
     readonly tooltipLabel: _angular_core.InputSignal<string | undefined>;
     /** Tüketicinin gerçek veri çekme durumu — debounce bittikten sonra da spinner'ı sürdürür. */
@@ -66,7 +68,7 @@ declare class SearchInput extends ValueAccessorBase<string> implements ControlVa
     protected clear(): void;
     protected onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchInput, "mf-search-input", ["mfSearchInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltipLabel": { "alias": "tooltipLabel"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchInput, "mf-search-input", ["mfSearchInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltipLabel": { "alias": "tooltipLabel"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { SearchInput };

package/types/mesgflow-ui-kit-segmented-control.d.ts

@@ -16,6 +16,10 @@ interface SegmentedOption<T> {
  * `Toolbar`/`ToolbarWidgetGroup`/`ToolbarWidget` pattern'inden geliyor —
  * dokümantasyondaki kompozisyon şekli birebir izlendi (dıştaki `ngToolbar`,
  * içteki `ngToolbarWidgetGroup [multi]="false"`).
+ *
+ * Seçili parça core'un `[mfSlidingIndicator]`'ıyla (Tabs ile aynı motor) yay
+ * eğrisiyle kayar; aria/toolbar seçili öznitelik vermediği için hedef
+ * `data-selected`.
  */
 declare class SegmentedControl<T> extends ValueAccessorBase<T | null> implements ControlValueAccessor {
     readonly options: _angular_core.InputSignal<SegmentedOption<T>[]>;

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

@@ -41,7 +41,7 @@ declare const sidebarVariants: (props?: ({
  * yoksa 2px'lik ray aktifleşirken satırın geri kalanı kayardı (layout shift).
  *
  * Brand sınıfları (`group-data-[appearance=brand]/sidebar:…`) özgüllükte
- * (0,2,0) — düz `text-fg-muted`/`hover:bg-surface-alt` (0,1,0) ve `dark:`
+ * (0,2,0) — düz `text-fg-muted`/`hover:bg-state-hover` (0,1,0) ve `dark:`
  * (0,1,0) varyantlarının HER İKİSİNİ de cascade sırasından bağımsız yener,
  * bu yüzden ayrı bir `dark:` ikizi yazmaya gerek yok (brand görünümü iki
  * modda da AYNI).

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

@@ -37,4 +37,63 @@ declare const sliderHostVariants: (props?: ({
     disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
-export { Slider, sliderHostVariants };
+type RangeValue = readonly [number, number];
+type Thumb = 0 | 1;
+/**
+ * `<mf-range-slider [(value)]="price" [min]="0" [max]="1000" [step]="10" ariaLabel="Fiyat" />`
+ *
+ * İki tutamaçlı aralık seçici — WAI-ARIA APG "Multi-Thumb Slider" deseni:
+ * her tutamaç KENDİ `role="slider"` öğesidir ve sınırları diğerine bağlıdır
+ * (alt tutamacın `aria-valuemax`'ı üst tutamacın değeri, tersi de öyle) —
+ * ekran okuyucu aralığı doğru anlar, tutamaçlar birbirinin üstünden geçemez.
+ *
+ * - Klavye: ok tuşları adım, PageUp/PageDown 10 adım, Home/End sınır. RTL'de
+ *   yatay oklar görsel yöne göre çevrilir.
+ * - Pointer: iz üzerinde herhangi bir yere basınca EN YAKIN tutamaç oraya
+ *   atlar ve sürüklenir.
+ * - `showValue`: odak/sürükleme sırasında tutamacın üstünde değer balonu
+ *   (`valueFormatter` ile biçimlenir; aynı metin `aria-valuetext` olur).
+ * - `minDistance`: iki tutamaç arasındaki en küçük fark.
+ */
+declare class RangeSlider extends ValueAccessorBase<RangeValue> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<RangeValue>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly step: _angular_core.InputSignal<number>;
+    /** İki tutamaç arasındaki en küçük fark (adım biriminde değil, değer biriminde). */
+    readonly minDistance: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Değer balonu ve `aria-valuetext` biçimi — ör. `v => '$' + v`. */
+    readonly valueFormatter: _angular_core.InputSignal<(value: number) => string>;
+    /** Grup için erişilebilir ad; tutamaç adları `"{ad} — en az/en çok"` olarak türetilir. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Tutamaç adlarını tamamen ezmek için (i18n). */
+    readonly minThumbLabel: _angular_core.InputSignal<string | undefined>;
+    readonly maxThumbLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly thumbs: Thumb[];
+    protected readonly thumbClass: string;
+    protected readonly active: _angular_core.WritableSignal<Thumb | null>;
+    protected readonly focused: _angular_core.WritableSignal<Thumb | null>;
+    private readonly host;
+    protected readonly percents: _angular_core.Signal<readonly [number, number]>;
+    private readonly labels;
+    private readonly thumbName;
+    protected readonly minLabel: _angular_core.Signal<string>;
+    protected readonly maxLabel: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected format(value: number): string;
+    writeValue(value: RangeValue | null): void;
+    private snap;
+    private setThumb;
+    protected onKeydown(event: KeyboardEvent, thumb: Thumb): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    private rawFromPointer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RangeSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RangeSlider, "mf-range-slider", ["mfRangeSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "minDistance": { "alias": "minDistance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "minThumbLabel": { "alias": "minThumbLabel"; "required": false; "isSignal": true; }; "maxThumbLabel": { "alias": "maxThumbLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { RangeSlider, Slider, sliderHostVariants };
+export type { RangeValue };

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

@@ -0,0 +1,103 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+
+interface SortableMove {
+    previousIndex: number;
+    currentIndex: number;
+}
+/**
+ * `<mf-sortable-list [(items)]="tasks" [itemLabel]="labelOf">
+ *    <ng-template let-task>{{ task.title }}</ng-template>
+ *  </mf-sortable-list>`
+ *
+ * Sürükle-bırak ile yeniden sıralanan liste — CDK drag-drop üstüne ERİŞİLEBİLİR
+ * klavye modu eklenir (CDK'da yok): tutamaca odaklan → Boşluk/Enter ile al →
+ * ↑/↓ taşı → Boşluk/Enter bırak · Escape geri al. Her adım `LiveAnnouncer`
+ * ile duyurulur (WCAG 2.1.1 — sürükle-bırakın klavye eşdeğeri).
+ *
+ * `itemLabel`: duyurular ve tutamaç adı için öğenin okunur adı.
+ */
+declare class SortableList<T> {
+    readonly items: _angular_core.ModelSignal<T[]>;
+    /** Duyurular ve tutamaç adı için okunur ad. */
+    readonly itemLabel: _angular_core.InputSignal<(item: T) => string>;
+    readonly trackBy: _angular_core.InputSignal<(item: T, index: number) => unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly moved: _angular_core.OutputEmitterRef<SortableMove>;
+    protected readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfSortableLabels>;
+    protected readonly hintId: string;
+    protected readonly grabbed: _angular_core.WritableSignal<number | null>;
+    private readonly announcer;
+    private readonly host;
+    private grabStart;
+    protected handleLabel(item: T): string;
+    protected onDrop(event: CdkDragDrop<T[]>): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    protected cancelOnBlur(): void;
+    private commit;
+    /** Taşıma sonrası `@for` DOM'u yeniden sıraladığında odağı taşınan tutamakta tut. */
+    private refocus;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SortableList<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SortableList<any>, "mf-sortable-list", ["mfSortableList"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "moved": "moved"; }, ["template"], never, true, never>;
+}
+
+interface KanbanColumn<T> {
+    id: string;
+    title: string;
+    items: T[];
+    /** Sütun başlığındaki nokta rengi. */
+    tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'help';
+    /** WIP sınırı — aşılınca sayaç uyarı tonuna döner. */
+    limit?: number;
+}
+interface KanbanMove<T> {
+    item: T;
+    from: string;
+    to: string;
+    index: number;
+}
+/**
+ * `<mf-kanban [(columns)]="board" [itemLabel]="titleOf" (moved)="save($event)">
+ *    <ng-template let-card>…kart içeriği…</ng-template>
+ *  </mf-kanban>`
+ *
+ * Sütunlar arası sürükle-bırak (CDK `cdkDropListGroup`) + klavye modu:
+ * karta odaklan → Boşluk/Enter al → ↑/↓ sütun içinde, ←/→ sütunlar arası →
+ * Boşluk/Enter bırak · Escape geri al. Her adım ekran okuyucuya duyurulur.
+ * Sütunlar yatay kaydırılır (mobilde de kullanılabilir).
+ */
+declare class Kanban<T> {
+    readonly columns: _angular_core.ModelSignal<KanbanColumn<T>[]>;
+    readonly itemLabel: _angular_core.InputSignal<(item: T) => string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly moved: _angular_core.OutputEmitterRef<KanbanMove<T>>;
+    protected readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfSortableLabels>;
+    protected readonly hintId: string;
+    private readonly grabbed;
+    private grabOrigin;
+    private readonly announcer;
+    private readonly host;
+    protected dot(column: KanbanColumn<T>): string;
+    protected isGrabbed(c: number, i: number): boolean;
+    protected onDrop(event: CdkDragDrop<string>): void;
+    protected onKeydown(event: KeyboardEvent, c: number, i: number): void;
+    private move;
+    private transfer;
+    private say;
+    private focusCard;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Kanban<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Kanban<any>, "mf-kanban", ["mfKanban"], { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "moved": "moved"; }, ["template"], never, true, never>;
+}
+
+/** `'{item} moved to {position}'` gibi şablonları doldurur. */
+declare function fillTemplate(template: string, values: Record<string, string | number>): string;
+/** Diziden bir öğeyi taşır — yeni dizi döner (orijinal değişmez). */
+declare function moveItem<T>(list: readonly T[], from: number, to: number): T[];
+
+export { Kanban, SortableList, fillTemplate, moveItem };
+export type { KanbanColumn, KanbanMove, SortableMove };

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

@@ -4,15 +4,12 @@ import { MfSize, MfTone } from '@mesgflow/ui-kit/core';
 type SpinnerSize = 'xs' | MfSize;
 type SpinnerTone = MfTone | 'current';
 /**
- * `<mf-spinner size="sm" />` — dönen yüklenme göstergesi. Ayrı bir SVG/CSS
- * animasyonu ÇİZMEK yerine kitin zaten her yerde kullandığı `progress_activity`
- * Material Symbol'ü + `animate-spin` deseni tekrar kullanılıyor (bkz.
- * `ConfirmDialog`'un onay butonu) — tüm "yükleniyor" göstergeleri tek bir
- * görsel dil konuşuyor.
+ * `<mf-spinner size="sm" />` — dönen yüklenme göstergesi: iki katmanlı SVG
+ * halka (soluk iz + dönen yay). v0.7 öncesi Material Symbols ligature'ıydı —
+ * font yüklenene kadar "progress_activity" METNİ görünüyordu (FOUT) ve
+ * ikon seti değişince (Lucide) kırılıyordu; SVG her ikisinden bağımsız.
  *
- * `role="status"` + `aria-label` HOST'ta (ikonun kendisi `Icon` directive'i
- * gereği her zaman `aria-hidden` — bkz. icon.ts) — ekran okuyucu ligature
- * kaynak metnini ("progress_activity") DEĞİL, buradaki anlamlı etiketi anons eder.
+ * `role="status"` + `aria-label` HOST'ta, SVG `aria-hidden`.
  */
 declare class Spinner {
     readonly size: _angular_core.InputSignal<SpinnerSize>;

package/types/mesgflow-ui-kit-split-button.d.ts

@@ -0,0 +1,47 @@
+import * as _angular_core from '@angular/core';
+
+interface SplitButtonItem<V = string> {
+    label: string;
+    value: V;
+    icon?: string;
+    disabled?: boolean;
+    /** Tehlikeli eylem (Sil) — kırmızı metin. */
+    danger?: boolean;
+}
+/**
+ * `<mf-split-button label="Kaydet" [items]="more" (primaryClick)="save()" (itemSelect)="run($event)" />`
+ *
+ * Birincil eylem + ilgili ikincil eylemler menüsü (GitHub "Merge ▾", Gmail
+ * "Gönder ▾"). İki gerçek düğme: soldaki eylemi çalıştırır, sağdaki
+ * (`aria-haspopup="menu"`) menüyü açar — ekran okuyucu ikisini ayrı duyurur.
+ *
+ * Menü `@angular/aria/menu` (ok tuşları, typeahead, Escape) + `mf-popover`
+ * (tetikleyiciden büyüyen panel). Öğeler VERİ olarak verilir: `mfMenuItem`
+ * içerik projeksiyonuyla aria menüsüne bağlanamadığı için bu bileşen onları
+ * kendi şablonunda çizer.
+ */
+declare class SplitButton<V = string> {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly items: _angular_core.InputSignal<SplitButtonItem<V>[]>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly tone: _angular_core.InputSignal<"primary" | "neutral" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
+    readonly appearance: _angular_core.InputSignal<"filled" | "soft" | "outlined" | "ghost" | "text" | "link" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Menü düğmesinin erişilebilir adı — verilmezse `MF_SPLIT_BUTTON_LABELS`. */
+    readonly menuLabel: _angular_core.InputSignal<string | undefined>;
+    readonly primaryClick: _angular_core.OutputEmitterRef<void>;
+    readonly itemSelect: _angular_core.OutputEmitterRef<V>;
+    private readonly labels;
+    protected readonly effectiveMenuLabel: _angular_core.Signal<string>;
+    /** Bitişik iki düğme: iç köşeler kare, ayırıcı çizgi (dolu görünümde açık ton). */
+    protected readonly primaryClass: _angular_core.Signal<string>;
+    protected readonly toggleClass: _angular_core.Signal<string>;
+    protected onSelect(value: V): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitButton<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitButton<any>, "mf-split-button", ["mfSplitButton"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "primaryClick": "primaryClick"; "itemSelect": "itemSelect"; }, never, never, true, never>;
+}
+
+export { SplitButton };
+export type { SplitButtonItem };

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 /**
  * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`
@@ -37,4 +38,66 @@ declare class Splitter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Splitter, "mf-splitter", ["mfSplitter"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "initialSplit": { "alias": "split"; "required": false; "isSignal": true; }; }, {}, never, ["[splitterPane1]", "[splitterPane2]"], true, never>;
 }
 
-export { Splitter };
+declare class Panel {
+    /** % */
+    readonly minSize: _angular_core.InputSignal<number>;
+    /** % */
+    readonly maxSize: _angular_core.InputSignal<number>;
+    /** Grup tarafından yazılır (%). */
+    readonly size: _angular_core.WritableSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Panel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "mf-panel", ["mfPanel"], { "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * `<mf-panel-group [(sizes)]="layout" orientation="horizontal">
+ *    <mf-panel [minSize]="15">Gezgin</mf-panel>
+ *    <mf-panel-resizer />
+ *    <mf-panel>Editör</mf-panel>
+ *    <mf-panel-resizer />
+ *    <mf-panel [minSize]="20">Önizleme</mf-panel>
+ *  </mf-panel-group>`
+ *
+ * N panelli yeniden boyutlandırma (IDE/e-posta editörü düzeni). `sizes`
+ * yüzde dizisi (toplam 100); her ayırıcı iki komşu paneli etkiler.
+ * Ayırıcı WAI-ARIA "Window Splitter": `role="separator"` + `aria-valuenow`
+ * (sol panelin yüzdesi) + ok tuşları (Shift ile 10), Home/End, çift tık eşitler.
+ * `minSize`/`maxSize` panel başına sınır. `sizes` verilmezse eşit bölünür.
+ */
+declare class PanelGroup {
+    readonly sizes: _angular_core.ModelSignal<number[]>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly panels: _angular_core.Signal<readonly Panel[]>;
+    readonly resizers: _angular_core.Signal<readonly PanelResizer[]>;
+    readonly host: ElementRef<HTMLElement>;
+    /** Etkin boyutlar — `sizes` panel sayısıyla uyuşmuyorsa eşit bölünmüş. */
+    readonly resolved: _angular_core.Signal<number[]>;
+    constructor();
+    /** `index` numaralı ayırıcıyı `delta` yüzde kaydırır (komşu iki panel arasında). */
+    resize(index: number, delta: number): void;
+    /** İki komşuyu eşitler (çift tık). */
+    equalize(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PanelGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelGroup, "mf-panel-group", ["mfPanelGroup"], { "sizes": { "alias": "sizes"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "sizes": "sizesChange"; }, ["panels", "resizers"], ["*"], true, never>;
+}
+declare class PanelResizer {
+    protected readonly group: PanelGroup;
+    private readonly labels;
+    private readonly el;
+    readonly index: _angular_core.WritableSignal<number>;
+    private startPos;
+    private startSize;
+    private dragging;
+    protected readonly valueNow: _angular_core.Signal<number>;
+    protected readonly valueMin: _angular_core.Signal<number>;
+    protected readonly valueMax: _angular_core.Signal<number>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onKeydown(e: Event): void;
+    protected onPointerDown(e: Event): void;
+    protected onPointerMove(e: Event): void;
+    protected onPointerUp(e: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PanelResizer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelResizer, "mf-panel-resizer", ["mfPanelResizer"], {}, {}, never, never, true, never>;
+}
+
+export { Panel, PanelGroup, PanelResizer, Splitter };

package/types/mesgflow-ui-kit-stat-tile.d.ts

@@ -39,6 +39,9 @@ declare class StatTile {
     readonly trendLabel: _angular_core.InputSignal<string>;
     protected readonly iconClasses: _angular_core.Signal<string>;
     protected readonly deltaIcon: _angular_core.Signal<string>;
+    private readonly labels;
+    /** Yön ikon ile ÇİZİLİR ama ekran okuyucuya metin olarak da söylenir. */
+    protected readonly deltaText: _angular_core.Signal<string>;
     protected readonly deltaClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "mf-stat-tile", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaDirection": { "alias": "deltaDirection"; "required": false; "isSignal": true; }; "upIsGood": { "alias": "upIsGood"; "required": false; "isSignal": true; }; "deltaCaption": { "alias": "deltaCaption"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendLabel": { "alias": "trendLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

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

@@ -1,48 +1,70 @@
 import * as _angular_core from '@angular/core';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
 
+type StepperOrientation = 'horizontal' | 'vertical';
 /**
- * `<mf-step label="Hesap" description="Bilgilerinizi girin" />` — bir
- * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı
- * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON
- * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir
- * hesaplama GEREKMEZ, saf CSS `:last-child`).
- */
-declare class Step {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    private readonly stepper;
-    protected readonly index: number;
-    protected readonly isComplete: _angular_core.Signal<boolean>;
-    protected readonly isCurrent: _angular_core.Signal<boolean>;
-    protected readonly hostClasses: _angular_core.Signal<string>;
-    protected circleClasses(): string;
-    protected labelClasses(): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Step, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Step, "mf-step", ["mfStep"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/**
- * `<mf-stepper [current]="1"><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
+ * `<mf-stepper [(current)]="step" clickable linear><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
+ *
+ * İlerleme göstergesi + (isteğe bağlı) gezinme:
+ * - `current` iki yönlü model; `next()` / `prev()` / `goTo(i)` programatik API
+ *   (`#stepper="mfStepper"` ile şablondan çağrılır).
+ * - `clickable`: adımlar düğme olur, tıklayınca o adıma gider.
+ * - `linear`: yalnızca tamamlanmış adımlara ve BİR sonraki adıma gidilebilir
+ *   (sihirbazın atlanmasını önler).
+ * - `orientation="vertical"`: dikey düzen (uzun sihirbazlar, yan panel).
  *
- * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma
- * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler
- * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez
- * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası
- * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel
- * bir tip bağımlılığı kurulmuyor).
+ * Her `mf-step` kendi index'ini kuruluşta `registerStep()` ile alır — `Step`
+ * `Stepper`'ı import eder, tersi değil (döngüsel bağımlılık yok).
  */
 declare class Stepper {
-    readonly current: _angular_core.InputSignal<number>;
+    readonly current: _angular_core.ModelSignal<number>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
-    private readonly stepperLabels;
+    readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly orientation: _angular_core.InputSignal<StepperOrientation>;
+    readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfStepperLabels>;
     protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
-    private nextIndex;
+    private readonly count;
+    /** Kayıtlı adım sayısı. */
+    readonly stepCount: _angular_core.Signal<number>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
     /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */
     registerStep(): number;
     isComplete(index: number): boolean;
     isCurrent(index: number): boolean;
+    canGoTo(index: number): boolean;
+    goTo(index: number): void;
+    next(): void;
+    prev(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Stepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Stepper, "mf-stepper", ["mfStepper"], { "current": { "alias": "current"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Stepper, "mf-stepper", ["mfStepper"], { "current": { "alias": "current"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; }, never, ["*"], true, never>;
+}
+
+type StepState = 'auto' | 'completed' | 'error';
+/**
+ * `<mf-step label="Hesap" description="Bilgilerinizi girin" [state]="'error'" optional />`
+ * — bir `mf-stepper` ATASI ZORUNLU. Bağlayıcı çizgi kendi `::after`'ı
+ * (`last:after:hidden` son adımda gizler).
+ *
+ * `clickable` stepper'da adım bir `<button>` olur (gidilemeyen adımlar
+ * devre dışı). Durum ikonları ekran okuyucuya metinle de söylenir.
+ */
+declare class Step {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    /** `auto`: current'a göre; `completed`/`error` elle zorlanır (doğrulama hatası vb.). */
+    readonly state: _angular_core.InputSignal<StepState>;
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly stepper: Stepper;
+    protected readonly index: number;
+    protected readonly isCurrent: _angular_core.Signal<boolean>;
+    protected readonly resolvedState: _angular_core.Signal<StepState>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected circleClasses(): string;
+    protected labelClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Step, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Step, "mf-step", ["mfStep"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { Step, Stepper };
+export type { StepState, StepperOrientation };

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

@@ -489,6 +489,8 @@ declare class Table<T> {
      */
     protected onSortClick(column: TableColumn<T>, event?: MouseEvent): void;
     protected sortDirectionFor(field: string): SortDirection | null;
+    /** WAI-ARIA `aria-sort` — ekran okuyucu sütunun sıralama yönünü duyurur (yalnızca sıralanabilir sütunlarda). */
+    protected ariaSortFor(field: string): 'ascending' | 'descending' | 'none';
     /** 1 tabanlı sıra konumu — yalnızca 2+ alan aktifken gösterilir (tekil sıralamada numara gürültü olurdu). */
     protected sortOrderFor(field: string): number | null;
     protected onFiltersChange(filters: AppliedFilter[]): void;