sh-ui-cli 0.59.0 → 0.59.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/data/changelog/versions.json +27 -0
  2. package/data/registry/react/components/card/index.tailwind.tsx +1 -1
  3. package/data/registry/react/components/card/styles.css +1 -0
  4. package/data/registry/react/components/card/styles.module.css +1 -0
  5. package/data/registry/react/components/dialog/index.tailwind.tsx +1 -1
  6. package/data/registry/react/components/dialog/styles.css +1 -0
  7. package/data/registry/react/components/dialog/styles.module.css +1 -0
  8. package/data/registry/react/components/popover/index.tailwind.tsx +1 -1
  9. package/data/registry/react/components/popover/styles.css +1 -0
  10. package/data/registry/react/components/popover/styles.module.css +1 -0
  11. package/package.json +1 -1
  12. package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css +30 -0
  13. package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css +30 -0
  14. package/templates/ui-app-template/src/styles/tokens.css +30 -0
package/data/changelog/versions.json CHANGED
@@ -2,6 +2,33 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
4
4
  "versions": [
5
+ {
6
+ "version": "0.59.2",
7
+ "date": "2026-05-06",
8
+ "title": "접근성 라운드 2 — WCAG audit + prefers-contrast: high 모드",
9
+ "type": "patch",
10
+ "highlights": [
11
+ "**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 손실 우려).",
12
+ "**`prefers-contrast: high` 모드 신설** — 사용자가 OS/브라우저에서 \"고대비\" 옵션 켜면 자동 적용. 위 fail 토큰만 AA-compliant 값으로 강화: `foreground-subtle`/`border`/`border-strong` 이 4.5:1 (text) / 3:1 (UI) 이상 보장. 일반 사용자 영향 0, 접근성 사용자만 활성화.",
13
+ "**dark 모드 + 고대비 조합 처리** — 명시 `.dark` 클래스 + 시스템 자동 다크 (`prefers-color-scheme: dark`) 둘 다 nested `@media` 로 매칭.",
14
+ "**4 tokens.css 위치 + pactrack 동기화**",
15
+ "**design 가이드** — 일반 작업에서 \"비활성 텍스트\" 가 필요하면 `foreground-subtle` 대신 `foreground-muted` 사용 권장 (AAA 통과). subtle 은 hint/timestamp 같은 비-critical 정보 한정."
16
+ ],
17
+ "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.2"
18
+ },
19
+ {
20
+ "version": "0.59.1",
21
+ "date": "2026-05-06",
22
+ "title": "접근성 라운드 1 — text-wrap: balance + 모바일 터치 타겟",
23
+ "type": "patch",
24
+ "highlights": [
25
+ "**`Card.Title` / `Dialog.Title` / `Popover.Title` 에 `text-wrap: balance` 추가** — 헤딩 텍스트가 두 줄 이상으로 wrap 될 때 마지막 줄에 단어 1~2개만 남는 orphan 문제 해소. 단어가 두 줄에 균등 분포. 한국어처럼 단어 길이 다양한 언어에서 효과 큼. 한 줄에 들어가면 no-op.",
26
+ "**모바일 터치 타겟 자동 보정 (WCAG 2.5.5)** — tokens.css 에 `@media (hover: none) and (pointer: coarse)` 블록 추가. 손가락 입력 환경에서 `--control-sm` (32px) / `--control-md` (40px) 가 자동으로 44px 로 확장. 모든 Button/Input 등 control-* 토큰을 사용하는 컴포넌트가 자동 적용. 데스크탑 (마우스/트랙패드) 은 영향 없음.",
27
+ "**`--control-lg`** (48px) 는 이미 44px 초과라 변경 불필요.",
28
+ "**4 variant + 듀얼 카피본 + pactrack 동기화** — Tailwind/plain/module/vanilla-extract + apps/docs + cli/templates."
29
+ ],
30
+ "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.1"
31
+ },
5
32
  {
6
33
  "version": "0.59.0",
7
34
  "date": "2026-05-06",
package/data/registry/react/components/card/index.tailwind.tsx CHANGED
@@ -38,7 +38,7 @@ export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
38
38
  <div
39
39
  ref={ref}
40
40
  className={cn(
41
- "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight",
41
+ "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight text-balance",
42
42
  className,
43
43
  )}
44
44
  {...props}
package/data/registry/react/components/card/styles.css CHANGED
@@ -28,6 +28,7 @@
28
28
  font-weight: var(--weight-semibold);
29
29
  line-height: 1.25;
30
30
  letter-spacing: -0.01em;
31
+ text-wrap: balance;
31
32
  }
32
33
 
33
34
  .sh-ui-card__description {
package/data/registry/react/components/card/styles.module.css CHANGED
@@ -28,6 +28,7 @@
28
28
  font-weight: var(--weight-semibold);
29
29
  line-height: 1.25;
30
30
  letter-spacing: -0.01em;
31
+ text-wrap: balance;
31
32
  }
32
33
 
33
34
  .description {
package/data/registry/react/components/dialog/index.tailwind.tsx CHANGED
@@ -69,7 +69,7 @@ export const DialogTitle = React.forwardRef<
69
69
  <BaseDialog.Title
70
70
  ref={ref}
71
71
  className={cn(
72
- "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug",
72
+ "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug text-balance",
73
73
  className,
74
74
  )}
75
75
  {...props}
package/data/registry/react/components/dialog/styles.css CHANGED
@@ -62,6 +62,7 @@
62
62
  font-weight: var(--weight-semibold);
63
63
  font-size: var(--text-lg);
64
64
  line-height: 1.4;
65
+ text-wrap: balance;
65
66
  }
66
67
 
67
68
  /* ── Description ── */
package/data/registry/react/components/dialog/styles.module.css CHANGED
@@ -62,6 +62,7 @@
62
62
  font-weight: var(--weight-semibold);
63
63
  font-size: var(--text-lg);
64
64
  line-height: 1.4;
65
+ text-wrap: balance;
65
66
  }
66
67
 
67
68
  /* ── Description ── */
package/data/registry/react/components/popover/index.tailwind.tsx CHANGED
@@ -55,7 +55,7 @@ export const PopoverTitle = React.forwardRef<
55
55
  return (
56
56
  <BasePopover.Title
57
57
  ref={ref}
58
- className={cn("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem]", className)}
58
+ className={cn("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem] text-balance", className)}
59
59
  {...props}
60
60
  />
61
61
  );
package/data/registry/react/components/popover/styles.css CHANGED
@@ -46,6 +46,7 @@
46
46
  margin: 0 0 var(--space-1);
47
47
  font-weight: var(--weight-semibold);
48
48
  font-size: 0.9375rem;
49
+ text-wrap: balance;
49
50
  }
50
51
 
51
52
  .sh-ui-popover__description {
package/data/registry/react/components/popover/styles.module.css CHANGED
@@ -46,6 +46,7 @@
46
46
  margin: 0 0 var(--space-1);
47
47
  font-weight: var(--weight-semibold);
48
48
  font-size: 0.9375rem;
49
+ text-wrap: balance;
49
50
  }
50
51
 
51
52
  .popover__description {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sh-ui-cli",
3
- "version": "0.59.0",
3
+ "version": "0.59.2",
4
4
  "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
5
5
  "license": "MIT",
6
6
  "repository": {
package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css CHANGED
@@ -137,3 +137,33 @@
137
137
  --bp-lg: 1024px;
138
138
  --bp-xl: 1280px;
139
139
  }
140
+
141
+ /* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
142
+ @media (hover: none) and (pointer: coarse) {
143
+ :root {
144
+ --control-sm: 2.75rem;
145
+ --control-md: 2.75rem;
146
+ }
147
+ }
148
+
149
+ /* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
150
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
151
+ @media (prefers-contrast: high) {
152
+ :root {
153
+ --foreground-subtle: #767676;
154
+ --border: #767676;
155
+ --border-strong: #595959;
156
+ }
157
+ .dark {
158
+ --foreground-subtle: #B3B3B3;
159
+ --border: #757575;
160
+ --border-strong: #999999;
161
+ }
162
+ @media (prefers-color-scheme: dark) {
163
+ :root:not(.light):not(.dark) {
164
+ --foreground-subtle: #B3B3B3;
165
+ --border: #757575;
166
+ --border-strong: #999999;
167
+ }
168
+ }
169
+ }
package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css CHANGED
@@ -137,3 +137,33 @@
137
137
  --bp-lg: 1024px;
138
138
  --bp-xl: 1280px;
139
139
  }
140
+
141
+ /* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
142
+ @media (hover: none) and (pointer: coarse) {
143
+ :root {
144
+ --control-sm: 2.75rem;
145
+ --control-md: 2.75rem;
146
+ }
147
+ }
148
+
149
+ /* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
150
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
151
+ @media (prefers-contrast: high) {
152
+ :root {
153
+ --foreground-subtle: #767676;
154
+ --border: #767676;
155
+ --border-strong: #595959;
156
+ }
157
+ .dark {
158
+ --foreground-subtle: #B3B3B3;
159
+ --border: #757575;
160
+ --border-strong: #999999;
161
+ }
162
+ @media (prefers-color-scheme: dark) {
163
+ :root:not(.light):not(.dark) {
164
+ --foreground-subtle: #B3B3B3;
165
+ --border: #757575;
166
+ --border-strong: #999999;
167
+ }
168
+ }
169
+ }
package/templates/ui-app-template/src/styles/tokens.css CHANGED
@@ -137,3 +137,33 @@
137
137
  --bp-lg: 1024px;
138
138
  --bp-xl: 1280px;
139
139
  }
140
+
141
+ /* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
142
+ @media (hover: none) and (pointer: coarse) {
143
+ :root {
144
+ --control-sm: 2.75rem;
145
+ --control-md: 2.75rem;
146
+ }
147
+ }
148
+
149
+ /* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
150
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
151
+ @media (prefers-contrast: high) {
152
+ :root {
153
+ --foreground-subtle: #767676;
154
+ --border: #767676;
155
+ --border-strong: #595959;
156
+ }
157
+ .dark {
158
+ --foreground-subtle: #B3B3B3;
159
+ --border: #757575;
160
+ --border-strong: #999999;
161
+ }
162
+ @media (prefers-color-scheme: dark) {
163
+ :root:not(.light):not(.dark) {
164
+ --foreground-subtle: #B3B3B3;
165
+ --border: #757575;
166
+ --border-strong: #999999;
167
+ }
168
+ }
169
+ }