@mesgflow/ui-kit 0.6.0 → 0.8.0

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

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+interface ListboxOption<V> {
+    label: string;
+    value: V;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * `<mf-listbox [options]="plans" [(value)]="chosen" ariaLabel="Plan" />`
+ *
+ * Her zaman görünür seçim listesi (açılır olmayan Select) — ayar panelleri,
+ * filtre kenar çubukları, iki sütunlu seçiciler. `@angular/aria/listbox`:
+ * ↑/↓, Home/End, typeahead, Shift+ok ile aralık (çoklu), `aria-activedescendant`.
+ *
+ * `value` her zaman bir DİZİ (aria listbox sözleşmesi); tekli modda tek öğeli.
+ */
+declare class Listbox<V> {
+    readonly options: _angular_core.InputSignal<ListboxOption<V>[]>;
+    readonly value: _angular_core.ModelSignal<V[]>;
+    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Listbox<any>, "mf-listbox", ["mfListbox"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "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 { Listbox };
+export type { ListboxOption };

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

@@ -0,0 +1,59 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+interface MentionItem {
+    label: string;
+    value: string;
+    description?: string;
+}
+/** İmlecin öğeye göre piksel konumu — gizli bir "ayna" div ile ölçülür. */
+declare function caretCoordinates(el: HTMLTextAreaElement | HTMLInputElement, position: number): {
+    top: number;
+    left: number;
+    height: number;
+};
+/** Öneri paneli — `mfMention` direktifi açar. */
+declare class MentionPanel {
+    readonly items: _angular_core.InputSignal<MentionItem[]>;
+    readonly active: _angular_core.InputSignal<number>;
+    readonly listId: _angular_core.InputSignal<string>;
+    readonly pick: _angular_core.OutputEmitterRef<MentionItem>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfMentionLabels>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MentionPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MentionPanel, "mf-mention-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; }, { "pick": "pick"; }, never, never, true, never>;
+}
+/**
+ * `<textarea mfInput [mfMention]="people" (mentionAdd)="notify($event)"></textarea>`
+ *
+ * `@` (ya da `trigger`) yazınca imlecin hemen altında filtrelenmiş öneriler
+ * açar; ↑/↓ gezinir, Enter/Tab seçer, Escape kapatır. Seçim `@Ad ` olarak
+ * metne eklenir ve `mentionAdd` yayar. Erişilebilirlik: `aria-autocomplete`,
+ * `aria-controls` ve vurgulanan öneri için `aria-activedescendant` (odak
+ * metin alanında kalır).
+ */
+declare class Mention {
+    readonly mfMention: _angular_core.InputSignal<MentionItem[]>;
+    readonly trigger: _angular_core.InputSignal<string>;
+    readonly mentionAdd: _angular_core.OutputEmitterRef<MentionItem>;
+    protected readonly listId: string;
+    private readonly el;
+    private readonly overlay;
+    private ref;
+    private panel;
+    private readonly query;
+    private queryStart;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    protected readonly isOpen: _angular_core.Signal<boolean>;
+    protected readonly filtered: _angular_core.Signal<MentionItem[]>;
+    constructor();
+    protected onInput(): void;
+    protected onKeydown(e: Event): void;
+    close(): void;
+    private insert;
+    private render;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Mention, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Mention, "textarea[mfMention], input[mfMention]", ["mfMention"], { "mfMention": { "alias": "mfMention"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, { "mentionAdd": "mentionAdd"; }, never, never, true, never>;
+}
+
+export { Mention, MentionPanel, caretCoordinates };
+export type { MentionItem };

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

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/aria/menu';
+import { Menu as Menu$1 } from '@angular/aria/menu';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 
 /**
  * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
@@ -49,5 +51,42 @@ declare const menuItemVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];
 
-export { Menu, MenuItem, MenuTrigger, menuItemVariants };
-export type { MenuItemActive };
+interface MenubarAction<V = string> {
+    label: string;
+    value: V;
+    icon?: string;
+    /** Görsel kısayol ipucu (ör. `Ctrl+S`) — kısayolu KAYDETMEZ, yalnızca gösterir. */
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    /** Bu öğeden SONRA ayırıcı çizgi. */
+    separatorAfter?: boolean;
+}
+interface MenubarMenu<V = string> {
+    label: string;
+    items: MenubarAction<V>[];
+}
+/**
+ * `<mf-menubar [menus]="menus" (itemSelect)="run($event)" ariaLabel="Editör" />`
+ *
+ * Masaüstü uygulama tarzı kalıcı menü çubuğu (Dosya · Düzen · Görünüm) —
+ * WAI-ARIA APG "Menubar": `@angular/aria/menu`'nün `ngMenuBar`/`ngMenu`
+ * desenleri. Klavye: ←/→ üst menüler arası (açık menü eşlik eder), ↓/Enter
+ * açar, ↑/↓ öğeler, typeahead, Escape kapatır ve odağı çubuğa döndürür.
+ *
+ * Alt menüler CDK bağlı overlay'lerinde; çubuğa ilk odak/hover'da bir kez
+ * render edilir (`rendered`), görünürlüğü `ngMenu`'nün `data-visible`'ı yönetir.
+ */
+declare class Menubar<V = string> {
+    readonly menus: i0.InputSignal<MenubarMenu<V>[]>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly itemSelect: i0.OutputEmitterRef<V>;
+    protected readonly rendered: i0.WritableSignal<boolean>;
+    protected readonly submenus: i0.Signal<readonly Menu$1<V>[]>;
+    protected readonly positions: _angular_cdk_overlay.ConnectedPosition[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<Menubar<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Menubar<any>, "mf-menubar", ["mfMenubar"], { "menus": { "alias": "menus"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, never>;
+}
+
+export { Menu, MenuItem, MenuTrigger, Menubar, menuItemVariants };
+export type { MenuItemActive, MenubarAction, MenubarMenu };

package/types/mesgflow-ui-kit-nav-menu.d.ts

@@ -0,0 +1,58 @@
+import * as _angular_core from '@angular/core';
+
+interface NavMenuLink {
+    label: string;
+    href: string;
+    description?: string;
+    icon?: string;
+}
+interface NavMenuItem {
+    label: string;
+    /** Alt panel yoksa doğrudan bağlantı. */
+    href?: string;
+    links?: NavMenuLink[];
+    /** Panelin yan tarafındaki vurgulu kart (yeni özellik, duyuru). */
+    featured?: NavMenuLink;
+}
+/**
+ * `<mf-nav-menu [items]="nav" ariaLabel="Ana gezinme" (linkClick)="go($event)" />`
+ *
+ * Pazarlama/site başlığı gezinmesi — WAI-ARIA APG "Disclosure Navigation
+ * Menu" (bilerek `role="menu"` DEĞİL: site gezinmesi bağlantılardır, menü
+ * uygulama komutlarıdır). Üst düğmeler `aria-expanded` + `aria-controls`;
+ * paneller ızgara bağlantılar + isteğe bağlı vurgulu kart.
+ *
+ * - Fare: üzerine gelince kısa gecikmeyle açılır, ayrılınca kapanır.
+ * - Klavye: Enter/Boşluk aç/kapa, Escape kapatır ve odağı düğmeye döndürür,
+ *   odak gezinmeden çıkınca panel kapanır.
+ * - `linkClick`: yönlendirici kullanan uygulamalar için (orta tık/yeni sekme
+ *   için `href` korunur; `event.preventDefault()` tüketicidedir).
+ */
+declare class NavMenu {
+    readonly items: _angular_core.InputSignal<NavMenuItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** ms — fare ile açılma gecikmesi. */
+    readonly hoverDelay: _angular_core.InputSignal<number>;
+    readonly linkClick: _angular_core.OutputEmitterRef<{
+        link: NavMenuLink;
+        event: MouseEvent;
+    }>;
+    protected readonly baseId: string;
+    protected readonly open: _angular_core.WritableSignal<number | null>;
+    private readonly host;
+    private timer?;
+    protected readonly anyOpen: _angular_core.Signal<boolean>;
+    constructor();
+    protected panelWidth(item: NavMenuItem): string;
+    protected toggle(i: number): void;
+    protected hoverOpen(i: number): void;
+    protected hoverClose(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected closeAndFocus(): void;
+    protected onLink(event: MouseEvent, link: NavMenuLink): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavMenu, "mf-nav-menu", ["mfNavMenu"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
+}
+
+export { NavMenu };
+export type { NavMenuItem, NavMenuLink };

package/types/mesgflow-ui-kit-notification-center.d.ts

@@ -0,0 +1,41 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    /** Görünen zaman metni ("2 dk önce") — biçimleme tüketicide. */
+    time: string;
+    read?: boolean;
+    /** Avatar için ad; yoksa `icon` gösterilir. */
+    actor?: string;
+    icon?: string;
+    tone?: MfTone;
+}
+/**
+ * `<mf-notification-center [(notifications)]="inbox" (itemClick)="open($event)" (viewAll)="go()" />`
+ *
+ * Başlıktaki zil + açılır gelen kutusu: okunmamış sayacı (99+), "tümünü
+ * okundu işaretle", okunmamış/okunmuş sekmesi, boş durum. Bir öğeye tıklamak
+ * onu okundu yapar ve `itemClick` yayar. Tetikleyicinin erişilebilir adı
+ * okunmamış sayısını içerir; liste `role="list"`.
+ */
+declare class NotificationCenter {
+    readonly notifications: _angular_core.ModelSignal<NotificationItem[]>;
+    readonly itemClick: _angular_core.OutputEmitterRef<NotificationItem>;
+    readonly viewAll: _angular_core.OutputEmitterRef<void>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfNotificationCenterLabels>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly unread: _angular_core.Signal<number>;
+    protected readonly triggerLabel: _angular_core.Signal<string>;
+    protected toneBg(n: NotificationItem): string;
+    markAllRead(): void;
+    protected select(n: NotificationItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationCenter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NotificationCenter, "mf-notification-center", ["mfNotificationCenter"], { "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; }, { "notifications": "notificationsChange"; "itemClick": "itemClick"; "viewAll": "viewAll"; }, never, never, true, never>;
+}
+
+export { NotificationCenter };
+export type { NotificationItem };

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

@@ -29,6 +29,8 @@ declare class NumberInput implements ControlValueAccessor {
     readonly unit: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.InputSignal<boolean>;
+    /** İç `<input>`'un id'si — harici bir `<label for>` / `mf-field for` ile ilişkilendirmek için. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     private onChange;
     private onTouched;
@@ -49,7 +51,7 @@ declare class NumberInput implements ControlValueAccessor {
     protected onUnitPointerMove(event: PointerEvent): void;
     protected onUnitPointerUp(event: PointerEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInput, "mf-number-input", ["mfNumberInput"], { "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; }; "unit": { "alias": "unit"; "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; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInput, "mf-number-input", ["mfNumberInput"], { "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; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { NumberInput };

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

@@ -2,6 +2,16 @@ import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
 
+/**
+ * Parola alanının `autocomplete` ipucu — parola yöneticileri/tarayıcı bunu okur:
+ * - `current-password` (varsayılan): giriş formu — kayıtlı parolayı doldurur.
+ * - `new-password`: kayıt/parola değiştirme — güçlü parola ÖNERİR, eskisini doldurmaz
+ *   (hem "yeni" hem "tekrar" alanında kullanılır).
+ * - `off`: modern tarayıcılar parola alanlarında çoğunlukla YOK SAYAR — sadece
+ *   gerçekten tek kullanımlık alanlarda (ör. API anahtarı onayı) kullanın.
+ * - Diğer geçerli token dizileri de kabul edilir (ör. `section-billing current-password`).
+ */
+type PasswordAutocomplete = 'current-password' | 'new-password' | 'off' | (string & {});
 /**
  * `<mf-password-input [(value)]="password" />` — `InputGroup` üstüne kompoze
  * edilmiş, sağda göster/gizle düğmesi taşıyan parola alanı (emsal:
@@ -9,25 +19,45 @@ import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
  * 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.
+ *
+ * Parola yöneticisi uyumu: `autocomplete` (varsayılan `current-password`) ve
+ * `name` iç `<input>`'a iletilir; `autocapitalize="off"`/`spellcheck="false"`
+ * sabit — parola görünür moda (`type="text"`) geçtiğinde de mobil klavye büyük
+ * harfe çevirmez, yazım denetimi parolayı bir sözlük servisine göndermez.
+ * Signal Forms `[formField]` bağlandığında `name`/`required`/`readonly`/`disabled`
+ * alan durumundan OTOMATİK doldurulur.
  */
 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 disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hasError: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** İç `<input>`'un id'si — harici bir `<label for>` / `mf-field for` ile ilişkilendirmek için. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
-    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showLabel: _angular_core.InputSignal<string | undefined>;
     readonly hideLabel: _angular_core.InputSignal<string | undefined>;
+    /** Parola yöneticisi ipucu — bkz. `PasswordAutocomplete`. */
+    readonly autocomplete: _angular_core.InputSignal<PasswordAutocomplete>;
+    /** İç `<input>`'un `name`'i — form gönderimi ve parola yöneticilerinin alanı tanıması için. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly passwordLabels;
     protected readonly effectiveShowLabel: _angular_core.Signal<string>;
     protected readonly effectiveHideLabel: _angular_core.Signal<string>;
+    /** Reactive Forms `control.disable()` — `disabled` girdisiyle VEYA'lanır. */
+    private readonly formDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly visible: _angular_core.WritableSignal<boolean>;
-    writeValue(value: string): void;
+    writeValue(value: string | null): void;
+    setDisabledState(disabled: boolean): 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>;
+    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; }; "inputId": { "alias": "inputId"; "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; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { PasswordInput };
+export type { PasswordAutocomplete };

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-qr-code.d.ts

@@ -0,0 +1,160 @@
+import * as _mesgflow_ui_kit_qr_code from '@mesgflow/ui-kit/qr-code';
+import * as _angular_core from '@angular/core';
+
+/** Hata düzeltme seviyesi — kurtarılabilir hasar oranı: L ~%7, M ~%15, Q ~%25, H ~%30. */
+type QrEcc = 'L' | 'M' | 'Q' | 'H';
+interface QrEncodeOptions {
+    /** Varsayılan `'M'`. */
+    ecc?: QrEcc;
+    /** 1–40, varsayılan 1. */
+    minVersion?: number;
+    /** 1–40, varsayılan 40. */
+    maxVersion?: number;
+    /**
+     * Seçilen sürüm (boyut) büyümeden daha yüksek bir hata düzeltme seviyesi sığıyorsa
+     * onu kullanır — aynı boyutta bedava dayanıklılık. Varsayılan `true`.
+     */
+    boostEcc?: boolean;
+}
+interface QrMatrix {
+    /** Modül cinsinden kenar (21–177) — sessiz bölge (quiet zone) HARİÇ. */
+    readonly size: number;
+    /** 1–40. */
+    readonly version: number;
+    /** Gerçekte kullanılan seviye (`boostEcc` ile istenenden yüksek olabilir). */
+    readonly ecc: QrEcc;
+    readonly mask: number;
+    /** `modules[y][x]` — `true` koyu modül. */
+    readonly modules: readonly (readonly boolean[])[];
+    /** `isFunction[y][x]` — finder/timing/alignment/format/version modülü (veri değil). */
+    readonly isFunction: readonly (readonly boolean[])[];
+}
+/** İçerik, `maxVersion` ve seçilen `ecc` ile sığmıyor. */
+declare class QrCapacityError extends Error {
+    constructor();
+}
+/**
+ * Metni (UTF-8; tamamen rakamsa numeric, büyük harf/rakam/` $%*+-./:` ise
+ * alphanumeric kip) ya da ham baytları bir QR matrisine kodlar. En küçük uygun
+ * sürümü ve en düşük cezalı maskeyi seçer.
+ *
+ * @throws {QrCapacityError} içerik sığmıyorsa.
+ */
+declare function encodeQr(data: string | Uint8Array, options?: QrEncodeOptions): QrMatrix;
+
+/** Veri modüllerinin çizim biçimi. */
+type QrModuleShape = 'square' | 'rounded' | 'dots';
+/** Üç köşedeki konum (finder) desenlerinin biçimi. */
+type QrFinderShape = 'square' | 'rounded';
+interface QrGeometry {
+    /** Modül cinsinden QR kenarı (sessiz bölge hariç). */
+    readonly size: number;
+    /** Veri + timing + alignment modülleri — tek `<path>` (tek path = komşu modüller arasında AA dikişi yok). */
+    readonly dataPath: string;
+    /** Finder dış halkaları (`fill-rule="evenodd"`). */
+    readonly finderOuterPath: string;
+    /** Finder iç 3×3 gözleri. */
+    readonly finderInnerPath: string;
+    /** Logo için boşaltılan kare (modül); logo yoksa 0. */
+    readonly excavated: number;
+}
+/**
+ * Logo için merkezde boşaltılacak kare kenarı (modül). QR kenarıyla aynı
+ * paritede (tek) tutulur ki kare tam ortalansın; oran 0–0.3 arası kırpılır
+ * (H seviyesi ~%30 hasarı kurtarır — alan olarak 0.3² ≈ %9, güvenli pay).
+ */
+declare function excavationSize(size: number, ratio: number): number;
+/** Kodlanmış matrisi saf SVG yol dizelerine çevirir — DOM'suz, `computed()` içinde çağrılır. */
+declare function qrGeometry(matrix: QrMatrix, shape: QrModuleShape, finder: QrFinderShape, logoRatio: number): QrGeometry;
+interface QrSvgStringOptions {
+    /** Sessiz bölge (modül), varsayılan 4 — baskı/dışa aktarım için standart. */
+    margin?: number;
+    /** Piksel kenar, varsayılan 256. */
+    pixelSize?: number;
+    foreground?: string;
+    background?: string;
+}
+/** Bağımsız bir `<svg>` belgesi (indirme/paylaşım için) — logo katmanı HTML olduğu için dahil DEĞİL. */
+declare function qrSvgString(geometry: QrGeometry, options?: QrSvgStringOptions): string;
+
+/**
+ * `<mf-qr-code data="…"><img mfQrCodeLogo src="logo.svg" alt="" /></mf-qr-code>` —
+ * QR'ın ortasına yerleştirilen logo. Varlığı hata düzeltmeyi otomatik `H`'ye
+ * yükseltir ve altındaki modülleri boşaltır. Dekoratif olduğu için `alt=""`
+ * önerilir — erişilebilir ad `mf-qr-code`'un kendi `aria-label`'ındadır.
+ */
+declare class QrCodeLogo {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QrCodeLogo, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<QrCodeLogo, "[mfQrCodeLogo]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `<mf-qr-code data="https://mesgflow.dev" />`
+ *
+ * Saf SVG QR kod — kodlayıcı kitin içinde (`qr-encoder.ts`, Nayuki portu), ek
+ * bağımlılık yok; tüm geometri `computed()` ile üretilir, DOM API'si
+ * kullanılmaz (SSR güvenli).
+ *
+ * - `shape`: `square` (klasik) · `rounded` (akışkan, komşu modüllerle birleşen) · `dots`.
+ * - `finder`: köşe desenleri `square` / `rounded`.
+ * - `ecc`: L/M/Q/H — logo varsa otomatik `H`. Aynı boyutta daha yüksek seviye
+ *   sığıyorsa zaten yükseltilir (`boostEcc`).
+ * - `margin`: sessiz bölge (modül). Okuyucular ≥ 2 ister; baskı için 4.
+ * - Logo: `[mfQrCodeLogo]` içerik (bkz. `QrCodeLogo`).
+ * - `toSvgString()`: indirme/paylaşım için bağımsız SVG.
+ *
+ * Renk: varsayılan beyaz kart üstünde siyah modül — BİLİNÇLİ ham renk istisnası:
+ * kameralar koyu-üstünde-açık (ters) QR'ı güvenilir okuyamaz, bu yüzden koyu temada
+ * da açık kart kalır. `foreground`/`background` (herhangi bir CSS rengi, `var(--…)`
+ * dahil) ile değiştirilir — satır içi stil olduğu için sınıf sırası çakışması yok;
+ * modüller `currentColor`, logo kutusu zemini miras alır. Koyu modül / açık zemin ve
+ * yeterli kontrast (≥ ~4:1) korunmalı.
+ *
+ * İçerik sığmazsa hata fırlatmaz: yerinde erişilebilir bir hata durumu çizer ve
+ * `encoded` çıkışı `null` yayar.
+ */
+declare class QrCode {
+    /** Kodlanacak içerik (URL, metin, `WIFI:…`, `mailto:` vb.). */
+    readonly data: _angular_core.InputSignal<string>;
+    /** Piksel kenar (sessiz bölge dahil). */
+    readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly ecc: _angular_core.InputSignal<QrEcc>;
+    /** Sessiz bölge, modül cinsinden. */
+    readonly margin: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly shape: _angular_core.InputSignal<QrModuleShape>;
+    readonly finder: _angular_core.InputSignal<QrFinderShape>;
+    /** Logo karesinin QR kenarına oranı (0–0.3); yalnızca `[mfQrCodeLogo]` varken etkili. */
+    readonly logoSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Modül rengi (CSS rengi). Verilmezse siyah. */
+    readonly foreground: _angular_core.InputSignal<string | undefined>;
+    /** Zemin rengi (CSS rengi). Verilmezse beyaz. */
+    readonly background: _angular_core.InputSignal<string | undefined>;
+    /** `role="img"` erişilebilir adı — verilmezse `MF_QR_CODE_LABELS.ariaLabel`. İçeriği anlatan bir ad önerilir. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Her yeniden kodlamada matris (hata durumunda `null`). */
+    readonly encoded: _angular_core.OutputEmitterRef<QrMatrix | null>;
+    private readonly labels;
+    private readonly logo;
+    protected readonly hasLogo: _angular_core.Signal<boolean>;
+    protected readonly effectiveEcc: _angular_core.Signal<QrEcc>;
+    protected readonly matrix: _angular_core.Signal<QrMatrix | null>;
+    protected readonly geometry: _angular_core.Signal<_mesgflow_ui_kit_qr_code.QrGeometry | null>;
+    protected readonly quietZone: _angular_core.Signal<number>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    /** Logo kutusunun piksel kenarı — boşaltılan karenin ekrandaki karşılığı. */
+    protected readonly logoBoxPx: _angular_core.Signal<number>;
+    protected readonly crisp: _angular_core.Signal<boolean>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    /**
+     * Bağımsız SVG belgesi — logo katmanı dahil DEĞİL. İçerik sığmıyorsa `null`.
+     * Renkler verilmezse `foreground`/`background` girdileri (onlar da yoksa siyah/beyaz);
+     * `var(--…)` gibi bağlama bağlı değerler dışa aktarımda çözülmez — somut renk geçin.
+     */
+    toSvgString(options?: QrSvgStringOptions): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QrCode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QrCode, "mf-qr-code", ["mfQrCode"], { "data": { "alias": "data"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ecc": { "alias": "ecc"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "finder": { "alias": "finder"; "required": false; "isSignal": true; }; "logoSize": { "alias": "logoSize"; "required": false; "isSignal": true; }; "foreground": { "alias": "foreground"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "encoded": "encoded"; }, ["logo"], ["[mfQrCodeLogo]"], true, never>;
+}
+
+export { QrCapacityError, QrCode, QrCodeLogo, encodeQr, excavationSize, qrGeometry, qrSvgString };
+export type { QrEcc, QrEncodeOptions, QrFinderShape, QrGeometry, QrMatrix, QrModuleShape, QrSvgStringOptions };

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).
  */