sh-ui-cli 0.59.5 → 0.59.6

package/data/changelog/versions.json

@@ -2,6 +2,20 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.59.6",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 6 — Tailwind variant forced-colors",
+      "type": "patch",
+      "highlights": [
+        "**Tailwind variant 의 5 컴포넌트에 `forced-colors:` utility 추가** — Checkbox / Radio / Switch / Tabs / Toggle. v0.59.4 에서 plain CSS · CSS Modules variant 에만 들어갔던 시스템 컬러 폴백을 Tailwind 사용자도 동일하게 받음.",
+        "**arbitrary property 문법 사용** — `forced-colors:[border-color:ButtonBorder]`, `forced-colors:data-[checked]:[background:Highlight]` 등. system color identifier 는 Tailwind 색상 토큰이 아니라 CSS 키워드라 arbitrary 가 가장 안전.",
+        "**Switch Thumb 분리 처리** — 스위치 토글의 thumb (이동하는 원) 도 별도 cva. `forced-colors:[background:ButtonText]` 기본 + `data-[checked]:[background:HighlightText]` 로 on 상태 구분.",
+        "**prefers-contrast: high** — 추가 작업 0. 토큰 레벨에서 처리되므로 Tailwind 의 `bg-primary`/`border-border` 같은 utility 가 자동으로 강화된 값을 픽업.",
+        "**일관성 회복** — 이제 3 variant (plain · CSS Modules · Tailwind) 모두 동일한 접근성 fallback 보유."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.6"
+    },
     {
       "version": "0.59.5",
       "date": "2026-05-06",

package/data/registry/react/components/checkbox/index.tailwind.tsx

@@ -16,7 +16,7 @@ export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
     <BaseCheckbox.Root
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 forced-colors:[border-color:ButtonBorder] forced-colors:focus-visible:[outline-color:Highlight] forced-colors:data-[checked]:[background:Highlight] forced-colors:data-[checked]:[border-color:Highlight] forced-colors:data-[checked]:[color:HighlightText] forced-colors:data-[indeterminate]:[background:Highlight] forced-colors:data-[indeterminate]:[border-color:Highlight] forced-colors:data-[indeterminate]:[color:HighlightText] forced-colors:data-[disabled]:[border-color:GrayText] forced-colors:data-[disabled]:[color:GrayText]",
         className,
       )}
       {...props}

package/data/registry/react/components/radio/index.tailwind.tsx

@@ -16,12 +16,12 @@ export const Radio = React.forwardRef<HTMLElement, RadioProps>(
     <BaseRadio.Root
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-full bg-background cursor-pointer shrink-0 transition-[border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-full bg-background cursor-pointer shrink-0 transition-[border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 forced-colors:[border-color:ButtonBorder] forced-colors:focus-visible:[outline-color:Highlight] forced-colors:data-[checked]:[border-color:Highlight] forced-colors:data-[disabled]:[border-color:GrayText]",
         className,
       )}
       {...props}
     >
-      <BaseRadio.Indicator className="w-2 h-2 rounded-full bg-primary scale-0 transition-transform duration-[var(--duration-fast)] ease-out data-[checked]:scale-100 motion-reduce:transition-none" />
+      <BaseRadio.Indicator className="w-2 h-2 rounded-full bg-primary scale-0 transition-transform duration-[var(--duration-fast)] ease-out data-[checked]:scale-100 motion-reduce:transition-none forced-colors:[background:Highlight] forced-colors:group-data-[disabled]:[background:GrayText]" />
     </BaseRadio.Root>
   ),
 );

package/data/registry/react/components/switch/index.tailwind.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@SH_UI_UTILS@";
 const switchRoot = cva(
-  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
+  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none forced-colors:[border:1px_solid_ButtonBorder] forced-colors:[background:ButtonFace] forced-colors:focus-visible:[outline-color:Highlight] forced-colors:data-[checked]:[background:Highlight] forced-colors:data-[checked]:[border-color:Highlight] forced-colors:data-[disabled]:[border-color:GrayText]",
   {
     variants: {
       size: {
@@ -18,7 +18,7 @@ const switchRoot = cva(
 );
 
 const switchThumb = cva(
-  "block rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition-transform duration-150 ease-out motion-reduce:transition-none",
+  "block rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition-transform duration-150 ease-out motion-reduce:transition-none forced-colors:[background:ButtonText] forced-colors:data-[checked]:[background:HighlightText] forced-colors:data-[disabled]:[background:GrayText]",
   {
     variants: {
       size: {

package/data/registry/react/components/tabs/index.tailwind.tsx

@@ -65,7 +65,7 @@ export const TabsTrigger = React.forwardRef<
   <BaseTabs.Tab
     ref={ref}
     className={cn(
-      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed forced-colors:focus-visible:[outline-color:Highlight] forced-colors:data-[selected]:[color:Highlight] forced-colors:data-[selected]:[[data-variant=plain]_&]:[outline:1px_solid_Highlight]",
       triggerVariantClasses,
       className,
     )}
@@ -75,7 +75,7 @@ export const TabsTrigger = React.forwardRef<
 TabsTrigger.displayName = "TabsTrigger";
 
 const indicatorVariantClasses =
-  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--primary)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--primary)]";
+  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--primary)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--primary)] forced-colors:[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_Highlight] forced-colors:[[data-variant=pill]_&]:[border:1px_solid_Highlight] forced-colors:[[data-variant=pill]_&]:[background:ButtonFace] forced-colors:[[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_Highlight]";
 
 export const TabsIndicator = React.forwardRef<
   HTMLSpanElement,
@@ -100,7 +100,7 @@ export const TabsContent = React.forwardRef<
   <BaseTabs.Panel
     ref={ref}
     className={cn(
-      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
+      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)] forced-colors:focus-visible:[outline-color:Highlight]",
       className,
     )}
     {...props}

package/data/registry/react/components/toggle/index.tailwind.tsx

@@ -8,7 +8,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@SH_UI_UTILS@";
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
+  "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none forced-colors:focus-visible:[outline-color:Highlight] forced-colors:data-[pressed]:[background:Highlight] forced-colors:data-[pressed]:[color:HighlightText] forced-colors:data-[pressed]:[border-color:Highlight] forced-colors:disabled:[color:GrayText] forced-colors:disabled:[border-color:GrayText]",
   {
     variants: {
       variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.59.5",
+  "version": "0.59.6",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {