sh-ui-cli 0.59.1 → 0.59.3

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.3",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 3 — Card container queries (자기 너비 기준 반응형)",
+      "type": "patch",
+      "highlights": [
+        "**`Card` 가 `container-type: inline-size` 로 컨테이너 컨텍스트 생성** — 자신의 width 기준으로 sub-element padding 조정 가능.",
+        "**`@container (max-width: 20rem)` 블록 추가** — Card 자체 너비가 320px 이하일 때 gap/padding 자동 축소 (`--space-6 → --space-4`). viewport 가 아닌 **부모 컨테이너** 기준이라 좁은 사이드바·column 안에 Card 가 들어가도 자연스럽게.",
+        "**기존 `max-sm:` viewport 룰과 별개로 동작** — 둘 다 fire 해도 같은 값이라 충돌 없음. 모바일 viewport + 어떤 width 든 / 데스크탑 viewport + 좁은 column 등 모두 커버.",
+        "**3 variant 동기화** — plain CSS / CSS Modules / apps/docs. Tailwind variant 는 `container-type` 이 inline class 로 표현 어려워 plain CSS 위주.",
+        "**Sidebar 등 다른 컴포넌트로 확장**: 사용자 요청 시 추가 라운드 가능. Card 가 가장 명확한 win 이라 우선 적용."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.3"
+    },
+    {
+      "version": "0.59.2",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 2 — WCAG audit + prefers-contrast: high 모드",
+      "type": "patch",
+      "highlights": [
+        "**WCAG color contrast audit 수행** — 모든 색 토큰 조합 검증. 결과: foreground / foreground-muted / primary / danger 는 모두 AA 이상 통과. **fail 발견**: foreground-subtle (light 2.52, dark 4.18) / border (1.26~1.31) / border-strong (1.48~1.91) — 모두 stark 의도라 일반 모드에서 변경 안 함 (시각 hierarchy 손실 우려).",
+        "**`prefers-contrast: high` 모드 신설** — 사용자가 OS/브라우저에서 \"고대비\" 옵션 켜면 자동 적용. 위 fail 토큰만 AA-compliant 값으로 강화: `foreground-subtle`/`border`/`border-strong` 이 4.5:1 (text) / 3:1 (UI) 이상 보장. 일반 사용자 영향 0, 접근성 사용자만 활성화.",
+        "**dark 모드 + 고대비 조합 처리** — 명시 `.dark` 클래스 + 시스템 자동 다크 (`prefers-color-scheme: dark`) 둘 다 nested `@media` 로 매칭.",
+        "**4 tokens.css 위치 + pactrack 동기화**",
+        "**design 가이드** — 일반 작업에서 \"비활성 텍스트\" 가 필요하면 `foreground-subtle` 대신 `foreground-muted` 사용 권장 (AAA 통과). subtle 은 hint/timestamp 같은 비-critical 정보 한정."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.2"
+    },
     {
       "version": "0.59.1",
       "date": "2026-05-06",

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

@@ -8,6 +8,22 @@
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
+  /* 자기 너비 기준으로 sub-element padding 조정. */
+  container-type: inline-size;
+}
+
+/* Card 자체 너비가 좁을 때 padding 자동 축소.
+ * viewport 기반 max-sm 과 별개로 — 어떤 viewport 든 Card 자체가 좁으면 적용. */
+@container (max-width: 20rem) {
+  .sh-ui-card {
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+  }
+  .sh-ui-card__header,
+  .sh-ui-card__content,
+  .sh-ui-card__footer {
+    padding-inline: var(--space-4);
+  }
 }
 
 /* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */

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

@@ -8,6 +8,20 @@
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
+  container-type: inline-size;
+}
+
+/* Card 자체 너비가 좁을 때 padding 자동 축소. */
+@container (max-width: 20rem) {
+  .card {
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+  }
+  .header,
+  .content,
+  .footer {
+    padding-inline: var(--space-4);
+  }
 }
 
 /* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */

package/package.json

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

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

@@ -145,3 +145,25 @@
     --control-md: 2.75rem;
   }
 }
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}

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

@@ -145,3 +145,25 @@
     --control-md: 2.75rem;
   }
 }
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}

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

@@ -145,3 +145,25 @@
     --control-md: 2.75rem;
   }
 }
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}