@mesgflow/ui-kit 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesgflow/ui-kit",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Independent Angular component kit (button, select, dialog, table, sidebar, and more) built on a Tailwind v4 design token system. See README.md for setup and prerequisites.",
   "license": "MIT",
   "author": "Hurdeniz YENER",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "$description": "@mesgflow/ui-kit 0.9.0 design tokens (W3C DTCG). Generated from projects/ui-kit/styles/tokens/*.css by scripts/export-tokens.mjs — do not edit.",
+  "$description": "@mesgflow/ui-kit 0.10.0 design tokens (W3C DTCG). Generated from projects/ui-kit/styles/tokens/*.css by scripts/export-tokens.mjs — do not edit.",
   "primitives": {
     "color": {
       "primary": {

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

@@ -2,13 +2,17 @@ import * as _angular_core from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
-/** `<span mfBadge tone="success">Aktif</span>` */
+/**
+ * `<span mfBadge tone="success">Aktif</span>` — cümle biçimi için
+ * `<span mfBadge tone="warning" casing="sentence">Hazırlanıyor</span>`.
+ */
 declare class Badge {
     readonly tone: _angular_core.InputSignal<"neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
     readonly size: _angular_core.InputSignal<"sm" | "md" | null | undefined>;
+    readonly casing: _angular_core.InputSignal<"eyebrow" | "sentence" | null | undefined>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Badge, "span[mfBadge]", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Badge, "span[mfBadge]", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "casing": { "alias": "casing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -30,10 +34,12 @@ declare class Badge {
  */
 declare const badgeVariants: (props?: ({
     tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+    casing?: "eyebrow" | "sentence" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeTone = VariantProps<typeof badgeVariants>['tone'];
 type BadgeSize = VariantProps<typeof badgeVariants>['size'];
+type BadgeCasing = VariantProps<typeof badgeVariants>['casing'];
 
 export { Badge, badgeVariants };
-export type { BadgeSize, BadgeTone };
+export type { BadgeCasing, BadgeSize, BadgeTone };

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

@@ -75,7 +75,7 @@ declare class ConfirmDialog {
     protected readonly toneIcon: _angular_core.Signal<string>;
     protected readonly toneBadgeClass: _angular_core.Signal<string>;
     /** Her ton `filled` — warning da diğer tonlarla aynı `bg-X-fill` rol deseninde dolu blok kullanıyor (bkz. button.variants.ts), eski `outlined` istisnası kaldırıldı. */
-    protected readonly confirmTone: _angular_core.Signal<"danger" | "warning" | "info" | "success" | "neutral" | "help" | "primary" | null | undefined>;
+    protected readonly confirmTone: _angular_core.Signal<"warning" | "danger" | "info" | "success" | "neutral" | "help" | "primary" | null | undefined>;
     protected readonly submitting: _angular_core.WritableSignal<boolean>;
     protected readonly actionError: _angular_core.WritableSignal<string | null>;
     protected onCancel(): void;
@@ -111,6 +111,8 @@ declare class DialogSurface {
     readonly maximizable: _angular_core.WritableSignal<boolean>;
     readonly draggable: _angular_core.WritableSignal<boolean>;
     readonly resizable: _angular_core.WritableSignal<boolean>;
+    /** `DialogOptions.disableClose` — `true` iken header'daki X çizilmez (bkz. `Dialog.closeVisible`). */
+    readonly disableClose: _angular_core.WritableSignal<boolean>;
     readonly maximized: _angular_core.WritableSignal<boolean>;
     /** Kullanıcı kenardan boyutlandırdıysa dolu; maximize/sheet'te yok sayılır. */
     readonly customSize: _angular_core.WritableSignal<DialogCustomSize | null>;
@@ -169,6 +171,19 @@ declare class Dialog {
      * `false`: yalnızca `close` yayınlanır — kapanışı tamamen tüketici yönetir.
      */
     readonly autoClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Kapat (X) düğmesinin erişilebilir adı — verilmezse `MfLabels.dialog.close`
+     * ("Close dialog" / "Pencereyi kapat"). İçerikte aynı adlı bir birincil eylem
+     * varsa (ör. "İki adımlı doğrulamayı kapat" diyaloğunun "Kapat"ı) iki düğme
+     * ekran okuyucuda ayrışsın diye.
+     */
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * X düğmesi çizilsin mi. Verilmezse `DialogOptions.disableClose`'un tersi —
+     * Escape/backdrop'la kapanmayan bir dialog'da X de yoktur (kullanıcı bir
+     * eylem seçmek zorunda).
+     */
+    readonly showClose: _angular_core.InputSignal<boolean | undefined>;
     readonly close: _angular_core.OutputEmitterRef<void>;
     protected readonly surface: DialogSurface;
     protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfDialogLabels>;
@@ -185,6 +200,7 @@ declare class Dialog {
     protected readonly dragEnabled: _angular_core.Signal<boolean>;
     protected readonly resizeHandleVisible: _angular_core.Signal<boolean>;
     /** Drawer zaten tam yükseklik — büyütme düğmesinin anlamı yok, `surface.maximizable()` `true` olsa bile gizlenir. */
+    protected readonly closeVisible: _angular_core.Signal<boolean>;
     protected readonly maximizeVisible: _angular_core.Signal<boolean>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly customWidth: _angular_core.Signal<number | undefined>;
@@ -209,7 +225,7 @@ declare class Dialog {
      */
     protected requestSubmit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "mf-dialog", ["mfDialog"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fillBody": { "alias": "fillBody"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["[dialog-header]", "*", "[dialog-footer]"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "mf-dialog", ["mfDialog"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fillBody": { "alias": "fillBody"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["[dialog-header]", "*", "[dialog-footer]"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
 }
 
 /** `open` → (`close()` çağrıldı, çıkış animasyonu oynuyor) `closing` → (dispose edildi) `closed`. */

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

@@ -26,6 +26,8 @@ declare class Drawer {
     /** `true` ise Escape/backdrop kapatmaz — yalnızca programatik `open.set(false)`. */
     readonly disableClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly sheetOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Kapat (X) düğmesinin erişilebilir adı — bkz. `Dialog.closeLabel`. `disableClose` iken X çizilmez. */
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
     /** Görünür başlık yoksa ekran okuyucu için ad. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Kapanış tamamlandığında (animasyon dahil). */
@@ -38,7 +40,7 @@ declare class Drawer {
     hide(): void;
     private show;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "mf-drawer", ["mfDrawer"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "sheetOnMobile": { "alias": "sheetOnMobile"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[drawer-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "mf-drawer", ["mfDrawer"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "sheetOnMobile": { "alias": "sheetOnMobile"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[drawer-footer]"], true, never>;
 }
 
 export { Drawer };

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

@@ -71,6 +71,7 @@ declare class Input {
     readonly maxRows: _angular_core.InputSignal<number | null>;
     private readonly elementRef;
     private readonly nativeSizing;
+    private readonly inGroup;
     private lastValue;
     private lastWidth;
     protected readonly classes: _angular_core.Signal<string>;
@@ -84,7 +85,7 @@ declare class Input {
 /**
  * `<mf-input-group>
  *    <span mfInputPrefix><span mfIcon>search</span></span>
- *    <input mfInput class="border-0 bg-transparent shadow-none focus-visible:outline-none" />
+ *    <input mfInput />
  *    <span mfInputSuffix><button type="button">×</button></span>
  *  </mf-input-group>`
  *
@@ -92,15 +93,14 @@ declare class Input {
  * yazdığı "kabuk" reçetesini (bkz. plan Faz 2 P0) `core/recipes.ts`'in
  * `controlSurface`/`controlSize`'ına indirger — üç ayrı kopya yerine TEK
  * kaynak. İçindeki `input[mfInput]` KENDİ border/shadow/outline'ını
- * KAPATMALI (yukarıdaki örnekteki class'lar) — kabuk artık bunları BURADAN
- * sağlıyor, "çift kenarlık" olmasın diye (bkz. `DateRangePicker`'ın eski
- * `wrapperClasses` notu, aynı gerekçe).
+ * kapatır — grubu DI ile algılayıp (bkz. `input.ts` `IN_GROUP_CLASSES`); kabuk
+ * bunları BURADAN sağlıyor, "çift kenarlık" olmasın diye. Tüketici sınıf yazmaz.
  *
  * Odak halkası `has-[:focus-visible]:outline` ile İÇ elemanlardan HERHANGİ
  * biri klavye-odaklandığında TÜM kabuğun etrafında TEK bir halka çizer
  * (`DateRangePicker`'ın iki input'u arasında geçişte "zıplayan" iki ayrı
- * halka yerine) — `input[mfInput]`'un KENDİ `focus-visible:outline`'ı
- * BİLEREK kapatılmalı (yukarıdaki örnek), aksi halde İKİ halka üst üste biner.
+ * halka yerine) — `input[mfInput]`'un KENDİ `focus-visible:outline`'ı bu
+ * yüzden grup içinde otomatik kapanır, aksi halde İKİ halka üst üste binerdi.
  */
 declare class InputGroup {
     readonly size: _angular_core.InputSignal<MfSize>;

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/aria/menu';
-import { Menu as Menu$1 } from '@angular/aria/menu';
+import { MenuItem as MenuItem$1, 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';
+import { MfPlacement } from '@mesgflow/ui-kit/core';
+import * as i2 from '@angular/cdk/overlay';
 
 /**
  * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
@@ -24,12 +25,32 @@ declare class Menu {
     static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "mf-menu", ["mfMenu"], {}, {}, never, ["*"], true, [{ directive: typeof i1.Menu; inputs: { "wrap": "wrap"; "disabled": "disabled"; "typeaheadDelay": "typeaheadDelay"; }; outputs: { "itemSelected": "itemSelected"; }; }]>;
 }
 
-/** `<button mfMenuItem value="delete">Sil</button>` — `mf-menu` içine konur. */
+declare const menuItemVariants: (props?: ({
+    tone?: "neutral" | "danger" | null | undefined;
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];
+type MenuItemTone = NonNullable<VariantProps<typeof menuItemVariants>['tone']>;
+
+/**
+ * `<button mfMenuItem value="delete">Sil</button>` — `mf-menu` içine konur.
+ *
+ * `checked` verilirse (true/false) öğe tek-seçimli bir grubun parçası olur:
+ * `role="menuitemradio"` + `aria-checked`, seçili öğenin sağında tik. Verilmezse
+ * (`undefined`) düz `menuitem` — eski davranış birebir.
+ *
+ * `tone="danger"` tehlikeli eylemi ("Çıkış yap", "Üyeyi çıkar") ayrıştırır: metin
+ * `text-danger`, etkin/hover `bg-danger-tint text-danger-tint-fg`; ikon slotu aynı
+ * rengi (`currentColor`) miras alır. Yalnızca görsel — ARIA rolü değişmez.
+ */
 declare class MenuItem<V> {
-    private readonly ariaMenuItem;
+    readonly checked: i0.InputSignal<boolean | undefined>;
+    readonly tone: i0.InputSignal<MenuItemTone>;
+    protected readonly ariaMenuItem: MenuItem$1<V>;
     protected readonly classes: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItem<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuItem<any>, "button[mfMenuItem], div[mfMenuItem]", never, {}, {}, never, never, true, [{ directive: typeof i1.MenuItem; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItem<any>, "button[mfMenuItem], div[mfMenuItem]", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.MenuItem; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
 }
 
 /**
@@ -39,17 +60,59 @@ declare class MenuItem<V> {
  * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]="trigger.expanded()"`
  * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`
  * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).
+ *
+ * Konumlandırmayı kendisi yapan (ve `@angular/cdk` import'u gerektirmeyen) biçim
+ * için bkz. `MenuTriggerFor` — `[mfMenuTrigger]="menuRef"`. İkisinin seçicisi
+ * `[menu]` bağlamasının varlığıyla ayrışır, aynı elemanda asla ikisi birden eşleşmez.
  */
 declare class MenuTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTrigger, "[mfMenuTrigger]", ["mfMenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: { "menu": "menu"; "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTrigger, "[mfMenuTrigger][menu]", ["mfMenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: { "menu": "menu"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+/**
+ * `<button mfButton [mfMenuTrigger]="langMenu">TR</button>
+ *  <mf-menu #langMenu="ngMenu" (itemSelected)="setLang($event)">…</mf-menu>`
+ *
+ * Tek düğmeli açılır menü — tüketici `@angular/cdk` import etmez, `mf-popover`
+ * sarmalamaz. Menü şablonda NORMAL yerinde durur (kapalıyken gizli), açılınca
+ * `DomPortal` ile overlay'e TAŞINIR ve tetiğe göre `placement`'a konumlanır;
+ * kapanınca çıkış animasyonundan sonra eski yerine döner — Angular'ın mantıksal
+ * ağacı (içerik projeksiyonu, `mfMenuItem` ↔ `mf-menu` DI bağı) hiç değişmez.
+ *
+ * `[mfMenuTrigger]`'a `mf-menu`'nün `ngMenu` referansı verilir (`mfMenu` DEĞİL —
+ * `@angular/aria`'nın tetikleyicisi kendi `Menu` örneğini ister). ARIA/klavye
+ * (`aria-haspopup`/`aria-expanded`, ok tuşları, typeahead, Enter/Boşluk seçer, Esc
+ * kapatıp odağı tetiğe döndürür) `@angular/aria/menu`'den; bu directive üstüne:
+ * seçimde kapanıp odağı tetiğe döndürme, dışarı tıklamada kapanma.
+ *
+ * Tetik aynı zamanda bir `CdkOverlayOrigin` (host directive) — ayrıca
+ * `cdkOverlayOrigin` yazılmaz.
+ */
+declare class MenuTriggerFor {
+    /** Menünün tetiğe göre konumu — `left`/`right` mantıksal (RTL'de çevrilir). */
+    readonly placement: i0.InputSignal<MfPlacement>;
+    private readonly aria;
+    private readonly overlay;
+    private readonly host;
+    private overlayRef?;
+    private exitTimer?;
+    /** Kapalıyken gizlenen (ve açıkken overlay'e taşınan) menü elemanı. */
+    private hiddenMenu?;
+    private selection?;
+    constructor();
+    /** Public — menüyü kapatır, odak yerinde kalır (aria `close()` ile aynı). */
+    close(): void;
+    /** Public — menüyü açar ve ilk öğeye odaklanır. */
+    open(): void;
+    private bindMenu;
+    private unbindMenu;
+    private attach;
+    private detach;
+    private ensureOverlay;
+    private positionStrategy;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuTriggerFor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTriggerFor, "[mfMenuTrigger]:not([menu])", ["mfMenuTrigger"], { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: { "menu": "mfMenuTrigger"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i2.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }
-
-declare const menuItemVariants: (props?: ({
-    active?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];
 
 interface MenubarAction<V = string> {
     label: string;
@@ -83,10 +146,10 @@ declare class Menubar<V = 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[];
+    protected readonly positions: i2.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 };
+export { Menu, MenuItem, MenuTrigger, MenuTriggerFor, Menubar, menuItemVariants };
+export type { MenuItemActive, MenuItemTone, MenubarAction, MenubarMenu };

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

@@ -1,10 +1,26 @@
-import * as _angular_cdk_overlay from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { MfPlacement } from '@mesgflow/ui-kit/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * `<button #trigger="mfPopoverOrigin" mfPopoverOrigin (click)="open.set(true)">…</button>
+ *  <mf-popover [origin]="trigger" [(open)]="open">…</mf-popover>`
+ *
+ * `mf-popover`'ın `[origin]`'i için kitin kendi çapası — tüketici `@angular/cdk`
+ * import etmeden `cdkOverlayOrigin` ile aynı işi görür (host directive olarak onu
+ * taşır). `[origin]` ayrıca bir `HTMLElement`/`ElementRef` (`#ref` şablon
+ * referansı) de kabul eder.
+ */
+declare class PopoverOrigin {
+    readonly elementRef: ElementRef<HTMLElement>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverOrigin, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverOrigin, "[mfPopoverOrigin]", ["mfPopoverOrigin"], {}, {}, never, never, true, [{ directive: typeof i1.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
+}
+
 /**
  * Tüm `MfPlacement` değerleri — `left`/`right` MANTIKSAL (RTL'de çevrilir).
  * `right-start`: tetikleyicinin ÜSTÜYLE hizalı (Sidebar daraltılmış nav
@@ -12,6 +28,12 @@ import { VariantProps } from 'class-variance-authority';
  * beklenmedik yönde kaydırır), 8px boşlukla.
  */
 type PopoverPlacement = MfPlacement;
+/**
+ * `[origin]`'in kabul ettiği çapalar: kitin `mfPopoverOrigin`'i (tercih edilen —
+ * tüketici `@angular/cdk` import etmez), CDK'nın `cdkOverlayOrigin`'i (geriye
+ * uyumlu) ya da düz bir eleman (`#ref` şablon referansı / `ElementRef`).
+ */
+type PopoverOriginRef = PopoverOrigin | CdkOverlayOrigin | ElementRef<HTMLElement> | HTMLElement;
 /**
  * `<button cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="open.set(true)">...</button>`
  * `<mf-popover [origin]="trigger" [(open)]="open">...içerik (ng-content)...</mf-popover>`
@@ -25,11 +47,12 @@ type PopoverPlacement = MfPlacement;
  * 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.
+ * `origin`: kitin `mfPopoverOrigin` referansı (tüketici `@angular/cdk` import
+ * etmez), geriye uyumlu olarak `cdkOverlayOrigin` ya da düz bir eleman — bkz.
+ * `PopoverOriginRef`.
  */
 declare class Popover {
-    readonly origin: _angular_core.InputSignal<CdkOverlayOrigin>;
+    readonly origin: _angular_core.InputSignal<PopoverOriginRef>;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly placement: _angular_core.InputSignal<MfPlacement>;
     readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
@@ -53,7 +76,9 @@ 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<_angular_cdk_overlay.ConnectedPosition[]>;
+    /** CDK'ya verilen çapa — `cdkConnectedOverlayOrigin` bir `ElementRef`'i doğrudan kabul eder. */
+    protected readonly anchor: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected readonly positions: _angular_core.Signal<i1.ConnectedPosition[]>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     protected close(): void;
@@ -66,5 +91,5 @@ declare const popoverPanelVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type PopoverPadding = VariantProps<typeof popoverPanelVariants>['padding'];
 
-export { Popover, popoverPanelVariants };
-export type { PopoverPadding, PopoverPlacement };
+export { Popover, PopoverOrigin, popoverPanelVariants };
+export type { PopoverOriginRef, PopoverPadding, PopoverPlacement };

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

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { BadgeTone } from '@mesgflow/ui-kit/badge';
 import { cn } from '@mesgflow/ui-kit/core';
 
 /**
@@ -33,7 +34,10 @@ import { cn } from '@mesgflow/ui-kit/core';
 declare const sidebarVariants: (props?: ({
     collapsed?: boolean | null | undefined;
     appearance?: "chrome" | "brand" | "brand-light" | null | undefined;
+    embedded?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** `[brand]` yuvasının tenant switcher'a göre yeri — bkz. `Sidebar.brandPlacement`. */
+type SidebarBrandPlacement = 'replace' | 'above';
 /**
  * Nav satırı (leaf veya parent-toggle) — `rounded-sm`(6px, menü öğesi kademesi,
  * bkz. styles.css radius notu), panel değil kontrol. `border-s-2 border-s-
@@ -66,6 +70,17 @@ interface SidebarNavItem {
 interface SidebarTenant {
     id: string;
     name: string;
+    /**
+     * Adın altında soluk ikincil satır (panelde ve genişken tetikte) — ör. "Kimlik: acme-2";
+     * aynı adlı kiracıları ayrıştırır. Erişilebilir ad "ad, açıklama" olur.
+     */
+    description?: string;
+    /** Paneldeki satırın sonunda durum rozeti — ör. "Hazırlanıyor". */
+    badge?: string;
+    /** `badge`'in tonu (varsayılan `neutral`). */
+    badgeTone?: BadgeTone;
+    /** Seçilemez (ör. hazırlanamadı) — satır `aria-disabled`, tık/Enter yok sayılır. */
+    disabled?: boolean;
 }
 interface SidebarUser {
     name: string;
@@ -113,6 +128,21 @@ declare class Sidebar {
      * TORUNU olmadığından her zaman katı `chrome` kalır.
      */
     readonly appearance: _angular_core.InputSignal<SidebarAppearance>;
+    /**
+     * `[brand]` yuvasının tenant switcher'la ilişkisi. `'replace'` (varsayılan,
+     * eski davranış): marka YALNIZ `tenants` boşken çizilir, switcher onun
+     * yerine geçer. `'above'`: marka her zaman üstte, switcher (liste doluysa)
+     * altında. Daraltılmışken yalnız logo için `<mf-brand [showLabel]="!collapsed()">`
+     * — ad görsel olarak gizlenir, erişilebilir ad korunur.
+     */
+    readonly brandPlacement: _angular_core.InputSignal<SidebarBrandPlacement>;
+    /**
+     * `true`: bir çekmece (`mf-drawer`) gibi kendi yüzeyi olan bir kabın İÇİNDE —
+     * dış kenarlık ve `chrome` zemini çizilmez (çift çerçeve olmasın), genişlik
+     * kabı doldurur. Marka görünümleri (`brand`/`brand-light`) kontrast için
+     * kendi zeminini korur.
+     */
+    readonly embedded: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Verilmezse `MF_SIDEBAR_LABELS`'a düşer — `SidebarTenantSwitcher`/`SidebarUserMenu`'nün KENDİ etiketleri artık AYRICA buradan prop-drilling YAPILMIYOR, ikisi de `MF_SIDEBAR_LABELS`'ı doğrudan inject ediyor. */
     readonly collapseLabel: _angular_core.InputSignal<string | undefined>;
     readonly expandLabel: _angular_core.InputSignal<string | undefined>;
@@ -126,6 +156,7 @@ declare class Sidebar {
     protected readonly effectiveExpandLabel: _angular_core.Signal<string>;
     protected readonly effectiveNavAriaLabel: _angular_core.Signal<string>;
     protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly showBrandRow: _angular_core.Signal<boolean>;
     /** Genişkenken hangi gruplar açık — her grup BAĞIMSIZ açılır/kapanır (akordeon değil, kullanıcı kararı). `model()` — tüketici okuyabilir/yazabilir (ör. "hepsini aç" bir buton). */
     readonly expandedIds: _angular_core.ModelSignal<ReadonlySet<string>>;
     /**
@@ -143,7 +174,7 @@ declare class Sidebar {
     protected onTenantSelect(tenant: SidebarTenant): void;
     protected toggleCollapse(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "mf-sidebar", ["mfSidebar"], { "tenants": { "alias": "tenants"; "required": false; "isSignal": true; }; "activeTenantId": { "alias": "activeTenantId"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": true; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "showCollapseToggle": { "alias": "showCollapseToggle"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "navAriaLabel": { "alias": "navAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "autoExpandActive": { "alias": "autoExpandActive"; "required": false; "isSignal": true; }; }, { "activeTenantId": "activeTenantIdChange"; "activeItemId": "activeItemIdChange"; "collapsed": "collapsedChange"; "tenantChange": "tenantChange"; "itemClick": "itemClick"; "profileClick": "profileClick"; "expandedIds": "expandedIdsChange"; }, never, ["[brand]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "mf-sidebar", ["mfSidebar"], { "tenants": { "alias": "tenants"; "required": false; "isSignal": true; }; "activeTenantId": { "alias": "activeTenantId"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": true; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "showCollapseToggle": { "alias": "showCollapseToggle"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "brandPlacement": { "alias": "brandPlacement"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "navAriaLabel": { "alias": "navAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "autoExpandActive": { "alias": "autoExpandActive"; "required": false; "isSignal": true; }; }, { "activeTenantId": "activeTenantIdChange"; "activeItemId": "activeItemIdChange"; "collapsed": "collapsedChange"; "tenantChange": "tenantChange"; "itemClick": "itemClick"; "profileClick": "profileClick"; "expandedIds": "expandedIdsChange"; }, never, ["[brand]"], true, never>;
 }
 
 /**
@@ -197,6 +228,8 @@ declare class SidebarTenantSwitcher {
     protected toggle(): void;
     protected close(): void;
     protected select(tenant: SidebarTenant): void;
+    /** "Ad, açıklama[, rozet]" — yalnızca ek alan varsa; yoksa `null` (içerikten türetilir, eski davranış). */
+    protected optionAriaLabel(tenant: SidebarTenant): string | null;
     protected optionClasses(tenant: SidebarTenant, index: number): string;
     protected onTriggerKeydown(event: KeyboardEvent): void;
     protected onPanelKeydown(event: KeyboardEvent): void;
@@ -221,4 +254,4 @@ declare class SidebarUserMenu {
 }
 
 export { Sidebar, SidebarNavItemRow, SidebarTenantSwitcher, SidebarUserMenu, sidebarNavItemVariants, sidebarVariants };
-export type { SidebarAppearance, SidebarCollapsedVariant, SidebarNavItem, SidebarTenant, SidebarUser };
+export type { SidebarAppearance, SidebarBrandPlacement, SidebarCollapsedVariant, SidebarNavItem, SidebarTenant, SidebarUser };

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

@@ -360,11 +360,11 @@ declare class Table<T> {
     private readonly host;
     private readonly scroller;
     private readonly idPrefix;
-    protected readonly pageState: _angular_core.WritableSignal<PageRequest>;
-    protected readonly sortState: _angular_core.WritableSignal<SortDescriptor[]>;
-    protected readonly searchTerm: _angular_core.WritableSignal<string>;
-    protected readonly appliedFilters: _angular_core.WritableSignal<AppliedFilter[]>;
-    protected readonly filterLogic: _angular_core.WritableSignal<FilterLogic>;
+    readonly page: _angular_core.ModelSignal<PageRequest>;
+    readonly sort: _angular_core.ModelSignal<SortDescriptor[]>;
+    readonly search: _angular_core.ModelSignal<string>;
+    readonly filters: _angular_core.ModelSignal<AppliedFilter[]>;
+    readonly filterLogic: _angular_core.ModelSignal<FilterLogic>;
     protected readonly selectedRows: _angular_core.WritableSignal<Map<unknown, T>>;
     protected readonly hiddenColumns: _angular_core.WritableSignal<Set<string>>;
     protected readonly columnsMenuOpen: _angular_core.WritableSignal<boolean>;
@@ -509,7 +509,7 @@ declare class Table<T> {
     private searchGroupFor;
     private emitQuery;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table<any>, "mf-table", ["mfTable"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "clientSide": { "alias": "clientSide"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "columnWidths": { "alias": "columnWidths"; "required": false; "isSignal": true; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "virtualHeight": { "alias": "virtualHeight"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "density": "densityChange"; "columnWidths": "columnWidthsChange"; "queryChange": "queryChange"; "selectionChange": "selectionChange"; "edit": "edit"; "delete": "delete"; "rowDblClick": "rowDblClick"; "rowExpandedChange": "rowExpandedChange"; }, never, ["[tableActions]", "[tableBulkActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table<any>, "mf-table", ["mfTable"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "clientSide": { "alias": "clientSide"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "columnWidths": { "alias": "columnWidths"; "required": false; "isSignal": true; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "virtualHeight": { "alias": "virtualHeight"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "filterLogic": { "alias": "filterLogic"; "required": false; "isSignal": true; }; }, { "density": "densityChange"; "columnWidths": "columnWidthsChange"; "queryChange": "queryChange"; "selectionChange": "selectionChange"; "edit": "edit"; "delete": "delete"; "rowDblClick": "rowDblClick"; "rowExpandedChange": "rowExpandedChange"; "page": "pageChange"; "sort": "sortChange"; "search": "searchChange"; "filters": "filtersChange"; "filterLogic": "filterLogicChange"; }, never, ["[tableActions]", "[tableBulkActions]"], true, never>;
 }
 
 declare function matchesFilterGroup<T>(row: T, group: FilterGroup | undefined): boolean;
@@ -655,7 +655,7 @@ declare class TableFilterMenu<T> {
     /** Kaldirilan filtrenin id'si — checkbox listesi sifir secime inince (ekleme YA DA duzenleme modunda) emit edilir, ust bilesen o id'yi chip listesinden cikarir. */
     readonly remove: _angular_core.OutputEmitterRef<string>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    protected readonly step: _angular_core.WritableSignal<"field" | "value">;
+    protected readonly step: _angular_core.WritableSignal<"value" | "field">;
     protected readonly fieldQuery: _angular_core.WritableSignal<string>;
     protected readonly fieldHighlighted: _angular_core.WritableSignal<number>;
     protected readonly selectedField: _angular_core.WritableSignal<string | null>;