@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,242 @@
+import * as _angular_core from '@angular/core';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+
+/**
+ * Kategorik grafik renkleri — `color.css`'in `--mf-chart-1..8` rol token'larına SABİT sıralı
+ * referans (dataviz doktrini: "Assign categorical hues in fixed order, never cycled"). Sekiz
+ * slotun sırası CVD güvenlik mekanizmasıdır (bkz. color.css yorumu — `validate_palette.js` ile
+ * iki modda doğrulandı); 9. ve sonraki seriler ASLA döngüye girip 1. seriyle aynı rengi almaz,
+ * nötr "Diğer" (`chart-other`) rengine düşer — tüketici o serileri tek bir "Diğer"de toplamalı
+ * veya küçük çoklulara bölmeli.
+ *
+ * Renk VARLIĞI izler, sırasını DEĞİL: bir filtre seri sayısını değiştirdiğinde kalan seriler
+ * yeniden boyanmasın diye tüketici `slot`'u varlığa bağlı SABİT bir değerden türetmeli (ör. seri
+ * tanımındaki `colorIndex`), o anki dizideki pozisyondan değil.
+ *
+ * Class isimleri TAM/LİTERAL string — Tailwind'in JIT tarayıcısı çalışma zamanında birleştirilen
+ * (`` `fill-chart-${n}` ``) isimleri göremez. Tema utility'leri (`fill-chart-1`) değeri
+ * `var(--mf-chart-1)` olarak GÖMER — `--color-chart-*` takma adının `:root`'tan budanmasından
+ * etkilenmez (bkz. color.css / `docs/tr/mimari.md` "@theme inline" notu).
+ */
+declare const MF_CHART_SLOT_COUNT = 8;
+/** SVG dolgu (bar/alan/nokta). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+declare function chartFillClass(slot: number): string;
+/** SVG çizgi (line/sparkline). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+declare function chartStrokeClass(slot: number): string;
+/** HTML zemin (lejant/tooltip anahtarı, BarList çubuğu). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+declare function chartBgClass(slot: number): string;
+
+/**
+ * "Temiz" eksen işaretleri — dataviz: y ekseni işaretleri yuvarlak sayılara oturur (0 / 250 /
+ * 500, asla 0 / 237 / 474). Heckbert'in "nice numbers" algoritması: aralığı 1/2/5 × 10^n
+ * adımlarına yuvarlar, dönen ilk/son işaret ölçeğin alt/üst sınırı olur (veri onların İÇİNDE).
+ * Tüm değerler aynıysa (ör. hepsi 0) ölçek çökmesin diye aralık 1 birim açılır.
+ */
+declare function niceTicks(min: number, max: number, count?: number): number[];
+
+interface BarChartPoint {
+    label: string;
+    value: number;
+}
+interface BarChartBar extends BarChartPoint {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    squareFootY: number;
+    squareFootHeight: number;
+    labelY: number;
+}
+/**
+ * `<mf-bar-chart [points]="monthly" [ariaLabel]="'Son 6 ayda katılan üyeler'" />`
+ *
+ * Tek seri, elle yazılmış inline SVG — grafik kütüphanesi eklenmedi (bu kitin
+ * "npm paketi olmayan, kaynağı elinde" doktrini). Tek seri olduğu için LEJANT yok (dataviz doktrini: "a single
+ * series needs no legend box"), değerler her çubuğun tepesinde DOĞRUDAN etiketlenir (6 nokta —
+ * "her noktayı etiketleme" uyarısının kapsamı yoğun serilere yönelik, 6 noktada tamamı okunabilir).
+ */
+declare class BarChart {
+    readonly points: _angular_core.InputSignal<BarChartPoint[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly valueFormatter: _angular_core.InputSignal<(value: number) => string>;
+    protected readonly viewBox = "0 0 300 132";
+    protected readonly baselineY = 96;
+    protected readonly fillClass: string;
+    protected readonly bars: _angular_core.Signal<BarChartBar[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChart, "mf-bar-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface BarListItem {
+    label: string;
+    value: number;
+    /**
+     * Opsiyonel SABİT kategorik slot (0-7) — aynı varlık (ör. 'Yönetici') başka bir grafikte de
+     * aynı renkle görünsün isteniyorsa. Verilmezse satır tek serinin rengini (slot 0) alır.
+     */
+    colorIndex?: number;
+}
+interface BarListRow extends BarListItem {
+    percent: number;
+    colorClass: string;
+}
+/**
+ * `<mf-bar-list [items]="roleDistribution" />`
+ *
+ * Yatay oranlı liste — TEK bir ölçünün nominal kategorileri: kimliği METİN etiketi, büyüklüğü bar
+ * uzunluğu + sayı taşır. Bu yüzden bütün çubuklar TEK serinin rengini (slot 0) alır — dataviz
+ * doktrini: nominal çubukları sıraya/değere göre renklendirmek, uzunluğun zaten gösterdiğini
+ * renkle tekrar kodlar ve "renk varlığı izler, sırasını değil" kuralını çiğner (eskiden
+ * pozisyona göre boyanıyordu — veri sırası değişince aynı rol başka renge bürünüyordu).
+ * Varlığa kalıcı bir renk bağlamak için öğe başına `colorIndex`.
+ */
+declare class BarList {
+    readonly items: _angular_core.InputSignal<BarListItem[]>;
+    readonly valueFormatter: _angular_core.InputSignal<(value: number) => string>;
+    protected readonly rows: _angular_core.Signal<BarListRow[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarList, "mf-bar-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface LineChartSeries {
+    name: string;
+    values: readonly number[];
+    /**
+     * SABİT kategorik slot (0-7). Renk VARLIĞI izlemeli — bir filtre seri sayısını değiştirince
+     * kalan seriler yeniden boyanmasın diye kalıcı bir değer verin. Verilmezse dizideki pozisyon.
+     */
+    colorIndex?: number;
+}
+interface PlotPoint {
+    x: number;
+    y: number;
+}
+interface PlotSeries {
+    name: string;
+    values: readonly number[];
+    points: PlotPoint[];
+    path: string;
+    areaPath: string;
+    strokeClass: string;
+    fillClass: string;
+    keyClass: string;
+}
+interface AxisTick {
+    value: number;
+    y: number;
+    label: string;
+}
+interface XLabel {
+    x: number;
+    text: string;
+    anchor: 'start' | 'middle' | 'end';
+}
+/**
+ * `<mf-line-chart [labels]="months" [series]="series" ariaLabel="Aylık aktif kullanıcı" area />`
+ *
+ * Çok serili çizgi / alan grafiği — elle yazılmış SVG, grafik kütüphanesi YOK (kitin bağımlılık
+ * politikası). Dataviz metoduna göre:
+ * - 2px çizgi, yuvarlak birleşim; uç noktada ≥8px işaret + 2px yüzey halkası; alan dolgusu
+ *   serinin %10'u (doygun blok değil, "yıkama").
+ * - Y ekseni temiz sayılara (`niceTicks`), ızgara 1px düz hairline; TEK eksen (çift y ekseni yok).
+ * - ≥2 seride lejant HER ZAMAN var; tek seride lejant yok (başlık seriyi adlandırır), uç değer
+ *   çizginin ucunda doğrudan etiketlenir. Metin ASLA seri rengini taşımaz.
+ * - Hover katmanı varsayılan: crosshair en yakın X'e oturur, TEK tooltip o X'teki TÜM serileri
+ *   listeler (değer önde/güçlü, seri adı ikincil, çizgi anahtarı). Klavyede aynı bilgi: odakta
+ *   ←/→/Home/End, `aria-live` ile okunur.
+ * - Tooltip hiçbir değeri KAPILAMAZ: "Tablo olarak göster" ile aynı veri HTML tablosu olarak.
+ *
+ * Genişlik kapsayıcıdan (`ResizeObserver`) okunur ve çizim gerçek piksellerle yapılır — sabit
+ * `viewBox` ölçeklemesinin aksine etiketler dar kartta küçülmez, çizgiler kalınlaşmaz.
+ */
+declare class LineChart {
+    readonly labels: _angular_core.InputSignal<readonly string[]>;
+    readonly series: _angular_core.InputSignal<readonly LineChartSeries[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly area: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly height: _angular_core.InputSignal<number>;
+    readonly valueFormatter: _angular_core.InputSignal<(value: number) => string>;
+    protected readonly i18n: _angular_core.Signal<_mesgflow_ui_kit_core.MfChartLabels>;
+    protected readonly focusRecipe = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
+    protected readonly tooltipSurface = "rounded-lg border border-hairline bg-overlay shadow-2";
+    private readonly elementRef;
+    protected readonly width: _angular_core.WritableSignal<number>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly tableView: _angular_core.WritableSignal<boolean>;
+    protected readonly single: _angular_core.Signal<boolean>;
+    protected readonly padRight: _angular_core.Signal<16 | 52>;
+    protected readonly plotBottom: _angular_core.Signal<number>;
+    protected readonly plotLeft = 44;
+    protected readonly plotRight: _angular_core.Signal<number>;
+    private readonly domain;
+    private readonly scaleY;
+    private readonly scaleX;
+    protected readonly yTicks: _angular_core.Signal<AxisTick[]>;
+    protected readonly xLabels: _angular_core.Signal<XLabel[]>;
+    /** Alan dolgusunun ve eksen çizgisinin oturduğu taban — 0 ölçekteyse 0, değilse alt sınır. */
+    protected readonly baselineY: _angular_core.Signal<number>;
+    protected readonly plotSeries: _angular_core.Signal<PlotSeries[]>;
+    protected readonly activeX: _angular_core.Signal<number | null>;
+    /** Tooltip crosshair'in sağında; grafiğin sağ yarısındaysa taşmasın diye solunda. */
+    protected readonly tooltipStyle: _angular_core.Signal<{
+        right: string;
+        left?: undefined;
+    } | {
+        left: string;
+        right?: undefined;
+    } | null>;
+    protected readonly readout: _angular_core.Signal<{
+        label: string;
+        rows: {
+            name: string;
+            keyClass: string;
+            value: string;
+        }[];
+    } | null>;
+    protected readonly liveText: _angular_core.Signal<string>;
+    protected readonly tableRows: _angular_core.Signal<{
+        label: string;
+        values: string[];
+    }[]>;
+    constructor();
+    protected toggleTable(): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onFocus(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChart, "mf-line-chart", ["mfLineChart"], { "labels": { "alias": "labels"; "required": true; "isSignal": true; }; "series": { "alias": "series"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<mf-sparkline [values]="last12" ariaLabel="Son 12 ay: 120'den 184'e" />`
+ *
+ * Eksensiz, etkileşimsiz trend glifi — StatTile'ın "trend" satırı (dataviz figür sözleşmesi:
+ * çizgi geri planda kalan tonla, GÜNCEL dönem vurgu renginde). Değerin kendisi yanındaki metinde
+ * yazdığı için hover katmanı YOK; `ariaLabel` verilmezse süs sayılır (`aria-hidden`).
+ * Gerçek piksellerle çizilir (sabit `width`/`height`) — `viewBox` ölçeklemesi uç noktayı
+ * elipse çevirirdi.
+ */
+declare class Sparkline {
+    readonly values: _angular_core.InputSignal<readonly number[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly width: _angular_core.InputSignal<number>;
+    readonly height: _angular_core.InputSignal<number>;
+    readonly area: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly geometry: _angular_core.Signal<{
+        line: string;
+        area: string;
+        end: null;
+    } | {
+        line: string;
+        area: string;
+        end: {
+            x: number;
+            y: number;
+        };
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sparkline, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sparkline, "mf-sparkline", never, { "values": { "alias": "values"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BarChart, BarList, LineChart, MF_CHART_SLOT_COUNT, Sparkline, chartBgClass, chartFillClass, chartStrokeClass, niceTicks };
+export type { BarChartPoint, BarListItem, LineChartSeries };

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

@@ -0,0 +1,17 @@
+import * as _angular_core from '@angular/core';
+import { MfSize } from '@mesgflow/ui-kit/core';
+
+/**
+ * `<input type="checkbox" mfCheckbox">` — `accent-color` (modern tarayıcı
+ * desteği) native checkbox'ın kendi tik/kutu görselini renklendiriyor, ayrı
+ * bir cva şemasına gerek yok (Switch'in aksine burada özel track+thumb
+ * görseli istemiyoruz, native checkbox görünümü + marka rengi yeterli).
+ */
+declare class Checkbox {
+    readonly size: _angular_core.InputSignal<MfSize>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Checkbox, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Checkbox, "input[type=checkbox][mfCheckbox]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Checkbox };

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

@@ -0,0 +1,46 @@
+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-chip removable (removed)="onRemove()">Rol: Yönetici</mf-chip>` — asıl
+ * içerik `<ng-content />` ile projekte edilir (ör. `TableFilterBar`'ın
+ * kendi tıklanabilir düzenleme düğmesi, bkz. `table-filter-bar.html`); Chip
+ * SADECE kabuğu (tonal dolgu + opsiyonel kaldırma düğmesi) sağlar, içeriğin
+ * kendi tıklama davranışına karışmaz.
+ */
+declare class Chip {
+    readonly tone: _angular_core.InputSignal<"neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | null | undefined>;
+    readonly selected: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly removeLabel: _angular_core.InputSignal<string | undefined>;
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    private readonly chipLabels;
+    protected readonly effectiveRemoveLabel: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onRemoveClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "mf-chip", ["mfChip"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Badge (bkz. badge.variants.ts) ile AYNI tonal işaret rol token'ı
+ * (`bg-X-tint text-X-tint-fg`) — chip Badge'in ETKİLEŞİMLİ (kaldırılabilir/
+ * seçilebilir) hali, o yüzden aynı görsel aileyi paylaşıyor. `text-eyebrow`'un
+ * mono/büyük-harf kimliği BİLEREK burada YOK — chip genelde "Rol: Yönetici"
+ * gibi okunabilir, karma büyük/küçük harfli içerik taşıyor (Badge'in kısa
+ * durum etiketlerinin aksine).
+ */
+declare const chipVariants: (props?: ({
+    tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ChipTone = VariantProps<typeof chipVariants>['tone'];
+type ChipSize = VariantProps<typeof chipVariants>['size'];
+
+export { Chip, chipVariants };
+export type { ChipSize, ChipTone };

package/types/mesgflow-ui-kit-code-block.d.ts

@@ -0,0 +1,56 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+
+/**
+ * `<mf-code-block [code]="snippet" filename="app.config.ts" language="ts" lineNumbers />`
+ *
+ * Başlık şeridi (dosya adı · dil rozeti · kopyala) yalnızca `filename`/`language` verilince
+ * çizilir; yoksa kopyala düğmesi sağ üst köşede yüzer. Kaydırma alanı odaklanabilir ve adlı bir
+ * `role="group"` (klavyeyle kaydırılabilsin — axe `scrollable-region-focusable`). `region`
+ * DEĞİL: region bir landmark; bir sayfadaki onlarca "Kod" bölgesi landmark listesini kirletip
+ * axe `landmark-unique` ihlali veriyordu (showcase rota taramasında yakalandı).
+ *
+ * Satır numaraları kaydırma alanının İÇİNDE, yatayda yapışkan (`sticky start-0`) bir oluk —
+ * dikey kaydırmada satırlarla hizalı kalır, yatayda yerinde durur; seçimle kopyalanmaz.
+ * `wrap` satır kaydırır ama numaralarla birlikte kullanılamaz (kaydırılan satır numara
+ * hizasını bozar) — ikisi birden verilirse `lineNumbers` kazanır.
+ *
+ * Vurgulama isteğe bağlı: `provideCodeHighlighter()` (bkz. `code-highlighter.ts`).
+ */
+declare class CodeBlock {
+    readonly code: _angular_core.InputSignal<string>;
+    readonly language: _angular_core.InputSignal<string | undefined>;
+    readonly filename: _angular_core.InputSignal<string | undefined>;
+    readonly lineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly copyable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Kaydırma alanının azami yüksekliği (CSS uzunluğu, ör. `'20rem'`); verilmezse sınırsız. */
+    readonly maxHeight: _angular_core.InputSignal<string | undefined>;
+    private readonly highlighter;
+    private readonly labels;
+    protected readonly hasHeader: _angular_core.Signal<boolean>;
+    protected readonly regionLabel: _angular_core.Signal<string>;
+    protected readonly highlighted: _angular_core.Signal<string | object | null>;
+    /** Sondaki satır sonu boş bir satır numarası üretmesin. */
+    protected readonly lines: _angular_core.Signal<number[]>;
+    protected readonly wraps: _angular_core.Signal<boolean>;
+    protected readonly preClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeBlock, "mf-code-block", ["mfCodeBlock"], { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Kod → vurgulanmış HTML. Dönüş `[innerHTML]` ile basılır: düz `string` Angular'ın sanitizer'ından
+ * geçer (sınıflar kalır, satır içi `style` atılır — highlight.js/Prism gibi SINIF tabanlı
+ * vurgulayıcılar olduğu gibi çalışır). Satır içi renk kullanan bir çıktıya (ör. varsayılan shiki)
+ * güveniyorsanız `DomSanitizer.bypassSecurityTrustHtml` çıktısını döndürün — sorumluluk sizde.
+ * (Tip `object`: kit `@angular/platform-browser`'a peer bağımlılık eklemesin diye `SafeHtml` yerine.)
+ */
+type MfCodeHighlighter = (code: string, language: string | undefined) => string | object;
+/** Varsayılan `null` — kit vurgulama kütüphanesi GÖMMEZ (bağımlılık politikası); düz metin. */
+declare const MF_CODE_HIGHLIGHTER: InjectionToken<MfCodeHighlighter | null>;
+/** `providers: [provideCodeHighlighter((code, lang) => hljs.highlight(code, { language: lang ?? 'plaintext' }).value)]` */
+declare function provideCodeHighlighter(highlighter: MfCodeHighlighter): Provider;
+
+export { CodeBlock, MF_CODE_HIGHLIGHTER, provideCodeHighlighter };
+export type { MfCodeHighlighter };

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

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+
+/**
+ * `<mf-collapsible [(open)]="advanced">
+ *    <button mfButton mfCollapsibleTrigger>Gelişmiş ayarlar</button>
+ *    <mf-collapsible-content>…</mf-collapsible-content>
+ *  </mf-collapsible>`
+ *
+ * Tek bir aç/kapa bölümü (WAI-ARIA "disclosure"). Birden çok bölüm ve "yalnızca biri açık"
+ * kuralı için `Accordion`. Tetikleyici herhangi bir `<button>` — görünümü tüketicide.
+ */
+declare class Collapsible {
+    readonly open: i0.ModelSignal<boolean>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly contentId: string;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Collapsible, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Collapsible, "mf-collapsible", ["mfCollapsible"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+/** `button[mfCollapsibleTrigger]` — `aria-expanded`/`aria-controls` bağlı; bkz. `Collapsible`. */
+declare class CollapsibleTrigger {
+    protected readonly collapsible: Collapsible;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CollapsibleTrigger, "button[mfCollapsibleTrigger]", ["mfCollapsibleTrigger"], {}, {}, never, never, true, never>;
+}
+/**
+ * Yükseklik `grid-template-rows: 0fr → 1fr` ile animasyonlanır — içerik yüksekliği ölçülmez
+ * (JS yok, içerik sonradan büyüse de doğru). Kapalıyken `inert`: içindeki odaklanabilir öğeler
+ * sekme sırasından ve erişilebilirlik ağacından çıkar (yalnızca `height: 0` bunu yapmazdı).
+ * `prefers-reduced-motion`'da geçiş süresi tokens/motion.css'teki genel kuralla sıfırlanır.
+ */
+declare class CollapsibleContent {
+    protected readonly collapsible: Collapsible;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleContent, "mf-collapsible-content", ["mfCollapsibleContent"], {}, {}, never, ["*"], true, never>;
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/types/mesgflow-ui-kit-color-picker.d.ts

@@ -0,0 +1,78 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+declare function hexToRgb(hex: string): Rgb | null;
+declare function rgbToHex({ r, g, b }: Rgb): string;
+declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+
+interface EyeDropperResult {
+    sRGBHex: string;
+}
+interface EyeDropperApi {
+    open(): Promise<EyeDropperResult>;
+}
+declare global {
+    interface Window {
+        EyeDropper?: new () => EyeDropperApi;
+    }
+}
+/**
+ * `<mf-color-picker [(value)]="brandColor" [palette]="brandPalette" />` —
+ * HSV alanı + hue slider + hex girdi + marka paleti + (destekleniyorsa)
+ * `EyeDropper` API. `@angular/aria`'da hazır bir color-picker pattern'i YOK
+ * — HSV alanı ve hue slider'ı `Slider`'daki AYNI hand-rolled pointer/klavye
+ * yaklaşımıyla kuruldu. Overlay pozisyonlaması `Select`'in kanıtlanmış
+ * `cdkConnectedOverlay` deseni.
+ */
+declare class ColorPicker implements ControlValueAccessor {
+    /** Varsayılan — kitin kendi marka rengi (`--color-primary-600`, bkz. tokens/color.css) — jenerik bir Tailwind yeşili DEĞİL. */
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly palette: _angular_core.InputSignal<string[]>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private onChange;
+    private onTouched;
+    protected readonly colorPickerLabels: _angular_core.Signal<_mesgflow_ui_kit_core.MfColorPickerLabels>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly hexDraft: _angular_core.WritableSignal<string>;
+    protected readonly areaEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly hueTrackEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly hsv: _angular_core.Signal<Hsv>;
+    protected readonly areaBackground: _angular_core.Signal<string>;
+    protected readonly supportsEyeDropper: boolean;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected toggle(): void;
+    protected close(): void;
+    private setHsv;
+    protected onAreaPointerDown(event: PointerEvent): void;
+    protected onAreaPointerMove(event: PointerEvent): void;
+    private updateFromAreaPointer;
+    protected onHuePointerDown(event: PointerEvent): void;
+    protected onHuePointerMove(event: PointerEvent): void;
+    private updateFromHuePointer;
+    protected onHexInput(raw: string): void;
+    protected selectPaletteColor(hex: string): void;
+    protected pickWithEyeDropper(): Promise<void>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPicker, "mf-color-picker", ["mfColorPicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { ColorPicker, hexToRgb, hsvToRgb, rgbToHex, rgbToHsv };
+export type { Hsv, Rgb };

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

@@ -0,0 +1,74 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { MfSize } from '@mesgflow/ui-kit/core';
+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 ComboboxOption<T> {
+    label: string;
+    value: T;
+}
+/**
+ * `<mf-combobox [options]="opts" [(value)]="chosen" placeholder="Ara..." />`
+ *
+ * `Select`'in (bkz. select.ts) genişletilmiş hâli — filtrelenebilir/typeahead
+ * seçim. `@angular/aria/combobox` + `@angular/aria/listbox` zincirini
+ * KULLANMADI, bilinçli bir tercih: o zincir kendi popup pozisyonlamasını
+ * taşımıyor (headless), `Select`'in ZATEN kanıtlanmış CDK Overlay + elle ARIA
+ * deseni (highlighted index, `role="listbox"`/`role="option"`) buraya
+ * genişletmek, dört ayrı directive'i (Combobox/ComboboxPopup/ComboboxWidget/
+ * Listbox/Option) doğru sırayla bağlamaktan daha az riskli.
+ *
+ * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU —
+ * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır
+ * (klasik combobox tuzağı).
+ */
+declare class Combobox<T> implements ControlValueAccessor {
+    readonly options: _angular_core.InputSignal<ComboboxOption<T>[]>;
+    readonly value: _angular_core.ModelSignal<T | null>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<MfSize>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private onChange;
+    private onTouched;
+    protected readonly comboboxLabels: _angular_core.Signal<_mesgflow_ui_kit_core.MfComboboxLabels>;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    protected readonly highlighted: _angular_core.WritableSignal<number>;
+    protected readonly triggerClasses: _angular_core.Signal<string>;
+    /** ARIA 1.2 combobox deseni: input'un `aria-controls`'ü panel listbox'ına işaret etmeli. */
+    protected readonly listboxId: string;
+    protected readonly selectedLabel: _angular_core.Signal<string>;
+    protected readonly filteredOptions: _angular_core.Signal<ComboboxOption<T>[]>;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected onFocus(): void;
+    protected onQueryInput(raw: string): void;
+    protected select(option: ComboboxOption<T>): void;
+    protected close(): void;
+    protected isSelected(option: ComboboxOption<T>): boolean;
+    protected optionClasses(option: ComboboxOption<T>, index: number): string;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Combobox<any>, "mf-combobox", ["mfCombobox"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "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"; }, never, never, true, never>;
+}
+
+/** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */
+declare const comboboxTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ComboboxSize = VariantProps<typeof comboboxTriggerVariants>['size'];
+type ComboboxHasError = VariantProps<typeof comboboxTriggerVariants>['hasError'];
+declare const comboboxOptionVariants: (props?: ({
+    highlighted?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { Combobox, comboboxOptionVariants, comboboxTriggerVariants };
+export type { ComboboxHasError, ComboboxOption, ComboboxSize };