sh-ui-cli 0.59.2 → 0.59.3
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.
|
@@ -2,6 +2,20 @@
|
|
|
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.3",
|
|
7
|
+
"date": "2026-05-06",
|
|
8
|
+
"title": "접근성 라운드 3 — Card container queries (자기 너비 기준 반응형)",
|
|
9
|
+
"type": "patch",
|
|
10
|
+
"highlights": [
|
|
11
|
+
"**`Card` 가 `container-type: inline-size` 로 컨테이너 컨텍스트 생성** — 자신의 width 기준으로 sub-element padding 조정 가능.",
|
|
12
|
+
"**`@container (max-width: 20rem)` 블록 추가** — Card 자체 너비가 320px 이하일 때 gap/padding 자동 축소 (`--space-6 → --space-4`). viewport 가 아닌 **부모 컨테이너** 기준이라 좁은 사이드바·column 안에 Card 가 들어가도 자연스럽게.",
|
|
13
|
+
"**기존 `max-sm:` viewport 룰과 별개로 동작** — 둘 다 fire 해도 같은 값이라 충돌 없음. 모바일 viewport + 어떤 width 든 / 데스크탑 viewport + 좁은 column 등 모두 커버.",
|
|
14
|
+
"**3 variant 동기화** — plain CSS / CSS Modules / apps/docs. Tailwind variant 는 `container-type` 이 inline class 로 표현 어려워 plain CSS 위주.",
|
|
15
|
+
"**Sidebar 등 다른 컴포넌트로 확장**: 사용자 요청 시 추가 라운드 가능. Card 가 가장 명확한 win 이라 우선 적용."
|
|
16
|
+
],
|
|
17
|
+
"url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.3"
|
|
18
|
+
},
|
|
5
19
|
{
|
|
6
20
|
"version": "0.59.2",
|
|
7
21
|
"date": "2026-05-06",
|
|
@@ -8,6 +8,22 @@
|
|
|
8
8
|
border: 1px solid var(--border);
|
|
9
9
|
border-radius: var(--radius);
|
|
10
10
|
box-shadow: var(--shadow-sm);
|
|
11
|
+
/* 자기 너비 기준으로 sub-element padding 조정. */
|
|
12
|
+
container-type: inline-size;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Card 자체 너비가 좁을 때 padding 자동 축소.
|
|
16
|
+
* viewport 기반 max-sm 과 별개로 — 어떤 viewport 든 Card 자체가 좁으면 적용. */
|
|
17
|
+
@container (max-width: 20rem) {
|
|
18
|
+
.sh-ui-card {
|
|
19
|
+
gap: var(--space-4);
|
|
20
|
+
padding: var(--space-4) 0;
|
|
21
|
+
}
|
|
22
|
+
.sh-ui-card__header,
|
|
23
|
+
.sh-ui-card__content,
|
|
24
|
+
.sh-ui-card__footer {
|
|
25
|
+
padding-inline: var(--space-4);
|
|
26
|
+
}
|
|
11
27
|
}
|
|
12
28
|
|
|
13
29
|
/* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */
|
|
@@ -8,6 +8,20 @@
|
|
|
8
8
|
border: 1px solid var(--border);
|
|
9
9
|
border-radius: var(--radius);
|
|
10
10
|
box-shadow: var(--shadow-sm);
|
|
11
|
+
container-type: inline-size;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Card 자체 너비가 좁을 때 padding 자동 축소. */
|
|
15
|
+
@container (max-width: 20rem) {
|
|
16
|
+
.card {
|
|
17
|
+
gap: var(--space-4);
|
|
18
|
+
padding: var(--space-4) 0;
|
|
19
|
+
}
|
|
20
|
+
.header,
|
|
21
|
+
.content,
|
|
22
|
+
.footer {
|
|
23
|
+
padding-inline: var(--space-4);
|
|
24
|
+
}
|
|
11
25
|
}
|
|
12
26
|
|
|
13
27
|
/* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */
|