@mesgflow/ui-kit 0.6.0

package/tokens/contrast.css

@@ -0,0 +1,68 @@
+/*
+ * mesgflow — erişilebilirlik modları: kullanıcının İŞLETİM SİSTEMİ düzeyinde
+ * istediği kontrast tercihleri. Tüketici hiçbir şey yapmadan otomatik devreye
+ * girer (class/JS gerektirmez).
+ *
+ * 1) `prefers-contrast: more` (macOS "Kontrastı artır", GNOME/Windows yüksek
+ *    kontrast tercihi) — palet KORUNUR, sadece düşük vurgulu roller bir
+ *    basamak sertleşir: hairline → border-strong, fg-muted/subtle koyulaşır
+ *    (light) / açılır (dark), cam yüzey opaklaşır, durum katmanı belirginleşir.
+ *
+ * 2) `forced-colors: active` (Windows Yüksek Kontrast / Kontrast Temaları) —
+ *    tarayıcı renkleri ZATEN sistem paletiyle ezer; burada sadece bu ezmenin
+ *    GÖRÜNMEZ bıraktığı işaretler telafi edilir: arka plan rengiyle ifade
+ *    edilen seçili/aktif durumlar (`aria-selected`/`aria-current`) bir
+ *    `Highlight` çizgisi alır, cam/bulanıklık kapanır. Focus zaten `outline`
+ *    tabanlı (bkz. core/recipes.ts `focusRecipe`) — forced-colors'ta korunur.
+ *
+ * Seçiciler `:root, .light` / `.dark` — color.css'teki mod bloklarıyla AYNI
+ * özgüllükte, bu dosya ondan SONRA import edildiği için kazanır.
+ */
+@layer base {
+  @media (prefers-contrast: more) {
+    :root,
+    .light {
+      --mf-hairline: var(--color-neutral-500);
+      --mf-border-subtle: var(--color-neutral-400);
+      --mf-border: var(--color-neutral-500);
+      --mf-border-strong: var(--color-neutral-600);
+      --mf-fg-muted: var(--color-neutral-700);
+      --mf-fg-subtle: var(--color-neutral-600);
+      --mf-glass: var(--mf-surface);
+      --mf-state-hover: rgba(10, 28, 23, 0.09);
+      --mf-state-pressed: rgba(10, 28, 23, 0.16);
+      --mf-state-selected: rgba(10, 28, 23, 0.12);
+    }
+
+    .dark {
+      --mf-hairline: var(--color-neutral-600);
+      --mf-border-subtle: var(--color-neutral-700);
+      --mf-border: var(--color-neutral-600);
+      --mf-border-strong: var(--color-neutral-500);
+      --mf-fg-muted: var(--color-neutral-400);
+      --mf-fg-subtle: var(--color-neutral-500);
+      --mf-glass: var(--mf-surface);
+      --mf-state-hover: rgba(236, 243, 240, 0.1);
+      --mf-state-pressed: rgba(236, 243, 240, 0.18);
+      --mf-state-selected: rgba(236, 243, 240, 0.14);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :root,
+    .light,
+    .dark {
+      --mf-glass: Canvas;
+    }
+
+    * {
+      backdrop-filter: none !important;
+    }
+
+    [aria-selected='true'],
+    [aria-current]:not([aria-current='false']) {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+}

package/tokens/elevation.css

@@ -0,0 +1,68 @@
+/*
+ * mesgflow — yükselti (elevation) token'ları: gölgenin KENDİSİ moda göre
+ * takas olur (`@theme inline` + :root/.dark, renk rolleriyle aynı desen).
+ *
+ * Yükselti semantiği — BORDER-FIRST (2026-09 Deep Emerald geçişi, kullanıcı
+ * kararıyla): kapsayıcılar (card/table/toolbar) artık gölge DEĞİL,
+ * `border-hairline` (color.css) taşır — İKİ MODDA da. `shadow-1` bu yüzden
+ * anlam değiştirdi: artık sadece TEMAS gölgesi (segmented pill, slider
+ * thumb, sidebar daraltma düğmesi gibi küçük, yüzeyden hafifçe ayrılan
+ * öğeler). `shadow-2` OVERLAY (popover/menu/dropdown, hairline + gölge),
+ * `shadow-3` DIALOG/DRAWER/SHEET (hairline + gölge + cam yüzey, bkz.
+ * core/recipes.ts glassSurface). `shadow-control` KONTROLLER (input/select/
+ * button — ince, neredeyse hissedilmeyen bir ayrım). Bu dört basamak
+ * birbirine KARIŞTIRILMAZ.
+ *
+ * `shadow-filled` DOLU BUTONLAR (filled success/warning/danger/info/help):
+ * 1px koyu alt kenar + 2px temas gölgesi — "yüzeye oturmuş" malzeme hissi,
+ * iç ışık/gloss YOK (bkz. button.variants.ts "Gloss YOK — 2 kez reddedildi").
+ * Nötr filled hâlâ gölgesiz (zemin rengiyle aynı yüzey, yükselmiyor).
+ *
+ * `shadow-glow` SADECE dolu PRIMARY buton (spec'in "Glow / Işıma Efekti"):
+ * light'ta `shadow-filled` ile AYNI (parıltı sadece koyu zeminde okunur),
+ * dark'ta altına `color-mix()` ile primary-400'ün %20 alfası eklenmiş bir
+ * emerald ışıma. `color-mix` accent rampasına `var()` ile bağlı olduğu için
+ * `applyMfTheme({accent})` ile tüketici aksanı değişince glow da otomatik
+ * takip eder — ayrı bir rol satırı YAZILMASI GEREKMEZ. Bir class string'i
+ * ASLA hem `shadow-filled` hem `shadow-glow` taşımaz (twMerge bu ikisini
+ * aynı grup saymaz, bkz. core/cn.ts gotcha) — primary `shadow-glow` alır,
+ * diğer dört ton `shadow-filled` alır.
+ */
+@theme inline {
+  --shadow-1: var(--mf-shadow-1);
+  --shadow-2: var(--mf-shadow-2);
+  --shadow-3: var(--mf-shadow-3);
+  --shadow-control: var(--mf-shadow-control);
+  --shadow-filled: var(--mf-shadow-filled);
+  --shadow-glow: var(--mf-shadow-glow);
+}
+
+@layer base {
+  /* `.light` — koyu sayfa içindeki açık ada, bkz. color.css'teki `@custom-variant dark` notu. */
+  :root,
+  .light {
+    /* Marka-tonlu (rgba primary-900) ve önceki turdan çok daha hafif — derinlik artık ağırlıklı olarak border-hairline'dan geliyor, gölge sadece küçük bir ipucu. */
+    --mf-shadow-1: 0 1px 2px rgba(6, 44, 34, 0.06);
+    --mf-shadow-2: 0 4px 16px -8px rgba(6, 44, 34, 0.14);
+    /* Spec'in "Gölgeler yerine çerçeveler" tarifi — dialog/drawer/sheet zaten hairline taşıyor, gölge sadece derin bir ipucu. */
+    --mf-shadow-3: 0 10px 30px rgba(6, 44, 34, 0.15);
+    /* Kontroller için neredeyse görünmez bir ayrım — zemin kontrastıyla karışmasın diye "gölge" değil "kenar ışığı" gibi davranır. */
+    --mf-shadow-control: 0 1px 1px rgba(6, 44, 34, 0.04);
+    --mf-shadow-filled: 0 1px 0 rgba(6, 44, 34, 0.12), 0 1px 2px rgba(6, 44, 34, 0.14);
+    /* Light'ta parıltı yok — `shadow-filled` ile birebir aynı (primary-900 zaten koyu, ışıma gereksiz). */
+    --mf-shadow-glow: 0 1px 0 rgba(6, 44, 34, 0.12), 0 1px 2px rgba(6, 44, 34, 0.14);
+  }
+
+  .dark {
+    --mf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24);
+    --mf-shadow-2: 0 4px 16px -8px rgba(0, 0, 0, 0.5);
+    --mf-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.4);
+    /* Dark modda dolu gölge yerine üstte ince bir ışık çizgisi — koyu zeminde "gölge" görsel olarak okunmuyor. */
+    --mf-shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    --mf-shadow-filled: 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
+    /* Spec: "Ana Aksiyon butonunun altına hafif bir yeşil ışıma" — 20px emerald blur, `--color-primary-400` üstünden `color-mix` ile türetilir. */
+    --mf-shadow-glow:
+      0 0 20px color-mix(in srgb, var(--color-primary-400) 20%, transparent),
+      0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
+  }
+}

package/tokens/motion.css

@@ -0,0 +1,277 @@
+/*
+ * mesgflow — hareket (motion) token'ları: süre/eğri + hazır giriş-çıkış
+ * animasyonları. `prefers-reduced-motion: reduce` global bloğu (aşağıda)
+ * TÜM `animate-*`/`transition-*` kullanımlarını otomatik kısıyor — yeni bir
+ * `--animate-*` eklerken ayrıca bir reduced-motion istisnası YAZMA gerekmiyor.
+ */
+@theme {
+  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
+  /*
+   * Sönümlü yay (ζ=0.9, başlangıç hızı 1.2) — `linear()` ile örneklenmiş.
+   * Hızlı başlar (ease-out gibi), hedefi ~%2.8 aşıp yerine OTURUR — zıplama
+   * yok. SADECE küçük ölçek/öteleme GİRİŞLERİNDE (dialog, overlay):
+   * `translateY(100%)` gibi tam-boy kaymalarda (sheet/drawer) aşım panelin
+   * altında boşluk açardı. Çıkışlar `ease-emphasis`te kalır. `linear()`
+   * desteklemeyen tarayıcıda animasyon bildirimi geçersiz sayılır ve panel
+   * animasyonsuz açılır (işlev kaybı yok).
+   */
+  --ease-spring: linear(
+    0,
+    0.406 6.3%,
+    0.67 12.5%,
+    0.834 18.8%,
+    0.932 25%,
+    0.987 31.3%,
+    1.014 37.5%,
+    1.026 43.8%,
+    1.028 50%,
+    1.026 56.3%,
+    1.022 62.5%,
+    1.017 68.8%,
+    1.013 75%,
+    1.01 81.3%,
+    1.007 87.5%,
+    1.005 93.8%,
+    1
+  );
+  --duration-fast: 120ms;
+  --duration-base: 180ms;
+  --duration-slow: 260ms;
+
+  /*
+   * Table'ın "yeniden sorgulanıyor" göstergesi: satırlar YERİNDE kalır
+   * (skeleton'a dönmez), kartın tepesinde 2px'lik bir çubuk soldan sağa
+   * kayar — `animate-progress-slide` (bkz. table/table.html).
+   */
+  --animate-progress-slide: progress-slide 1.1s var(--ease-emphasis) infinite;
+
+  @keyframes progress-slide {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
+    }
+  }
+
+  /*
+   * Dialog açılış/kapanış — `Dialog`'un (dialog.ts) `surface.closing()`'e
+   * göre reaktif olarak `-in`/`-out` class'ı arasında geçiş yapmasıyla
+   * tetikleniyor. Kapanış CDK'nın kendi kancası OLMADIĞI için
+   * `DialogService.open()`'daki `closePredicate` ile senkronize gecikmeli
+   * (bkz. o dosyanın doc yorumu) — `-out` süresi orada `EXIT_MS` sabitiyle
+   * BİREBİR eşleşiyor, biri değişirse diğeri de güncellenmeli.
+   */
+  --animate-dialog-in: dialog-in var(--duration-base) var(--ease-spring);
+  --animate-dialog-out: dialog-out var(--duration-fast) var(--ease-emphasis) forwards;
+  --animate-sheet-in: sheet-in var(--duration-base) var(--ease-emphasis);
+  --animate-sheet-out: sheet-out var(--duration-fast) var(--ease-emphasis) forwards;
+
+  @keyframes dialog-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  @keyframes dialog-out {
+    to {
+      opacity: 0;
+      transform: translateY(4px) scale(0.985);
+    }
+  }
+
+  @keyframes sheet-in {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes sheet-out {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  /*
+   * Drawer (sağdan açılan panel) — X ekseninde kayıyor, BİLEREK modal (Y +
+   * scale) ve sheet'ten (Y) farklı: hareket ekseni metaforla eşleşiyor
+   * (modal ortadan yükselir, sheet alttan kayar, drawer kenardan kayar).
+   */
+  --animate-drawer-in: drawer-in var(--duration-base) var(--ease-emphasis);
+  --animate-drawer-out: drawer-out var(--duration-fast) var(--ease-emphasis) forwards;
+
+  @keyframes drawer-in {
+    from {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes drawer-out {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  /*
+   * Popover/Menu/Select/Combobox/ColorPicker/DatePicker/... — 12 kopya
+   * overlay panelinin BİRLEŞTİĞİ tek giriş/çıkış hareketi (bkz. plan Faz 1c,
+   * `Popover`'ın `closing` sinyali). Dialog'dan (Y 8px + duration-base) daha
+   * hafif — küçük bir panel, `-4px` + `duration-fast` yeterli, ağır
+   * hissettirmez.
+   */
+  /* Durum ikonu değişimi (kopyalandı ✓ vb.) — küçükten yaya binerek büyür. */
+  --animate-pop: pop var(--duration-base) var(--ease-spring);
+  --animate-overlay-in: overlay-in var(--duration-fast) var(--ease-spring);
+  --animate-overlay-out: overlay-out var(--duration-fast) var(--ease-emphasis) forwards;
+
+  @keyframes pop {
+    from {
+      opacity: 0;
+      scale: 0.5;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes overlay-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+    }
+  }
+
+  @keyframes overlay-out {
+    to {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+    }
+  }
+
+  /*
+   * Toast — X ekseninde kayarak girer/çıkar (bkz. `ToastHost`, sağ-alt/
+   * sağ-üst köşeden gelen bildirim metaforu; dialog/overlay'in Y ekseninden
+   * BİLEREK farklı).
+   */
+  --animate-toast-in: toast-in var(--duration-base) var(--ease-emphasis);
+  --animate-toast-out: toast-out var(--duration-fast) var(--ease-emphasis) forwards;
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+  }
+
+  @keyframes toast-out {
+    to {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+  }
+
+  /*
+   * Skeleton — `animate-pulse` (opaklık titreşimi) yerine soldan sağa kayan
+   * bir parıltı (bkz. plan Faz 1c). Skeleton'un kendi arka planı bir
+   * gradient olmalı (`background-size: 200% 100%`) — token burada sadece
+   * hareketi tanımlıyor, gradient tanımı `skeleton.ts`'te.
+   */
+  --animate-shimmer: shimmer 1.4s linear infinite;
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /** Genel amaçlı, yönsüz giriş — sadece opaklık (ör. skeleton→içerik takası). */
+  --animate-fade-in: fade-in var(--duration-base) var(--ease-emphasis);
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+}
+
+/*
+ * Tailwind v4'te `--duration-*` diye bir theme namespace YOK (sadece
+ * `--ease-*`/`--animate-*` var) — `duration-fast`/`duration-base`/
+ * `duration-slow` class'ları yukarıdaki `@theme` bloğundaki tanıma rağmen
+ * HİÇBİR ZAMAN CSS üretmiyordu (kod tabanında ~60 kullanım yeri, hepsi sessizce
+ * etkisizdi, tüm geçişler tarayıcı varsayılanına düşüyordu). `@utility` ile
+ * elle tanımlamak hem class'ları çalıştırıyor hem de "kullanılmayan" gerekçesiyle
+ * derlenen CSS'ten atlanan `--duration-*` custom property'lerini emit ettiriyor
+ * (`.mf-dialog-backdrop`'ın `var(--duration-base)`'i de bu sayede düzeliyor).
+ */
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+}
+@utility duration-base {
+  transition-duration: var(--duration-base);
+}
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}
+
+@layer base {
+  /* `transitionMfTheme()` (theming) — tema çapraz geçişi kitin kendi süre/eğrisiyle, tarayıcı varsayılanı (250ms ease) değil. */
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: var(--duration-slow);
+    animation-timing-function: var(--ease-emphasis);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/*
+ * `.mf-dialog-backdrop` (bkz. dialog/dialog.service.ts) BİLEREK `@layer`
+ * DIŞINDA (unlayered) — CDK'nın kendi `overlay-prebuilt.css`'i
+ * `.cdk-overlay-backdrop` kuralını KENDİ `@layer cdk-overlay`'inde taşıyor,
+ * ve unlayered CSS her zaman HERHANGİ bir layer'ı (specificity'den bağımsız)
+ * yener (CSS cascade layers spec) — bu yüzden burada `@layer` kullanmak bu
+ * override'ı tamamen etkisiz bırakırdı. `.is-closing`, `DialogService.open()`'ın
+ * `closePredicate`'i tarafından panelin kendi `animate-dialog-out`/
+ * `animate-sheet-out`'uyla AYNI anda eklenir (backdrop ham DOM elemanı — CDK
+ * yönetiyor, Angular template'ine bağlanamıyor, bu yüzden imperatif class
+ * toggle kaçınılmaz).
+ *
+ * Karartma + blur miktarı 2026-09 Deep Emerald geçişinde eklendi (eskiden
+ * backdrop hiç karartmıyordu, sadece 2px blur veriyordu) — mikro
+ * glassmorphism'in bir parçası: panel `glassSurface` ile yarı saydamken
+ * arkadaki içerik hem karartılıp hem bulanıklaştırılmazsa panel içeriğiyle
+ * karışır. `color-mix()` (Tailwind'in `/40` opaklık modifier'ı unlayered
+ * kuralda çalışmıyor, bu yüzden elle) `--color-neutral-975`'i kullanıyor —
+ * moda göre otomatik doğru koyulukta.
+ */
+.mf-dialog-backdrop {
+  transition-duration: var(--duration-base);
+  background-color: color-mix(in srgb, var(--color-neutral-975) 40%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .mf-dialog-backdrop {
+    background-color: color-mix(in srgb, var(--color-neutral-975) 55%, transparent);
+    backdrop-filter: none;
+  }
+}
+
+.mf-dialog-backdrop.is-closing {
+  opacity: 0;
+}

package/tokens/radius.css

@@ -0,0 +1,69 @@
+/*
+ * mesgflow — radius + kontrol geometrisi token'ları.
+ *
+ * Radius iç içe (nested) bir ölçek: Tailwind'in stok skalasını (xs 2px …
+ * xl 12px) bir basamak yukarı kaydırır (xs→4px … xl→16px): KAPSAYICILAR
+ * (kart/panel/tablo/dropdown) `rounded-lg`, KONTROLLER (buton/input/select)
+ * `rounded-md` kullanır — kart 12px, içindeki buton 8px, gerçek "nested
+ * radius".
+ */
+@theme {
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+}
+
+/*
+ * Kontrol yüksekliği — TEK kaynak (bkz. plan Faz 1a/1b). Öncesinde her
+ * kontrol kendi `h-8`/`h-9`/`h-10` sabitini elle taşıyordu (9 farklı yer,
+ * aralarında 1-2px'lik kasıtsız sapmalar vardı) — `core/recipes.ts`'teki
+ * `controlSize` bu üçünü tüketir, tek tek bileşenler artık `h-*` YAZMAZ.
+ * `Button`'ın kendi `size` ekseni (`button.variants.ts`) BİLEREK bunlara
+ * eşit: `md` 36px (Button'ın sıkılaştırılmış yoğunluğu, bkz. o dosyanın
+ * notu) — Input/Select/Checkbox gibi yanına dizilen kontroller Button'la
+ * AYNI hizada dursun diye.
+ */
+@theme {
+  --control-h-sm: 2rem; /* 32px */
+  --control-h-md: 2.25rem; /* 36px */
+  --control-h-lg: 2.5rem; /* 40px */
+}
+
+@utility h-control-sm {
+  height: var(--control-h-sm);
+}
+@utility h-control-md {
+  height: var(--control-h-md);
+}
+@utility h-control-lg {
+  height: var(--control-h-lg);
+}
+
+/*
+ * Yoğunluk — bir alt ağacı (ör. yoğun bir veri paneli) sıkılaştırmak veya
+ * gevşetmek için `data-density="compact|comfortable"`. Kit genelinde
+ * `applyMfTheme({ density })` AYNI değerleri kök elemana yazar (bkz.
+ * theming/apply.ts `CONTROL_H_PX` — iki tablo senkron tutulmalı). İkon
+ * butonları `aspect-square` taşıdığı için yükseklikle birlikte kare kalır.
+ */
+@layer base {
+  [data-density='compact'] {
+    --control-h-sm: 1.75rem; /* 28px */
+    --control-h-md: 2rem; /* 32px */
+    --control-h-lg: 2.25rem; /* 36px */
+  }
+
+  [data-density='default'] {
+    --control-h-sm: 2rem;
+    --control-h-md: 2.25rem;
+    --control-h-lg: 2.5rem;
+  }
+
+  [data-density='comfortable'] {
+    --control-h-sm: 2.25rem; /* 36px */
+    --control-h-md: 2.5rem; /* 40px */
+    --control-h-lg: 2.75rem; /* 44px */
+  }
+}

package/tokens/typography.css

@@ -0,0 +1,127 @@
+/*
+ * mesgflow — tipografi token'ları: font aileleri + stok text-xs/sm/base
+ * ÜSTÜNE eklenen ölçek + `html`/`body` taban render ayarları.
+ */
+@theme {
+  /*
+   * Tipografi: başlık/display = Space Grotesk, gövde/UI = Inter, veri/tablo
+   * = JetBrains Mono (tabular figures). Bu fontların KENDİSİ pakete dahil
+   * DEĞİL — tüketici proje kendi seçtiği fontu yükler (self-hosted/CDN),
+   * burada sadece isim/fallback zinciri tanımlı.
+   */
+  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-display: 'Space Grotesk Variable', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+
+  /*
+   * ─────────────────────────────────────────────────────────────────────
+   * TİPOGRAFİ ÖLÇEĞİ — stok text-xs/sm/base ÜSTÜNE ekleniyor. `eyebrow`
+   * bu tazelemenin imza öğelerinden biri: mono + büyük harf + geniş
+   * tracking, tablo başlıkları ve bölüm etiketlerinde kullanılır.
+   *
+   * `label`/`caption` — kontrol etiketleri (Field label, form yardımcı
+   * metni) için stok `text-xs`/`text-sm`'in arasında kalan, biraz daha
+   * sıkı satır yüksekliğine sahip bir çift (bkz. plan Faz 1a). `label`
+   * `text-sm`'e (0.875rem) çok yakın ama `font-weight`ı sabit taşıyor —
+   * tüketici `font-medium` eklemeden Field etiketleriyle birebir eşleşir.
+   */
+  --text-label: 0.8125rem;
+  --text-label--line-height: 1.3;
+  --text-label--font-weight: 500;
+  /* Spec: "küçük başlık/buton harf aralığını %1-2 açmak daha okunur/lüks gösterir" — Field label'a hafif tracking. */
+  --text-label--letter-spacing: 0.01em;
+
+  --text-caption: 0.6875rem;
+  --text-caption--line-height: 1.3;
+
+  --text-eyebrow: 0.6875rem;
+  --text-eyebrow--line-height: 1.2;
+  --text-eyebrow--letter-spacing: 0.12em;
+  --text-eyebrow--font-weight: 600;
+
+  /*
+   * Buton/küçük-başlık tracking'i (spec "Tipografi ve Mikrokontrast") —
+   * `text-eyebrow`in kendi (mono+uppercase) tracking'inden AYRI, daha
+   * hafif bir açılma: Button base class'ı `tracking-label` kullanır.
+   */
+  --tracking-label: 0.015em;
+
+  --text-title-sm: 0.9375rem;
+  --text-title-sm--line-height: 1.4;
+  --text-title-sm--letter-spacing: -0.006em;
+
+  --text-title: 1.125rem;
+  --text-title--line-height: 1.35;
+  --text-title--letter-spacing: -0.012em;
+
+  --text-title-lg: 1.375rem;
+  --text-title-lg--line-height: 1.25;
+  --text-title-lg--letter-spacing: -0.018em;
+
+  /*
+   * Display basamakları AKIŞKAN — dar ekranda bir basamak küçülür, geniş
+   * ekranda eski sabit değerine (30px / 40px) oturur. `rem` tabanı içerdiği
+   * için tarayıcı yakınlaştırması ölçeği hâlâ büyütür (WCAG 1.4.4).
+   */
+  --text-display: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);
+  --text-display--line-height: 1.15;
+  --text-display--letter-spacing: -0.026em;
+
+  --text-display-lg: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
+  --text-display-lg--line-height: 1.08;
+  --text-display-lg--letter-spacing: -0.03em;
+
+  --text-metric: 1.75rem;
+  --text-metric--line-height: 1;
+  --text-metric--letter-spacing: -0.02em;
+}
+
+/*
+ * Tüketici uygulama `--font-sans`'ı kendi seçtiği şekilde yükler (self-hosted/
+ * CDN) — burada sadece `body`'ye uygulanması garanti ediliyor. Preflight
+ * (Tailwind) sadece jenerik bir sistem-fontu yığını verir.
+ *
+ * `body`'nin zemin/metin rengi de burada varsayılan olarak `--mf-canvas`/
+ * `--mf-fg`'ye bağlanıyor (`@theme inline`'daki `--color-canvas`/`--color-fg`
+ * DEĞİL, doğrudan `--mf-*` — inline theme değişkenleri "kullanılmıyor"
+ * gerekçesiyle CSS'e emit edilmeyebiliyor) — tüketici `bg-canvas`/`text-fg`
+ * class'ını hiç yazmasa bile sayfa ilk boyamada doğru zeminde açılır, beyaz
+ * flaş olmaz. Font rendering ayarları Inter/Space Grotesk/JetBrains Mono'nun
+ * varsayılan ligature/contextual-alternate/tek-katlı-"a" (cv11) davranışını
+ * AÇIKÇA sabitliyor — tarayıcıdan tarayıcıya sessizce değişen bir varsayılana
+ * bırakmak yerine.
+ */
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--mf-canvas);
+    color: var(--mf-fg);
+    /* Inter 4 değişken fontunun `opsz` ekseni — büyük başlıklarda sıkı "display" kesimi, küçük metinde açık kesim, otomatik. */
+    font-optical-sizing: auto;
+    font-feature-settings:
+      'liga' 1,
+      'calt' 1,
+      'cv11' 1;
+  }
+
+  /*
+   * Satır kırılımı — başlıklarda satırları dengeler (tek kelimelik yetim son
+   * satır olmaz), gövdede son satırdaki yetimi önler. `:where()` ile SIFIR
+   * özgüllük: tüketicinin herhangi bir `text-wrap`/`text-balance` class'ı
+   * bunu ezer. Desteklemeyen tarayıcıda normal kırılıma düşer.
+   */
+  :where(h1, h2, h3, h4, h5, h6, [role='heading'], legend, figcaption) {
+    text-wrap: balance;
+  }
+
+  :where(p, li, dd, blockquote) {
+    text-wrap: pretty;
+  }
+}

package/tokens.css

@@ -0,0 +1,41 @@
+/*
+ * mesgflow — tasarım token'ları.
+ *
+ * Bu dosya kütüphanenin TÜM görsel kararlarının (renk/radius/tipografi/hareket/
+ * gölge) kaynağı — bileşenlerin cva şemaları `bg-surface`/`text-fg`/`shadow-1`
+ * gibi Tailwind utility'lerine derleniyor, bu utility'ler ise `tokens/*.css`
+ * altında tanımlı `@theme` token'larına bağlı. Tüketici proje bu dosyayı
+ * KENDİ Tailwind v4 giriş noktasından (`@import "tailwindcss";` satırlarından
+ * SONRA) import etmeden bileşenler stilsiz kalır — bkz. kütüphane README'sindeki
+ * kurulum listesi.
+ *
+ * Beş dosyaya bölünmüş (bkz. plan Faz 1a — tek bir 550+ satırlık dosya yerine
+ * her ilgi alanı kendi dosyasında): `color` (ramplar + rol katmanı + dark
+ * mode), `typography` (font aileleri + ölçek + `html`/`body` taban),
+ * `radius` (köşe + kontrol yüksekliği), `elevation` (gölge rolleri),
+ * `motion` (süre/eğri + hazır animasyonlar). Sıra ÖNEMLİ değil — her dosya
+ * kendi `@theme`/`@layer base` bloklarını taşıyor, aralarında çapraz bağımlılık
+ * yok (`color.css`'teki `@custom-variant dark` hariç, o da yalnızca dosyanın
+ * KENDİ `.dark` seçicisi için gerekli, diğer dosyalar onu kullanmadan önce
+ * bu dosyanın import sırası zaten garanti).
+ *
+ * Dark mode class tabanlı çalışır (sistem tercihine değil, tüketici uygulamanın
+ * `<html>` (veya başka bir kök) elemanına kendi eklediği `.dark` class'ına göre).
+ *
+ * **Tüketici projede bu tek import YETMEZ** — Tailwind v4'ün otomatik kaynak
+ * taraması `node_modules`'ı ATLAR, bu paketin cva/şablon class'ları
+ * (`hover:bg-primary-700`, `disabled:opacity-50`, `sr-only`, `w-64`,
+ * `peer-checked:*`, `animate-*`, vb.) `node_modules/@mesgflow/ui-kit/fesm2022/*.mjs`
+ * içinde yaşıyor ve bu satır TEK BAŞINA onları derletmez. Tüketici kendi
+ * Tailwind giriş dosyasına ayrıca `@source "../node_modules/@mesgflow/ui-kit/
+ * fesm2022/*.mjs";` eklemeli — bkz. README.md "Stil kurulumu". Bu olmadan
+ * bileşenler "yarım stilli" görünür (hover/disabled/focus'suz düz butonlar,
+ * kayması olmayan switch, genişliği olmayan sidebar).
+ */
+@import './tokens/color.css';
+@import './tokens/typography.css';
+@import './tokens/radius.css';
+@import './tokens/elevation.css';
+@import './tokens/motion.css';
+/* Erişilebilirlik modları (prefers-contrast / forced-colors) — color.css'in rol bloklarını ezer, bu yüzden SONDA kalmalı. */
+@import './tokens/contrast.css';