@moontra/moonui 6.24.0 → 6.26.0

package/src/components/ui/__tests__/switch-variant-contrast.test.tsx

@@ -53,12 +53,12 @@ type RGB = [number, number, number]
 type Blok = 'light' | 'dark'
 
 /** "H S% L%" ya da "R G B" biçimindeki ham token değeri (light = `.moonui-root`, dark = `.dark`) */
-function tokenOku(ad: string, blok: Blok): string | null {
-  const kaynak =
+function tokenOku(name: string, blok: Blok): 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): RGB {
@@ -85,10 +85,10 @@ const rgbTokenRgb = (v: string): RGB => {
 }
 
 /** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
-const semantikRgb = (ad: string, blok: Blok): RGB =>
-  hslTokenRgb(tokenOku(ad, blok) ?? tokenOku(ad, 'light')!)
+const semanticRgb = (name: string, blok: Blok): RGB =>
+  hslTokenRgb(tokenOku(name, blok) ?? tokenOku(name, 'light')!)
 
-function bagilParlaklik([r, g, b]: RGB): number {
+function relativeLuminance([r, g, b]: RGB): 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)
@@ -97,8 +97,8 @@ function bagilParlaklik([r, g, b]: RGB): number {
 }
 
 function kontrast(a: RGB, b: RGB): 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)
 }
@@ -130,61 +130,61 @@ function deltaE(a: RGB, b: RGB): number {
 }
 
 /** Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#284/#368/#448 konvansiyonu) */
-const KART_GERCEK_DARK: RGB = [17, 24, 39]
+const CARD_ACTUAL_DARK: RGB = [17, 24, 39]
 
-function zeminler(blok: Blok): Array<[string, RGB]> {
+function backgrounds(blok: Blok): Array<[string, RGB]> {
   const z: Array<[string, RGB]> = [
-    ['--background', semantikRgb('background', blok)],
-    ['--card', semantikRgb('card', blok)],
+    ['--background', semanticRgb('background', blok)],
+    ['--card', semanticRgb('card', blok)],
   ]
-  if (blok === 'dark') z.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  if (blok === 'dark') z.push(['gerçek kart #111827', CARD_ACTUAL_DARK])
   return z
 }
 
 // ——— Renkler KAYNAKTAN türetilir (PR #440/#446/#453 dersi) ——————————————
-const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/switch.tsx'), 'utf8')
+const source = fs.readFileSync(path.join(KOK, 'components/ui/switch.tsx'), 'utf8')
 /** Yorum satırları ayıklanır — gerekçe metinleri `varyant:` gibi görünmesin */
-const yorumsuz = kaynak.replace(/^[ \t]*\/\/.*$/gm, '')
-const TRACK_CVA = yorumsuz.slice(
-  yorumsuz.indexOf('const switchVariants'),
-  yorumsuz.indexOf('const switchThumbVariants')
+const stripComments = source.replace(/^[ \t]*\/\/.*$/gm, '')
+const TRACK_CVA = stripComments.slice(
+  stripComments.indexOf('const switchVariants'),
+  stripComments.indexOf('const switchThumbVariants')
 )
-const THUMB_CVA = yorumsuz.slice(
-  yorumsuz.indexOf('const switchThumbVariants'),
-  yorumsuz.indexOf('export interface SwitchProps')
+const THUMB_CVA = stripComments.slice(
+  stripComments.indexOf('const switchThumbVariants'),
+  stripComments.indexOf('export interface SwitchProps')
 )
 
-const VARYANTLAR = ['primary', 'success', 'warning', 'destructive', 'secondary'] as const
-type Varyant = (typeof VARYANTLAR)[number]
+const VARIANTS = ['primary', 'success', 'warning', 'destructive', 'secondary'] as const
+type Varyant = (typeof VARIANTS)[number]
 
 /** CVA `variant` bloğundaki ham sınıf dizgesi */
-function varyantSinifi(varyant: string): string {
-  const m = TRACK_CVA.match(new RegExp(`\\n\\s*${varyant}:\\s*"([^"]+)"`))
-  if (!m) throw new Error(`${varyant} varyantı switchVariants içinde bulunamadı`)
+function variantClass(variantVal: string): string {
+  const m = TRACK_CVA.match(new RegExp(`\\n\\s*${variantVal}:\\s*"([^"]+)"`))
+  if (!m) throw new Error(`${variantVal} varyantı switchVariants içinde bulunamadı`)
   return m[1]
 }
 
 /** `bg-primary` / `bg-[rgb(var(--secondary-500))]` → RGB */
-function sinifRengi(sinif: string, blok: Blok): RGB {
-  const skala = sinif.match(/^bg-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
-  if (skala) return rgbTokenRgb(tokenOku(skala[1], 'light')!) // skala YALNIZ light blokta
-  const semantik = sinif.match(/^bg-([a-z-]+)$/)
-  if (semantik) return semantikRgb(semantik[1], blok)
-  throw new Error(`çözülemeyen sınıf: ${sinif}`)
+function classColor(cls: string, blok: Blok): RGB {
+  const scale = cls.match(/^bg-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
+  if (scale) return rgbTokenRgb(tokenOku(scale[1], 'light')!) // skala YALNIZ light blokta
+  const semantic = cls.match(/^bg-([a-z-]+)$/)
+  if (semantic) return semanticRgb(semantic[1], blok)
+  throw new Error(`çözülemeyen sınıf: ${cls}`)
 }
 
 /** checked track'in ilgili temadaki rengi — `dark:` önekli sınıf dark'ta kazanır */
-function checkedTrackRengi(varyant: string, blok: Blok): RGB {
+function checkedTrackRengi(variantVal: string, blok: Blok): RGB {
   const KOSUL = 'data-[state=checked]:'
-  const adaylar = varyantSinifi(varyant)
+  const adaylar = variantClass(variantVal)
     .split(/\s+/)
     .filter(Boolean)
     .filter((s) => s.replace(/^dark:/, '').startsWith(KOSUL))
   const soy = (s: string) => s.replace(/^dark:/, '').slice(KOSUL.length)
-  const darkSinif = adaylar.find((s) => s.startsWith('dark:'))
-  const lightSinif = adaylar.find((s) => !s.startsWith('dark:'))
-  if (!lightSinif) throw new Error(`${varyant}: temel (light) checked sınıfı yok`)
-  return sinifRengi(soy(blok === 'dark' && darkSinif ? darkSinif : lightSinif), blok)
+  const darkClass = adaylar.find((s) => s.startsWith('dark:'))
+  const lightClass = adaylar.find((s) => !s.startsWith('dark:'))
+  if (!lightClass) throw new Error(`${variantVal}: temel (light) checked sınıfı yok`)
+  return classColor(soy(blok === 'dark' && darkClass ? darkClass : lightClass), blok)
 }
 
 /** Thumb'ın dolgusu — A ve B eksenlerinin AYNI sayıyı vermesinin sebebi */
@@ -192,24 +192,24 @@ function thumbRengi(blok: Blok): RGB {
   const m = THUMB_CVA.match(/"([^"]*\bbg-[a-z-]+\b[^"]*)"/)
   if (!m) throw new Error('thumb taban sınıfı okunamadı')
   const bg = m[1].split(/\s+/).find((s) => s.startsWith('bg-'))!
-  return sinifRengi(bg, blok)
+  return classColor(bg, blok)
 }
 
 const KADEMELER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-const ESIK = 3.0
-const DELTAE_ESIK = 10
+const THRESHOLD = 3.0
+const DELTAE_THRESHOLD = 10
 
 /** Bir rengin switch eksenlerinde (A + B) o temada eşiği geçip geçmediği */
-const eksenleriGecer = (c: RGB, blok: Blok): boolean =>
-  zeminler(blok).every(([, z]) => kontrast(c, z) >= ESIK) &&
-  kontrast(thumbRengi(blok), c) >= ESIK
+const passesAxes = (c: RGB, blok: Blok): boolean =>
+  backgrounds(blok).every(([, z]) => kontrast(c, z) >= THRESHOLD) &&
+  kontrast(thumbRengi(blok), c) >= THRESHOLD
 
 describe('#454 — hesaplayıcı çapaları', () => {
   it('kontrast hesaplayıcısı DOĞRU — belgelenmiş token çifti beklenen oranı veriyor', () => {
     // tokens.css `--info-subtle` / `--info-subtle-foreground` için 9.5:1 iddia ediyor
     const oran = kontrast(
-      semantikRgb('info-subtle', 'light'),
-      semantikRgb('info-subtle-foreground', 'light')
+      semanticRgb('info-subtle', 'light'),
+      semanticRgb('info-subtle-foreground', 'light')
     )
     expect(oran).toBeGreaterThan(9.3)
     expect(oran).toBeLessThan(9.7)
@@ -222,13 +222,13 @@ describe('#454 — hesaplayıcı çapaları', () => {
 
   it('hesaplayıcı, issue #454 gövdesindeki ESKİ ölçümleri birebir üretiyor', () => {
     // 1.154 / 1.359 / 1.197 — `bg-accent` ile checked track ↔ üç zemin
-    const eski = (blok: Blok) =>
-      zeminler(blok).map(([, z]) =>
-        Number(kontrast(semantikRgb('accent', blok), z).toFixed(3))
+    const old = (blok: Blok) =>
+      backgrounds(blok).map(([, z]) =>
+        Number(kontrast(semanticRgb('accent', blok), z).toFixed(3))
       )
-    expect(eski('light')[0]).toBe(1.154)
-    expect(eski('dark')[0]).toBe(1.359)
-    expect(eski('dark')[2]).toBe(1.197)
+    expect(old('light')[0]).toBe(1.154)
+    expect(old('dark')[0]).toBe(1.359)
+    expect(old('dark')[2]).toBe(1.197)
   })
 })
 
@@ -238,7 +238,7 @@ describe('#454 — iki eksenin AYNI olmasının yapısal sebebi', () => {
     // "tek ölçüm iki ekseni kapatır" varsayımı sessizce geçersizleşir.
     expect(THUMB_CVA).toContain('bg-background')
     for (const blok of ['light', 'dark'] as const) {
-      expect(thumbRengi(blok)).toEqual(semantikRgb('background', blok))
+      expect(thumbRengi(blok)).toEqual(semanticRgb('background', blok))
     }
   })
 
@@ -252,17 +252,17 @@ describe('#454 — iki eksenin AYNI olmasının yapısal sebebi', () => {
 })
 
 describe('#454 — KABUL KRİTERİ: her varyantın checked track’i iki eksende ≥3:1', () => {
-  for (const varyant of VARYANTLAR) {
+  for (const variantVal of VARIANTS) {
     for (const blok of ['light', 'dark'] as const) {
-      it(`${varyant} / ${blok}`, () => {
-        const c = checkedTrackRengi(varyant, blok)
-        for (const [ad, z] of zeminler(blok)) {
+      it(`${variantVal} / ${blok}`, () => {
+        const c = checkedTrackRengi(variantVal, blok)
+        for (const [name, z] of backgrounds(blok)) {
           // Zemin adı hata mesajına girsin diye ayrı assertion
-          expect(`${ad}: ${kontrast(c, z) >= ESIK ? 'geçer' : kontrast(c, z).toFixed(3)}`).toBe(
-            `${ad}: geçer`
+          expect(`${name}: ${kontrast(c, z) >= THRESHOLD ? 'geçer' : kontrast(c, z).toFixed(3)}`).toBe(
+            `${name}: geçer`
           )
         }
-        expect(kontrast(thumbRengi(blok), c)).toBeGreaterThanOrEqual(ESIK)
+        expect(kontrast(thumbRengi(blok), c)).toBeGreaterThanOrEqual(THRESHOLD)
       })
     }
   }
@@ -270,26 +270,26 @@ describe('#454 — KABUL KRİTERİ: her varyantın checked track’i iki eksende
 
 describe('#454 — klon filtresi: varyantlar birbirinden ayırt edilebilir', () => {
   for (const blok of ['light', 'dark'] as const) {
-    it(`${blok} — tüm varyant çiftleri ΔE*ab ≥ ${DELTAE_ESIK}`, () => {
-      for (let i = 0; i < VARYANTLAR.length; i++) {
-        for (let j = i + 1; j < VARYANTLAR.length; j++) {
-          const cift = `${VARYANTLAR[i]}↔${VARYANTLAR[j]}`
+    it(`${blok} — tüm varyant çiftleri ΔE*ab ≥ ${DELTAE_THRESHOLD}`, () => {
+      for (let i = 0; i < VARIANTS.length; i++) {
+        for (let j = i + 1; j < VARIANTS.length; j++) {
+          const pair = `${VARIANTS[i]}↔${VARIANTS[j]}`
           const d = deltaE(
-            checkedTrackRengi(VARYANTLAR[i], blok),
-            checkedTrackRengi(VARYANTLAR[j], blok)
+            checkedTrackRengi(VARIANTS[i], blok),
+            checkedTrackRengi(VARIANTS[j], blok)
           )
           // Çift adı hata mesajına girsin diye dizge karşılaştırması
-          expect(`${cift}: ${d >= DELTAE_ESIK ? 'ayrık' : d.toFixed(1)}`).toBe(`${cift}: ayrık`)
+          expect(`${pair}: ${d >= DELTAE_THRESHOLD ? 'ayrık' : d.toFixed(1)}`).toBe(`${pair}: ayrık`)
         }
       }
     })
 
     it(`${blok} — checked track, UNCHECKED track’ten (bg-input) ayırt edilebilir`, () => {
       // Açık switch'in kapalıya benzemesi tam olarak bu issue'nun şikâyeti.
-      const unchecked = semantikRgb('input', blok)
-      for (const varyant of VARYANTLAR) {
-        expect(deltaE(checkedTrackRengi(varyant, blok), unchecked)).toBeGreaterThanOrEqual(
-          DELTAE_ESIK
+      const unchecked = semanticRgb('input', blok)
+      for (const variantVal of VARIANTS) {
+        expect(deltaE(checkedTrackRengi(variantVal, blok), unchecked)).toBeGreaterThanOrEqual(
+          DELTAE_THRESHOLD
         )
       }
     })
@@ -299,8 +299,8 @@ describe('#454 — klon filtresi: varyantlar birbirinden ayırt edilebilir', ()
 describe('#454 — `secondary` kararı: ad ↔ token tutarsızlığı ve reddedilen alternatifler', () => {
   it('ESKİ hâli (`bg-accent`) üç zeminde de eşiğin ALTINDA — kusur gerçek', () => {
     for (const blok of ['light', 'dark'] as const) {
-      for (const [, z] of zeminler(blok)) {
-        expect(kontrast(semantikRgb('accent', blok), z)).toBeLessThan(ESIK)
+      for (const [, z] of backgrounds(blok)) {
+        expect(kontrast(semanticRgb('accent', blok), z)).toBeLessThan(THRESHOLD)
       }
     }
   })
@@ -308,8 +308,8 @@ describe('#454 — `secondary` kararı: ad ↔ token tutarsızlığı ve reddedi
   it('SEMANTİK `bg-secondary` ELENDİ — light’ta `--accent` ile BİREBİR aynı, dark’ta daha kötü', () => {
     // "Adı secondary ise bg-secondary kullansın" en bariz alternatif; ölçümle elendi.
     expect(tokenOku('secondary', 'light')).toBe(tokenOku('accent', 'light'))
-    expect(kontrast(semantikRgb('secondary', 'light'), semantikRgb('background', 'light'))).toBeLessThan(ESIK)
-    expect(kontrast(semantikRgb('secondary', 'dark'), semantikRgb('background', 'dark'))).toBeLessThan(1.05)
+    expect(kontrast(semanticRgb('secondary', 'light'), semanticRgb('background', 'light'))).toBeLessThan(THRESHOLD)
+    expect(kontrast(semanticRgb('secondary', 'dark'), semanticRgb('background', 'dark'))).toBeLessThan(1.05)
   })
 
   it('`bg-secondary-foreground` ELENDİ — dark’ta `--primary` ile BİREBİR aynı (primary klonu)', () => {
@@ -317,30 +317,30 @@ describe('#454 — `secondary` kararı: ad ↔ token tutarsızlığı ve reddedi
   })
 
   it('slate skalasında iki temayı birden geçen VE klon olmayan TEK kademe 500', () => {
-    const uygun = KADEMELER.filter((k) => {
+    const suitable = KADEMELER.filter((k) => {
       const ham = tokenOku(`secondary-${k}`, 'light')
       if (!ham) return false
       const c = rgbTokenRgb(ham)
       return (['light', 'dark'] as const).every(
         (blok) =>
-          eksenleriGecer(c, blok) &&
+          passesAxes(c, blok) &&
           (['primary', 'success', 'warning', 'destructive'] as Varyant[]).every(
-            (v) => deltaE(c, checkedTrackRengi(v, blok)) >= DELTAE_ESIK
+            (v) => deltaE(c, checkedTrackRengi(v, blok)) >= DELTAE_THRESHOLD
           )
       )
     })
-    expect(uygun).toEqual([500])
+    expect(suitable).toEqual([500])
   })
 
   it('#448’in slider’daki 500-elemesi BURADA GEÇERSİZ — switch’in `accent` varyantı YOK', () => {
     // #453 ölçümü: `--secondary-500` ↔ slider'ın `secondary` varyantı ΔE = 0.0 (klon).
     // Switch'te o çakışma yok; kaynak varyant listesi bunu kanıtlar.
-    expect(VARYANTLAR).not.toContain('accent')
+    expect(VARIANTS).not.toContain('accent')
     expect(TRACK_CVA).not.toMatch(/\n\s*accent:/)
     const k500 = rgbTokenRgb(tokenOku('secondary-500', 'light')!)
     for (const blok of ['light', 'dark'] as const) {
       for (const v of ['primary', 'success', 'warning', 'destructive'] as Varyant[]) {
-        expect(deltaE(k500, checkedTrackRengi(v, blok))).toBeGreaterThanOrEqual(DELTAE_ESIK)
+        expect(deltaE(k500, checkedTrackRengi(v, blok))).toBeGreaterThanOrEqual(DELTAE_THRESHOLD)
       }
     }
   })
@@ -361,26 +361,26 @@ describe('#454 — `warning` kardeş kusuru: kök neden ve çözüm şekli', ()
   })
 
   it('ESKİ hâli (`bg-warning`) LIGHT’ta eşiğin altında, DARK’ta değil', () => {
-    expect(kontrast(semantikRgb('warning', 'light'), semantikRgb('background', 'light'))).toBeLessThan(ESIK)
-    expect(kontrast(semantikRgb('warning', 'dark'), semantikRgb('background', 'dark'))).toBeGreaterThan(ESIK)
+    expect(kontrast(semanticRgb('warning', 'light'), semanticRgb('background', 'light'))).toBeLessThan(THRESHOLD)
+    expect(kontrast(semanticRgb('warning', 'dark'), semanticRgb('background', 'dark'))).toBeGreaterThan(THRESHOLD)
   })
 
   it('tema-KÖR bir warning kademesi seçilebilirdi ama DARK’ı gereksizce oynatırdı', () => {
     // `dark:` ayrımının gerekçesi: dark zaten geçiyordu, regresyon yüzeyi sıfır tutuldu.
-    const temaKor = KADEMELER.filter((k) => {
+    const themeBlind = KADEMELER.filter((k) => {
       const ham = tokenOku(`warning-${k}`, 'light')
-      return ham && (['light', 'dark'] as const).every((b) => eksenleriGecer(rgbTokenRgb(ham), b))
+      return ham && (['light', 'dark'] as const).every((b) => passesAxes(rgbTokenRgb(ham), b))
     })
-    expect(temaKor).toEqual([700])
-    expect(checkedTrackRengi('warning', 'dark')).toEqual(semantikRgb('warning', 'dark'))
+    expect(themeBlind).toEqual([700])
+    expect(checkedTrackRengi('warning', 'dark')).toEqual(semanticRgb('warning', 'dark'))
   })
 
   it('LIGHT’ta eşiği geçen kademe kümesi {700,800,900,950} — en açığı seçildi', () => {
-    const gecen = KADEMELER.filter((k) => {
+    const passedCount = KADEMELER.filter((k) => {
       const ham = tokenOku(`warning-${k}`, 'light')
-      return ham && eksenleriGecer(rgbTokenRgb(ham), 'light')
+      return ham && passesAxes(rgbTokenRgb(ham), 'light')
     })
-    expect(gecen).toEqual([700, 800, 900, 950])
+    expect(passedCount).toEqual([700, 800, 900, 950])
     expect(checkedTrackRengi('warning', 'light')).toEqual(
       rgbTokenRgb(tokenOku('warning-700', 'light')!)
     )
@@ -389,34 +389,34 @@ describe('#454 — `warning` kardeş kusuru: kök neden ve çözüm şekli', ()
   it('DARK render BİT-BİT AYNI kaldı (warning + dokunulmayan varyantlar)', () => {
     for (const v of ['primary', 'success', 'warning', 'destructive'] as Varyant[]) {
       const tok = v === 'destructive' ? 'error' : v
-      expect(checkedTrackRengi(v, 'dark')).toEqual(semantikRgb(tok, 'dark'))
+      expect(checkedTrackRengi(v, 'dark')).toEqual(semanticRgb(tok, 'dark'))
     }
   })
 })
 
 describe('#454 — kaynak sözleşmesi (switch.tsx)', () => {
   it('`secondary` → slate skalasının 500 kademesi, `dark:` ayrımı YOK', () => {
-    expect(varyantSinifi('secondary')).toBe('data-[state=checked]:bg-[rgb(var(--secondary-500))]')
+    expect(variantClass('secondary')).toBe('data-[state=checked]:bg-[rgb(var(--secondary-500))]')
   })
 
   it('`warning` → light -700, dark semantik token', () => {
-    expect(varyantSinifi('warning')).toBe(
+    expect(variantClass('warning')).toBe(
       'data-[state=checked]:bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning'
     )
   })
 
   it('KAPSAM KİLİDİ: geçen üç varyant DOKUNULMADI', () => {
-    expect(varyantSinifi('primary')).toBe('data-[state=checked]:bg-primary')
-    expect(varyantSinifi('success')).toBe('data-[state=checked]:bg-success')
-    expect(varyantSinifi('destructive')).toBe('data-[state=checked]:bg-error')
+    expect(variantClass('primary')).toBe('data-[state=checked]:bg-primary')
+    expect(variantClass('success')).toBe('data-[state=checked]:bg-success')
+    expect(variantClass('destructive')).toBe('data-[state=checked]:bg-error')
   })
 
   it('KAPSAM KİLİDİ: unchecked track ve prop yüzeyi DEĞİŞMEDİ', () => {
     expect(TRACK_CVA).toContain('data-[state=unchecked]:bg-input')
-    expect(kaynak).toContain(
+    expect(source).toContain(
       'type SwitchVariant = "primary" | "success" | "warning" | "destructive" | "secondary";'
     )
-    expect(kaynak).toContain('export { Switch, switchVariants }')
+    expect(source).toContain('export { Switch, switchVariants }')
   })
 
   it('`bg-secondary-500` YAZILMADI — preset secondary skalasını hâlâ açmıyor (#307 ölü-sınıf tuzağı)', () => {
@@ -453,31 +453,31 @@ describe('#454 — kaynak sözleşmesi (switch.tsx)', () => {
 })
 
 describe('#454 — render sözleşmesi (<Switch />)', () => {
-  const sinif = (jsx: React.ReactElement) => {
+  const cls = (jsx: React.ReactElement) => {
     const { container } = render(jsx)
     return (container.querySelector('[role="switch"]') as HTMLElement).className
   }
 
   it('checked `secondary` switch slate-500 sınıfını taşıyor', () => {
-    expect(sinif(<Switch variant="secondary" defaultChecked />)).toContain(
+    expect(cls(<Switch variant="secondary" defaultChecked />)).toContain(
       'data-[state=checked]:bg-[rgb(var(--secondary-500))]'
     )
   })
 
   it('checked `secondary` switch ARTIK `bg-accent` taşımıyor', () => {
-    expect(sinif(<Switch variant="secondary" defaultChecked />)).not.toContain(
+    expect(cls(<Switch variant="secondary" defaultChecked />)).not.toContain(
       'data-[state=checked]:bg-accent'
     )
   })
 
   it('checked `warning` switch light -700 + dark semantik sınıflarını birlikte taşıyor', () => {
-    const c = sinif(<Switch variant="warning" defaultChecked />)
+    const c = cls(<Switch variant="warning" defaultChecked />)
     expect(c).toContain('data-[state=checked]:bg-[rgb(var(--warning-700))]')
     expect(c).toContain('dark:data-[state=checked]:bg-warning')
   })
 
   it('varsayılan varyant (primary) ve unchecked davranışı korunuyor', () => {
-    const c = sinif(<Switch />)
+    const c = cls(<Switch />)
     expect(c).toContain('data-[state=checked]:bg-primary')
     expect(c).toContain('data-[state=unchecked]:bg-input')
   })

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

@@ -482,6 +482,128 @@ describe('Tooltip Components', () => {
       })
     })
 
+    // #650 — WCAG 1.4.13 "Content on Hover or Focus"
+    //
+    // Radix `TooltipContentImpl` KOŞULSUZ bir "kaydırma → kapat" etkisi kurar:
+    //   window.addEventListener("scroll", e => {
+    //     if (e.target?.contains(trigger)) onClose()
+    //   }, { capture: true })
+    //
+    // Görünür alanın dışındaki bir tetikleyiciye `Tab` ile gelindiğinde tarayıcı
+    // elemanı görünür alana kaydırır → tooltip açıldığı anda kapanır. Gerçek
+    // tarayıcıda ölçülen sıra (docs sayfası, 365 gerçek `Tab` basışı):
+    //   FOCUSIN → data-state=instant-open (+4.5 ms) → SCROLL → closed (+6.4 ms)
+    //
+    // Aşağıdaki testler o zincirin tamamını jsdom'da yeniden üretir: gerçek odak
+    // (userEvent.tab → jsdom `focus`+`focusin`) + tetikleyiciyi İÇEREN bir hedefte
+    // kaydırma olayı. Düzeltme geri alınırsa ilk test kırmızıya döner.
+    describe('#650 Klavye Odağı Kalıcılığı (WCAG 1.4.13)', () => {
+      // Tetikleyiciyi kapsayan bir hedefte kaydırma üret. Radix dinleyicisi
+      // `window` üzerinde YAKALAMA fazındadır; `document`e gönderilen olay
+      // oraya `target === document` ile ulaşır ve `document.contains(trigger)`
+      // doğru olduğu için kapatma tetiklenir.
+      const scrollTriggerIntoView = () => {
+        fireEvent.scroll(document)
+      }
+
+      it('klavye odağı tooltip"i açar', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Keyboard reachable" delayDuration={0}>
+            <button>Focus me</button>
+          </Tooltip>
+        )
+
+        await user.tab()
+        expect(screen.getByRole('button')).toHaveFocus()
+
+        expect(await screen.findByRole('tooltip')).toHaveTextContent('Keyboard reachable')
+      })
+
+      it('odak kaydırması tooltip"i KAPATMAZ (asıl #650 gerilemesi)', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Keyboard reachable" delayDuration={0}>
+            <button>Focus me</button>
+          </Tooltip>
+        )
+
+        await user.tab()
+        expect(await screen.findByRole('tooltip')).toBeInTheDocument()
+
+        // Tarayıcının odaklanan elemanı görünür alana taşıması
+        scrollTriggerIntoView()
+        scrollTriggerIntoView() // yumuşak kaydırma birden çok olay üretir
+
+        // Odak hâlâ tetikleyicide → içerik görünür KALMALI ("Persistent")
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+        expect(screen.getByRole('button')).toHaveFocus()
+      })
+
+      it('Escape klavye odağındaki tooltip"i kapatır ("Dismissible")', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Keyboard reachable" delayDuration={0}>
+            <button>Focus me</button>
+          </Tooltip>
+        )
+
+        await user.tab()
+        expect(await screen.findByRole('tooltip')).toBeInTheDocument()
+
+        await user.keyboard('{Escape}')
+
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+        // Odak tetikleyicide kalır — Escape yalnız içeriği kapatır
+        expect(screen.getByRole('button')).toHaveFocus()
+      })
+
+      it('odak ayrıldığında tooltip yine kapanır (kilit sızmıyor)', async () => {
+        const user = userEvent.setup()
+        render(
+          <div>
+            <Tooltip content="Keyboard reachable" delayDuration={0}>
+              <button>Focus me</button>
+            </Tooltip>
+            <button>Next</button>
+          </div>
+        )
+
+        await user.tab()
+        expect(await screen.findByRole('tooltip')).toBeInTheDocument()
+
+        await user.tab() // sonraki tetiklenebilir elemana geç
+        expect(screen.getByRole('button', { name: 'Next' })).toHaveFocus()
+
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+      })
+
+      it('FARE ile açılan tooltip kaydırmada kapanmaya devam eder (kilit klavyeye özgü)', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Pointer opened" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+        // Odak hiç oluşmadı → kilit yok → Radix'in kaydırma davranışı korunur
+        scrollTriggerIntoView()
+
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+      })
+    })
+
     describe('Controlled State', () => {
       it('renders open when defaultOpen is set and reports changes', async () => {
         const onOpenChange = jest.fn()

package/src/components/ui/accordion.tsx

@@ -20,7 +20,12 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("moonui-theme", "border-b border-gray-200 dark:border-gray-800", className)}
+    // #661-17: ham `border-gray-200 dark:border-gray-800` → `border-border`.
+    // Pro ikizi (accordion.tsx:21-23) zaten `border-border` kullanıyor; free
+    // taraf ham palette kalınca tema/marka özelleştirmesi bu kenarlığa
+    // İŞLEMİYORDU. Token değerleri görsel olarak denk: --border açık temada
+    // 214.3 31.8% 91.4% (≈ gray-200), koyu temada 216 34% 17% (≈ gray-800).
+    className={cn("moonui-theme", "border-b border-border", className)}
     {...props}
   />
 ))
@@ -34,7 +39,9 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all dark:text-gray-100",
+        // #661-17: `dark:text-gray-100` KALDIRILDI — tetikleyici artık iki temada
+        // da `--foreground`u miras alır (koyu temada 213 31% 91% ≈ gray-100).
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all",
         "hover:underline hover:text-primary",
         "[&[data-state=open]>svg]:rotate-180",
         className
@@ -55,7 +62,13 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm text-gray-700 dark:text-gray-300 transition-all", 
+      // #661-17: ham `text-gray-700 dark:text-gray-300` → `text-foreground/80`.
+      // Ölçüldü (iki tema, kart zemini): açık 10.30 → 11.48, koyu 12.19 → 9.44.
+      // İkisi de AA'nın (4.5) çok üstünde, yani eşik geçilmiyor — `#545 ihlal
+      // takası` sınıfı bir gerileme YOK. `text-muted-foreground` bilerek
+      // SEÇİLMEDİ: açık temada 4.76'ya inip gövde metnini görünür biçimde
+      // soldururdu (§9 estetik değişiklik olurdu).
+      "overflow-hidden text-sm text-foreground/80 transition-all",
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className
     )}

package/src/components/ui/alert.tsx

@@ -21,7 +21,7 @@ const alertVariants = cva(
                 default: "bg-background text-foreground border-border",
                 primary: "bg-primary/10 text-primary border-primary/30",
                 success: "bg-success/10 text-success border-success/30",
-                warning: "bg-warning/10 text-warning border-warning/30",
+                warning: "bg-warning/10 text-warning-subtle-foreground border-warning/30",
                 error: "bg-destructive/10 text-destructive border-destructive/30",
                 // `--info` token'ı (tokens.css) blue-500 ile birebir aynı değeri
                 // taşır → görsel değişiklik yok, ancak varyant artık temaya ve

package/src/components/ui/badge.tsx

@@ -25,11 +25,22 @@ const badgeVariants = cva(
         // aynı varyant pro pakette token'lıydı → free ve pro `primary` için
         // farklı renk üretiyordu. Artık token'a bağlı (tema/karanlık moda duyarlı).
         // `primary` VARSAYILAN varyant olduğu için görünür bir renk değişimidir.
+        // #646: `dark:bg-primary/90` KALDIRILDI. `primary` VARSAYILAN varyant olduğu
+        // için varyant verilmeyen HER `<Badge>` bu sınıfı alıyordu; `tailwind-merge`
+        // `dark:` önekli arka planı tüketicinin ÖNEKSİZ `bg-*` sınıfıyla aynı grupta
+        // görmediğinden ikisi birden hayatta kalıyor ve koyu temada `dark:` özgüllükle
+        // kazanıyordu. Sonuç: `<Badge className="bg-green-500/20 text-green-300">`
+        // koyu temada near-white zemin + açık yeşil metin = 1.10:1 (ölçüldü,
+        // magnetic-button "Pending"; swipe-actions'ta 6 rozet 1.10–1.48 aralığında).
+        // ÖNEKSİZ `bg-primary` bırakıldı: tüketici sınıfıyla AYNI grupta çakışır ve
+        // doğru şekilde ezilir. Rozetin kendi görünümü BOZULMAZ — koyu temada
+        // `bg-primary` + `text-primary-foreground` 16.16 → 19.80'e çıkar
+        // (yarı saydamlık kalktığı için); açık temada değişiklik yok.
         primary: [
           "border-transparent bg-primary text-primary-foreground",
           "hover:bg-primary/90",
           "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
-          "dark:bg-primary/90 dark:shadow-inner dark:shadow-primary/10",
+          "dark:shadow-inner dark:shadow-primary/10",
         ],
         secondary: [
           "border-transparent bg-secondary text-secondary-foreground",