@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -0,0 +1,49 @@
+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 AgendaEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end?: Date;
+    allDay?: boolean;
+    location?: string;
+    tone?: MfTone;
+}
+interface AgendaDay {
+    key: string;
+    date: Date;
+    label: string;
+    sublabel: string;
+    events: AgendaEvent[];
+}
+/**
+ * `<mf-agenda [events]="events" [days]="7" (eventClick)="open($event)" />`
+ *
+ * Günlere gruplanmış etkinlik listesi (takvim "ajanda" görünümü) — yaklaşan
+ * yayınlar, toplantılar, kampanya takvimi. Gün başlıkları "Bugün/Yarın" ya da
+ * yerel ayarlı tarih (`MF_DATE_LOCALE`); saatler yerel biçimde; boş günler
+ * `showEmptyDays` ile gösterilir. Her gün bir `<section>` + başlık, etkinlikler
+ * odaklanabilir düğmeler.
+ */
+declare class Agenda {
+    readonly events: _angular_core.InputSignal<AgendaEvent[]>;
+    /** Başlangıç günü — varsayılan bugün. */
+    readonly from: _angular_core.InputSignal<Date>;
+    /** Kaç gün gösterilsin. */
+    readonly days: _angular_core.InputSignal<number>;
+    /** Etkinliksiz günleri de göster. */
+    readonly showEmptyDays: _angular_core.InputSignal<boolean>;
+    readonly eventClick: _angular_core.OutputEmitterRef<AgendaEvent>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfAgendaLabels>;
+    private readonly locale;
+    protected readonly groups: _angular_core.Signal<AgendaDay[]>;
+    protected bar(event: AgendaEvent): string;
+    protected timeText(event: AgendaEvent): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Agenda, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Agenda, "mf-agenda", ["mfAgenda"], { "events": { "alias": "events"; "required": true; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; "days": { "alias": "days"; "required": false; "isSignal": true; }; "showEmptyDays": { "alias": "showEmptyDays"; "required": false; "isSignal": true; }; }, { "eventClick": "eventClick"; }, never, never, true, never>;
+}
+
+export { Agenda };
+export type { AgendaEvent };

package/types/mesgflow-ui-kit-aspect-ratio.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<div [mfAspectRatio]="16 / 9"><img src="…" alt="…" /></div>`
+ *
+ * Kutuyu sabit en-boy oranında tutar (native `aspect-ratio`); içindeki
+ * görsel/video kutuyu kaplar (`object-fit: cover`). Yüklenme sırasında
+ * düzen kaymasını (CLS) önler. `rounded` ile köşe yarıçapı token'ı.
+ */
+declare class AspectRatio {
+    /** Genişlik / yükseklik — `16 / 9`, `1`, `4 / 3`. */
+    readonly mfAspectRatio: _angular_core.InputSignal<number>;
+    protected readonly ratio: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AspectRatio, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AspectRatio, "[mfAspectRatio]", ["mfAspectRatio"], { "mfAspectRatio": { "alias": "mfAspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AspectRatio };

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

@@ -0,0 +1,128 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { SelectOption } from '@mesgflow/ui-kit/select';
+
+interface AuthCredentials {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+/**
+ * `<div mfAuthProviders>…GitHub/Google düğmeleri…</div>` — `mf-auth-card`
+ * içinde e-posta formunun üstünde, ayırıcıyla birlikte gösterilir.
+ */
+declare class AuthProviders {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthProviders, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AuthProviders, "[mfAuthProviders]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `<mf-auth-card [loading]="busy()" [error]="err()" (signIn)="login($event)" (forgotPassword)="…" (signUp)="…" />`
+ *
+ * Kullanıma hazır giriş kartı (Login bloğunun tüketilebilir hâli): başlık,
+ * isteğe bağlı sosyal sağlayıcı slotu (`[mfAuthProviders]`), e-posta +
+ * parola (göster/gizle), "beni hatırla", gönder ve kayıt bağlantısı.
+ *
+ * - Doğrulama yerleşik: boş/geçersiz e-posta ve boş parola alanın altında
+ *   (`mf-field`, `aria-invalid` + `aria-describedby`) gösterilir; `signIn`
+ *   yalnızca geçerli değerlerle yayılır.
+ * - Sunucu hatası `error` girdisiyle üstte bir `role="alert"` uyarısı olur.
+ * - Tüm metinler `MfLabels.authCard` — `title`/`description` girdileri
+ *   yalnızca bu örnek için ezer.
+ * - Kapsayıcı sorgusuyla (`@container`) dar yerlerde tek sütun.
+ */
+declare class AuthCard {
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Sunucudan dönen hata metni — boşsa uyarı gösterilmez. */
+    readonly error: _angular_core.InputSignal<string | null>;
+    readonly showRemember: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `false` ise "parolamı unuttum" bağlantısı gizlenir. */
+    readonly showForgotPassword: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `false` ise alttaki kayıt satırı gizlenir. */
+    readonly showSignUp: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly signIn: _angular_core.OutputEmitterRef<AuthCredentials>;
+    readonly forgotPassword: _angular_core.OutputEmitterRef<void>;
+    readonly signUp: _angular_core.OutputEmitterRef<void>;
+    readonly errorDismissed: _angular_core.OutputEmitterRef<void>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfAuthCardLabels>;
+    protected readonly ids: {
+        email: string;
+        password: string;
+    };
+    protected readonly providers: _angular_core.Signal<AuthProviders | undefined>;
+    protected readonly email: _angular_core.WritableSignal<string>;
+    protected readonly password: _angular_core.WritableSignal<string>;
+    protected readonly remember: _angular_core.WritableSignal<boolean>;
+    protected readonly submitted: _angular_core.WritableSignal<boolean>;
+    protected readonly emailError: _angular_core.Signal<string | undefined>;
+    protected readonly passwordError: _angular_core.Signal<string | undefined>;
+    protected submit(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AuthCard, "mf-auth-card", ["mfAuthCard"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "showRemember": { "alias": "showRemember"; "required": false; "isSignal": true; }; "showForgotPassword": { "alias": "showForgotPassword"; "required": false; "isSignal": true; }; "showSignUp": { "alias": "showSignUp"; "required": false; "isSignal": true; }; }, { "signIn": "signIn"; "forgotPassword": "forgotPassword"; "signUp": "signUp"; "errorDismissed": "errorDismissed"; }, ["providers"], ["[mfAuthProviders]"], true, never>;
+}
+
+interface MemberInvite<R = string> {
+    emails: string[];
+    role: R;
+}
+/**
+ * `<mf-invite-members [roles]="roles" [loading]="sending()" (invite)="send($event)" />`
+ *
+ * Ekip daveti formu (Invite bloğunun tüketilebilir hâli): etiketli e-posta
+ * girişi (Enter/virgül ile birden çok adres), rol seçimi ve gönder. Geçersiz
+ * adresler gönderimde listelenir; `invite` yalnızca geçerli adreslerle yayılır
+ * ve başarılıysa tüketici `reset()` çağırabilir.
+ *
+ * Metinler `MfLabels.inviteMembers`; `roles` tüketicinin alanıdır (ör.
+ * Yönetici/Düzenleyici/Görüntüleyici). Varsayılan rol listenin ilkidir.
+ */
+declare class InviteMembers<R = string> {
+    readonly roles: _angular_core.InputSignal<SelectOption<R>[]>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly invite: _angular_core.OutputEmitterRef<MemberInvite<R>>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfInviteMembersLabels>;
+    protected readonly ids: {
+        emails: string;
+        role: string;
+    };
+    protected readonly emails: _angular_core.WritableSignal<string[]>;
+    protected readonly role: _angular_core.WritableSignal<R | null>;
+    protected readonly submitted: _angular_core.WritableSignal<boolean>;
+    protected readonly invalid: _angular_core.Signal<string[]>;
+    protected readonly error: _angular_core.Signal<string | undefined>;
+    protected submit(event: Event): void;
+    /** Başarılı gönderimden sonra formu boşaltır. */
+    reset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InviteMembers<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InviteMembers<any>, "mf-invite-members", ["mfInviteMembers"], { "roles": { "alias": "roles"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, { "invite": "invite"; }, never, never, true, never>;
+}
+
+/** `mf-settings-section`'ın alt eylem şeridi — sönük zemin, sağa hizalı düğmeler. */
+declare class SettingsActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SettingsActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SettingsActions, "[mfSettingsActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `<mf-settings-section heading="Profil" description="Herkese görünen bilgiler.">
+ *    …alanlar…
+ *    <div mfSettingsActions><button mfButton>Kaydet</button></div>
+ *  </mf-settings-section>`
+ *
+ * Ayarlar sayfalarının iki sütunlu bölüm düzeni (Settings bloğundan): solda
+ * başlık + açıklama, sağda kart içinde alanlar, altta isteğe bağlı eylem
+ * şeridi. Dar kapsayıcıda tek sütuna iner (`@container`). Bölüm başlığıyla
+ * adlandırılmış bir `<section>`; metnin tamamı tüketiciden gelir.
+ */
+declare class SettingsSection {
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    protected readonly headingId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SettingsSection, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SettingsSection, "mf-settings-section", ["mfSettingsSection"], { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[mfSettingsActions]"], true, never>;
+}
+
+export { AuthCard, AuthProviders, InviteMembers, SettingsActions, SettingsSection };
+export type { AuthCredentials, MemberInvite };

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

@@ -5,67 +5,52 @@ import { VariantProps } from 'class-variance-authority';
 /**
  * `<button mfButton>`/`<a mfButton>` — selector native elemanın KENDİSİNİ
  * hedefler (`button[mfButton], a[mfButton]`), bir SARMALAYICI etiket
- * (`<mf-button>`) DEĞİL (bkz. `projects/ui-kit/README.md` "Directive mi,
- * component mi?") — bu yüzden tüketicinin `class="..."` ile verdiği static
- * class GENE doğrudan gerçek native elemana düşer, eskiden directive'ken
- * olduğu gibi (host'ta kalıp içe düşmeme sorunu YOK). Directive'ten
- * component'e yükseltilmenin TEK sebebi: `loading`'i gerçek bir
- * `<mf-spinner>`'a, `iconStart`/`iconEnd`'i gerçek ikon element'lerine
- * bağlayabilmek için bir ŞABLONA ihtiyaç duyulması — tüketicinin kendi
- * içeriği `<ng-content />` ile AYNEN korunur.
+ * (`<mf-button>`) DEĞİL — tüketicinin `class="..."` ile verdiği static
+ * class doğrudan gerçek native elemana düşer. Component olmasının TEK
+ * sebebi: `loading`'i gerçek bir `<mf-spinner>`'a, `iconStart`/`iconEnd`'i
+ * gerçek ikon element'lerine bağlayabilmek için bir ŞABLONA ihtiyaç duyması.
  *
- * `tone` (renk) × `appearance` (dolu/kenarlıklı/düz-metin) bağımsız iki
- * girdi — ör. `tone="danger" appearance="text" size="icon"` sadece ikon
- * gösteren, kenarlıksız bir sil butonu için.
+ * `tone` (renk) × `appearance` (filled/soft/outlined/ghost/text/link) ×
+ * `size` (xs…xl, icon-sm/icon/icon-lg) bağımsız eksenler.
+ *
+ * Mikro-etkileşimler: basınca `scale(0.98)` (yumuşak geçişli), `iconEnd`
+ * hover'da 2px ileri kayar (RTL'de geri), loading genişliği korur.
  */
 declare class Button {
     readonly tone: _angular_core.InputSignal<"primary" | "neutral" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
-    readonly appearance: _angular_core.InputSignal<"filled" | "outlined" | "text" | null | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "icon" | null | undefined>;
-    /** Sadece `size="icon"`'da etkili — bkz. button.variants.ts. */
+    readonly appearance: _angular_core.InputSignal<"filled" | "soft" | "outlined" | "ghost" | "text" | "link" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon" | "icon-lg" | null | undefined>;
+    /** Sadece ikon boyutlarında (`icon-sm`/`icon`/`icon-lg`) etkili — bkz. button.variants.ts. */
     readonly shape: _angular_core.InputSignal<"round" | "square" | null | undefined>;
     /** Native <button> varsayılan type="submit" sürprizini önlemek için — <a>'da yok sayılır. */
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     /**
-     * `true` iken içeriğin (`<ng-content />`) ÖNÜNE `<mf-spinner size="xs" />`
-     * eklenir — `iconStart` varsa YERİNE geçer, etiket metni görünür KALIR
-     * (buton "Kaydet" yazıp yanında dönen bir gösterge taşır, metin
-     * kaybolmaz). `disabled`'ı KENDİLİĞİNDEN yönetmez — tüketici
-     * `[disabled]="loading() || ..."` ile kendi bağlar.
+     * `true` iken: `iconStart` varsa spinner onun YERİNE geçer (metin görünür
+     * kalır); yoksa spinner ortaya biner ve içerik saydamlaşır — iki durumda da
+     * buton genişliği DEĞİŞMEZ. `disabled`'ı KENDİLİĞİNDEN yönetmez —
+     * tüketici `[disabled]="loading() || ..."` ile kendi bağlar.
      */
     readonly loading: _angular_core.InputSignal<boolean>;
-    /** Material Symbol adı (bkz. `Icon`) — içeriğin ÖNÜNE eklenir. `loading=true` iken spinner onun YERİNE geçer. */
+    /** İkon adı (bkz. `Icon`) — içeriğin ÖNÜNE eklenir. `loading=true` iken spinner onun YERİNE geçer. */
     readonly iconStart: _angular_core.InputSignal<string>;
-    /** Material Symbol adı — içeriğin ARDINA eklenir. `loading=true` iken GİZLENİR (tek bir dönen gösterge yeterli — `iconStart` ile aynı ilke). */
+    /** İkon adı — içeriğin ARDINA eklenir, hover'da ileri kayar. `loading=true` iken GİZLENİR. */
     readonly iconEnd: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly nativeType: _angular_core.Signal<"button" | "submit" | "reset">;
+    protected readonly iconPx: _angular_core.Signal<number>;
+    protected readonly contentClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "button[mfButton], a[mfButton]", ["mfButton"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/**
- * İki bağımsız eksen: `tone` (anlamsal renk, bkz. `MfTone`) × `appearance`
- * (dolu/kenarlıklı/düz-metin). Her kombinasyon
- * `compoundVariants`'ta açık — okunabilirlik netlik demek, kısayola kaçma.
- *
- * Gloss/iç-highlight YOK — 2 kez reddedildi.
- * `outlined` kenarlığı bilinçli olarak jenerik gri DEĞİL, rengin kendisinin
- * düşük opaklıklı hali (`border-accent/30` gibi) — düz gri çizgi "90'lar
- * form elemanı" hissi veriyordu, renkli-şeffaf kenarlık modern/kasıtlı durur.
- * Bu opaklık artık TEK bir class'ta iki modu birden doğru veriyor: `accent`/
- * `success`/`warning`/`danger`/`info` çıplak isimleri `styles.css`'te
- * moda göre takas olan rol token'ları (600 basamağı light, 400 basamağı
- * dark) — `dark:` ikizi yazmaya gerek YOK.
- */
 declare const buttonVariants: (props?: ({
     tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
-    appearance?: "filled" | "outlined" | "text" | null | undefined;
-    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+    appearance?: "filled" | "soft" | "outlined" | "ghost" | "text" | "link" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
     shape?: "round" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonTone = VariantProps<typeof buttonVariants>['tone'];
-/** @deprecated `ButtonTone` kullan — `severity` girdisi `tone`'a taşındı (bkz. plan Faz 1a). */
+/** @deprecated `ButtonTone` kullan — `severity` girdisi `tone`'a taşındı. */
 type ButtonSeverity = ButtonTone;
 type ButtonAppearance = VariantProps<typeof buttonVariants>['appearance'];
 type ButtonSize = VariantProps<typeof buttonVariants>['size'];

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

@@ -4,16 +4,17 @@ import { VariantProps } from 'class-variance-authority';
 
 /** `<div mfCard padding="md" [interactive]="true">...</div>` — `interactive` tıklanabilir/navigasyona giden kartlar için hover'da hafif bir yükselme ekler. */
 declare class Card {
-    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly appearance: _angular_core.InputSignal<"outline" | "elevated" | "sunken" | "glass" | null | undefined>;
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
     readonly interactive: _angular_core.InputSignal<boolean | null | undefined>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Card, "[mfCard]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Card, "[mfCard]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** `<div mfCardBody>...</div>` — bkz. `CardHeader`'ın JSDoc'u. */
 declare class CardBody {
-    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardBody, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardBody, "[mfCardBody]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -24,7 +25,7 @@ declare class CardBody {
  * Aksiyon düğmeleri için sağa yaslanmış bir satır varsayar (`justify-end`).
  */
 declare class CardFooter {
-    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
     readonly bordered: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooter, never>;
@@ -38,7 +39,7 @@ declare class CardFooter {
  * — tek başlık kartlarında (alt parça yok) gereksiz, o yüzden varsayılan `false`.
  */
 declare class CardHeader {
-    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | null | undefined>;
     readonly bordered: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeader, never>;
@@ -46,26 +47,35 @@ declare class CardHeader {
 }
 
 /**
- * BORDER-FIRST (2026-09 Deep Emerald geçişi, kullanıcı kararıyla önceki
- * "light modda kenarlıksız, sadece gölge" ilkesinin YERİNE geçti): iki modda
- * da `border-hairline` (color.css — %8-12 opak marka-tonlu 1px çizgi),
- * gölge YOK. `interactive` kartlarda hover'da hafif bir yükselme hâlâ
- * `shadow-2` ile veriliyor — bu artık istisna, varsayılan durum gölgesiz.
+ * BORDER-FIRST: iki modda da `border-hairline` (color.css — %8-12 opak
+ * marka-tonlu 1px çizgi), gölge YOK — varsayılan `appearance="outline"`.
+ *
+ * `appearance` (v0.7):
+ * - `outline`  — varsayılan, hairline + `surface`.
+ * - `elevated` — hafif temas gölgesi + koyu modda üst-kenar ışığı; bir
+ *   sayfada ÖNE çıkması gereken tek kart (fiyat planı, özet).
+ * - `sunken`   — içeri gömülü (`surface-sunken`), kart içindeki alt bölge.
+ * - `glass`    — yarı saydam + blur (hero üstü, görsel zemin üstü kartlar);
+ *   `reduced-transparency`'de düz yüzeye düşer.
+ *
+ * `interactive` — tıklanabilir kartlar: `hover-lift` (motion.css; yalnızca
+ * gerçek hover'lı cihazlarda 2px yükselme + overlay gölgesi) + kenarlık
+ * koyulaşır.
  */
 declare const cardVariants: (props?: ({
-    padding?: "none" | "sm" | "md" | null | undefined;
+    appearance?: "outline" | "elevated" | "sunken" | "glass" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardAppearance = VariantProps<typeof cardVariants>['appearance'];
 type CardPadding = VariantProps<typeof cardVariants>['padding'];
 type CardInteractive = VariantProps<typeof cardVariants>['interactive'];
 /**
  * `CardHeader`/`CardBody`/`CardFooter`'ın paylaştığı dolgu ölçeği — `Card`'ın
- * kendi `padding` ekseniyle AYNI üç basamak. Alt parçalar kullanılırken dış
- * `mfCard`'ın `padding="none"` olması BEKLENİR (aksi halde dolgu iki katmanda
- * çakışır) — bu, çağıranın sorumluluğunda (bkz. `Field`'ın `for`/id
- * eşleşmesiyle aynı desen, `field.ts`'teki not).
+ * kendi `padding` ekseniyle AYNI basamaklar. Alt parçalar kullanılırken dış
+ * `mfCard`'ın `padding="none"` olması BEKLENİR.
  */
 declare const cardSectionPadding: Record<NonNullable<CardPadding>, string>;
 
 export { Card, CardBody, CardFooter, CardHeader, cardSectionPadding, cardVariants };
-export type { CardInteractive, CardPadding };
+export type { CardAppearance, CardInteractive, CardPadding };

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

@@ -0,0 +1,51 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/**
+ * `<mf-carousel [items]="slides" [perView]="1" autoplay>
+ *    <ng-template let-slide>…</ng-template>
+ *  </mf-carousel>`
+ *
+ * Yerel kaydırma + `scroll-snap` üstüne kurulu karusel — dokunma/trackpad
+ * kaydırması tarayıcının kendisi (akıcı, ataletli), düğmeler ve noktalar
+ * `scrollTo` ile gezinir. WAI-ARIA APG "Carousel":
+ * - Kök `role="region"` + `aria-roledescription="carousel"`, slaytlar
+ *   `role="group"` + `aria-roledescription="slide"` + "{i} / {n}" adı.
+ * - Otomatik oynatma üzerine gelince/odaklanınca DURUR, açık bir
+ *   Durdur/Oynat düğmesi vardır (WCAG 2.2.2); azaltılmış harekette başlamaz.
+ * - ←/→ (karusel odaktayken) önceki/sonraki.
+ */
+declare class Carousel<T> {
+    readonly items: _angular_core.InputSignal<readonly T[]>;
+    /** Görünürdeki slayt sayısı. */
+    readonly perView: _angular_core.InputSignal<number>;
+    readonly gap: _angular_core.InputSignal<number>;
+    readonly loop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly autoplay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** ms */
+    readonly interval: _angular_core.InputSignal<number>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Geçerli sayfa (ilk görünür slayt). */
+    readonly index: _angular_core.ModelSignal<number>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfCarouselLabels>;
+    protected readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly track;
+    protected readonly hovering: _angular_core.WritableSignal<boolean>;
+    protected readonly focusWithin: _angular_core.WritableSignal<boolean>;
+    protected readonly userPaused: _angular_core.WritableSignal<boolean>;
+    protected readonly playing: _angular_core.Signal<boolean>;
+    protected readonly pages: _angular_core.Signal<number[]>;
+    protected readonly slideBasis: _angular_core.Signal<string>;
+    constructor();
+    protected slideLabel(i: number): string;
+    goTo(page: number): void;
+    step(delta: number, wrap?: boolean): void;
+    protected onArrow(event: Event, delta: number): void;
+    /** Kullanıcı elle kaydırınca geçerli sayfayı güncelle. */
+    protected onScroll(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Carousel<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Carousel<any>, "mf-carousel", ["mfCarousel"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "perView": { "alias": "perView"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, { "index": "indexChange"; }, ["template"], never, true, never>;
+}
+
+export { Carousel };

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

@@ -2,16 +2,19 @@ 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).
+ * `<input type="checkbox" mfCheckbox [indeterminate]="some()">` — native
+ * `<input>` kalır (klavye/form/erişilebilirlik ağacı değişmez), görsel katman
+ * `mf-check` utility'si (styles/tokens/controls.css): rol token'lı kutu,
+ * yay eğrisiyle büyüyen işaret, `indeterminate` çizgisi, hover'da marka
+ * kenarlığı, basınca hafif küçülme.
  */
 declare class Checkbox {
     readonly size: _angular_core.InputSignal<MfSize>;
+    /** "Kısmen seçili" (ör. tablo başlığındaki tümünü-seç) — native `indeterminate` özelliğine yazılır, `aria-checked="mixed"` tarayıcı tarafından anons edilir. */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
     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>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Checkbox, "input[type=checkbox][mfCheckbox]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { Checkbox };

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

@@ -26,6 +26,9 @@ declare class CodeBlock {
     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>;
+    /** `false` — kenarlık/köşe yarıçapı olmadan, bir kartın/panelin İÇİNE gömülü (sekmeli demo panelleri). */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly figureClasses: _angular_core.Signal<string>;
     private readonly highlighter;
     private readonly labels;
     protected readonly hasHeader: _angular_core.Signal<boolean>;
@@ -36,7 +39,7 @@ declare class CodeBlock {
     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>;
+    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; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

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

@@ -8,54 +8,79 @@ import { VariantProps } from 'class-variance-authority';
 interface ComboboxOption<T> {
     label: string;
     value: T;
+    /** İkincil satır (e-posta, açıklama) — aramaya da dahildir. */
+    description?: string;
+    disabled?: boolean;
 }
+/** Listede gösterilen satır — gerçek bir seçenek ya da "oluştur" satırı. */
+type Row<T> = {
+    kind: 'option';
+    option: ComboboxOption<T>;
+} | {
+    kind: 'create';
+    query: string;
+};
 /**
- * `<mf-combobox [options]="opts" [(value)]="chosen" placeholder="Ara..." />`
+ * `<mf-combobox [options]="opts" [(value)]="chosen" />` — filtrelenebilir tekli seçim.
+ * `<mf-combobox multiple [options]="opts" [(values)]="tags" creatable (create)="add($event)" />`
+ * — çoklu seçim (çipler), isteğe bağlı "oluştur" satırı.
  *
- * `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.
+ * ARIA 1.2 combobox deseni: input `role="combobox"` + `aria-controls` (listbox)
+ * + `aria-activedescendant` (vurgulanan satır; odak input'ta kalır). Çoklu
+ * modda listbox `aria-multiselectable`, seçim sonrası panel AÇIK kalır ve
+ * sorgu temizlenir; boş sorguda Backspace son çipi kaldırır.
  *
- * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU —
- * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır
- * (klasik combobox tuzağı).
+ * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU — aksi
+ * halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır.
  */
 declare class Combobox<T> implements ControlValueAccessor {
     readonly options: _angular_core.InputSignal<ComboboxOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T | null>;
+    /** Çoklu modda seçili değerler. */
+    readonly values: _angular_core.ModelSignal<T[]>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Sorgu hiçbir etiketle birebir eşleşmezse listenin sonunda "oluştur" satırı. */
+    readonly creatable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignal<MfSize>;
-    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Harici `<label for>` / `mf-field for` için input id'si. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    /** "Oluştur" satırı seçildi — tüketici seçeneği ekleyip seçer. */
+    readonly create: _angular_core.OutputEmitterRef<string>;
     private onChange;
     private onTouched;
-    protected readonly comboboxLabels: _angular_core.Signal<_mesgflow_ui_kit_core.MfComboboxLabels>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfComboboxLabels>;
     protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    private readonly inputEl;
     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 optionIdPrefix: string;
+    protected readonly triggerClasses: _angular_core.Signal<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;
+    protected readonly selectedOptions: _angular_core.Signal<ComboboxOption<T>[]>;
+    protected readonly rows: _angular_core.Signal<Row<T>[]>;
+    protected readonly activeDescendant: _angular_core.Signal<string | null>;
+    protected createLabel(query: string): string;
+    protected removeLabel(label: string): string;
+    writeValue(value: T | T[] | null): void;
+    registerOnChange(fn: (value: T | T[] | null) => void): void;
     registerOnTouched(fn: () => void): void;
     protected onFocus(): void;
+    protected focusInput(): void;
     protected onQueryInput(raw: string): void;
-    protected select(option: ComboboxOption<T>): void;
+    protected choose(row: Row<T>): void;
+    protected removeValue(value: T): void;
     protected close(): void;
     protected isSelected(option: ComboboxOption<T>): boolean;
-    protected optionClasses(option: ComboboxOption<T>, index: number): string;
+    protected rowClasses(row: Row<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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Combobox<any>, "mf-combobox", ["mfCombobox"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "creatable": { "alias": "creatable"; "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; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "values": "valuesChange"; "create": "create"; }, never, never, true, never>;
 }
 
 /** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */