sh-ui-cli 0.59.5 → 0.59.7

package/data/changelog/versions.json

@@ -2,6 +2,34 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.59.7",
+      "date": "2026-05-06",
+      "title": "라운드 7 — Shadow 토큰 일관화",
+      "type": "patch",
+      "highlights": [
+        "**하드코딩된 `box-shadow: ... rgba(0,0,0,X)` 를 토큰으로 교체** — 11+ 컴포넌트가 직접 알파 값을 박아 두던 그림자를 `var(--shadow-sm/md/lg/xl)` 로 통일. 토큰 정의(`tokens.css`)만 바꾸면 전체 조정 가능.",
+        "**`--shadow-menu` 신규 토큰** — 드롭다운/콘텍스트 메뉴/셀렉트의 multi-layer crispy 그림자(`0 4px 6px -1px ..., 0 2px 4px -2px ...`)는 단일 sm/md 와 다른 elevation 시그니처라 별도 토큰화. 4 tokens.css 위치 + inject.js 에 추가.",
+        "**대상 컴포넌트** — Combobox / Context-Menu / Date-Picker / Dropdown-Menu / Menubar / Popover / Select / Sidebar / Slider / Switch / Tabs / Toast.",
+        "**유지한 예외** — Color-picker thumb 의 `0 0 0 1px rgba(0,0,0,0.4)` 는 그림자가 아니라 어떤 색 위에서도 보여야 하는 1px 테두리. Header dropdown 의 `0 8px 24px -8px ...` 는 negative spread 가 의도적 (사이드 절단).",
+        "**다크 모드 영향** — 토큰화로 향후 다크 전용 shadow 값 분기 (예: 더 강한 알파 + 컬러 시프트) 가 1 라인 변경으로 가능."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.7"
+    },
+    {
+      "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/combobox/index.tailwind.tsx

@@ -48,7 +48,7 @@ export const ComboboxContent = React.forwardRef<
         <BaseCombobox.Popup
           ref={ref}
           className={cn(
-            "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.08)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
+            "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-lg)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
             className,
           )}
           {...props}

package/data/registry/react/components/combobox/styles.css

@@ -44,7 +44,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-lg);
   outline: none;
   transform-origin: var(--transform-origin);
   transition: opacity 140ms ease, transform 140ms ease;

package/data/registry/react/components/combobox/styles.module.css

@@ -44,7 +44,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-lg);
   outline: none;
   transform-origin: var(--transform-origin);
   transition: opacity 140ms ease, transform 140ms ease;

package/data/registry/react/components/context-menu/index.tailwind.tsx

@@ -9,7 +9,7 @@ const itemBase =
   "relative flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none motion-reduce:transition-none";
 const itemCheck = "pl-7";
 const contentClasses =
-  "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-cm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-cm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none";
+  "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-menu)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-cm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-cm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none";
 
 export const ContextMenu = BaseContextMenu.Root;
 

package/data/registry/react/components/date-picker/index.tailwind.tsx

@@ -25,7 +25,7 @@ const triggerClasses =
   "inline-flex items-center justify-between w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,box-shadow] duration-[var(--duration-fast)] hover:not-disabled:border-border-strong focus-visible:outline-none focus-visible:border-primary focus-visible:shadow-[0_0_0_1px_var(--primary)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:h-11 [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]";
 
 const popupClasses =
-  "bg-background border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none p-[var(--space-3)] origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95";
+  "bg-background border border-border rounded-[var(--radius)] shadow-[var(--shadow-lg)] outline-none p-[var(--space-3)] origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95";
 
 function CalendarIcon() {
   return (

package/data/registry/react/components/date-picker/styles.css

@@ -77,7 +77,7 @@
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-lg);
   outline: none;
   padding: var(--space-3);
   transform-origin: var(--transform-origin);

package/data/registry/react/components/date-picker/styles.module.css

@@ -77,7 +77,7 @@
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-lg);
   outline: none;
   padding: var(--space-3);
   transform-origin: var(--transform-origin);

package/data/registry/react/components/dropdown-menu/index.tailwind.tsx

@@ -53,7 +53,7 @@ export const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenu
           <BaseMenu.Popup
             ref={ref}
             className={cn(
-              "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-dm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-dm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
+              "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-menu)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-dm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-dm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
               className,
             )}
             {...props}

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

@@ -21,7 +21,7 @@ export const Menubar = React.forwardRef<
     <BaseMenubar
       ref={ref}
       className={cn(
-        "inline-flex items-center gap-[var(--space-1)] p-[var(--space-1)] bg-background border border-border rounded-[var(--radius)] shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
+        "inline-flex items-center gap-[var(--space-1)] p-[var(--space-1)] bg-background border border-border rounded-[var(--radius)] shadow-[var(--shadow-sm)]",
         className,
       )}
       {...props}

package/data/registry/react/components/menubar/styles.css

@@ -6,7 +6,7 @@
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Menubar 안의 DropdownMenuTrigger는 메뉴바 항목 스타일로 재지정.

package/data/registry/react/components/menubar/styles.module.css

@@ -6,7 +6,7 @@
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Menubar 안의 DropdownMenuTrigger는 메뉴바 항목 스타일로 재지정.

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

@@ -34,7 +34,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentPro
           <BasePopover.Popup
             ref={ref}
             className={cn(
-              "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none text-[length:var(--text-sm)] leading-snug origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2",
+              "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-lg)] outline-none text-[length:var(--text-sm)] leading-snug origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2",
               className,
             )}
             {...props}

package/data/registry/react/components/popover/styles.css

@@ -10,7 +10,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-lg);
   outline: none;
   font-size: var(--text-sm);
   line-height: 1.4;

package/data/registry/react/components/popover/styles.module.css

@@ -10,7 +10,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-lg);
   outline: none;
   font-size: var(--text-sm);
   line-height: 1.4;

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/select/index.tailwind.tsx

@@ -60,7 +60,7 @@ export const SelectContent = React.forwardRef<
       <BaseSelect.Popup
         ref={ref}
         className={cn(
-          "min-w-[var(--anchor-width,10rem)] max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-select-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-select-out_100ms_ease-in_forwards] motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
+          "min-w-[var(--anchor-width,10rem)] max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-menu)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-select-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-select-out_100ms_ease-in_forwards] motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
           className,
         )}
         {...props}

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

@@ -262,7 +262,7 @@ export function SidebarPanel({ id, className, children, ...props }: SidebarPanel
   return (
     <aside
       ref={ref}
-      className={cn("[--sidebar-panel-width:20rem] flex flex-col w-[var(--sidebar-panel-width)] shrink-0 bg-background border-r border-[var(--sidebar-border)] relative z-[4] overflow-hidden animate-[sh-ui-sidebar-panel-in_180ms_ease-out] data-[state=closed]:hidden max-md:fixed max-md:top-0 max-md:bottom-0 max-md:left-0 max-md:w-[min(var(--sidebar-panel-width),90vw)] max-md:z-[var(--z-modal)] max-md:shadow-[0_10px_30px_rgba(0,0,0,0.15)] motion-reduce:animate-none",
+      className={cn("[--sidebar-panel-width:20rem] flex flex-col w-[var(--sidebar-panel-width)] shrink-0 bg-background border-r border-[var(--sidebar-border)] relative z-[4] overflow-hidden animate-[sh-ui-sidebar-panel-in_180ms_ease-out] data-[state=closed]:hidden max-md:fixed max-md:top-0 max-md:bottom-0 max-md:left-0 max-md:w-[min(var(--sidebar-panel-width),90vw)] max-md:z-[var(--z-modal)] max-md:shadow-[var(--shadow-xl)] motion-reduce:animate-none",
         className)}
       data-state={open ? "open" : "closed"}
       role={isMobile ? "dialog" : undefined}

package/data/registry/react/components/sidebar/styles.css

@@ -244,7 +244,7 @@
     width: min(var(--sidebar-panel-width), 90vw);
     z-index: var(--z-modal);
     border-inline-end: 1px solid var(--sidebar-border);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-xl);
   }
 }
 .sh-ui-sidebar-wrapper[data-embedded] .sh-ui-sidebar__panel {

package/data/registry/react/components/sidebar/styles.module.css

@@ -244,7 +244,7 @@
     width: min(var(--sidebar-panel-width), 90vw);
     z-index: var(--z-modal);
     border-inline-end: 1px solid var(--sidebar-border);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-xl);
   }
 }
 .sidebar-wrapper[data-embedded] .sidebar__panel {

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

@@ -242,7 +242,7 @@ export const SliderThumb = React.forwardRef<
       aria-disabled={disabled || undefined}
       onKeyDown={onKeyDown}
       className={cn(
-        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
+        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[var(--shadow-sm)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
         className,
       )}
       style={{ left: percent, ...style }}

package/data/registry/react/components/slider/styles.css

@@ -41,7 +41,7 @@
   background: var(--background);
   border: 2px solid var(--primary);
   border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   cursor: grab;
   transition: transform 80ms;
 }

package/data/registry/react/components/slider/styles.module.css

@@ -41,7 +41,7 @@
   background: var(--background);
   border: 2px solid var(--primary);
   border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   cursor: grab;
   transition: transform 80ms;
 }

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-[var(--shadow-sm)] 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/switch/styles.css

@@ -52,7 +52,7 @@
   display: block;
   border-radius: 999px;
   background: white;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-sm);
   transition: transform 150ms ease-out;
 }
 

package/data/registry/react/components/switch/styles.module.css

@@ -52,7 +52,7 @@
   display: block;
   border-radius: 999px;
   background: white;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-sm);
   transition: transform 150ms ease-out;
 }
 

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-[var(--shadow-sm)] [[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/tabs/styles.css

@@ -130,7 +130,7 @@
   height: var(--active-tab-height);
   background: var(--background);
   border-radius: calc(var(--radius) - 2px);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--shadow-sm);
 }
 
 /* ─────────────── variant: plain (컨테이너 없음) ─────────────── */

package/data/registry/react/components/tabs/styles.module.css

@@ -130,7 +130,7 @@
   height: var(--active-tab-height);
   background: var(--background);
   border-radius: calc(var(--radius) - 2px);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--shadow-sm);
 }
 
 /* ─────────────── variant: plain (컨테이너 없음) ─────────────── */

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

@@ -107,7 +107,7 @@ function ToastCard({ item, onDismiss }: { item: ToastItem; onDismiss: () => void
 
   return (
     <div
-      className="sh-ui-toast relative flex items-start gap-2.5 w-full pl-[var(--space-3)] pr-9 py-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_16px_rgba(0,0,0,0.12)] pointer-events-auto motion-reduce:!animate-none"
+      className="sh-ui-toast relative flex items-start gap-2.5 w-full pl-[var(--space-3)] pr-9 py-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-md)] pointer-events-auto motion-reduce:!animate-none"
       role={item.variant === "danger" ? "alert" : "status"}
       aria-live={item.variant === "danger" ? "assertive" : "polite"}
       data-exiting={exiting || undefined}

package/data/registry/react/components/toast/styles.css

@@ -86,7 +86,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
   pointer-events: auto;
 }
 

package/data/registry/react/components/toast/styles.module.css

@@ -86,7 +86,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
   pointer-events: auto;
 }
 

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.7",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/create/theme/inject.js

@@ -303,7 +303,10 @@ const colorToARGBHex = ({ a, r, g, b }) => {
 const SHADOW_KEYS = ['sm', 'md', 'lg', 'xl'];
 
 export const buildCssShadowsBlock = (shadows) =>
-  SHADOW_KEYS.map((k) => `  --shadow-${k}: ${shadows[k]};`).join('\n');
+  [
+    ...SHADOW_KEYS.map((k) => `  --shadow-${k}: ${shadows[k]};`),
+    `  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);`,
+  ].join('\n');
 
 const parseSingleBoxShadow = (s) => {
   const tokens = tokenizeSpaceAware(s);

package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css

@@ -99,6 +99,7 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;

package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -99,6 +99,7 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;

package/templates/ui-app-template/src/styles/tokens.css

@@ -99,6 +99,7 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;