@moontra/moonui 6.19.1 → 6.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.19.1",
+  "version": "6.19.2",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

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

@@ -0,0 +1,553 @@
+/**
+ * #448 — Slider `accent` kontrast değişmezleri (İKİ AYRI EKSEN, İKİ TEMA).
+ *
+ * BULGU (PR #446'nın kapsam-dışı kardeş bulgusu): `accent` varyantı HER İKİ eksende
+ * ve HER İKİ temada eşiğin altındaydı — `warning`/`error`dan (#424/#442) ağır, çünkü
+ * onlar yalnız light'ta kusurluydu.
+ *
+ *   EKSEN A (range↔track): range `bg-accent`, track `bg-accent/20` — aynı yüzey
+ *   token'ının iki alfası. Ölçülen: light 1.123 · dark 1.303 · docs kartı 1.162.
+ *
+ *   EKSEN B (thumb kenarlığı↔zemin): tutamaç `border-accent` + `bg-background`.
+ *   Dolgu zeminin kendisi olduğundan ayırt edilebilirliği YALNIZ kenarlık taşır.
+ *   Ölçülen: light 1.154 · dark 1.359 · docs kartı 1.197.
+ *
+ * Eşik 3:1 (WCAG 1.4.11, non-text). axe yakalamaz: `color-contrast` yalnız METİN ölçer.
+ *
+ * KÖK NEDEN — YÜZEY token'ı, dolgu rolüne yapısal olarak uygun değil:
+ * `--accent` `hover:bg-accent` tinti olarak tasarlanmış ve `.dark`'ta EZİLİYOR (yani
+ * #442'nin "tema uyarlaması eksik" kök nedeni burada GEÇERSİZ) — ama iki temada da
+ * kendi zeminine bitişik duruyor. Bu yüzden track'i değiştirerek onarmak da mümkün
+ * değil; dolgu/kenarlık renginin kendisi değişmek ZORUNDA.
+ *
+ * ÇÖZÜM SINIFI — #385/#406'nın tek-orta-ton kademe araması AYNEN uygulanamaz:
+ * tokens.css'te `--accent-50 … --accent-950` skalası YOK. Sistemin tek nötr skalası
+ * slate (`--secondary-*`); `--accent` onunla aynı hue ailesinde (light temada BİREBİR
+ * aynı token değeri). Tema-kör tek kademe de seçilemedi — o ailede iki temayı birden
+ * geçen tek kademe 500'dür, o da `secondary` varyantının kendi rengi (ΔE*ab = 0.0 →
+ * iki varyant klon olurdu). Bu yüzden #442'nin `dark:` ayrımı deseni kullanıldı:
+ *   range: "bg-[rgb(var(--secondary-700))] dark:bg-[rgb(var(--secondary-400))]"
+ *   thumb: "border-[rgb(var(--secondary-700))] dark:border-[rgb(var(--secondary-400))] bg-background"
+ *
+ * NOT: `slider-secondary-contrast.test.ts` (#389/#407) ve
+ * `slider-warning-error-contrast.test.ts` (#442) dosyalarından BİLEREK ayrı — her
+ * dosya kendi token eksenini kilitler. Pro ikizi:
+ * packages/moonui-pro/.../slider-accent-contrast.test.tsx
+ */
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Slider } from '../slider'
+
+const KOK = path.resolve(__dirname, '../../..')
+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(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\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)
+}
+
+/**
+ * Skala token'ları ("--secondary-700: 51 65 85") HSL DEĞİL, RGB üçlüsüdür (semantik
+ * token'ların HSL formatından farklı) — component'te bu yüzden
+ * `rgb(var(--secondary-700))` kompozisyonu kullanılır, hsl() değil.
+ */
+const rgbTokenRgb = (v: string): [number, number, number] => {
+  const p = v.split(/\s+/).map((x) => parseFloat(x))
+  return [p[0], p[1], p[2]]
+}
+
+function bagilParlaklik([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 = bagilParlaklik(a)
+  const lb = bagilParlaklik(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/**
+ * CIE76 ΔE*ab — "iki varyant AYIRT EDİLEBİLİR mi?" sorusunun metriği.
+ * WCAG kontrastı bu soruya CEVAP VEREMEZ: yalnız bağıl parlaklık ölçer, bu yüzden
+ * apayrı hue'daki iki rengi "aynı" gösterebilir (ölçüldü: `--primary` mavisi ile
+ * slate-500 arasındaki kontrast 1.03, ama renkler apayrı). Klon iddiaları bu yüzden
+ * ΔE ile kurulur. JND ≈ 2.3; burada kullanılan eşik 10 (rahatça "farklı renk").
+ */
+function rgbToLab([r, g, b]: [number, number, number]): [number, number, number] {
+  const s = (v: number) => {
+    const x = v / 255
+    return (x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)) * 100
+  }
+  const [R, G, B] = [s(r), s(g), s(b)]
+  const X = R * 0.4124 + G * 0.3576 + B * 0.1805
+  const Y = R * 0.2126 + G * 0.7152 + B * 0.0722
+  const Z = R * 0.0193 + G * 0.1192 + B * 0.9505
+  const ref: [number, number, number] = [95.047, 100.0, 108.883]
+  const g2 = (t: number) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116)
+  const [fx, fy, fz] = [g2(X / ref[0]), g2(Y / ref[1]), g2(Z / ref[2])]
+  return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)]
+}
+
+function deltaE(a: [number, number, number], b: [number, number, number]): number {
+  const A = rgbToLab(a)
+  const B = rgbToLab(b)
+  return Math.hypot(A[0] - B[0], A[1] - B[1], A[2] - B[2])
+}
+
+/** `bg-accent/20` gibi alfa katmanının zemin üstündeki bileşke rengi */
+function alfaBileske(
+  ust: [number, number, number],
+  alfa: number,
+  zemin: [number, number, number]
+): [number, number, number] {
+  return [
+    Math.round(alfa * ust[0] + (1 - alfa) * zemin[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * zemin[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * zemin[2]),
+  ]
+}
+
+/**
+ * Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#111827 = rgb(17,24,39)) —
+ * #284/#368 konvansiyonu. Bu bulguda DARBOĞAZ: en düşük dark oranlarını o veriyor.
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+/** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
+function semantikRgb(ad: string, blok: 'light' | 'dark'): [number, number, number] {
+  return hslTokenRgb(tokenOku(ad, blok) ?? tokenOku(ad, 'light')!)
+}
+
+/** O temada slider'ın oturabileceği tüm zeminler */
+function zeminler(blok: 'light' | 'dark'): Array<[string, [number, number, number]]> {
+  const z: Array<[string, [number, number, number]]> = [
+    ['--background', semantikRgb('background', blok)],
+    ['--card', semantikRgb('card', blok)],
+  ]
+  if (blok === 'dark') z.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return z
+}
+
+// ——— Renkler KAYNAKTAN türetilir ———————————————————————————————————————
+// PR #440'ın dersi: ölçümü "-700/-400" VARSAYIMINA göre yaparsan, biri değeri
+// eskiye döndürdüğünde kriter testleri yeşil kalır (boş-yeşil). Bu yüzden renkler
+// slider.tsx'in O ANKİ CVA sınıf dizgelerinden çözülür — track alfası dahil.
+const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
+const iTrack = kaynak.indexOf('sliderTrackVariants')
+const iRange = kaynak.indexOf('sliderRangeVariants')
+const iThumb = kaynak.indexOf('sliderThumbVariants')
+const iSon = kaynak.indexOf('SliderBaseProps')
+const TRACK_BLOK = kaynak.slice(iTrack, iRange)
+const RANGE_BLOK = kaynak.slice(iRange, iThumb)
+const THUMB_BLOK = kaynak.slice(iThumb, iSon)
+
+/** CVA bloğundan `<varyant>: "<sınıflar>"` değerini oku */
+function varyantSinifi(blok: string, varyant: string): string {
+  const m = blok.match(new RegExp(`\\n\\s*${varyant}:\\s*"([^"]+)"`))
+  if (!m) throw new Error(`${varyant} varyantı bulunamadı`)
+  return m[1]
+}
+
+/** Tek bir Tailwind sınıfını renge çevir (arbitrary skala VEYA semantik token) */
+function sinifRengi(sinif: string, blok: 'light' | 'dark'): [number, number, number] {
+  const skala = sinif.match(/^(?:bg|border)-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
+  if (skala) return rgbTokenRgb(tokenOku(skala[1], 'light')!) // skala yalnız :root'ta
+  const semantik = sinif.match(/^(?:bg|border)-([a-z-]+)$/)
+  if (semantik) return semantikRgb(semantik[1], blok)
+  throw new Error(`çözülemeyen sınıf: ${sinif}`)
+}
+
+/**
+ * Varyant dizgesinden o temada GERÇEKTEN uygulanan rengi çöz.
+ * `dark:` önekli sınıf dark temada kazanır; `onek` ile eksen seçilir (thumb dizgesi
+ * `border-*` yanında `bg-background` da taşır).
+ */
+function uygulananRenk(
+  cvaBlok: string,
+  varyant: string,
+  onek: 'bg' | 'border',
+  blok: 'light' | 'dark'
+): [number, number, number] {
+  const siniflar = varyantSinifi(cvaBlok, varyant)
+    .split(/\s+/)
+    .filter((s) => s.replace(/^dark:/, '').startsWith(`${onek}-`))
+  const darkSinif = siniflar.find((s) => s.startsWith('dark:'))?.slice('dark:'.length)
+  const lightSinif = siniflar.find((s) => !s.startsWith('dark:'))
+  if (!lightSinif) throw new Error(`${varyant}/${onek}: temel (light) sınıf yok`)
+  return sinifRengi(blok === 'dark' ? darkSinif ?? lightSinif : lightSinif, blok)
+}
+
+const rangeRengi = (v: string, blok: 'light' | 'dark') => uygulananRenk(RANGE_BLOK, v, 'bg', blok)
+const thumbKenarRengi = (v: string, blok: 'light' | 'dark') =>
+  uygulananRenk(THUMB_BLOK, v, 'border', blok)
+
+/** Track'in her zemin üstündeki bileşkesi — alfa da KAYNAKTAN okunur */
+function trackler(varyant: string, blok: 'light' | 'dark') {
+  const sinif = varyantSinifi(TRACK_BLOK, varyant)
+  const m = sinif.match(/^bg-([a-z-]+)\/(\d+)$/)
+  if (!m) throw new Error(`track sınıfı çözülemedi: ${sinif}`)
+  const taban = semantikRgb(m[1], blok)
+  const alfa = Number(m[2]) / 100
+  return zeminler(blok).map(([ad, z]) => [ad, alfaBileske(taban, alfa, z)] as const)
+}
+
+/** `accent` DIŞINDAKİ slider varyantlarının o temada gerçekten uygulanan dolgu renkleri */
+const KARDESLER = ['default', 'primary', 'secondary', 'success', 'warning', 'error'] as const
+const kardesRenkleri = (blok: 'light' | 'dark') =>
+  KARDESLER.map((v) => [v, rangeRengi(v, blok)] as const)
+
+const KADEMELER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+/** Ayırt edilebilirlik eşiği (CIE76). Eşiğin yeri sonucu DEĞİŞTİRMİYOR: elenen
+ *  tek-orta-ton adayı 500, kardeşine ΔE = 0.0 ile birebir AYNI renk. */
+const DELTAE_ESIK = 10
+
+/** Slider DOM'u: kök > .moonui-theme > track > range; thumb'lar track'in KARDEŞİ */
+function parcalar(container: HTMLElement) {
+  const kabuk = container.querySelector('.moonui-theme') as HTMLElement
+  expect(kabuk).not.toBeNull()
+  const track = kabuk.firstElementChild as HTMLElement
+  const range = track.firstElementChild as HTMLElement
+  const thumb = kabuk.querySelector('[role="slider"]') as HTMLElement
+  expect(range).not.toBeNull()
+  expect(thumb).not.toBeNull()
+  return { track, range, thumb }
+}
+
+describe('#448 hesaplayıcı çapaları', () => {
+  it('kontrast hesaplayıcısı DOĞRU — belgelenmiş token çifti beklenen oranı veriyor', () => {
+    // tokens.css `--info-subtle` çiftini 9.52:1 diye belgeliyor.
+    const oran = rgbKontrast(
+      semantikRgb('info-subtle', 'light'),
+      semantikRgb('info-subtle-foreground', 'light')
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('ΔE hesaplayıcısı DOĞRU — aynı renk 0, siyah↔beyaz 100', () => {
+    expect(deltaE([100, 116, 139], [100, 116, 139])).toBeCloseTo(0, 6)
+    expect(deltaE([0, 0, 0], [255, 255, 255])).toBeCloseTo(100, 0)
+  })
+
+  it('hesaplayıcı, issue #448 gövdesindeki ölçümleri birebir üretiyor', () => {
+    // Çapraz doğrulama: issue tablosu (A: 1.12/1.30/1.16 · B: 1.15/1.36/1.20) bu
+    // dosyadan BAĞIMSIZ olarak PR #446 çalışmasında ölçülmüştü. Model onları
+    // tutturamıyorsa aşağıdaki tüm oranlar anlamsızdır.
+    const eskiA = (blok: 'light' | 'dark') =>
+      trackler('accent', blok).map(([, t]) =>
+        Number(rgbKontrast(semantikRgb('accent', blok), t).toFixed(2))
+      )
+    expect(eskiA('light')[0]).toBe(1.12)
+    expect(eskiA('dark')[0]).toBe(1.3)
+    expect(eskiA('dark')[2]).toBe(1.16) // gerçek docs kartı
+    const eskiB = (blok: 'light' | 'dark') =>
+      zeminler(blok).map(([, z]) =>
+        Number(rgbKontrast(semantikRgb('accent', blok), z).toFixed(2))
+      )
+    expect(eskiB('light')[0]).toBe(1.15)
+    expect(eskiB('dark')[0]).toBe(1.36)
+    expect(eskiB('dark')[2]).toBe(1.2)
+  })
+})
+
+describe('#448 kök neden — `--accent` YÜZEY token’ı, skalası YOK', () => {
+  it('`--accent-50 … --accent-950` skalası tokens.css’te TANIMLI DEĞİL', () => {
+    // Bu testin varlık sebebi: #385/#406'nın tek-orta-ton kademe araması bir
+    // `--accent-*` skalası VARSAYAR. Yok. Biri ileride gerçek bir accent skalası
+    // eklerse burası kırmızı olur ve varyantın kendi ailesine döndürülmesi
+    // (bu PR'ın önerdiği takip işi) gerektiğini söyler.
+    for (const k of KADEMELER) {
+      expect(tokenOku(`accent-${k}`, 'light')).toBeNull()
+    }
+    // `--brand-accent-*` AYRI bir ailedir (marka pembesi), `--accent`in skalası değil.
+    expect(tokenOku('brand-accent-500', 'light')).not.toBeNull()
+  })
+
+  it('#442’den FARKLI kök neden: `--accent` `.dark` bloğunda EZİLİYOR', () => {
+    // warning/error'ın kusuru "dark ezmesi yok" idi (o yüzden yalnız light'ta
+    // kırıktılar). accent tema-uyarlanabilir OLDUĞU HÂLDE iki temada da kırık:
+    // kusur uyarlamanın yokluğu değil, token'ın YÜZEY rolü.
+    expect(tokenOku('accent', 'dark')).not.toBeNull()
+    expect(tokenOku('accent', 'light')).not.toBe(tokenOku('accent', 'dark'))
+    expect(tokenOku('warning', 'dark')).toBeNull() // karşıtlık
+  })
+
+  it('`--accent` iki temada da KENDİ zeminine bitişik (yüzey tinti olduğunun kanıtı)', () => {
+    // Track'i değiştirerek onarmanın neden imkânsız olduğunun kanıtı: dolgu rengi
+    // zeminden ayrışmıyorsa, altına konacak hiçbir track 3:1 üretemez.
+    for (const blok of ['light', 'dark'] as const) {
+      for (const [, z] of zeminler(blok)) {
+        expect(rgbKontrast(semantikRgb('accent', blok), z)).toBeLessThan(1.5)
+      }
+    }
+  })
+})
+
+describe('#448 reddedilen alternatifler (seçimin gerekçesi)', () => {
+  it('`bg-accent-foreground` ELENDİ — iki temada da `--primary` ile BİREBİR aynı', () => {
+    // #389'un `secondary` için verdiği kararın aynısı: varyant primary klonuna dönerdi.
+    for (const blok of ['light', 'dark'] as const) {
+      expect(tokenOku('accent-foreground', blok)).toBe(tokenOku('primary', blok))
+    }
+  })
+
+  it('`bg-accent-foreground` AYRICA tek başına dolgu olamaz — preset’lerin 2’sinde BEYAZ', () => {
+    // Creative + Nature preset'lerinde accentForeground "0 0% 100%": beyaz sayfada
+    // beyaz dolgu. Token, accent YÜZEYİNİN mürekkebi; bağımsız dolgu rengi değil.
+    const presetler = fs.readFileSync(path.join(KOK, 'lib/theme-presets.ts'), 'utf8')
+    const beyazlar = [...presetler.matchAll(/accentForeground:\s*"([^"]+)"/g)].filter(
+      (m) => m[1] === '0 0% 100%'
+    )
+    expect(beyazlar.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('slate ailesinde TEMA-KÖR geçen tek kademe 500 — o da `secondary` varyantının KLONU', () => {
+    // #385/#406/#389'un çözüm şeklinin burada neden uygulanamadığının kanıtı.
+    const gecenler = KADEMELER.filter((k) => {
+      const ham = tokenOku(`secondary-${k}`, 'light')
+      if (!ham) return false
+      const c = rgbTokenRgb(ham)
+      return (['light', 'dark'] as const).every((blok) =>
+        trackler('accent', blok).every(([, t]) => rgbKontrast(c, t) >= 3.0) &&
+        zeminler(blok).every(([, z]) => rgbKontrast(c, z) >= 3.0)
+      )
+    })
+    expect(gecenler).toEqual([500])
+    // ...ve 500, `secondary` varyantının o anki rengiyle BİREBİR aynı (ΔE = 0).
+    const k500 = rgbTokenRgb(tokenOku('secondary-500', 'light')!)
+    expect(deltaE(k500, rangeRengi('secondary', 'light'))).toBeCloseTo(0, 6)
+    expect(deltaE(k500, rangeRengi('secondary', 'dark'))).toBeCloseTo(0, 6)
+  })
+
+  it('DARK temada eşiği geçen VE kardeşlerden ayırt edilebilen TEK kademe 400', () => {
+    // Seçimin zorunlu olduğunun kanıtı: dark tarafta serbestlik YOK.
+    // ≤300 `default`/`primary` ile çakışır, 500 `secondary` klonu, ≥600 eşiğin altı.
+    const uygun = KADEMELER.filter((k) => {
+      const ham = tokenOku(`secondary-${k}`, 'light')
+      if (!ham) return false
+      const c = rgbTokenRgb(ham)
+      const esik =
+        trackler('accent', 'dark').every(([, t]) => rgbKontrast(c, t) >= 3.0) &&
+        zeminler('dark').every(([, z]) => rgbKontrast(c, z) >= 3.0)
+      const ayirt = kardesRenkleri('dark').every(([, r]) => deltaE(c, r) >= DELTAE_ESIK)
+      return esik && ayirt
+    })
+    expect(uygun).toEqual([400])
+  })
+
+  it('LIGHT temada {600,700,800} uygun; 700 kardeş ayrımını MAKSİMİZE ediyor', () => {
+    const skor = (k: number) => {
+      const c = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+      return Math.min(...kardesRenkleri('light').map(([, r]) => deltaE(c, r)))
+    }
+    const uygun = KADEMELER.filter((k) => {
+      const c = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+      const esik =
+        trackler('accent', 'light').every(([, t]) => rgbKontrast(c, t) >= 3.0) &&
+        zeminler('light').every(([, z]) => rgbKontrast(c, z) >= 3.0)
+      return esik && skor(k) >= DELTAE_ESIK
+    })
+    expect(uygun).toEqual([600, 700, 800])
+    expect(Math.max(...uygun.map(skor))).toBeCloseTo(skor(700), 6)
+  })
+})
+
+describe('#448 kaynak sözleşmesi — slider.tsx', () => {
+  it('track `accent` sınıfı `/20` alfasını KORUYOR (yedi varyantın ortak deseni)', () => {
+    expect(varyantSinifi(TRACK_BLOK, 'accent')).toBe('bg-accent/20')
+  })
+
+  it('EKSEN A: range `accent` light’ta -700, dark’ta -400', () => {
+    expect(varyantSinifi(RANGE_BLOK, 'accent')).toBe(
+      'bg-[rgb(var(--secondary-700))] dark:bg-[rgb(var(--secondary-400))]'
+    )
+  })
+
+  it('EKSEN B: thumb `accent` kenarlığı light’ta -700, dark’ta -400', () => {
+    expect(varyantSinifi(THUMB_BLOK, 'accent')).toBe(
+      'border-[rgb(var(--secondary-700))] dark:border-[rgb(var(--secondary-400))] bg-background'
+    )
+  })
+
+  it('KAPSAM KİLİDİ: diğer altı varyant DOKUNULMADI', () => {
+    // #424/#442 (warning/error) ve #389/#407 (secondary) kararları korunuyor;
+    // primary/success/default zaten eşiği geçiyor. Gereksiz değişiklik = regresyon riski.
+    expect(varyantSinifi(RANGE_BLOK, 'default')).toBe('bg-foreground')
+    expect(varyantSinifi(RANGE_BLOK, 'primary')).toBe('bg-primary')
+    expect(varyantSinifi(RANGE_BLOK, 'secondary')).toBe('bg-[rgb(var(--secondary-500))]')
+    expect(varyantSinifi(RANGE_BLOK, 'success')).toBe('bg-success')
+    expect(varyantSinifi(RANGE_BLOK, 'warning')).toBe(
+      'bg-[rgb(var(--warning-700))] dark:bg-warning'
+    )
+    expect(varyantSinifi(RANGE_BLOK, 'error')).toBe('bg-[rgb(var(--error-700))] dark:bg-error')
+  })
+
+  it('zemin denkliği: `.moonui-theme` paket CSS’inde token yeniden tanımlamıyor', () => {
+    // Hesap, track'in/tutamacın altındaki yüzeyin --background/--card olduğunu
+    // VARSAYAR. Biri `.moonui-theme`i token kapsamına çevirirse o varsayım sessizce
+    // yanlışlanır — o an burası kırmızı olur (#389 deseni).
+    const stilDizini = path.join(KOK, 'styles')
+    const stiller = fs
+      .readdirSync(stilDizini)
+      .filter((f) => f.endsWith('.css'))
+      .map((f) => fs.readFileSync(path.join(stilDizini, f), 'utf8'))
+      .join('\n')
+    expect(stiller).not.toMatch(/\.moonui-theme[^{]*\{[^}]*--(accent|secondary|background|card)/)
+  })
+})
+
+describe('#448 render sözleşmesi — <Slider />', () => {
+  it('accent: track eski token’da, range yeni ifadeyle DOM’a iniyor', () => {
+    const { container } = render(
+      React.createElement(Slider, { trackVariant: 'accent', rangeVariant: 'accent' })
+    )
+    const { track, range } = parcalar(container)
+    expect(track).toHaveClass('bg-accent/20')
+    expect(range.className).toContain('bg-[rgb(var(--secondary-700))]')
+    expect(range.className).toContain('dark:bg-[rgb(var(--secondary-400))]')
+    // Yüzey token'ı artık dolguya UYGULANMAMALI (track'in aynısıydı).
+    expect(range.className).not.toMatch(/(?:^|\s)bg-accent(?:\s|$)/)
+  })
+
+  it('accent: thumb kenarlığı yeni ifadeyle iniyor, dolgusu bg-background kalıyor', () => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'accent' }))
+    const { thumb } = parcalar(container)
+    expect(thumb.className).toContain('border-[rgb(var(--secondary-700))]')
+    expect(thumb.className).toContain('dark:border-[rgb(var(--secondary-400))]')
+    expect(thumb.className).toContain('bg-background')
+    expect(thumb.className).not.toMatch(/(?:^|\s)border-accent(?:\s|$)/)
+  })
+
+  it('thumbVariant düşüşü KORUNUYOR — tek prop ile track+range+thumb', () => {
+    // `trackVariant || thumbVariant || "default"` ve `rangeVariant || thumbVariant ||
+    // "primary"` düşüşleri değişmedi; en yaygın kullanım bu yoldan geçer.
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'accent' }))
+    const { track, range, thumb } = parcalar(container)
+    expect(track).toHaveClass('bg-accent/20')
+    expect(range.className).toContain('bg-[rgb(var(--secondary-700))]')
+    expect(thumb.className).toContain('border-[rgb(var(--secondary-700))]')
+  })
+
+  it('rangeVariant açık verildiğinde thumbVariant’ı hâlâ eziyor', () => {
+    const { container } = render(
+      React.createElement(Slider, { thumbVariant: 'accent', rangeVariant: 'success' })
+    )
+    const { range, thumb } = parcalar(container)
+    expect(range.className).toContain('bg-success')
+    expect(range.className).not.toContain('--secondary-700')
+    // Eksenler bağımsız: tutamaç kendi varyantını korur.
+    expect(thumb.className).toContain('border-[rgb(var(--secondary-700))]')
+  })
+
+  it('diğer varyantlara SIZMADI — secondary hâlâ -500, primary hâlâ token’ında', () => {
+    const { container: c1 } = render(
+      React.createElement(Slider, { rangeVariant: 'secondary', thumbVariant: 'secondary' })
+    )
+    const p1 = parcalar(c1)
+    expect(p1.range.className).toContain('bg-[rgb(var(--secondary-500))]')
+    expect(p1.range.className).not.toContain('--secondary-700')
+    const { container: c2 } = render(
+      React.createElement(Slider, { rangeVariant: 'primary', thumbVariant: 'primary' })
+    )
+    const p2 = parcalar(c2)
+    expect(p2.range.className).toContain('bg-primary')
+    expect(p2.thumb.className).toContain('border-primary')
+  })
+})
+
+describe.each(['light', 'dark'] as const)('#448 %s tema — kabul kriteri ≥3:1 (WCAG 1.4.11)', (blok) => {
+  it('EKSEN A (range↔track): TÜM zeminlerde geçiyor', () => {
+    // Ölçülen: light 10.081 · dark 7.533 · gerçek docs kartı 6.717
+    const dolgu = rangeRengi('accent', blok)
+    for (const [ad, track] of trackler('accent', blok)) {
+      const oran = rgbKontrast(dolgu, track)
+      expect({ eksen: 'A', tema: blok, zemin: ad, gecti: oran >= 3.0 }).toEqual({
+        eksen: 'A',
+        tema: blok,
+        zemin: ad,
+        gecti: true,
+      })
+    }
+  })
+
+  it('EKSEN B (thumb kenarlığı↔zemin): TÜM zeminlerde geçiyor', () => {
+    // Ölçülen: light 10.355 · dark 7.857 · gerçek docs kartı 6.919
+    const kenar = thumbKenarRengi('accent', blok)
+    for (const [ad, zemin] of zeminler(blok)) {
+      const oran = rgbKontrast(kenar, zemin)
+      expect({ eksen: 'B', tema: blok, zemin: ad, gecti: oran >= 3.0 }).toEqual({
+        eksen: 'B',
+        tema: blok,
+        zemin: ad,
+        gecti: true,
+      })
+    }
+  })
+
+  it('ESKİ değer (`bg-accent`/`border-accent`) BU temada başarısızdı — bug’ın belgesi', () => {
+    // Düzeltmenin GEREKLİLİĞİNİ sabitler. warning/error'dan farkı: orada yalnız
+    // light kırıktı, burada İKİ tema da.
+    const eski = semantikRgb('accent', blok)
+    for (const [, track] of trackler('accent', blok)) {
+      expect(rgbKontrast(eski, track)).toBeLessThan(3.0)
+    }
+    for (const [, zemin] of zeminler(blok)) {
+      expect(rgbKontrast(eski, zemin)).toBeLessThan(3.0)
+    }
+  })
+
+  it('TEK RENK: tutamaç kenarlığı ile range dolgusu AYNI renk', () => {
+    // #407'nin gerekçesi: "tutamaç ve dolgu tek renkte okunur".
+    expect(thumbKenarRengi('accent', blok)).toEqual(rangeRengi('accent', blok))
+  })
+
+  it('KLON DEĞİL: accent, altı kardeş varyanttan da ayırt edilebiliyor (ΔE ≥ 10)', () => {
+    // Bu iş sırasında `--secondary-500`e eşlemenin neden REDDEDİLDİĞİNİN kilidi.
+    // Biri ileride accent'i secondary'nin kademesine çekerse burası kırmızı olur.
+    const dolgu = rangeRengi('accent', blok)
+    for (const [ad, renk] of kardesRenkleri(blok)) {
+      expect({ kardes: ad, ayirt: deltaE(dolgu, renk) >= DELTAE_ESIK }).toEqual({
+        kardes: ad,
+        ayirt: true,
+      })
+    }
+  })
+
+  it('HUE SADAKATİ: yeni dolgu, `--accent`in nötr slate ailesinde kaldı', () => {
+    // Marka pembesi/moru (`--brand-accent-*`, `--brand-*`) eşiği geçen alternatiflerdi
+    // ama accent'in hue'sunu (216°) terk ederlerdi. Nötr kalındığının kilidi:
+    // R/G/B kanalları arasındaki yayılım dar (doygunluk düşük).
+    const [r, g, b] = rangeRengi('accent', blok)
+    expect(Math.max(r, g, b) - Math.min(r, g, b)).toBeLessThan(60)
+    expect(b).toBeGreaterThan(r) // slate: maviye çalan nötr, `--accent` gibi
+  })
+})