@mesgflow/ui-kit 0.6.0

package/types/mesgflow-ui-kit-page-header.d.ts

@@ -0,0 +1,31 @@
+import * as i0 from '@angular/core';
+import { BreadcrumbItem } from '@mesgflow/ui-kit/breadcrumb';
+
+/**
+ * `<mf-page-header title="Ekip" [breadcrumbItems]="[...]">
+ *    <div mfPageHeaderActions><button mfButton>Davet et</button></div>
+ *  </mf-page-header>`
+ *
+ * `breadcrumbItems` boşsa (varsayılan) `mf-breadcrumb` HİÇ render EDİLMEZ —
+ * tek seviyeli sayfalarda (ör. "Ayarlar") gereksiz bir tek-öğeli iz
+ * gösterilmesin diye.
+ *
+ * Yerleşim KAPSAYICI sorgusuyla (`@container`) — viewport'a değil başlığın
+ * kendi genişliğine bakar: 32rem'den dar bir kapsayıcıda (kenar çubuğu açık
+ * tablet, bölünmüş panel) aksiyonlar başlığın ALTINA iner, başlığı ezmez.
+ */
+declare class PageHeader {
+    readonly title: i0.InputSignal<string>;
+    readonly description: i0.InputSignal<string>;
+    readonly breadcrumbItems: i0.InputSignal<BreadcrumbItem[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageHeader, "mf-page-header", ["mfPageHeader"], { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "breadcrumbItems": { "alias": "breadcrumbItems"; "required": false; "isSignal": true; }; }, {}, never, ["[mfPageHeaderActions]"], true, never>;
+}
+
+/** `<div mfPageHeaderActions><button mfButton>...</button></div>` — bkz. `page-header.ts`'in JSDoc'u. */
+declare class PageHeaderActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageHeaderActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PageHeaderActions, "[mfPageHeaderActions]", never, {}, {}, never, never, true, never>;
+}
+
+export { PageHeader, PageHeaderActions };

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

@@ -0,0 +1,50 @@
+import * as _mesgflow_ui_kit_pagination from '@mesgflow/ui-kit/pagination';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-pagination [pageCount]="20" [(page)]="page" />`
+ *
+ * Tablo dışı listeler (kart ızgarası, arama sonuçları) için bağımsız sayfalama. Table'ın
+ * kendi sayfalamasıyla AYNI görsel dil: aktif sayfa nötr zemin + alt kenarda 2px marka rayı
+ * ("buradasın" motifi), dolu blok değil.
+ *
+ * Öğe sayısı sabittir (bkz. `paginationRange`) — sayfa değiştikçe düğmeler kaymaz. `compact`:
+ * sayı listesi yerine "Sayfa 3 / 20" (dar alanlar, mobil). `<nav>` landmark'ı + aktif sayfada
+ * `aria-current="page"`; sayfa düğmeleri "Page 3" gibi tam adla duyurulur; üç nokta gizlidir.
+ */
+declare class Pagination {
+    readonly page: _angular_core.ModelSignal<number>;
+    readonly pageCount: _angular_core.InputSignal<number>;
+    /** Aktif sayfanın iki yanında gösterilecek sayfa sayısı. */
+    readonly siblings: _angular_core.InputSignal<number>;
+    /** İlk/son sayfaya atlama düğmeleri. */
+    readonly showEdges: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** Verilmezse `MfLabels.pagination.navAriaLabel` — sayfada birden çok sayfalama varsa ayırt edin. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfPaginationLabels>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly safeCount: _angular_core.Signal<number>;
+    protected readonly current: _angular_core.Signal<number>;
+    protected readonly items: _angular_core.Signal<_mesgflow_ui_kit_pagination.PaginationItem[]>;
+    protected cell(active?: boolean): string;
+    protected goTo(page: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "mf-pagination", ["mfPagination"], { "page": { "alias": "page"; "required": false; "isSignal": true; }; "pageCount": { "alias": "pageCount"; "required": true; "isSignal": true; }; "siblings": { "alias": "siblings"; "required": false; "isSignal": true; }; "showEdges": { "alias": "showEdges"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; }, never, never, true, never>;
+}
+
+type PaginationItem = number | 'ellipsis-start' | 'ellipsis-end';
+/**
+ * Görünen sayfa öğeleri — SABİT uzunlukta: `2 × boundaries + 2 × siblings + 3` (sayfa sayısı
+ * bundan azsa hepsi). Böylece sayfa değiştikçe öğe sayısı oynamaz, düğmeler zıplamaz (Table
+ * sayfalamasındaki değişken uzunluklu listenin aksine). Üç nokta tek bir sayfanın yerini
+ * tutuyorsa üç nokta yerine o sayfa gösterilir (… yalnızca ≥2 sayfayı gizler).
+ *
+ * `paginationRange(6, 20)` → `[1, 'ellipsis-start', 5, 6, 7, 'ellipsis-end', 20]`
+ */
+declare function paginationRange(current: number, pageCount: number, siblings?: number, boundaries?: number): PaginationItem[];
+
+export { Pagination, paginationRange };
+export type { PaginationItem };

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

@@ -0,0 +1,33 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+/**
+ * `<mf-password-input [(value)]="password" />` — `InputGroup` üstüne kompoze
+ * edilmiş, sağda göster/gizle düğmesi taşıyan parola alanı (emsal:
+ * `NumberInput`/`DateRangePicker`'ın AYNI `mf-input-group` kabuğunu
+ * kullanma deseni). `type="password"`/`"text"` arasında geçiş SADECE
+ * görünürlük içindir — değer her zaman `value` model'inde düz metin olarak
+ * tutulur.
+ */
+declare class PasswordInput extends ValueAccessorBase<string> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly showLabel: _angular_core.InputSignal<string | undefined>;
+    readonly hideLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly passwordLabels;
+    protected readonly effectiveShowLabel: _angular_core.Signal<string>;
+    protected readonly effectiveHideLabel: _angular_core.Signal<string>;
+    protected readonly visible: _angular_core.WritableSignal<boolean>;
+    writeValue(value: string): void;
+    protected toggle(): void;
+    protected onInput(raw: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PasswordInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordInput, "mf-password-input", ["mfPasswordInput"], { "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; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { PasswordInput };

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

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+import { CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+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';
+/**
+ * `<button cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="open.set(true)">...</button>`
+ * `<mf-popover [origin]="trigger" [(open)]="open">...içerik (ng-content)...</mf-popover>`
+ *
+ * `Select`/`TableColumnsMenu`/`TableFilterMenu`/`DatePicker`'ın HER BİRİNİN
+ * ayrı ayrı yazdığı `cdkConnectedOverlay` + pozisyon dizisi + backdrop/ESC
+ * kapama iskeletini TEK yerde toplayan genel amaçlı panel primitifi (bkz.
+ * README "Yeni bir primitif gerektiğinde"). YENİ kullanım noktaları bunu
+ * kullanmalı — mevcut dört bileşenin buna taşınması BİLEREK bu değişiklikle
+ * birlikte yapılmadı: her biri kendi klavye/vurgu (highlight) mantığını
+ * Popover'ın panel içeriğiyle nasıl kompoze edeceğine karar vermeli, ayrı ve
+ * her ekranın tarayıcıda tek tek doğrulanmasını gerektiren bir iş.
+ *
+ * `origin`, CDK'nın `cdkOverlayOrigin` directive'inin `exportAs` referansı —
+ * ayrı bir wrapper directive'e gerek yok, CDK zaten sağlıyor.
+ */
+declare class Popover {
+    readonly origin: _angular_core.InputSignal<CdkOverlayOrigin>;
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly placement: _angular_core.InputSignal<PopoverPlacement>;
+    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>;
+    /** `true` ise panel tetikleyiciden DAR olamaz (min-width) — genişleyebilir, küçülemez. */
+    readonly matchTriggerWidth: _angular_core.InputSignal<boolean>;
+    readonly panelClass: _angular_core.InputSignal<string>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * `open()` MANTIKSAL durumu taşır (tüketici `[(open)]` ile doğrudan
+     * 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`
+     * 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
+     * `effect()` tabanlı bu yaklaşım gerekiyor).
+     */
+    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 classes: _angular_core.Signal<string>;
+    constructor();
+    protected close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Popover, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Popover, "mf-popover", ["mfPopover"], { "origin": { "alias": "origin"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+declare const popoverPanelVariants: (props?: ({
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PopoverPadding = VariantProps<typeof popoverPanelVariants>['padding'];
+
+export { Popover, popoverPanelVariants };
+export type { PopoverPadding, PopoverPlacement };

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

@@ -0,0 +1,32 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<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.
+ */
+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 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>;
+    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>;
+}
+
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressSize = VariantProps<typeof progressTrackVariants>['size'];
+
+export { Progress, progressTrackVariants };
+export type { ProgressSize };

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

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { MfSize } from '@mesgflow/ui-kit/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+/**
+ * `<mf-radio-group [(value)]="plan"><label><input type="radio" mfRadio
+ *   [value]="'pro'" /> Pro</label>...</mf-radio-group>`
+ *
+ * Projekte edilen `input[mfRadio]` öğeleri DI ile bu bileşene bağlanır
+ * (`Radio`'nun `inject(RadioGroup)`'u — bkz. `radio.ts`), `name`/`checked`/
+ * `disabled` GRUPTAN gelir; her `mfRadio` KENDİ `mf-radio-group` atası
+ * DIŞINDA kullanılamaz.
+ *
+ * Ok tuşu navigasyonu/roving tabindex için ÖZEL bir odak yöneticisi
+ * (`@angular/aria`'da radio pattern'i olmadığı için akla gelen CDK
+ * `FocusKeyManager`) BİLEREK YOK — hepsi AYNI native `name` attribute'unu
+ * paylaşan gerçek `<input type="radio">` öğeleri olduğu için tarayıcı bunu
+ * ZATEN ücretsiz sağlıyor (native radio grubu semantiği). Üstüne bir odak
+ * yöneticisi eklemek gerçek davranışı TEKRARLAYIP çakıştırırdı.
+ */
+declare class RadioGroup<T = unknown> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<T | null>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly orientation: _angular_core.InputSignal<RadioGroupOrientation>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private onChange;
+    private onTouched;
+    protected readonly hostClasses: _angular_core.Signal<"flex items-center gap-4" | "flex flex-col gap-2">;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    /** `Radio`'nun `(change)` işleyicisinden çağrılır — bkz. `radio.ts`. */
+    onRadioChange(value: T): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroup<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroup<any>, "mf-radio-group", ["mfRadioGroup"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * `<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`
+ * 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).
+ */
+declare class Radio<T = unknown> {
+    protected readonly group: RadioGroup<T>;
+    readonly size: _angular_core.InputSignal<MfSize>;
+    readonly value: _angular_core.InputSignal<T | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onChange(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Radio<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Radio<any>, "input[type=radio][mfRadio]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Radio, RadioGroup };
+export type { RadioGroupOrientation };

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

@@ -0,0 +1,56 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * `<mf-rating [(value)]="score" />` · salt okunur ortalama: `<mf-rating [value]="3.7" readonly />`
+ *
+ * Etkileşimli mod yerel `<input type="radio">`'lar üzerine kurulu (görsel olarak gizli): ok tuşu
+ * gezinmesi, tek sekme durağı, form davranışı tarayıcıdan gelir — `role="radiogroup"` + her
+ * yıldız "3 out of 5" gibi adlı bir radyo. Üzerine gelince önizleme; seçili yıldıza tekrar
+ * tıklamak temizler (`allowClear`). Salt okunur mod tek bir `role="img"` ("3.7 out of 5");
+ * ondalıklar yıldızın kısmen dolmasıyla gösterilir (ortalama puanlar için).
+ */
+declare class Rating extends ValueAccessorBase<number> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Seçili yıldıza tekrar tıklamak değeri 0'a çeker. */
+    readonly allowClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<number>;
+    /** Verilmezse `MfLabels.rating.ariaLabel`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfRatingLabels>;
+    protected readonly name: string;
+    protected readonly hover: _angular_core.WritableSignal<number | null>;
+    private readonly formDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly stars: _angular_core.Signal<number[]>;
+    /** Görüntülenen değer — önizleme varsa o, yoksa gerçek değer. */
+    protected readonly shown: _angular_core.Signal<number>;
+    protected readonly hostLabel: _angular_core.Signal<string>;
+    /** Yıldızın doluluk yüzdesi (0–100) — salt okunur ondalıklar için kısmi. */
+    protected fill(star: number): number;
+    protected starLabel(star: number): string;
+    /**
+     * TEK giriş noktası `click`: tarayıcı ok tuşuyla radyo seçiminde de `click` üretir. `change`
+     * ayrıca dinlenmez — seçili radyoya tıklamak `change` üretmediğinden temizleme yalnızca
+     * click'te yakalanabiliyor, ikisini birden dinlemek ise yeni seçimde çift tetiklenirdi.
+     */
+    protected choose(star: number): void;
+    /**
+     * Klavyeyle temizleme: Delete/Backspace. Seçili radyoda Space tarayıcıda `click` üretmez
+     * (radyo zaten seçili — gerçek tarayıcıda doğrulandı), bu yüzden fareyle yeniden tıklamanın
+     * klavye karşılığı ayrı bir tuş.
+     */
+    protected clear(event: Event): void;
+    protected preview(star: number | null): void;
+    writeValue(value: number | null): void;
+    setDisabledState(disabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Rating, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Rating, "mf-rating", ["mfRating"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { Rating };

package/types/mesgflow-ui-kit-scroll-area.d.ts

@@ -0,0 +1,27 @@
+import * as _angular_core from '@angular/core';
+
+type ScrollAreaOrientation = 'vertical' | 'horizontal';
+/**
+ * `<mf-scroll-area class="max-h-64"><div class="p-4">...uzun içerik...</div></mf-scroll-area>`
+ * — kenar "solma" maskesi (`mask-image`, `TabScroller`'ın AYNI tekniği —
+ * bkz. `tabs/tab-scroller.ts` — ama ok-düğmesi/`scrollByDir` YOK, burada
+ * gerek yok) kaydırılabilir olduğunu ima eder. Native scrollbar GİZLENMİYOR
+ * (`TabScroller`'ın aksine) — `tokens/color.css`'teki global
+ * `scrollbar-width:thin` sayesinde ZATEN ince/tema-uyumlu, kullanıcının
+ * scrollbar'ı GÖRMESİ genel amaçlı bir kaydırma alanında faydalı.
+ */
+declare class ScrollArea {
+    readonly orientation: _angular_core.InputSignal<ScrollAreaOrientation>;
+    private readonly elementRef;
+    private readonly vertical;
+    protected readonly canScrollStart: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollEnd: _angular_core.WritableSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    protected updateEdges(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollArea, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollArea, "mf-scroll-area", ["mfScrollArea"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ScrollArea };
+export type { ScrollAreaOrientation };

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

@@ -0,0 +1,72 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+/**
+ * `<mf-search-input [(value)]="term" [loading]="fetching()" placeholder="Ara..." />`
+ *
+ * Kapalıyken sadece bir ikon-buton genişliğinde (ikon tıklanabilir/odaklanabilir
+ * — hem mouse hem klavye ile genişliyor), odak alınca/tıklanınca genişliyor.
+ * Yazarken debounce süresi boyunca VE (varsa) dışarıdan verilen `loading`
+ * true olduğu sürece dönen bir spinner gösteriyor — "arıyor" hissi debounce
+ * bitiminde kaybolmuyor, gerçek sorgu sonucu gelene kadar sürüyor.
+ *
+ * Component (directive değil) — Field/Switch gibi gerçek iç yapı (ikon+input+
+ * temizle butonu+genişleme animasyonu) gerektiriyor (bkz. projects/ui-kit/README.md
+ * "Directive mi, component mi?").
+ */
+declare class SearchInput extends ValueAccessorBase<string> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly placeholder: _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. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly debounceMs: _angular_core.InputSignal<number>;
+    /**
+     * `false` → her zaman tam genişlikte açık, ikon tıklanabilir bir "kapı"
+     * değil (bkz. `table/table.ts` — bir VERİ TABLOSUNDA arama gizlenmez,
+     * bu bir navbar deseni; Table `[collapsible]="false"` geçiyor).
+     * Varsayılan `true` — bu bileşenin bugünkü tek gerçek davranışı, henüz
+     * başka bir tüketici yok ama gelecekte navbar/toolbar gibi dar bağlamlarda
+     * ihtiyaç olabilir diye korunuyor.
+     */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /**
+     * `true` → kutu sabit `w-64` (256px) yerine kapsayıcısının TAM genişliğinde
+     * açılır — kutunun panelin geri kalanıyla (ör. yan yana duran bir sekme
+     * listesiyle) aynı genişlikte hizalanması gereken bağlamlar için.
+     * `collapsible` ile birlikte anlamlı (`[collapsible]="false"` olmadan
+     * daralmış hâl `w-10` sabit kalır, `fullWidth` sadece GENİŞLEMİŞ genişliği
+     * değiştirir). Varsayılan `false` — navbar/toolbar'daki bugünkü sabit
+     * genişlik davranışı değişmez.
+     */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    private readonly searchInputLabels;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly effectiveTooltipLabel: _angular_core.Signal<string>;
+    protected readonly effectiveClearAriaLabel: _angular_core.Signal<string>;
+    private readonly expandedState;
+    /** `collapsible()` false ise HER ZAMAN true — genişleme mekaniği devre dışı kalır ama `expandedState` yine de "odaklanınca tooltip'i kapat" gibi yan mantık için iç durumu takip etmeye devam eder. */
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    /** `w-64`/`w-10` yerine `w-full` — bkz. `fullWidth` doc yorumu. */
+    protected readonly inputWidthClass: _angular_core.Signal<"w-full cursor-text pe-8 ps-9" | "w-64 cursor-text pe-8 ps-9" | "w-10 cursor-pointer caret-transparent pe-2 ps-9">;
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    protected readonly pending: _angular_core.WritableSignal<boolean>;
+    protected readonly showSpinner: _angular_core.Signal<boolean>;
+    private readonly inputEl;
+    private readonly tooltipRef;
+    private debounceHandle?;
+    constructor();
+    writeValue(value: string): void;
+    protected expand(): void;
+    protected collapseIfEmpty(): void;
+    protected onInput(raw: string): void;
+    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>;
+}
+
+export { SearchInput };

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

@@ -0,0 +1,54 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface SegmentedOption<T> {
+    label: string;
+    value: T;
+}
+/**
+ * `<mf-segmented-control [options]="opts" [(value)]="mode" />` — hizalama,
+ * cihaz önizlemesi gibi KISA/tek-seçimli seçenek kümeleri için. `Tabs`'tan
+ * farkı: içerik paneli YOK, sadece bir değer seçimi. ARIA/klavye (roving
+ * tabindex, ok tuşu navigasyonu) `@angular/aria/toolbar`'ın
+ * `Toolbar`/`ToolbarWidgetGroup`/`ToolbarWidget` pattern'inden geliyor —
+ * dokümantasyondaki kompozisyon şekli birebir izlendi (dıştaki `ngToolbar`,
+ * içteki `ngToolbarWidgetGroup [multi]="false"`).
+ */
+declare class SegmentedControl<T> extends ValueAccessorBase<T | null> implements ControlValueAccessor {
+    readonly options: _angular_core.InputSignal<SegmentedOption<T>[]>;
+    readonly value: _angular_core.ModelSignal<T | null>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | null | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly toolbarValue: _angular_core.Signal<T[]>;
+    protected readonly trackClasses: _angular_core.Signal<string>;
+    writeValue(value: T | null): void;
+    /**
+     * `@angular/aria/toolbar`'ın kendi widget-kayıt döngüsü, gerçek bir tıklama
+     * OLMADAN da BOŞ bir dizi ile (`values: []`) tetiklenebiliyor (gerçek bulgu
+     * — bir seçeneğe tıklarken bile araya giren, seçimle ilgisiz iç kayıt
+     * event'leri). `this.value` her event'te güncellenir (görsel durum ETKİLENMEZ,
+     * zaten `values[0]` genelde mevcut değerle AYNI), ama CVA `onChange`/`onTouched`
+     * SADECE dolu bir dizi (gerçek bir seçim) geldiğinde tetiklenir — aksi halde
+     * Reactive Forms'a sahte "null'a değişti" bildirimleri sızardı.
+     */
+    protected onToolbarValueChange(values: readonly T[]): void;
+    protected itemClasses(option: SegmentedOption<T>): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControl<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControl<any>, "mf-segmented-control", ["mfSegmentedControl"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare const segmentedTrackVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const segmentedItemVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SegmentedControlSize = VariantProps<typeof segmentedTrackVariants>['size'];
+
+export { SegmentedControl, segmentedItemVariants, segmentedTrackVariants };
+export type { SegmentedControlSize, SegmentedOption };

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

@@ -0,0 +1,89 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface SelectOption<T> {
+    label: string;
+    value: T;
+}
+/**
+ * `<mf-select [options]="opts" [(value)]="chosen" placeholder="Seç" />`
+ * (tek-seçimli, varsayılan) veya `<mf-select multiple [options]="opts"
+ * [(values)]="chosen" />` (çoklu-seçim — tetikleyici seçilenleri Chip
+ * özeti olarak gösterir, bir seçeneğe tıklamak paneli KAPATMAZ, tekrar
+ * tıklamak seçimi KALDIRIR).
+ *
+ * `multiple` AÇIKKEN `value`/`(valueChange)` KULLANILMAZ — ayrı bir
+ * `values: model<T[]>` var (bkz. aşağıda). İkisini AYIRMANIN sebebi:
+ * `value`'nun TİPİNİ (`T | null`) tek-seçimli kullanım için DEĞİŞTİRMEDEN
+ * bırakmak — mevcut tüm `[(value)]="tekTip"` tüketicileri (Table'ın alan/
+ * operatör/sayfa-boyutu seçicileri, TableFilterBar'ın VE/VEYA seçicisi)
+ * BİREBİR aynı tipte kalıyor, çoklu-seçim EKLENTİ, DEĞİŞİKLİK değil.
+ *
+ * Bu kitin ilk overlay tabanlı primitifi — native `<select>` değil,
+ * çünkü açılır panelin kendisi (arka plan/kenarlık/hover rengi) native
+ * `<select>` popup'ında tarayıcı-bağımlı ve stillenemez kalıyordu; CDK Overlay
+ * + kendi listbox'ımız panel dahil her pikseli bizim token sistemimizle
+ * boyayabiliyor. `@angular/cdk` zaten bağımlı, ek paket gerekmedi — pozisyonlama
+ * CSS'i `styles.css`'teki resmi `@angular/cdk/overlay-prebuilt.css`
+ * import'undan geliyor (bkz. o import'un yanındaki not).
+ *
+ * Arama/virtual-scroll YOK — Table'ın alan/operatör/sayfa-boyutu
+ * seçicileri gibi kısa listeler için kasıtlı olarak minimal.
+ */
+declare class Select<T> implements ControlValueAccessor {
+    readonly options: _angular_core.InputSignal<SelectOption<T>[]>;
+    readonly value: _angular_core.ModelSignal<T | null>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** SADECE `multiple=true`'da kullanılır — bkz. sınıf üstündeki JSDoc. */
+    readonly values: _angular_core.ModelSignal<T[]>;
+    readonly maxVisibleChips: _angular_core.InputSignal<number>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null | undefined>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private onChange;
+    private onTouched;
+    private readonly selectLabels;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly highlighted: _angular_core.WritableSignal<number>;
+    protected readonly triggerClasses: _angular_core.Signal<string>;
+    protected readonly selectedLabel: _angular_core.Signal<string>;
+    protected readonly selectedOptions: _angular_core.Signal<SelectOption<T>[]>;
+    protected readonly visibleChips: _angular_core.Signal<SelectOption<T>[]>;
+    protected readonly overflowChipCount: _angular_core.Signal<number>;
+    protected toggle(): void;
+    protected close(): void;
+    /** Tek-seçimli modda seçeneği commit eder VE paneli kapatır; çoklu-seçim modunda `toggleValue`'ya devreder (panel AÇIK kalır — bkz. `toggleValue`). */
+    protected select(option: SelectOption<T>): void;
+    /** Çoklu-seçimde bir değeri ekler/çıkarır — panel KAPANMAZ, kullanıcı birden fazla seçim yapabilir (Escape/dışarı tıklama ile kapatır). */
+    private toggleValue;
+    writeValue(value: T | T[] | null): void;
+    registerOnChange(fn: (value: T | T[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected isSelected(option: SelectOption<T>): boolean;
+    protected optionClasses(option: SelectOption<T>, index: number): string;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select<any>, "mf-select", ["mfSelect"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "values": "valuesChange"; }, never, never, true, never>;
+}
+
+/**
+ * Bkz. `core/recipes.ts` `controlSurface` — aynı kabuk, tetikleyici bir
+ * <button>'a uygulanıyor. `focus:border-accent` — Input/Combobox'ın ZATEN
+ * sahip olduğu odak kenarlığı burada eksikti (gerçek bulgu): odaklı bir
+ * select yalnızca outline ile belli oluyordu, kenarlık aksanlanmıyordu.
+ */
+declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SelectSize = VariantProps<typeof selectTriggerVariants>['size'];
+type SelectHasError = VariantProps<typeof selectTriggerVariants>['hasError'];
+
+export { Select, selectTriggerVariants };
+export type { SelectHasError, SelectOption, SelectSize };