@moontra/moonui 6.16.0 → 6.18.0

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

@@ -0,0 +1,231 @@
+/**
+ * #372 — Progress `variant="secondary"` dolgu↔track kontrast değişmezi.
+ *
+ * BULGU (#318'in ardılı): #318 `indicatorVariant ?? variant` düşüşünü kurunca
+ * `variant="secondary"` dolguya İLK KEZ ulaştı — ve ulaşan değer görünmez çıktı.
+ * Dolgu `bg-secondary`, track `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, bar hiç görünmüyordu.
+ * axe bunu yakalamaz: `color-contrast` yalnız METİN öğelerini ölçer.
+ *
+ * DÜZELTME: dolgu `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 (issue #372 seçenek 1; track↔zemin
+ * ayrışması ayrı token-ekseni bulgusudur, kapsam dışı).
+ *
+ * Kabul kriteri (issue #372 §3): dolgu↔track kontrastı light ve dark temada
+ * ≥3:1 (WCAG 1.4.11 non-text eşiği). Buradaki testler hem bu eşiği hem de
+ * "500 iki temada da geçen TEK kademe" seçim gerekçesini kilitler.
+ *
+ * Hesap yöntemi primary-subtle-token.test.ts ile birebir aynıdır (WCAG 2.x
+ * bağıl parlaklık); oradaki "hesaplayıcı doğru mu?" çapası burada da var.
+ * NOT: #375'in dark-token-contrast.test.ts dosyasıyla bilerek AYRI dosya —
+ * o PR --destructive/--muted/--muted-foreground'u değiştirir, --secondary'ye
+ * ve --secondary-500 skalasına dokunmaz (diff'i teyit edildi, çakışma yok).
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Progress } from '../progress'
+
+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 dolgu (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 }
+}
+
+describe('#372 progress secondary dolgu↔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: dolgu ile track FARKLI token’lara basıyor', () => {
+    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/progress.tsx'), 'utf8')
+
+    it('track secondary sınıfı `bg-secondary/20` (issue seçenek 1 — değişmedi)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+    })
+
+    it('dolgu secondary sınıfı `bg-[rgb(var(--secondary-500))]` (artık --secondary DEĞİL)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
+    })
+  })
+
+  describe('render sözleşmesi: <Progress variant="secondary" />', () => {
+    it('track ve dolgu sınıfları DOM’a farklı token’larla iniyor', () => {
+      render(React.createElement(Progress, { variant: 'secondary', value: 50 }))
+      const track = screen.getByRole('progressbar')
+      expect(track).toHaveClass('bg-secondary/20')
+      const dolgu = track.firstElementChild as HTMLElement
+      expect(dolgu).not.toBeNull()
+      expect(dolgu.className).toContain('bg-[rgb(var(--secondary-500))]')
+      expect(dolgu.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
+    })
+
+    it('#318 düşüş mantığı KORUNUYOR — indicatorVariant hâlâ variant’ı ezer', () => {
+      render(React.createElement(Progress, { variant: 'secondary', indicatorVariant: 'success', value: 50 }))
+      const dolgu = screen.getByRole('progressbar').firstElementChild as HTMLElement
+      expect(dolgu.className).toContain('bg-success')
+      expect(dolgu.className).not.toContain('bg-[rgb(var(--secondary-500))]')
+    })
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1 (WCAG 1.4.11)', (blok) => {
+    it('YENİ dolgu (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İ dolgu (bg-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // Biri dolguyu `bg-secondary`ye geri döndürürse bu test ona "eski değer
+      // zaten görünmüyordu" diye değil, üstteki kriter testi kırmızıyla söyler;
+      // burası ise düzeltmenin GEREKLİLİĞİNİ sabitler (light 1.02, dark ~1.0-1.5).
+      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', () => {
+    // Dolgu 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-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'))
+    })
+  })
+})

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

@@ -218,7 +218,10 @@ describe('Progress Component', () => {
       render(<Progress indicatorVariant="secondary" />)
       const progress = screen.getByRole('progressbar')
       const indicator = progress.querySelector('div')
-      expect(indicator).toHaveClass('bg-secondary')
+      // #372: dolgu artık `bg-secondary` DEĞİL — o yüzey token'ı track'in
+      // (`bg-secondary/20`) aynısıydı ve bar iki temada da görünmüyordu.
+      // Gerekçe + kontrast hesabı: progress-secondary-contrast.test.ts
+      expect(indicator).toHaveClass('bg-[rgb(var(--secondary-500))]')
     })
 
     it('renders success indicator variant correctly', () => {

package/src/components/ui/__tests__/responsive-color-invariance.test.ts

@@ -0,0 +1,92 @@
+/**
+ * #354 — kontrast ölçümü viewport'tan BAĞIMSIZ olmalı.
+ *
+ * Issue'nun kabul kriteri "sabit viewport"ta ölçüm istiyordu. Ama mevcut tarayıcı
+ * araçlarıyla viewport DEĞİŞTİRİLEMEDİ: `resize_window` "başarılı" dönüyor,
+ * `innerWidth` 2751'de kalıyor, `outerWidth` 0 raporlanıyor.
+ *
+ * Bu yüzden risk ÖLÇÜLMEK yerine ORTADAN KALDIRILDI: eğer hiçbir kırılma noktası
+ * renk değiştirmiyorsa, contrast sonucu viewport'tan bağımsızdır ve tek bir
+ * genişlikte ölçmek yeterlidir.
+ *
+ * Tarama sonucu (2026-08-04): iki pakette 351 dosyada 199 responsive varyant
+ * (free 17 + pro 182); renk ailesinden olanların tamamı boyut/hiza değerleri.
+ * **Sıfır renk varyantı.**
+ *
+ * Bu test o değişmezi kilitler: biri `md:text-primary` gibi bir sınıf eklerse
+ * kırmızı olur ve "artık viewport başına ölçmek gerekiyor" uyarısı verir.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOKLER = [
+  path.resolve(__dirname, '../../..'),                    // packages/moonui/src
+  path.resolve(__dirname, '../../../../../moonui-pro/src'), // packages/moonui-pro/src
+]
+
+/** Renk ailesinden yardımcı adları — boyut/hiza/spacing DEĞİL. */
+const RENK_ONEKLERI = ['text', 'bg', 'border', 'from', 'via', 'to', 'ring', 'divide',
+  'placeholder', 'decoration', 'caret', 'accent', 'outline', 'shadow']
+
+/** `text-*` ailesinde renk OLMAYAN değerler (boyut, hiza, taşma). */
+const RENK_OLMAYAN_TEXT = new Set([
+  'xs','sm','base','lg','xl','2xl','3xl','4xl','5xl','6xl','7xl','8xl','9xl',
+  'left','center','right','justify','start','end',
+  'wrap','nowrap','balance','pretty','clip','ellipsis',
+])
+
+function dosyalar(kok: string): string[] {
+  const cikti: string[] = []
+  if (!fs.existsSync(kok)) return cikti
+  ;(function walk(dir: string) {
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const p = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+      } else if (/\.(tsx?|css)$/.test(e.name)) cikti.push(p)
+    }
+  })(kok)
+  return cikti
+}
+
+const tumDosyalar = KOKLER.flatMap(dosyalar)
+const RESPONSIVE = /\b(sm|md|lg|xl|2xl):([a-z][a-z0-9-]*)(?:-([a-z0-9[\]#/.%-]+))?/g
+
+describe('#354 responsive renk değişmezi', () => {
+  it('tarayıcı GERÇEKTEN responsive varyant buluyor (sessiz-yeşil koruması)', () => {
+    // Bu koruma olmadan, regex/yol bozulduğunda test "0 renk varyantı" ile YEŞİL
+    // geçerdi ve viewport riski sessizce açık kalırdı.
+    //
+    // Eşik, gerçek sayıya (2026-08-04'te 199) YAPIŞIK olmamalı: ölü dosya silmek
+    // gibi meşru işler sayıyı birkaç birim düşürür. İlk sürüm `> 200` idi ve o
+    // günkü değer 202'ydi; #365'te ölü `dashboard/demo.tsx` (3 varyant) silinince
+    // kırmızıya döndü — regex bozulmadan. Amaç "tarayıcı ölü mü" sorusunu
+    // yanıtlamak olduğundan büyüklük mertebesi yeterli.
+    let toplam = 0
+    for (const f of tumDosyalar) {
+      toplam += [...fs.readFileSync(f, 'utf8').matchAll(RESPONSIVE)].length
+    }
+    expect(toplam).toBeGreaterThan(100)
+    expect(tumDosyalar.length).toBeGreaterThan(100)
+  })
+
+  it('hiçbir kırılma noktası RENK değiştirmiyor', () => {
+    const ihlaller: string[] = []
+    for (const f of tumDosyalar) {
+      const src = fs.readFileSync(f, 'utf8')
+      for (const m of src.matchAll(RESPONSIVE)) {
+        const [tam, , yardimci, deger] = m
+        if (!RENK_ONEKLERI.includes(yardimci)) continue
+        if (!deger) continue
+        // `text-` ailesinde boyut/hiza değerleri renk değildir
+        if (yardimci === 'text' && RENK_OLMAYAN_TEXT.has(deger)) continue
+        // köşeli parantezli keyfi değerler: renk mi boyut mu? `#`/`rgb` varsa renk.
+        if (deger.startsWith('[') && !/#|rgb|hsl/.test(deger)) continue
+        ihlaller.push(`${path.basename(f)} → ${tam}`)
+      }
+    }
+    // Boş olmalı: aksi halde contrast ölçümü artık viewport'a bağımlıdır ve
+    // #354'ün "tek genişlikte ölçmek yeterli" gerekçesi düşer.
+    expect(ihlaller).toEqual([])
+  })
+})

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/styles/tokens.css

@@ -199,6 +199,17 @@
   --info-subtle: 214 100% 97%;
   --info-subtle-foreground: 224 64% 33%;             /* 9.52:1 */
 
+  /* #354: `primary` ailesi bu listede EKSİKTİ. Pro Sidebar'ın aktif öğesi
+     "primary metin + primary/10 zemin" deseni kullanıyordu; light temada bu
+     4.28:1 veriyor (gereken 4.5) — yani docs kabuğu her sayfada bir WCAG AA
+     ihlali basıyordu. Dark tarafta `--primary` neredeyse beyaz olduğu için
+     sorun yoktu (15.73:1, ölçüldü).
+
+     Zemin, bugünkü `primary/10` bileşiminin BİREBİR HSL karşılığı (beyaz üstüne
+     %10 primary = #e7f0fe) → görünüm DEĞİŞMEZ, yalnız metin koyulaşır. */
+  --primary-subtle: 217 92% 95%;
+  --primary-subtle-foreground: 217.2 91.2% 40%;      /* 6.21:1 */
+
   --primary-50: 240 249 255;
 
   /* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
@@ -445,15 +456,42 @@
   --card-foreground: 213 31% 91%;
   --popover: 224 71% 4%;
   --popover-foreground: 213 31% 91%;
+  /* #368 rol denetimi: --primary koyu temada BİLİNÇLİ near-white — esas rolü
+     ZEMİN (`bg-primary text-primary-foreground` butonu 19.81 taşır, ölçüldü).
+     --foreground (91%) ile yalnız 1.19 verdiği için "aktif/vurgulu" ayrımı
+     koyu temada RENKLE taşınamaz; stepper/form-wizard bu ayrımı dolgu + Check
+     ikonu + font-semibold ile veriyor (stepper.tsx:323-330). Vurgu METNİ
+     gereken yerde --primary-subtle(-foreground) çifti kullanılır (#354).
+     Değeri maviye çekmek, paketi kullanan TÜM projelerin koyu tema butonlarını
+     sürüm yükseltmesinde sessizce değiştirirdi → değer DEĞİŞTİRİLMEDİ. */
   --primary: 210 40% 98%;
   --primary-foreground: 222.2 47.4% 1.2%;
   --secondary: 222.2 84% 4.9%;
   --secondary-foreground: 210 40% 98%;
-  --muted: 223 47% 11%;
-  --muted-foreground: 215.4 16.3% 56.9%;
+  /* #368: --muted DEKORATİF YÜZEY rolünde (Skeleton `bg-muted`, kbd, tabs).
+     11%'te gerçek kart zemininden (#111827, bkz. --input notu) ayrışmıyordu:
+     1.01 — skeleton barları koyu temada fiilen GÖRÜNMÜYORDU. Aynı hue/sat
+     korunarak yalnız L 11→22 (rgb(15,22,41)→rgb(30,45,82), aynı rengin 2×
+     açığı): kart üstünde 1.31, --background üstünde 1.49 — yüzey-yüzey ayrımı
+     için ≥1.3 pratik alt sınırı geçer. */
+  --muted: 223 47% 22%;
+  /* #368: --muted 22% olunca 56.9% metin `bg-muted` üstünde 4.06'ya düşüyordu
+     (AA 4.5 altı — #284'ün açık temada onardığı çiftin birebir aynısı).
+     62% ile: muted üstünde 4.80, kart (#111827) üstünde 6.29, --background
+     üstünde 7.15 — tümü AA üstü. */
+  --muted-foreground: 215.4 16.3% 62%;
   --accent: 216 34% 17%;
   --accent-foreground: 210 40% 98%;
-  --destructive: 0 63% 31%;
+  /* #368: --destructive, --success ile AYNI çift-rol tuzağındaydı: açık temada
+     `bg-destructive` ZEMİN, koyu temada `text-destructive` METİN (free 7 + pro
+     36 dosya). 31% metin olarak okunmuyordu: gerçek kart zemini (#111827)
+     üstünde 1.79 (AA 4.5 ister). 0 84% 60% (= :root --error; koyu tema o
+     değeri zaten miras alıyor) metin rolünde kart üstünde 4.69, --background
+     üstünde 5.33 taşır; hata kenarlıkları da 1.4.11 eşiğini geçer (3.0 ister,
+     ölçülen 4.69 — eskiden 1.80 idi). Trade-off: dolgu rolünde beyaz
+     foreground ile 3.61'e iner (büyük metin/UI eşiği 3.0 üstü) — --success'in
+     koyu temadaki kararının aynısı: metin rolü önceliklidir. */
+  --destructive: 0 84% 60%;
   /* `--success` iki rolde birden kullanılıyor: açık temada `bg-success` ZEMİN
      (üstünde açık metin), karanlık temada `text-success` METİN (koyu zemin
      üstünde). Açık tema için 29%'e koyulaştırıldı; karanlık temada o değer
@@ -474,6 +512,12 @@
   --warning-subtle-foreground: 34 100% 92%;          /* 14.43:1 */
   --info-subtle: 217 80% 13%;
   --info-subtle-foreground: 214 95% 93%;             /* 14.11:1 */
+
+  /* #354: koyu temada mevcut görünüm KORUNUYOR — bugünkü bileşimin birebir
+     karşılığı (near-white/10 near-black üstüne). Dark zaten geçiyordu; buradaki
+     amaç token ailesini tamamlamak, dark'ın rengini değiştirmek değil. */
+  --primary-subtle: 225 18% 13%;
+  --primary-subtle-foreground: 210 40% 98%;          /* 15.73:1 */
   --border: 216 34% 17%;
   /* #284: koyu temada form kontrolü kenarlığı 1.36 idi -> 40% ile ~3.1.
      Not: --input switch.tsx:27'de kapalı track ZEMİNİ olarak da kullanılıyor;

package/tailwind-preset.js

@@ -76,6 +76,13 @@ module.exports = {
         primary: {
           DEFAULT: "hsl(var(--primary) / <alpha-value>)",
           foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          // #354: `primary` yumuşak-ton yüzeyi — `bg-primary-subtle` +
+          // `text-primary-subtle-foreground`. Aile destructive/success/warning/
+          // info için vardı, primary EKSİKTİ ve pro Sidebar'ın aktif öğesi bu
+          // yüzden ham `primary/10` kompozisyonuna düşüp light temada 4.28:1
+          // veriyordu.
+          subtle: "hsl(var(--primary-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--primary-subtle-foreground) / <alpha-value>)",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary) / <alpha-value>)",