sh-ui-cli 0.67.2 → 0.67.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,19 @@
|
|
|
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.67.3",
|
|
7
|
+
"date": "2026-05-09",
|
|
8
|
+
"title": "fix(sidebar) — Collapsible 하위 메뉴 펼침/접힘 애니메이션",
|
|
9
|
+
"type": "patch",
|
|
10
|
+
"highlights": [
|
|
11
|
+
"**Sidebar Collapsible 애니메이션 회귀 fix** — chevron 회전은 부드러운데 본문은 `display:none` 토글이라 즉시 사라지던 어색함. `grid-template-rows: 0fr ↔ 1fr` 트릭으로 height 를 모르는 채로 200ms ease 트랜지션. inner wrapper + `overflow:hidden`/`min-height:0` 으로 grid track 에 맞춰 잘림.",
|
|
12
|
+
"**a11y 보존** — `hidden={!open}` 대신 `inert` + `aria-hidden` 사용. 닫힌 상태에서도 DOM 은 살아 있어 트랜지션이 가능하면서, 포커스/스크린리더 접근은 정상적으로 차단.",
|
|
13
|
+
"**reduced-motion 가드** — `prefers-reduced-motion: reduce` 일 때 `__collapsible-content` 트랜지션 비활성. 모션 민감 사용자는 즉시 토글 (기존 동작) 유지.",
|
|
14
|
+
"**collapsed=icon flyout 모드 영향 없음** — icon 모드에서는 inline content 가 아닌 Popover 로 전환되므로 기존 flyout UX 그대로."
|
|
15
|
+
],
|
|
16
|
+
"url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.67.3"
|
|
17
|
+
},
|
|
5
18
|
{
|
|
6
19
|
"version": "0.67.2",
|
|
7
20
|
"date": "2026-05-09",
|
|
@@ -918,8 +918,13 @@ export function SidebarCollapsibleContent({ children }: { children: React.ReactN
|
|
|
918
918
|
}
|
|
919
919
|
|
|
920
920
|
return (
|
|
921
|
-
<div
|
|
922
|
-
|
|
921
|
+
<div
|
|
922
|
+
className="sh-ui-sidebar__collapsible-content"
|
|
923
|
+
data-state={open ? "open" : "closed"}
|
|
924
|
+
inert={!open}
|
|
925
|
+
aria-hidden={!open || undefined}
|
|
926
|
+
>
|
|
927
|
+
<div className="sh-ui-sidebar__collapsible-content-inner">{children}</div>
|
|
923
928
|
</div>
|
|
924
929
|
);
|
|
925
930
|
}
|
|
@@ -462,8 +462,19 @@
|
|
|
462
462
|
transform: rotate(90deg);
|
|
463
463
|
}
|
|
464
464
|
|
|
465
|
+
/* grid-template-rows 0fr→1fr 트릭 — height 를 모르는 채로 부드럽게 펼침/접힘.
|
|
466
|
+
* inner 는 overflow:hidden + min-height:0 으로 grid track 에 맞춰 잘려나간다. */
|
|
467
|
+
.sh-ui-sidebar__collapsible-content {
|
|
468
|
+
display: grid;
|
|
469
|
+
grid-template-rows: 1fr;
|
|
470
|
+
transition: grid-template-rows 200ms ease;
|
|
471
|
+
}
|
|
465
472
|
.sh-ui-sidebar__collapsible-content[data-state="closed"] {
|
|
466
|
-
|
|
473
|
+
grid-template-rows: 0fr;
|
|
474
|
+
}
|
|
475
|
+
.sh-ui-sidebar__collapsible-content-inner {
|
|
476
|
+
min-height: 0;
|
|
477
|
+
overflow: hidden;
|
|
467
478
|
}
|
|
468
479
|
|
|
469
480
|
/* ───── Flyout (collapsed=icon 상태의 서브메뉴) ─────
|
|
@@ -493,7 +504,8 @@
|
|
|
493
504
|
.sh-ui-sidebar__menu-button,
|
|
494
505
|
.sh-ui-sidebar__menu-sub-button,
|
|
495
506
|
.sh-ui-sidebar__panel-close,
|
|
496
|
-
.sh-ui-sidebar__chevron
|
|
507
|
+
.sh-ui-sidebar__chevron,
|
|
508
|
+
.sh-ui-sidebar__collapsible-content {
|
|
497
509
|
transition: none;
|
|
498
510
|
}
|
|
499
511
|
.sh-ui-sidebar__panel {
|