@moontra/moonui 6.23.0 → 6.25.0

package/src/__tests__/issue-661-token-kontrast.test.tsx

@@ -0,0 +1,82 @@
+/**
+ * #661 — A1-A6 bundle, (C) token/kontrast dilimi · free paket tarafı
+ *
+ * Kalem 14 · `textarea` — karakter sayacı `text-muted-foreground` ÜSTÜNE
+ *   `dark:text-gray-500` bindiriyordu. Token zaten doğruydu; ikinci katman
+ *   koyu temada onu AA altına indiriyordu (#646 ile aynı kusur sınıfı).
+ *   Ölçüldü (kart zemini #111827): 3.68:1 → 6.29:1. Açık tema değişmez.
+ *
+ * Kalem 17 · `accordion` — free ikiz ham `gray-*` kullanıyordu, Pro ikizi
+ *   `border-border`/`text-muted-foreground` token'larını kullanıyordu (ters
+ *   parite). Ham palet marka/tema özelleştirmesine KAPALIDIR: tüketicinin
+ *   `--border`i değiştirmesi accordion kenarlığına hiç ulaşmıyordu.
+ *   Ölçüldü: içerik metni açık 10.30 → 11.48, koyu 12.19 → 9.44 (ikisi de
+ *   AA'nın çok üstünde — eşik geçilmiyor, #545 "ihlal takası" yok).
+ *
+ * ÖLÇÜM DİSİPLİNİ: iddia kaynak metninden DEĞİL render edilmiş elemanın
+ * `class` özniteliğinden okunur. jsdom CSS uygulamaz ama sınıfın DOM'a
+ * BASILDIĞI (ve ham sınıfın basılMADIĞI) ölçülebilir bir olgudur.
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Textarea } from '../components/ui/textarea'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../components/ui/accordion'
+
+/* ────────────────────────────────────────────────────────────────────────── *
+ * Kalem 14 · textarea karakter sayacı
+ * ────────────────────────────────────────────────────────────────────────── */
+describe('#661-14 · Textarea karakter sayacı ikinci renk katmanı taşımıyor', () => {
+  it('sayaç `text-muted-foreground` kullanır, `dark:text-gray-500` BASILMAZ', () => {
+    render(<Textarea characterCount maxLength={100} defaultValue="moonui" aria-label="Notes" />)
+
+    const counter = screen.getByText('6 / 100')
+    expect(counter.className).toContain('text-muted-foreground')
+    // Kusurlu sürümde bu sınıf DA basılıyordu ve `dark:` özgüllüğüyle kazanıyordu.
+    expect(counter.className).not.toContain('dark:text-gray-500')
+  })
+})
+
+/* ────────────────────────────────────────────────────────────────────────── *
+ * Kalem 17 · accordion ham palet → token
+ * ────────────────────────────────────────────────────────────────────────── */
+describe('#661-17 · Accordion ham Tailwind paleti yerine token kullanır', () => {
+  function renderAccordion() {
+    return render(
+      <Accordion type="single" defaultValue="a" collapsible>
+        <AccordionItem value="a" data-testid="item">
+          <AccordionTrigger>Trigger label</AccordionTrigger>
+          <AccordionContent data-testid="content">Body copy</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+  }
+
+  it('AccordionItem kenarlığı `border-border` — ham gray YOK', () => {
+    renderAccordion()
+    const item = screen.getByTestId('item')
+    expect(item.className).toContain('border-border')
+    expect(item.className).not.toMatch(/border-gray-\d/)
+    expect(item.className).not.toMatch(/dark:border-gray-\d/)
+  })
+
+  it('AccordionTrigger koyu tema metin katmanı taşımaz (foreground miras alınır)', () => {
+    renderAccordion()
+    const trigger = screen.getByRole('button', { name: 'Trigger label' })
+    expect(trigger.className).not.toMatch(/dark:text-gray-\d/)
+  })
+
+  it('AccordionContent `text-foreground/80` — ham gray çifti YOK', () => {
+    renderAccordion()
+    const content = screen.getByTestId('content')
+    expect(content.className).toContain('text-foreground/80')
+    expect(content.className).not.toMatch(/text-gray-\d/)
+    expect(content.className).not.toMatch(/dark:text-gray-\d/)
+  })
+})

package/src/components/ui/__tests__/accent-foreground-contrast.test.ts

@@ -0,0 +1,197 @@
+/**
+ * #647 — `--accent` / `--accent-foreground` çifti LIGHT temada AA altındaydı.
+ *
+ * BULGU: `--accent-foreground` (metin) 51% idi; zemin `--accent` (94%) ile birlikte
+ * 4.26:1 veriyordu (WCAG AA küçük/normal metin eşiği 4.5:1 — WCAG 1.4.3). Bu koşuda
+ * DÖRT bağımsız yüzeyde, üç ayrı batch'te AYNI rakamla ölçüldü:
+ *   1. `toggle-group` aktif öğe          — toggle.tsx `data-[state=on]:bg-accent
+ *      data-[state=on]:text-accent-foreground`
+ *   2. `command` / `command-pro` seçili satır — command.tsx `aria-selected:bg-accent
+ *      aria-selected:text-accent-foreground`
+ *   3. `navbar` aktif öğe                — moonui-pro navbar/index.tsx `bg-accent
+ *      text-accent-foreground`
+ *   4. `magnetic-button` outline/ghost hover — moonui-pro magnetic-button.tsx inline
+ *      `backgroundColor: hsl(var(--accent))` + `color: hsl(var(--accent-foreground))`
+ *
+ * ⚠️ Bu kalem #606'nın kapsamındaydı ama #606 KAPANDI — borç kapalı issue'ya
+ * havale edilemediği için #647 olarak ayrı açıldı.
+ *
+ * KÖK NEDEN / ÇÖZÜM SINIFI: `--accent` (94%) `--secondary` (94%) ile BİREBİR aynı
+ * zemin; eski `--accent-foreground` (51%) de eski `--secondary-foreground` ile
+ * BİREBİR aynı değerdi. #284 `--secondary-foreground`'u aynı zeminde 51%→49%
+ * yaparak 4.54'e taşımıştı — aynı zemin + aynı başlangıç L olduğu için BİREBİR
+ * aynı düzeltme burada da 4.54 verir. `--accent` (zemin rolü) DEĞİŞMEDİ: dört
+ * yüzeyin hepsi `--accent`'i zemin, `--accent-foreground`'u metin olarak kullanıyor,
+ * yani rol korunarak yalnız metin koyulaştırıldı. Koyu tema zaten 14.11:1 →
+ * dokunulmadı (bkz. `#448'in kabul kriteri` slider-accent-contrast.test.ts).
+ *
+ * NOT: `slider-accent-contrast.test.ts` (#448) `--accent`'in DOLGU (fill) rolünde
+ * yüzey token'ı olarak neden kullanılamadığını kilitler — o dosyanın ekseni
+ * FARKLI (non-text 3:1, `bg-accent` kendi zeminine bitişik). Bu dosya METİN
+ * eksenini (4.5:1, `--accent-foreground` üstteki mürekkep) kilitler.
+ * Pro tarafında ayrı bir kopya YOK: pro'nun kendi token seti yok (#415), aynı
+ * tokens.css'ten okur — tüketici-yüzey kilidi aşağıda pro kaynağını da tarar.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOK = path.resolve(__dirname, '../../..')
+const PRO_KOK = path.resolve(__dirname, '../../../../../moonui-pro/src')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(name: string, blok: 'light' | 'dark'): string | null {
+  const source =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+const hslTokenRgb = (v: string): [number, number, number] => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const c = (v: number) => {
+    const x = v / 255
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+
+function rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/** `bg-accent/NN` gibi alfa katmanının zemin üstündeki bileşke rengi */
+function alfaBileske(
+  ust: [number, number, number],
+  alfa: number,
+  background: [number, number, number]
+): [number, number, number] {
+  return [
+    Math.round(alfa * ust[0] + (1 - alfa) * background[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * background[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * background[2]),
+  ]
+}
+
+const AA_ESIK = 4.5
+
+describe('#647 hesaplayıcı çapası', () => {
+  it('ESKİ değer (51%) BUGÜN BİLE hesaplansa 4.5 altı kalır — bug belgesi', () => {
+    // #647 gövdesinde rapor edilen 4.26 ölçümünü yeniden üretir (tokens.css'ten
+    // değil, literal'den — dosya artık düzeltilmiş değeri taşıyor).
+    const eskiZemin = hslTokenRgb(tokenOku('accent', 'light')!) // --accent DEĞİŞMEDİ
+    const eskiMetin = hslToRgb(217.2, 91.2, 51)
+    const oran = rgbKontrast(eskiZemin, eskiMetin)
+    expect(oran).toBeGreaterThan(4.2)
+    expect(oran).toBeLessThan(4.3)
+  })
+})
+
+describe('#647 --accent / --accent-foreground — LIGHT AA (4.5:1)', () => {
+  it('tokens.css BUGÜNKÜ light çifti AA eşiğini GEÇİYOR', () => {
+    const zemin = hslTokenRgb(tokenOku('accent', 'light')!)
+    const metin = hslTokenRgb(tokenOku('accent-foreground', 'light')!)
+    const oran = rgbKontrast(zemin, metin)
+    expect(oran).toBeGreaterThanOrEqual(AA_ESIK)
+    // Sıkı bant: gelecekte biri değeri sessizce kaydırırsa (ör. 48%→50%) burası
+    // erken uyarır — #284'ün --secondary-foreground düzeltmesiyle AYNI sonucu
+    // (4.54) üretmesi, iki tokenin aynı zeminden geldiğinin çapraz kanıtıdır.
+    expect(oran).toBeGreaterThan(4.5)
+    expect(oran).toBeLessThan(4.6)
+  })
+
+  it('`--accent` (zemin rolü) DOKUNULMADI — yalnız metin koyulaştı', () => {
+    expect(tokenOku('accent', 'light')).toBe('217.2 32.6% 94%')
+    expect(tokenOku('accent-foreground', 'light')).toBe('217.2 91.2% 49%')
+  })
+
+  it('alfa-katmanlı tüketiciler (bg-accent/NN + text-accent-foreground) DE geçiyor', () => {
+    // calendar.tsx `bg-accent/30 text-accent-foreground`, pro toggle.tsx
+    // `bg-accent/20|60 text-accent-foreground` gibi kısmi-opaklık kombinasyonları.
+    // Zemin --accent (94%) --background'dan (100%) daha koyu olduğu için alfa
+    // düştükçe bileşke DAHA açık bir griye kayar — bu da koyu metinle kontrastı
+    // ARTIRIR, asla düşürmez. Bu test o yönün korunduğunu kilitler.
+    const background = hslTokenRgb(tokenOku('background', 'light')!)
+    const accentZemin = hslTokenRgb(tokenOku('accent', 'light')!)
+    const metin = hslTokenRgb(tokenOku('accent-foreground', 'light')!)
+    const alfalar = [1, 0.6, 0.5, 0.3, 0.2]
+    const oranlar = alfalar.map((a) =>
+      rgbKontrast(alfaBileske(accentZemin, a, background), metin)
+    )
+    for (const oran of oranlar) expect(oran).toBeGreaterThanOrEqual(AA_ESIK)
+    // Monoton: alfa azaldıkça oran azalmıyor (zemin beyaza yaklaştığı için).
+    for (let i = 1; i < oranlar.length; i++) {
+      expect(oranlar[i]).toBeGreaterThanOrEqual(oranlar[i - 1] - 1e-9)
+    }
+  })
+})
+
+describe('#647 DARK tema — negatif kontrol (dokunulmadı)', () => {
+  it('dark `--accent` / `--accent-foreground` değerleri BİREBİR KORUNDU', () => {
+    expect(tokenOku('accent', 'dark')).toBe('216 34% 17%')
+    expect(tokenOku('accent-foreground', 'dark')).toBe('210 40% 98%')
+  })
+
+  it('dark çift zaten AA üstündeydi ve ÖYLE KALDI (yeni ihlal doğmadı)', () => {
+    const zemin = hslTokenRgb(tokenOku('accent', 'dark')!)
+    const metin = hslTokenRgb(tokenOku('accent-foreground', 'dark')!)
+    const oran = rgbKontrast(zemin, metin)
+    expect(oran).toBeGreaterThan(13) // ölçülen ~14.11
+  })
+})
+
+describe('#647 tüketici-yüzey kilidi — dört yüzey hâlâ HAM çifti kullanıyor', () => {
+  // Bu testler token düzeltmesinin VARSAYIMINI kilitler: dört yüzey `--accent` /
+  // `--accent-foreground`'u DOĞRUDAN (className veya inline hsl(var(...))) tüketiyor,
+  // yerel bir renk override'ı YOK. Biri ileride bu sınıfları/inline stilleri
+  // değiştirirse (component kaynağı bu PR'ın kapsamı DIŞI) burası kırmızı olur ve
+  // token düzeltmesinin o yüzeyi artık kapsamadığını haber verir.
+  it('toggle-group (free `toggle.tsx`): data-[state=on] çifti sınıf olarak duruyor', () => {
+    const src = fs.readFileSync(path.join(KOK, 'components/ui/toggle.tsx'), 'utf8')
+    expect(src).toMatch(/data-\[state=on\]:bg-accent\s+data-\[state=on\]:text-accent-foreground/)
+  })
+
+  it('command (free `command.tsx`): aria-selected çifti sınıf olarak duruyor', () => {
+    const src = fs.readFileSync(path.join(KOK, 'components/ui/command.tsx'), 'utf8')
+    expect(src).toMatch(/aria-selected:bg-accent\s+aria-selected:text-accent-foreground/)
+  })
+
+  it('command-pro (`command.tsx`): aria-selected çifti sınıf olarak duruyor', () => {
+    const src = fs.readFileSync(path.join(PRO_KOK, 'components/ui/command.tsx'), 'utf8')
+    expect(src).toMatch(/aria-selected:bg-accent\s+aria-selected:text-accent-foreground/)
+  })
+
+  it('navbar (pro `navbar/index.tsx`): aktif öğe çifti sınıf olarak duruyor', () => {
+    const src = fs.readFileSync(path.join(PRO_KOK, 'components/navbar/index.tsx'), 'utf8')
+    expect(src).toMatch(/bg-accent\s+text-accent-foreground/)
+  })
+
+  it('magnetic-button (pro): outline/ghost inline hsl(var(...)) çifti duruyor', () => {
+    const src = fs.readFileSync(
+      path.join(PRO_KOK, 'components/ui/magnetic-button.tsx'),
+      'utf8'
+    )
+    expect(src).toContain("backgroundColor: 'hsl(var(--accent))'")
+    expect(src).toContain("color: 'hsl(var(--accent-foreground))'")
+  })
+})

package/src/components/ui/__tests__/accordion.test.tsx

@@ -135,8 +135,9 @@ describe('Accordion Components', () => {
       
       const item = screen.getByTestId('accordion-item')
       expect(item).toHaveClass('border-b')
-      expect(item).toHaveClass('border-gray-200')
-      expect(item).toHaveClass('dark:border-gray-800')
+      // #661-17: ham `border-gray-200 dark:border-gray-800` → `border-border`
+      // (Pro ikizi zaten token kullanıyordu; token değerleri görsel olarak denk).
+      expect(item).toHaveClass('border-border')
     })
 
     it('forwards ref correctly', () => {
@@ -349,8 +350,9 @@ describe('Accordion Components', () => {
       const content = screen.getByTestId('accordion-content')
       expect(content).toHaveClass('overflow-hidden')
       expect(content).toHaveClass('text-sm')
-      expect(content).toHaveClass('text-gray-700')
-      expect(content).toHaveClass('dark:text-gray-300')
+      // #661-17: ham `text-gray-700 dark:text-gray-300` → `text-foreground/80`
+      // (Pro ikiziyle parite; ölçüm accordion.tsx içindeki yorumda).
+      expect(content).toHaveClass('text-foreground/80')
     })
 
     it('has animation classes', () => {

package/src/components/ui/__tests__/alert.test.tsx

@@ -60,7 +60,10 @@ describe('Alert Components', () => {
         render(<Alert variant="warning" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
         expect(alert).toHaveClass('bg-warning/10')
-        expect(alert).toHaveClass('text-warning')
+        // #630: metin `text-warning` idi ve `bg-warning/10` zemininde 1.98:1 ölçüldü —
+        // AA'nın (4.5) çok altında. Yüzey rengi (`--warning`) DEĞİŞMEDİ; yalnız metin
+        // aynı ailenin yüzey-üstü tonuna taşındı: 8.65 (light) / 15.71 (dark).
+        expect(alert).toHaveClass('text-warning-subtle-foreground')
         expect(alert).toHaveClass('border-warning/30')
       })
 

package/src/components/ui/__tests__/badge.test.tsx

@@ -41,9 +41,13 @@ describe('Badge Component', () => {
     })
 
     it('renders destructive variant correctly', () => {
+      // #544: dolgu `bg-error` (--error = #ef4343, beyaz metinle 3.78 ✗) yerine
+      // `error` skalasının -600 kademesine (#dc2626, 4.83 ✓) bağlandı. Token
+      // DEĞİŞMEDİ; yalnız bu varyantın dolgusu AA'yı geçen en açık kademeye indi.
+      // Kontrast değişmezleri: packages/moonui/src/__tests__/issue-544-kontrast.test.tsx
       render(<Badge variant="destructive">Destructive</Badge>)
       const badge = screen.getByText('Destructive').parentElement!
-      expect(badge).toHaveClass('bg-error')
+      expect(badge).toHaveClass('bg-error-600')
       expect(badge).toHaveClass('text-white')
     })
 

package/src/components/ui/__tests__/button.test.tsx

@@ -75,10 +75,15 @@ describe('Button Component', () => {
         <a href="/test">Link Button</a>
       </Button>
     )
-    
+
     const link = screen.getByRole('link')
     expect(link).toBeInTheDocument()
     expect(link).toHaveAttribute('href', '/test')
+    // #649: bu satır olmadan test YANLIŞ NEDENLE geçiyordu — `asChild` ölü bir
+    // ternary'ydi ve <a>, native <button>'ın İÇİNE render ediliyordu. Slot dalının
+    // ayırt edici iddiası: <button> hiç üretilmemeli. Ayrıntı:
+    // __tests__/issue-649-button-aschild.test.tsx
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
 
   it('applies custom className', () => {

package/src/components/ui/__tests__/dark-token-contrast.test.ts

@@ -32,15 +32,15 @@ const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
  * #284 konvansiyonu: kenarlık/metin pratikte `--background` (4%) üstünde değil
  * bu yüzeyde duruyor; kontrast gerçek zemine göre ölçülür (tokens.css --input notu).
  */
-const KART_GERCEK: [number, number, number] = [17, 24, 39]
+const CARD_ACTUAL: [number, number, number] = [17, 24, 39]
 
 /** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
-function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
-  const kaynak =
+function tokenOku(name: string, blok: 'light' | 'dark'): string | null {
+  const source =
     blok === 'dark'
       ? tokens.slice(tokens.indexOf('.dark'))
       : tokens.slice(0, tokens.indexOf('.dark'))
-  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
 }
 
 function hslToRgb(h: number, s: number, l: number): [number, number, number] {
@@ -55,7 +55,7 @@ function hslToRgb(h: number, s: number, l: number): [number, number, number] {
   return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
 }
 
-function bagilParlaklik([r, g, b]: [number, number, number]): number {
+function relativeLuminance([r, g, b]: [number, number, number]): number {
   const c = (v: number) => {
     const x = v / 255
     return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
@@ -64,23 +64,23 @@ function bagilParlaklik([r, g, b]: [number, number, number]): number {
 }
 
 function rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
-  const la = bagilParlaklik(a)
-  const lb = bagilParlaklik(b)
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
   const [hi, lo] = la > lb ? [la, lb] : [lb, la]
   return (hi + 0.05) / (lo + 0.05)
 }
 
-const ayrıştır = (v: string): [number, number, number] => {
+const parse = (v: string): [number, number, number] => {
   const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
   return hslToRgb(h, s, l)
 }
 
 /** İki token (veya token + sabit RGB yüzey) arasındaki kontrast oranı */
 function kontrast(a: string, b: string | [number, number, number]): number {
-  return rgbKontrast(ayrıştır(a), Array.isArray(b) ? b : ayrıştır(b))
+  return rgbKontrast(parse(a), Array.isArray(b) ? b : parse(b))
 }
 
-const dark = (ad: string) => tokenOku(ad, 'dark')!
+const dark = (name: string) => tokenOku(name, 'dark')!
 
 describe('#368 koyu tema token kontrastları', () => {
   it('hesaplayıcı DOĞRU — bilinen bir çift belgelenen oranı veriyor', () => {
@@ -93,7 +93,7 @@ describe('#368 koyu tema token kontrastları', () => {
 
   describe('--destructive: koyu temada METİN rolü (asıl bulgu, eski değer 1.79)', () => {
     it('gerçek kart zemini (#111827) üstünde AA geçiyor (>=4.5)', () => {
-      expect(kontrast(dark('destructive'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+      expect(kontrast(dark('destructive'), CARD_ACTUAL)).toBeGreaterThanOrEqual(4.5)
     })
 
     it('--background üstünde AA geçiyor (>=4.5)', () => {
@@ -101,7 +101,7 @@ describe('#368 koyu tema token kontrastları', () => {
     })
 
     it('hata kenarlığı rolünde 1.4.11 eşiğini geçiyor (>=3.0, eski değer 1.80)', () => {
-      expect(kontrast(dark('destructive'), KART_GERCEK)).toBeGreaterThanOrEqual(3.0)
+      expect(kontrast(dark('destructive'), CARD_ACTUAL)).toBeGreaterThanOrEqual(3.0)
     })
 
     it('dolgu rolü belgelenen trade-off tabanının altına DÜŞMÜYOR (fg ile >=3.0)', () => {
@@ -114,7 +114,7 @@ describe('#368 koyu tema token kontrastları', () => {
 
   describe('--muted: koyu temada dekoratif YÜZEY rolü (eski değer kartla 1.01)', () => {
     it('gerçek kart zemininden ayrışıyor (>=1.3 — Skeleton görünürlüğü)', () => {
-      expect(kontrast(dark('muted'), KART_GERCEK)).toBeGreaterThanOrEqual(1.3)
+      expect(kontrast(dark('muted'), CARD_ACTUAL)).toBeGreaterThanOrEqual(1.3)
     })
 
     it('--background üstünde ayrışıyor (>=1.3)', () => {
@@ -123,7 +123,7 @@ describe('#368 koyu tema token kontrastları', () => {
 
     it('AŞIRI açılmamış — subtle doğası korunuyor (kartla <=2.0)', () => {
       // Muted "belli belirsiz" bir yüzeydir; 2.0 üstü artık vurgulu bir bloktur.
-      expect(kontrast(dark('muted'), KART_GERCEK)).toBeLessThanOrEqual(2.0)
+      expect(kontrast(dark('muted'), CARD_ACTUAL)).toBeLessThanOrEqual(2.0)
     })
 
     it('--muted-foreground yeni muted zemini üstünde AA geçiyor (>=4.5, #284 deseni)', () => {
@@ -131,7 +131,7 @@ describe('#368 koyu tema token kontrastları', () => {
     })
 
     it('--muted-foreground kart ve --background üstünde AA korunuyor (>=4.5)', () => {
-      expect(kontrast(dark('muted-foreground'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+      expect(kontrast(dark('muted-foreground'), CARD_ACTUAL)).toBeGreaterThanOrEqual(4.5)
       expect(kontrast(dark('muted-foreground'), dark('background'))).toBeGreaterThanOrEqual(4.5)
     })
   })
@@ -145,7 +145,7 @@ describe('#368 koyu tema token kontrastları', () => {
     })
 
     it('vurgu metni alternatifi canlı: --primary-subtle-foreground kart üstünde AA (>=4.5)', () => {
-      expect(kontrast(dark('primary-subtle-foreground'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+      expect(kontrast(dark('primary-subtle-foreground'), CARD_ACTUAL)).toBeGreaterThanOrEqual(4.5)
     })
   })
 
@@ -155,8 +155,8 @@ describe('#368 koyu tema token kontrastları', () => {
       ['muted', '217.2 32.6% 96%'],
       ['muted-foreground', '215.4 16.3% 45%'],
       ['primary', '217.2 91.2% 51%'],
-    ])('--%s açık temada sabit: %s', (ad, beklenen) => {
-      expect(tokenOku(ad, 'light')).toBe(beklenen)
+    ])('--%s açık temada sabit: %s', (name, expected) => {
+      expect(tokenOku(name, 'light')).toBe(expected)
     })
   })
 })

package/src/components/ui/__tests__/heading-level-policy.test.tsx

@@ -36,10 +36,10 @@ describe('#345 AlertTitle — varsayılan başlık DEĞİL', () => {
 
   it('görsel sınıflar `as`ten BAĞIMSIZ', () => {
     const { unmount } = render(<AlertTitle data-testid="t">B</AlertTitle>)
-    const varsayilan = screen.getByTestId('t').className
+    const defaultValue = screen.getByTestId('t').className
     unmount()
     render(<AlertTitle as="h2" data-testid="t">B</AlertTitle>)
-    expect(screen.getByTestId('t').className).toBe(varsayilan)
+    expect(screen.getByTestId('t').className).toBe(defaultValue)
   })
 })
 
@@ -63,9 +63,9 @@ describe('#345 CardTitle — varsayılan KORUNDU', () => {
 
   it('görsel sınıflar `as`ten BAĞIMSIZ', () => {
     const { unmount } = render(<CardTitle data-testid="t">B</CardTitle>)
-    const varsayilan = screen.getByTestId('t').className
+    const defaultValue = screen.getByTestId('t').className
     unmount()
     render(<CardTitle as="div" data-testid="t">B</CardTitle>)
-    expect(screen.getByTestId('t').className).toBe(varsayilan)
+    expect(screen.getByTestId('t').className).toBe(defaultValue)
   })
 })

package/src/components/ui/__tests__/issue-643-card-token-parite.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * #643 (vaka 18 — TERS PARİTE: free geride) — free `card.tsx` ham `gray-*` sınıfları
+ * taşırken pro ikizinde 0 taneydi. Bu suite iki şeyi birden kilitler:
+ *   (a) hiçbir varyantın DOM'una ham gri sızmıyor (davranışsal),
+ *   (b) iki paketin kaynağı da 0 ham gri taşıyor (parite sondası — issue'nun
+ *       "test stratejisi" bölümünün istediği ham-renk-sınıfı sayacı).
+ */
+import * as fs from "fs";
+import * as path from "path";
+import { render, screen } from "@testing-library/react";
+
+import { Card } from "../card";
+
+const VARYANTLAR = ["default", "outline", "filled", "elevated", "gradient", "glass"] as const;
+
+/** Tailwind ham gri sınıfı: isteğe bağlı değiştirici öneki + `…gray-<basamak>`. */
+const HAM_GRI = /(?:^|\s)(?:[a-z-]+:)*[a-z-]*gray-\d+(?:\/\d+)?(?=\s|$)/;
+
+/**
+ * Kaynaktaki yorumları atıp yalnız KOD içindeki ham gri sınıflarını sayar.
+ *
+ * SIRA KRİTİK: satır yorumları ÖNCE atılır. Tersi yapılırsa bir `//` satırının
+ * içindeki ardışık eğik-yıldız dizisi blok yorum başlangıcı sanılır ve tarayıcı
+ * gerisini (cva gövdesi dahil) yutar — bu sonda ilk yazımında tam olarak buna
+ * düştü ve mutasyon testi sessizce YEŞİL kaldı.
+ */
+function hamGriSay(dosya: string): string[] {
+  const src = fs.readFileSync(dosya, "utf8");
+  const kod = src.replace(/^\s*\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+  return kod.match(/[a-z-]*gray-\d+(?:\/\d+)?/g) ?? [];
+}
+
+describe("#643 vaka 18 — Card varyantlarında ham gri yok", () => {
+  it.each(VARYANTLAR)('variant="%s" DOM className\'inde ham gray-* taşımaz', (variant) => {
+    render(
+      <Card variant={variant} data-testid="kart">
+        gövde
+      </Card>
+    );
+    const sinif = screen.getByTestId("kart").className;
+    expect(sinif).not.toMatch(HAM_GRI);
+  });
+
+  it("taban artık kenar rengini token'dan alıyor (açık temada da)", () => {
+    render(<Card data-testid="kart">gövde</Card>);
+    const kart = screen.getByTestId("kart");
+    /* Eskiden taban yalnız `border` (genişlik) taşıyordu; renk Tailwind
+       varsayılanı `gray-200`den geliyordu — yani AÇIK tema kenarı token'ın
+       dışındaydı. `border-border` ikisini de token'a bağlar. */
+    expect(kart).toHaveClass("border");
+    expect(kart).toHaveClass("border-border");
+    expect(kart).toHaveClass("bg-card");
+  });
+
+  it("filled koyu tema yüzeyi ayrışan token'a bağlı (`--muted`)", () => {
+    render(
+      <Card variant="filled" data-testid="kart">
+        gövde
+      </Card>
+    );
+    const kart = screen.getByTestId("kart");
+    expect(kart).toHaveClass("bg-secondary");
+    expect(kart).toHaveClass("dark:bg-muted");
+    /* `--secondary` koyu temada rgb(2,8,23), sayfa zemini rgb(3,7,17) → 1.01,
+       yani yüzey görünmez olurdu. `dark:bg-secondary` bilinçli olarak REDDEDİLDİ. */
+    expect(kart).not.toHaveClass("dark:bg-secondary");
+  });
+
+  it("metin rengi tüketici override'ını ezen `dark:text-*` katmanı taşımıyor", () => {
+    render(
+      <Card className="text-blue-300" data-testid="kart">
+        gövde
+      </Card>
+    );
+    const sinif = screen.getByTestId("kart").className;
+    /* #646'nın `dark:bg-gray-900` için belgelediği tuzağın aynısı: farklı
+       değiştirici kümesi → tailwind-merge çakıştırmaz, `.dark` özgüllüğü kazanır
+       ve tüketicinin rengini sessizce ezerdi. */
+    expect(sinif).toContain("text-blue-300");
+    expect(sinif).not.toMatch(/dark:text-/);
+  });
+
+  it("glass ve elevated gölge/kenar renkleri nötr (gri değil)", () => {
+    render(
+      <Card variant="glass" data-testid="cam">
+        gövde
+      </Card>
+    );
+    expect(screen.getByTestId("cam")).toHaveClass("dark:border-white/10");
+    expect(screen.getByTestId("cam")).toHaveClass("dark:bg-black/10");
+  });
+});
+
+describe("#643 parite sondası — free ↔ pro ham renk sınıfı sayısı", () => {
+  const freeCard = path.resolve(__dirname, "../card.tsx");
+  const proCard = path.resolve(
+    __dirname,
+    "../../../../../moonui-pro/src/components/ui/card.tsx"
+  );
+
+  it("iki kaynak dosyası da mevcut (yol sondası bozulmadı)", () => {
+    expect(fs.existsSync(freeCard)).toBe(true);
+    expect(fs.existsSync(proCard)).toBe(true);
+  });
+
+  it("free card.tsx kodunda 0 ham gray-* sınıfı var", () => {
+    expect(hamGriSay(freeCard)).toEqual([]);
+  });
+
+  it("pro card.tsx kodunda 0 ham gray-* sınıfı var (parite korunuyor)", () => {
+    expect(hamGriSay(proCard)).toEqual([]);
+  });
+});