@moontra/moonui 6.17.0 → 6.19.0

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

@@ -0,0 +1,375 @@
+/**
+ * #389 — Slider `secondary` range↔track kontrast değişmezi.
+ *
+ * BULGU (#372'nin birebir ardılı, PR #385'in "yan bulgu" notundan): slider'ın
+ * range'i `bg-secondary`, track'i `bg-secondary/20` — ikisi de AYNI yüzey
+ * token'ına basıyor. `--secondary` light'ta rgb(235,239,245), dark'ta
+ * rgb(2,8,23); %20 alfa track ile tam dolgu iki temada da ~1.0 oranında kalıyor,
+ * slider'ın DOLU kısmı hiç görünmüyordu. axe bunu yakalamaz: `color-contrast`
+ * yalnız METİN öğelerini ölçer.
+ *
+ * DÜZELTME: range `bg-[rgb(var(--secondary-500))]` (tokens.css slate skalası).
+ * `bg-secondary-foreground` BİLEREK seçilmedi — light'ta --primary ile aynı
+ * hue/sat'ta ΔL=%2, dark'ta birebir --primary değeri: varyant primary klonuna
+ * dönerdi. Track `bg-secondary/20` KALDI (#372 seçenek 1; track↔zemin ayrışması
+ * ayrı token-ekseni bulgusudur, kapsam dışı).
+ *
+ * ZEMİN DENKLİĞİ (kendi doğrulaması, #389): slider'ın ölçüm zeminleri
+ * progress'inkiyle AYNI kümedir — track her iki component'te de `bg-secondary/20`
+ * alfa katmanı olduğundan bileşke rengi altındaki yüzeye bağlıdır; slider'ın
+ * sardığı `.moonui-theme` sınıfı paket CSS'inde HİÇBİR token'ı yeniden
+ * tanımlamaz (yalnız işaretleyici sınıf — `grep -rn '\.moonui-theme'
+ * packages/moonui/src/styles/` boş döner). Dolayısıyla #372'deki kademe seçimi
+ * (400/500/600 elemesi) slider için de birebir geçerlidir ve aşağıda yeniden
+ * hesaplanarak kilitlenir.
+ *
+ * Kabul kriteri (issue #389): range↔track kontrastı light ve dark temada ≥3:1
+ * (WCAG 1.4.11 non-text eşiği).
+ *
+ * Hesap yöntemi progress-secondary-contrast.test.ts / primary-subtle-token.test.ts
+ * ile birebir aynıdır; oradaki "hesaplayıcı doğru mu?" çapası burada da var.
+ */
+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-500: 100 116 139") HSL DEĞİL, RGB üçlüsüdür
+ * (slate-500 = rgb(100,116,139) ile birebir; component'te bu yüzden
+ * `bg-[rgb(var(--secondary-500))]` 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)
+}
+
+/** `bg-secondary/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: kontrast, --background'ın yanında bu gerçek yüzeye
+ * göre de ölçülür (tokens.css --input notu).
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+/** Tema başına range (secondary-500) ve track (secondary@%20 ∘ zemin) renkleri */
+function temaRenkleri(blok: 'light' | 'dark') {
+  const dolgu = rgbTokenRgb(tokenOku('secondary-500', 'light')!) // skala yalnız :root'ta — iki temada aynı
+  const secondary = hslTokenRgb(tokenOku('secondary', blok)!)
+  const background = hslTokenRgb(tokenOku('background', blok)!)
+  const card = hslTokenRgb(tokenOku('card', blok)!)
+  const zeminler: Array<[string, [number, number, number]]> = [
+    ['--background', background],
+    ['--card', card],
+  ]
+  if (blok === 'dark') zeminler.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return { dolgu, secondary, zeminler }
+}
+
+/** Slider DOM'u: kök > .moonui-theme > track > range (thumb'lar track'ten SONRA) */
+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
+  expect(range).not.toBeNull()
+  return { track, range }
+}
+
+describe('#389 slider secondary range↔track kontrastı', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift belgelenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: `--info-subtle` çifti tokens.css'te 9.52:1 diye
+    // belgelenmiş; hesaplayıcı bozulursa bu çapa kırmızı olur.
+    const oran = rgbKontrast(
+      hslTokenRgb(tokenOku('info-subtle', 'light')!),
+      hslTokenRgb(tokenOku('info-subtle-foreground', 'light')!)
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('--secondary-500 tanımlı ve RGB üçlüsü olarak ayrıştırılabiliyor', () => {
+    const ham = tokenOku('secondary-500', 'light')
+    expect(ham).toBeTruthy()
+    const rgb = rgbTokenRgb(ham!)
+    rgb.forEach((kanal) => {
+      expect(Number.isFinite(kanal)).toBe(true)
+      expect(kanal).toBeGreaterThanOrEqual(0)
+      expect(kanal).toBeLessThanOrEqual(255)
+    })
+  })
+
+  describe('kaynak sözleşmesi: range ile track FARKLI token’lara basıyor', () => {
+    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
+
+    it('track secondary sınıfı `bg-secondary/20` (değişmedi)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+    })
+
+    it('range secondary sınıfı `bg-[rgb(var(--secondary-500))]` (artık --secondary DEĞİL)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
+    })
+
+    it('#407: thumb secondary sınıfı `border-[rgb(var(--secondary-500))] bg-background`', () => {
+      // AYRI EKSEN (aşağıdaki "#407 thumb kenarlığı" bloğuna bakınız): #389 yalnız
+      // range↔track eksenini kapsıyordu, tutamacın kenarlığı bilerek dışarıda kalmıştı.
+      expect(kaynak).toMatch(
+        /secondary:\s*"border-\[rgb\(var\(--secondary-500\)\)\] bg-background"/
+      )
+      expect(kaynak).not.toMatch(/secondary:\s*"border-secondary bg-background"/)
+    })
+
+    it('zemin denkliği: `.moonui-theme` paket CSS’inde token yeniden tanımlamıyor', () => {
+      // Bu testin varlık sebebi: kontrast hesabı track'in altındaki yüzeyin
+      // --background/--card olduğunu VARSAYAR. Biri `.moonui-theme`i token
+      // kapsamına çevirirse (ör. `.moonui-theme { --secondary: ... }`) hesap
+      // sessizce yanlışlanır — o an bu test kırmızı olur.
+      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[^{]*\{[^}]*--secondary/)
+    })
+  })
+
+  describe('render sözleşmesi: <Slider /> secondary', () => {
+    it('rangeVariant="secondary" DOM’a yeni token’la iniyor, track eski token’da kalıyor', () => {
+      const { container } = render(
+        React.createElement(Slider, { trackVariant: 'secondary', rangeVariant: 'secondary' })
+      )
+      const { track, range } = parcalar(container)
+      expect(track).toHaveClass('bg-secondary/20')
+      expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
+      expect(range.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
+    })
+
+    it('thumbVariant düşüşü KORUNUYOR — tek prop ile track+range ikisi de secondary', () => {
+      // `trackVariant || thumbVariant || "default"` ve
+      // `rangeVariant || thumbVariant || "primary"` düşüşleri değişmedi;
+      // en yaygın kullanım (<Slider thumbVariant="secondary" />) bu yoldan geçer.
+      const { container } = render(React.createElement(Slider, { thumbVariant: 'secondary' }))
+      const { track, range } = parcalar(container)
+      expect(track).toHaveClass('bg-secondary/20')
+      expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
+    })
+
+    it('rangeVariant açık verildiğinde thumbVariant’ı hâlâ eziyor', () => {
+      const { container } = render(
+        React.createElement(Slider, { thumbVariant: 'secondary', rangeVariant: 'success' })
+      )
+      const { range } = parcalar(container)
+      expect(range.className).toContain('bg-success')
+      expect(range.className).not.toContain('bg-[rgb(var(--secondary-500))]')
+    })
+
+    it('diğer varyantlar ETKİLENMEDİ — primary range hâlâ `bg-primary`', () => {
+      const { container } = render(React.createElement(Slider, { rangeVariant: 'primary' }))
+      const { range } = parcalar(container)
+      expect(range.className).toContain('bg-primary')
+      expect(range.className).not.toContain('secondary')
+    })
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1 (WCAG 1.4.11)', (blok) => {
+    it('YENİ range (secondary-500), track’in her olası zemindeki bileşkesine ≥3:1', () => {
+      // Ölçülen değerler: light 4.63 (--background=--card=beyaz) · dark 4.23
+      // (--background=--card) / 3.83 (gerçek kart #111827).
+      const { dolgu, secondary, zeminler } = temaRenkleri(blok)
+      for (const [ad, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        const oran = rgbKontrast(dolgu, track)
+        expect({ zemin: ad, oran }).toEqual({ zemin: ad, oran: expect.any(Number) })
+        expect(oran).toBeGreaterThanOrEqual(3.0)
+      }
+    })
+
+    it('ESKİ range (bg-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // Düzeltmenin GEREKLİLİĞİNİ sabitler: eski değer üç zeminde de eşiğin
+      // çok altındaydı (light 1.12 · dark 1.01 · gerçek kart 1.10).
+      const { secondary, zeminler } = temaRenkleri(blok)
+      for (const [, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        expect(rgbKontrast(secondary, track)).toBeLessThan(3.0)
+      }
+    })
+  })
+
+  describe('seçim gerekçesi: 500, iki temada birden geçen TEK skala kademesi', () => {
+    // Range her iki temada AYNI renk olduğundan parlaklığı [~0.107, ~0.289]
+    // bandında kalmalı: daha açık kademe light track'e (near-white), daha koyu
+    // kademe dark track'e (near-black) yetişemiyor. Komşu kademeler bunu kanıtlar.
+    it('secondary-400 light temada eşiğin ALTINDA kalır (~2.50)', () => {
+      const k400 = rgbTokenRgb(tokenOku('secondary-400', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('light')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k400, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-600 dark temada eşiğin ALTINDA kalır (~2.66)', () => {
+      const k600 = rgbTokenRgb(tokenOku('secondary-600', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('dark')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k600, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-500 üç zeminde de geçen TEK kademe — komşuları elenirken o kalır', () => {
+      // Tek testte tüm skalayı tarayıp "geçen kademe kümesi = {500}" iddiasını
+      // kilitler; ileride skala değerleri değişirse burası kırmızı olur.
+      const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+      const gecenler = kademeler.filter((k) => {
+        const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+        return (['light', 'dark'] as const).every((blok) => {
+          const { secondary, zeminler } = temaRenkleri(blok)
+          return zeminler.every(
+            ([, zemin]) => rgbKontrast(renk, alfaBileske(secondary, 0.2, zemin)) >= 3.0
+          )
+        })
+      })
+      expect(gecenler).toEqual([500])
+    })
+
+    it('secondary-foreground kontrastı GEÇERDİ ama primary klonu üretirdi — kilit', () => {
+      // Bu test "neden secondary-foreground değil?" kararının dayanağını sabitler:
+      // light'ta --secondary-foreground ile --primary aynı hue/sat'ta ΔL=%2
+      // (fill↔fill 1.07), dark'ta birebir aynı değer. Varyant kimliği kaybolurdu.
+      const lightOran = rgbKontrast(
+        hslTokenRgb(tokenOku('secondary-foreground', 'light')!),
+        hslTokenRgb(tokenOku('primary', 'light')!)
+      )
+      expect(lightOran).toBeLessThan(1.3) // ayırt edilemez — near-identical
+      expect(tokenOku('secondary-foreground', 'dark')).toBe(tokenOku('primary', 'dark'))
+    })
+  })
+})
+
+/**
+ * #407 — thumb kenarlığı: range↔track'ten FARKLI bir kontrast ekseni.
+ *
+ * #389 yalnız range↔track eksenini kapsadığı için tutamacın kenarlığı bilerek
+ * dışarıda bırakılmıştı (PR #406, "yan bulgu 2"): `border-secondary` + `bg-background`
+ * dolgu → kenarlık `--background`/`--card` üstünde light 1.15 · dark 1.01 oranında
+ * kalıyor, secondary slider'ın tutamacı zeminde kayboluyordu.
+ *
+ * Burada ölçülen eksen bileşen↔sayfa-zemini'dir; alfa katmanı YOKTUR (tutamacın
+ * dolgusu doğrudan `bg-background`, yani zeminin kendisi). Non-text UI bileşeni
+ * olduğundan WCAG 1.4.11 ≥3:1 ister.
+ *
+ * Aynı skala taraması bu eksende de tek kademe bırakır: `--secondary-500`.
+ * Pro paketinde ikizi: packages/moonui-pro/.../slider-secondary-contrast.test.tsx
+ */
+describe('#407 slider secondary thumb kenarlığı ↔ zemin kontrastı', () => {
+  /** Tutamaç track'in KARDEŞİDİR (track'ten sonra render edilir) */
+  const thumbBul = (container: HTMLElement) => {
+    const thumb = container.querySelector('[role="slider"]') as HTMLElement
+    expect(thumb).not.toBeNull()
+    return thumb
+  }
+
+  it('render sözleşmesi: thumbVariant="secondary" kenarlığı yeni token’la iniyor', () => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'secondary' }))
+    const thumb = thumbBul(container)
+    expect(thumb.className).toContain('border-[rgb(var(--secondary-500))]')
+    expect(thumb.className).toContain('bg-background')
+    expect(thumb.className).not.toMatch(/(?:^|\s)border-secondary(?:\s|$)/)
+  })
+
+  it('render sözleşmesi: diğer varyantların kenarlığı ETKİLENMEDİ', () => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: 'primary' }))
+    const thumb = thumbBul(container)
+    expect(thumb.className).toContain('border-primary')
+    expect(thumb.className).not.toContain('secondary')
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1', (blok) => {
+    it('YENİ kenarlık (secondary-500) her zemine ≥3:1', () => {
+      // Ölçülen: light 4.76 · dark 4.23 (gerçek kart #111827 üstünde 3.73).
+      const { dolgu, zeminler } = temaRenkleri(blok)
+      for (const [ad, zemin] of zeminler) {
+        const oran = rgbKontrast(dolgu, zemin)
+        expect({ zemin: ad, gecti: oran >= 3.0 }).toEqual({ zemin: ad, gecti: true })
+      }
+    })
+
+    it('ESKİ kenarlık (border-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // light 1.15 · dark 1.01 · gerçek kart 1.13 — tutamaç fiilen görünmüyordu.
+      const { secondary, zeminler } = temaRenkleri(blok)
+      for (const [, zemin] of zeminler) {
+        expect(rgbKontrast(secondary, zemin)).toBeLessThan(3.0)
+      }
+    })
+  })
+
+  it('seçim gerekçesi: bu eksende de geçen kademe kümesi tam olarak {500}', () => {
+    // Range ekseniyle AYNI kademede buluşması tesadüf değil, ölçüm sonucudur:
+    // alfa katmanı olmayan zemin, %20 alfa track'e çok yakın parlaklıkta olduğundan
+    // geçerli bant neredeyse aynıdır. Yine de bağımsız olarak taranır.
+    const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    const gecenler = kademeler.filter((k) => {
+      const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+      return (['light', 'dark'] as const).every((blok) =>
+        temaRenkleri(blok).zeminler.every(([, zemin]) => rgbKontrast(renk, zemin) >= 3.0)
+      )
+    })
+    expect(gecenler).toEqual([500])
+  })
+})

package/src/components/ui/data-table-basic.tsx

@@ -135,30 +135,81 @@ export function DataTableBasic<TData, TValue>({
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
+                  /* #366: mevcut ikon guard'ı ile aynı koşul — `enableSorting`
+                     kapalıyken başlık tamamen etkileşimsizdir (eskiden onClick
+                     ve cursor-pointer yine de kalıyordu ama sortedRowModel
+                     olmadığından hiçbir görünür etki üretmiyordu). */
+                  const canSort = enableSorting && header.column.getCanSort();
+                  const sorted = header.column.getIsSorted();
+                  const headerDef = header.column.columnDef.header;
                   return (
-                    <TableHead key={header.id}>
+                    <TableHead
+                      key={header.id}
+                      /* #366: sıralama durumu ekran okuyucuya YANSIMIYORDU
+                         (dosyada `aria-sort` grep'i 0 idi) — yalnız görsel ok
+                         ikonu değişiyordu. Sıralanamayan sütunda öznitelik hiç
+                         basılmaz. table.tsx'te #321, pro DataTable'da #291 ile
+                         aynı standart. */
+                      aria-sort={
+                        canSort
+                          ? sorted === "asc"
+                            ? "ascending"
+                            : sorted === "desc"
+                              ? "descending"
+                              : "none"
+                          : undefined
+                      }
+                    >
                       {header.isPlaceholder ? null : (
                         <div
                           className={cn(
                             "flex items-center gap-2",
-                            header.column.getCanSort() && "cursor-pointer select-none"
+                            canSort && "cursor-pointer select-none"
                           )}
-                          onClick={header.column.getToggleSortingHandler()}
+                          /* Fare kolaylığı: başlığın tamamı tıklanabilir kalır.
+                             Klavye yolu aşağıdaki GERÇEK <button>'dan geçer —
+                             bu div'e role="button" taklidi VERMİYORUZ çünkü
+                             başlık içeriği tüketiciden gelir (flexRender +
+                             `createSortableHeader` zaten Button render eder)
+                             ve rol taklidi buton-içinde-buton üretirdi; aynı
+                             hata pro DataTable'da #345'te düzeltilmişti. */
+                          onClick={
+                            canSort
+                              ? header.column.getToggleSortingHandler()
+                              : undefined
+                          }
                         >
                           {flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )}
-                          {enableSorting && header.column.getCanSort() && (
-                            <div className="ml-auto">
-                              {header.column.getIsSorted() === "desc" ? (
+                          {canSort && (
+                            /* #366: sıralama kontrolü yalnız fareyle çalışıyordu
+                               (dosyada `tabIndex`/`onKeyDown` grep'i 0 idi).
+                               Gerçek <button> ile Tab + Enter/Space native
+                               gelir; görünür odak focus-visible ring ile. */
+                            <button
+                              type="button"
+                              onClick={(event) => {
+                                // Sarmalayıcı div de sıralıyor; çifte tetiklenmesin
+                                event.stopPropagation();
+                                header.column.getToggleSortingHandler()?.(event);
+                              }}
+                              aria-label={`Sort by ${
+                                typeof headerDef === "string"
+                                  ? headerDef
+                                  : header.column.id
+                              }`}
+                              className="ml-auto inline-flex items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            >
+                              {sorted === "desc" ? (
                                 <ArrowDown className="h-4 w-4" />
-                              ) : header.column.getIsSorted() === "asc" ? (
+                              ) : sorted === "asc" ? (
                                 <ArrowUp className="h-4 w-4" />
                               ) : (
                                 <ArrowUpDown className="h-4 w-4 opacity-50" />
                               )}
-                            </div>
+                            </button>
                           )}
                         </div>
                       )}

package/src/components/ui/file-upload.tsx

@@ -81,6 +81,35 @@ const formatFileSize = (bytes: number): string => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
+/**
+ * Tek bir accept token'ını HTML `input[accept]` semantiğiyle dosyayla eşler (#378):
+ * - Uzantı token'ı (`.pdf`)          → dosya ADI son ekiyle (harf duyarsız)
+ * - Wildcard token'ı (`image/*`)     → MIME type prefix'iyle
+ * - Düz MIME token'ı (`application/pdf`) → MIME type ile birebir
+ *
+ * Eski mantık uzantı token'larını da `File.type` (MIME) ile karşılaştırıyordu;
+ * `.pdf` hiçbir MIME değerine eşit olamayacağı için `accept=".pdf"` altında
+ * batch komple reddediliyordu.
+ */
+const matchesAcceptToken = (file: File, token: string): boolean => {
+  const normalized = token.trim().toLowerCase()
+  if (!normalized) return false
+  if (normalized === '*' || normalized === '*/*') return true
+  if (normalized.startsWith('.')) {
+    return file.name.toLowerCase().endsWith(normalized)
+  }
+  if (normalized.endsWith('/*')) {
+    return file.type.toLowerCase().startsWith(normalized.slice(0, -1))
+  }
+  return file.type.toLowerCase() === normalized
+}
+
+const isFileAccepted = (file: File, accept: string): boolean => {
+  const trimmed = accept.trim()
+  if (trimmed === '' || trimmed === '*') return true
+  return trimmed.split(',').some(token => matchesAcceptToken(file, token))
+}
+
 const FileItem = ({ 
   uploadedFile, 
   onRemove 
@@ -188,13 +217,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
         return `File size exceeds ${formatFileSize(maxSize)}`
       }
 
-      if (accept !== "*" && !accept.split(',').some(type => {
-        const cleanType = type.trim()
-        if (cleanType.includes('*')) {
-          return file.type.startsWith(cleanType.replace('*', ''))
-        }
-        return file.type === cleanType
-      })) {
+      if (!isFileAccepted(file, accept)) {
         return `File type not supported`
       }
 
@@ -241,6 +264,11 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
       setUploadedFiles(prev => [...prev, ...newUploadedFiles])
 
       // Simulate upload progress
+      // Timer'lar toplanır ki onUpload reddederse simülasyon durdurulabilsin;
+      // eskiden interval'ler yaşamaya devam ediyor ve son tick, catch'in yazdığı
+      // 'error' state'ini ezip 'success'/"Done" gösteriyordu (#378).
+      const progressIntervals = new Map<string, ReturnType<typeof setInterval>>()
+
       for (const uploadedFile of newUploadedFiles) {
         let progress = 0
         const interval = setInterval(() => {
@@ -248,24 +276,28 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
           if (progress >= 100) {
             progress = 100
             clearInterval(interval)
-            
-            setUploadedFiles(prev => 
-              prev.map(f => 
-                f.id === uploadedFile.id 
+            progressIntervals.delete(uploadedFile.id)
+
+            setUploadedFiles(prev =>
+              prev.map(f =>
+                // 'error'a düşmüş dosya simülasyonca geri 'success' yapılamaz —
+                // error nihai durumdur (#378)
+                f.id === uploadedFile.id && f.status === 'uploading'
                   ? { ...f, progress: 100, status: 'success' as const }
                   : f
               )
             )
           } else {
-            setUploadedFiles(prev => 
-              prev.map(f => 
-                f.id === uploadedFile.id 
+            setUploadedFiles(prev =>
+              prev.map(f =>
+                f.id === uploadedFile.id && f.status === 'uploading'
                   ? { ...f, progress }
                   : f
               )
             )
           }
         }, 200)
+        progressIntervals.set(uploadedFile.id, interval)
       }
 
       // Call onUpload if provided
@@ -277,8 +309,11 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
           await onUpload(newUploadedFiles)
         } catch (error) {
           console.error('Upload failed:', error)
-          setUploadedFiles(prev => 
-            prev.map(f => 
+          // Reddetme anında bu batch'in simülasyon timer'ları temizlenir (#378)
+          progressIntervals.forEach(handle => clearInterval(handle))
+          progressIntervals.clear()
+          setUploadedFiles(prev =>
+            prev.map(f =>
               newUploadedFiles.some(nf => nf.id === f.id)
                 ? { ...f, status: 'error' as const }
                 : f

package/src/components/ui/progress.tsx

@@ -69,7 +69,20 @@ const progressIndicatorVariants = cva(
       variant: {
         default: "bg-foreground",
         primary: "bg-primary",
-        secondary: "bg-secondary",
+        // #372: dolgu `bg-secondary` idi — track (`bg-secondary/20`) ile AYNI
+        // yüzey token'ına basıyordu; %20 alfa track ile tam dolgu iki temada da
+        // ~1.0 oranında kalıyor, bar görünmüyordu (light rgb(235,239,245) /
+        // dark rgb(2,8,23)). `bg-secondary-foreground` BİLEREK seçilmedi:
+        // light'ta --primary ile aynı hue/sat'ta yalnız ΔL=%2 (49 vs 51,
+        // fill↔fill 1.07), dark'ta birebir --primary değeri (210 40% 98%) —
+        // secondary varyantı primary'nin klonuna dönerdi. `--secondary-500`
+        // (tokens.css slate skalası, RGB üçlüsü) iki temada da track'e ≥3:1
+        // (WCAG 1.4.11) veren TEK kademe: light 4.63, dark 4.23 (gerçek kart
+        // #111827 üstünde 3.83; 400 light'ta 2.50 ✗, 600 dark'ta 2.66 ✗).
+        // Skala :root'ta tanımlı olduğundan tema değişiminde sabittir;
+        // tüketici --secondary-500'ü ezerek özelleştirebilir.
+        // Regresyon: __tests__/progress-secondary-contrast.test.ts
+        secondary: "bg-[rgb(var(--secondary-500))]",
         success: "bg-success",
         warning: "bg-warning",
         error: "bg-error",

package/src/components/ui/slider.tsx

@@ -58,7 +58,20 @@ const sliderRangeVariants = cva(
       variant: {
         default: "bg-foreground",
         primary: "bg-primary",
-        secondary: "bg-secondary",
+        // #389 (#372'nin birebir ardılı): range `bg-secondary` idi — track'in
+        // (`bg-secondary/20`) AYNI yüzey token'ına basıyordu; %20 alfa track ile
+        // tam dolgu iki temada da ~1.0 oranında kalıyor, dolu kısım görünmüyordu
+        // (light rgb(235,239,245) → 1.12 · dark rgb(2,8,23) → 1.01).
+        // `bg-secondary-foreground` BİLEREK seçilmedi: light'ta --primary ile aynı
+        // hue/sat'ta yalnız ΔL=%2 (fill↔fill 1.07), dark'ta birebir --primary
+        // değeri (210 40% 98%) — secondary varyantı primary klonuna dönerdi.
+        // `--secondary-500` (tokens.css slate skalası, RGB üçlüsü) iki temada da
+        // track'e ≥3:1 (WCAG 1.4.11) veren TEK kademe: light 4.63, dark 4.23
+        // (gerçek kart #111827 üstünde 3.83; 400 light'ta 2.50 ✗, 600 dark'ta
+        // 2.66 ✗). Skala :root'ta tanımlı olduğundan tema değişiminde sabittir;
+        // tüketici --secondary-500'ü ezerek özelleştirebilir.
+        // Regresyon: __tests__/slider-secondary-contrast.test.ts
+        secondary: "bg-[rgb(var(--secondary-500))]",
         accent: "bg-accent",
         success: "bg-success",
         warning: "bg-warning",
@@ -78,7 +91,18 @@ const sliderThumbVariants = cva(
       variant: {
         default: "border-foreground bg-background",
         primary: "border-primary bg-background",
-        secondary: "border-secondary bg-background",
+        // #407 (P2, #389'un range eksenine EK ayrı eksen): tutamacın kenarlığı
+        // `border-secondary`, dolgusu `bg-background` idi. Bu bileşen↔sayfa-zemini
+        // ekseni: `--secondary` light'ta neredeyse beyaz (rgb(235,239,245)), dark'ta
+        // `--background` ile neredeyse aynı → kenarlık 1.15 (light) / 1.01 (dark)
+        // oranında kalıyor, secondary slider'ın tutamacı zeminde kayboluyordu.
+        // #389'da bilerek kapsam dışıydı (mevcut kusuru testle "doğru" ilan etmemek için).
+        // Non-text UI bileşeni → WCAG 1.4.11 ≥3:1. Skala taraması bu eksende de TEK
+        // kademe bırakıyor — `--secondary-500`: light 4.76, dark 4.23 (gerçek kart
+        // #111827 üstünde 3.73); 400 light'ta 2.56 ✗, 600 dark'ta 2.66 ✗. Range ile
+        // aynı kademe: tutamaç ve dolgu tek renkte okunur.
+        // Regresyon: __tests__/slider-secondary-contrast.test.ts
+        secondary: "border-[rgb(var(--secondary-500))] bg-background",
         accent: "border-accent bg-background",
         success: "border-success bg-background",
         warning: "border-warning bg-background",