@highpixel-co/palda-design-system 0.5.0 → 0.8.0

package/dist/guide/docs/FIGMA_NAME_MAPPING.md

@@ -6,13 +6,13 @@
 쓸 때 이 표로 옮기고, Figma 쪽을 정리할 때도 이 표를 목표로 삼는다.
 
 값이 다른 항목은 이 문서가 아니라 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 있다.
-여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md)이다.
+여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0001-design-system-ssot.md)이다.
 
 ## CSS 변수 접두사
 
 코드의 CSS 변수는 Figma가 선언한 `cssVar`에 `palda-` 접두사를 붙인 것이다
 (`--radius-md` ↔ `--palda-radius-md`). 무접두사 이름이 소비 앱의 전역 변수와 충돌해서다
-([`decisions/0017`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0017-css-variable-prefix.md)). Figma에서 변수 이름을 검색해
+([`decisions/0017`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0017-css-variable-prefix.md)). Figma에서 변수 이름을 검색해
 코드로 올 때는 접두사만 붙이면 되고, 그 외 규칙은 아래 표와 같다. 이 문서에서 패밀리를
 뭉뚱그려 부를 때는 `--layout-*`처럼 접두사 없이 쓰고, 코드에 실재하는 변수를 가리킬 때는
 `--palda-layout-inset`처럼 전체 이름을 쓴다.
@@ -74,11 +74,11 @@ Figma의 `regular`는 관례상 400이므로 500에 붙으면 다른 곳에서
 | `depth100` | `shadow/100` |
 
 단계 번호는 그대로 두고 접두어만 코드 컨벤션에 맞춘다. 근거는
-[`decisions/0009`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0009-elevation-shadow-tokens.md)에 있다.
+[`decisions/0009`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0009-elevation-shadow-tokens.md)에 있다.
 
 ## 이 표에 없는 것
 
 레이아웃 여백·치수 토큰(`--layout-*` 패밀리와 `--palda-space-gap-xl` 등)은 Figma에 대응하는 변수가 없다. Figma
 실측값을 코드에서 처음 토큰화한 것이라 매핑할 짝이 없다.
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
 [`LAYOUT.md`](LAYOUT.md)를 본다.

package/dist/guide/docs/FIGMA_WORKFLOW.md

@@ -2,19 +2,19 @@
 
 **Figma에서 정한 것을 저장소에 반영하고, 시안 코드를 읽어 구현으로 옮기는 절차다.**
 
-**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)).
+**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0016-asset-ssot-boundary.md)).
 그래서 이 문서의 절차는 한 방향이다 — Figma에서 정한 것을 저장소에 **반영해야** 끝나고, 반영되기
 전까지는 확정이 아니다. 값이 어긋나면 코드가 옳고, Figma가 바뀌어야 할 목록은
 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 낸다.
 
-1. `figma/LIBRARY_LINKS.md`에서 디자인 시스템 파일의 placeholder 이름을 확인한다. 실제 URL은 저장소가 아니라 각자의 `figma.local.config.json`에 있다([`decisions/0026`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0026-figma-keys-stay-out-of-the-repository.md)).
+1. `figma/LIBRARY_LINKS.md`에서 디자인 시스템 파일의 placeholder 이름을 확인한다. 실제 URL은 저장소가 아니라 각자의 `figma.local.config.json`에 있다([`decisions/0026`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0026-figma-keys-stay-out-of-the-repository.md)).
 2. Variables는 `tokens/`와 같은 이름과 의미를 사용한다. 이름이 다른 자리는
    [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있고, 정답은 `tokens/` 쪽 이름이다.
 3. 반복 요소는 Component와 Variant로 만든다.
 4. Auto Layout과 semantic layer name을 사용한다.
 5. Figma에서 정한 변경은 저장소의 원본(`tokens/`·`icons/svg/`·`components/src/`·`catalog/`)에
    반영해야 확정된다. 값을 옮기더라도 "Figma가 옳으니 따른다"가 아니라 저장소에서 다시 정한
-   것으로 기록한다 — 전례는 [`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)다.
+   것으로 기록한다 — 전례는 [`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)다.
 6. Library publish 전에 Storybook의 실제 브라우저 결과를 확인한다. 승인은 Figma가 아니라
    Storybook과 `contact-sheet`에서 난다.
 

package/dist/guide/docs/ICON_POLICY.md

@@ -24,7 +24,7 @@
 ([`TOKEN_POLICY.md`](TOKEN_POLICY.md)). 아이콘의 모양과 뜻은 `contact-sheet` 승인으로 확정된다.
 
 **아이콘의 원본은 `icons/svg/`다.** Figma는 미러이고, 어긋나면 SVG가 옳다
-([`0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)). `catalog/icons.yml`의 `figma`가 아직 전부
+([`0016`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0016-asset-ssot-boundary.md)). `catalog/icons.yml`의 `figma`가 아직 전부
 `TODO`인 것은 미러가 안 만들어졌다는 뜻이지, 저장소가 앞서 있다는 신호가 아니다.
 
 자리에 맞는 아이콘을 찾을 때는 셋 중 하나를 고른다. 가운데를 비워 두면 애매한 것이 전부
@@ -60,7 +60,7 @@
 이름과 뜻이 확정된 뒤에 그린다. 그리고 나서도 `icons/svg/`에 바로 넣지 않고, **HTML로 기존
 아이콘 옆에 놓아 보여주고 확정받는다** ([`COMPONENT_POLICY.md`](COMPONENT_POLICY.md) §시안은
 HTML로 먼저 확정한다). 그림을 먼저 그리면 무엇을 그렸는지가 무슨 뜻인지를 정해 버린다.
-[`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
+[`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
 아이콘에 적용한 것이다.
 
 ### 새 아이콘이 들어왔을 때
@@ -76,7 +76,7 @@ HTML로 먼저 확정한다). 그림을 먼저 그리면 무엇을 그렸는지
 ## 출처
 
 **아이콘마다 어디서 왔는지를 manifest에 적는다.** 세트마다 라이선스가 다르고, 들어온 때에
-안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
+안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
 
 ```json
 "copy": {

package/dist/guide/docs/LAYOUT.md

@@ -4,7 +4,7 @@
 
 컴포넌트 안쪽을 재는 `--space-*`와 다른 스케일이고, 섞어 쓰지
 않는다. 계층을 나눈 이유는
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
 
 값은 Figma 3화면에서 같은 값이 반복되는 것을 확인한 실측이다. 지어낸 값이 없다. 실측이 아니라
 고른 값은 그 자리에 그렇게 적는다 — 지금은 §카드 그리드의 3열 하나다.
@@ -13,7 +13,7 @@
 
 **모든 화면이 이 구조를 따른다. 화면별로 재정의하지 않는다.** 기준 화면은 Figma PALDA node
 `586-10288`이고, 수치와 값은 코드 토큰이 SSOT다. 근거는
-[`decisions/0012`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0012-canonical-app-shell.md)에 있다.
+[`decisions/0012`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0012-canonical-app-shell.md)에 있다.
 
 **사이드바(전체 높이) + 콘텐츠.** 사이드바 위를 덮는 전역 상단 바는 없다. 페이지 제목은
 상단 바가 아니라 **바디 안**에 둔다. 스펙 확인용 토글 같은 Figma 전용 장치는 제품 UI로 만들지
@@ -30,16 +30,16 @@
 **2단이 `(선택)`인 조건은 하나다 — 화면 전역을 켜고 끄는 것이 있을 때만 깔린다.** 없으면 깔지
 않는다. 다른 기능의 요약이나 입구(곁)는 이 바를 켜는 이유가 되지 못하고, 이미 깔린 바의 배치를
 바꾸지도 못한다 — `band--inset`은 `space-between`이라 자리가 양끝 둘뿐이고 전역 토글이 그 둘을
-쓴다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0022-screens-declare-their-body.md)에 있다.
+쓴다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0022-screens-declare-their-body.md)에 있다.
 
 바디 상단 여백은 `space-8`(32)이고 **바디의 직계 자식 사이는 `space-gap-xl`(24)**이다. 자식은
-섹션이 아니라 블록이라 24다 — 근거는 [`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0021-body-children-are-blocks.md)에
+섹션이 아니라 블록이라 24다 — 근거는 [`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0021-body-children-are-blocks.md)에
 있다. `AppShell`이 이 세 단을 `topRow` · `statusBar` · `children` 슬롯으로 갖고 있다.
 
 ### 배경 위계
 
 **읽는 면이 가장 밝다.** 페이지 캔버스가 흰색이고, 틀과 조작하는 것이 회색으로 물러난다. 근거는
-[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0013-surface-base-is-white.md)에 있다.
+[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0013-surface-base-is-white.md)에 있다.
 
 | 자리                                 | 배경             | 색        |
 | ------------------------------------ | ---------------- | --------- |
@@ -54,10 +54,16 @@
 
 **채운 면의 회색은 한 종류다.** 앞으로 끌어낸 카드와 요약 행이 같은 `surface/raised`이고, 둘은
 색이 아니라 층으로 갈린다 — 여백과 라운드가 다르다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 `surface/sunken`은 화면 배경에서 빠지고 컨트롤 안쪽(스위치 트랙·`ProgressBar` 트랙·프리뷰 바닥)에만
 남는다.
 
+**예외 하나 — 면 위의 컨트롤은 한 단계 밝아진다.** 위 규칙("조작하는 것이 회색으로 물러난다")은
+흰 캔버스 위에서의 이야기다. `FormSection`의 `tone="filled"`처럼 회색 면 안에 들어가면 입력이 같은
+`surface/raised`끼리 겹쳐 채움이 사라지므로, 면 안에서는 입력이 `surface/base`로 올라간다. 면이 한
+종류뿐이라 생기는 충돌이고, 근거는 [`decisions/0037`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0037-stacked-sections-fill-their-content.md)에
+있다. 지금 이 손잡이를 가진 것은 `TextField`뿐이다.
+
 **카드도 기본은 흰색이다.** 회색 면이 여러 장 반복되면 전부 똑같이 무거워져 어느 것도 앞에
 서지 못한다. 강조는 한 화면에서 하나를 `Card`의 `tone="filled"`로 올려서 낸다. 조건은
 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §쓰는 경우에 있다.
@@ -73,7 +79,7 @@
 
 배경은 밴드가 아니라 바깥 단이 깔기 때문에 **화면 끝까지 간다(풀블리드).** 열에 폭을 걸면 넓은
 화면에서 상태 바 틴트와 하단 바가 중간에서 끊긴다. 근거는
-[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0014-full-bleed-bands.md)에 있다.
+[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0014-full-bleed-bands.md)에 있다.
 
 좌우 여백도 밴드가 갖는다 — 상단 행·상태 바·하단 바는 `--palda-layout-inset`, 바디는
 `--palda-layout-page-margin`이다. `box-sizing: border-box`라 `1440`에서의 계산은 그대로다.
@@ -107,7 +113,7 @@
 값도 이미 primitive에 있어서다.
 
 `--palda-layout-popup-width`(350px)는 브라우저 확장 팝업의 기존 외곽 폭을 보존한 Draft다. Stable
-폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/reviews/draft-tokens.md)가
+폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/reviews/draft-tokens.md)가
 정본이다.
 
 ## 기존 토큰으로 덮이는 값
@@ -129,7 +135,7 @@
 primitive로 직접 쓰는 자리이며 대응하는 semantic이 없다.
 
 **다만 이 32는 바디의 직계 자식에는 적용되지 않는다.** 그 자리는 블록이라 24이고, `AppShell`이
-`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
+`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
 
 **그래서 섹션을 바디에 바로 쌓지 않는다.** 섹션이 여럿이면 묶음 하나를 블록으로 세우고, 32는 그
 묶음 안에서 준다 — 바디가 보는 것은 블록 하나이고 24가 그대로 맞는다. 시안 세 장이 전부
@@ -186,11 +192,11 @@ primitive index는 `px / 4`라는 기존 규칙 그대로다(`--palda-space-12`,
 **기본값은 감싸지 않는 것이다.** 섹션은 제목과 여백으로 가르고, 목록은 디바이더로 가른다. 보더와
 카드는 고르거나, 열리거나, 떠 있는 것에만 쓴다. 조건과 pattern별 적용은
 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md), 근거는
-[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0011-no-over-carding.md)에 있다.
+[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0011-no-over-carding.md)에 있다.
 
 ## 좁아질 때
 
-breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0010-breakpoints.md)).
+breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0010-breakpoints.md)).
 위 표의 값은 `1440` 이상에서만 그대로 들어간다.
 
 | 구간           | 본문 좌우                          | 상단바·하단바 좌우            | 사이드바  | 2단 |

package/dist/guide/docs/TOKEN_POLICY.md

@@ -7,7 +7,7 @@
 - 이름은 실제 값이 아니라 역할을 표현한다. 예: `color.action.primary.background`.
 - 컴포넌트 CSS에는 `var(--token)` 참조만 쓴다. 시안에 적힌 리터럴 값(`#54B336`, `36px`)을 그대로 옮기지 않는다.
 - 필요한 token이 없으면 추가하지 말고 먼저 확인받는다. 값을 지어내지 않는다. 과거에 있던 token이라도 복원은 확인 대상이다.
-- **값이 어긋나면 코드가 옳다.** 저장소가 SSOT이고([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md), 자산별 경계는 [`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)), Figma와 다른 자리는 코드를 고치지 않고 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 Figma가 바뀌어야 할 목록으로 적는다. 이름이 어긋나는 자리는 [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있다.
+- **값이 어긋나면 코드가 옳다.** 저장소가 SSOT이고([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0001-design-system-ssot.md), 자산별 경계는 [`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0016-asset-ssot-boundary.md)), Figma와 다른 자리는 코드를 고치지 않고 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 Figma가 바뀌어야 할 목록으로 적는다. 이름이 어긋나는 자리는 [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있다.
 - 저장소의 token 값은 확정치로 취급한다. 명도 대비 미달처럼 품질 문제를 발견하면 보고하되, 컴포넌트에서 다른 색으로 바꾸거나 값 변경을 반복해서 제안하지 않는다.
 - 보더 두께는 예외다. 시스템 전체가 항상 `1px`이며 token으로 만들지 않고 CSS에 직접 쓴다.
 - `tokens/generated/`는 직접 수정하지 않는다. `tokens/*.tokens.json`을 고치고 `pnpm tokens:build`로 다시 만든 뒤, 소스와 생성 파일을 함께 커밋한다. 생성 파일이 빠지면 `pnpm check:generated`가 실패한다.
@@ -163,19 +163,28 @@ focus에서 `border/focus`로 구분한다.
 개별 `font-*` 속성을 컴포넌트 CSS에서 조립하지 않는다. 이유는
 [`COMPONENT_POLICY.md`](COMPONENT_POLICY.md)에 있다.
 
-| 계층       | 크기 | 언제                    | 쓰는 곳                                                     |
-| ---------- | ---- | ----------------------- | ----------------------------------------------------------- |
-| `display`  | 32px | 쓰지 않는다             | **없음 — 폐기 후보**                                        |
-| `headline` | 24px | 페이지 제목             | 화면의 페이지 헤더 `h1`                                     |
-| `title`    | 20px | 빈 화면 제목            | EmptyState                                                  |
-| `body1`    | 16px | 섹션·카드·모달 제목     | FormSection·Card·Modal 제목                                 |
-| `body2`    | 14px | 기본 컨트롤 라벨과 본문 | Button·Chip·Radio·DropdownButton·TextField·Toast·EmptyState |
-| `label`    | 12px | 작은 라벨, 보조 문구    | Badge(md)·Button(sm)·Chip(sm)·TextField 하단·Tooltip        |
-| `caption`  | 10px | 초소형 캡션             | Badge(sm)                                                   |
+| 계층       | 크기 | 언제                                     | 쓰는 곳                                                     |
+| ---------- | ---- | ---------------------------------------- | ----------------------------------------------------------- |
+| `display`  | 32px | 쓰지 않는다                              | **없음 — 폐기 후보**                                        |
+| `headline` | 24px | 페이지 제목                              | 화면의 페이지 헤더 `h1`                                     |
+| `title`    | 20px | 빈 화면 제목                             | EmptyState                                                  |
+| `body1`    | 16px | 섹션·카드·모달 제목, 본문 목록의 행 제목 | FormSection·Card·Modal 제목·ListRow(`strong`)               |
+| `body2`    | 14px | 기본 컨트롤 라벨과 본문                  | Button·Chip·Radio·DropdownButton·TextField·Toast·EmptyState |
+| `label`    | 12px | 작은 라벨, 보조 문구                     | Badge(md)·Button(sm)·Chip(sm)·TextField 하단·Tooltip        |
+| `caption`  | 10px | 초소형 캡션                              | Badge(sm)                                                   |
 
 **한 화면의 제목 위계는 셋이다** — 페이지 `headline`(24) → 섹션·카드 `body1`(16) → 행
 `body2`(14). 그 아래 보조 문구가 `label`(12)이다. 코드가 이미 이 값을 갖고 있어(`FormSection`·
-`Card`·`ListRow`) 화면이 다시 고르는 것은 페이지 제목 하나뿐이다.
+`Card`·`ListRow`) 화면이 다시 고르는 것은 페이지 제목과 **본문 목록 여부** 둘이다.
+
+**행은 두 칸이고 그 목록이 화면의 본문인지가 고른다**
+([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0034-the-body-list-lifts-one-step.md)). 곁·요약·참조 나열은 제목
+`body2`(14) + 설명 `label`(12) 그대로이고, 선언서의 본문 문장이 가리키는 목록만 한 칸씩 올라가
+제목 `body1`(16) + 설명 `body2`(14)가 된다. `ListRow`의 `emphasis`가 그것이고 기본값은 올리지
+않는 쪽이다. **한 화면에 올린 목록은 하나다.**
+
+**제목과 설명은 같이 움직인다.** 제목만 올리면 16 → 12로 두 칸을 건너뛰어 설명이 각주처럼
+떨어진다.
 
 **페이지 제목은 `headline`(24)이다.** 섹션 제목이 `body1`(16)이라 32는 두 칸을 건너뛰고, 화면에서
 실제로 무겁게 읽힌다. 시안이 `display`(32)와 `title`(20)로 갈려 있던 것을 2026-09-02에 이렇게
@@ -193,10 +202,12 @@ focus에서 `border/focus`로 구분한다.
 따른다. 누를 수 있는 컨트롤이라고 `semibold`가 되지는 않는다. Button은 `semibold`지만 Chip(md)과
 DropdownButton은 `medium`이다.
 
-크기를 키워서 강조를 만들지 않는다. 강조는 계층과 무게로 만든다.
+크기를 키워서 강조를 만들지 않는다. **임의의 px을 얹지 않는다**는 뜻이다. 고르는 것은 언제나
+계층이고, 계층을 고르는 근거는 그것이 놓인 층이다 — `ListRow`의 `emphasis`가 px이 아니라 값
+둘을 받는 것이 그래서다 (`decisions/0034`).
 
 읽는 문장에 `label`(12px)을 쓰지 않는다. `label`은 `sm` 컨트롤 라벨과 하단 보조 문구처럼 짧은
-조각의 자리다.
+조각의 자리다. 본문 목록의 행 설명이 `body2`로 올라가는 이유도 이것이다.
 
 ## 간격
 
@@ -216,11 +227,11 @@ DropdownButton은 `medium`이다.
 
 컨트롤은 `sm`, 컨테이너는 `md`, 큰 면은 `lg`가 기준이다. **목록의 행은 컨트롤이 아니라 `md`다** —
 행은 눌리는 컨트롤이 아니라 읽는 줄이고, 제목이 `line-height/100`이라 `sm`으로는 디바이더가 글자에
-붙는다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0019-list-row-vertical-inset.md)).
+붙는다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0019-list-row-vertical-inset.md)).
 
 **페이지를 조립하는 여백과 폭은 이 스케일이 아니라 `--layout-*`이다.** 컴포넌트 안쪽을 재는
 `--space-*`와 이름 공간이 갈라져 있다. 고르는 규칙은 [`LAYOUT.md`](LAYOUT.md), 근거는
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
 `gap/xl`이 layout이 아니라 여기 있는 것은 성격이 "요소 사이"로 같고 값도 이미 primitive에 있어서다.
 
 primitive를 직접 쓰는 자리가 둘 있다. focus 링의 `outline-offset`은 `space/1`을 쓴다. 안쪽도
@@ -248,7 +259,7 @@ primitive를 직접 쓰는 자리가 둘 있다. focus 링의 `outline-offset`
 
 `pnpm check:css`가 막는 것은 정의되지 않은 token 참조, `1px`이 아닌 보더·아웃라인 두께,
 `:focus-visible` 대신 쓴 `:focus` 셋이다. 위 표의 선택 규칙 자체는 검사하지 않으므로 사람과
-에이전트가 지킨다. 같은 실수가 반복되면 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md) §항상의 "반복되는 오류는
+에이전트가 지킨다. 같은 실수가 반복되면 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/AGENTS.md) §항상의 "반복되는 오류는
 검사로 승격한다"에 따라 검사로 올린다.
 
 시안에 없는 값은 임의로 정하지 않고 확인받는다. 위 표에서 아직 쓰는 곳이 없다고 적힌 항목은

package/dist/harness/check.mjs

@@ -1,8 +1,8 @@
 import { existsSync, lstatSync, readFileSync, readdirSync } from 'node:fs';
-import { dirname, isAbsolute, join, relative, resolve } from 'node:path';
+import { basename, dirname, isAbsolute, join, relative, resolve } from 'node:path';
 import yaml from 'js-yaml';
 import ts from 'typescript';
-import { validateScreenHtml } from '../scripts/check-examples.mjs';
+import { siblingIndex, validateScreenHtml } from '../scripts/check-examples.mjs';
 
 const PACKAGE = '@highpixel-co/palda-design-system';
 const EXCEPTION_RULES = ['primitive-import', 'icon-import', 'opaque-import'];
@@ -316,15 +316,21 @@ export function checkScreens(projectRoot, config) {
   const root = resolve(projectRoot);
   validateConfig(root, config);
   const scan = collect(root, config.screens ?? ['preview'], (name) => name.endsWith('.html'));
-  const problems = scan.files.flatMap((fullPath) => {
-    const file = normalize(relative(root, fullPath));
-    return validateScreenHtml(readFileSync(fullPath, 'utf8'), file, true).map((message) => ({
+  // 자매 대조는 짝이 필요해서 전부 읽어 색인을 만든 뒤에 검사한다.
+  const screens = scan.files.map((fullPath) => ({
+    name: basename(fullPath, '.html'),
+    source: readFileSync(fullPath, 'utf8'),
+    file: normalize(relative(root, fullPath)),
+  }));
+  const siblings = siblingIndex(screens);
+  const problems = screens.flatMap(({ source, file }) =>
+    validateScreenHtml(source, file, true, siblings).map((message) => ({
       file,
       line: 1,
       rule: 'screen',
       symbol: '',
       message,
-    }));
-  });
+    })),
+  );
   return { files: scan.files.length, excluded: scan.excluded, exceptions: 0, drafts: [], problems };
 }

package/dist/harness/metadata.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.5.0",
-  "sourceRevision": "0504d8eaa033955d7a70414616ee999e447a0ced",
+  "packageVersion": "0.8.0",
+  "sourceRevision": "abee826d0afda16bd3776f015931e0a820a8876e",
   "exports": {
     ".": {
       "values": [
@@ -73,6 +73,7 @@
         "SearchIcon",
         "SendIcon",
         "ShieldCheckIcon",
+        "Skeleton",
         "SlidersIcon",
         "SmartphoneIcon",
         "SparklesIcon",
@@ -82,6 +83,7 @@
         "Switch",
         "Tab",
         "TextField",
+        "Thumbnail",
         "ThumbsUpIcon",
         "TimerIcon",
         "Toaster",
@@ -123,20 +125,28 @@
         "LinkProps",
         "LinkSize",
         "LinkVariant",
+        "ListRowEmphasis",
         "ListRowProps",
         "LivePreviewProps",
         "LivePreviewStatus",
         "ModalActionsProps",
         "ModalProps",
         "NavigationButtonProps",
+        "NavigationButtonSize",
         "ProgressBarProps",
         "RadioProps",
+        "SkeletonProps",
+        "SkeletonShape",
+        "SkeletonText",
+        "SkeletonWidth",
         "SwitchProps",
         "SwitchSize",
         "TabProps",
         "TextFieldProps",
         "TextFieldSize",
         "TextFieldVariant",
+        "ThumbnailProps",
+        "ThumbnailSize",
         "ToastOptions",
         "ToastVariant",
         "ToasterPlacement",
@@ -160,9 +170,11 @@
         "NavigationButton",
         "ProgressBar",
         "Radio",
+        "Skeleton",
         "Switch",
         "Tab",
         "TextField",
+        "Thumbnail",
         "Toaster",
         "Tooltip",
         "toast"
@@ -193,14 +205,21 @@
         "ModalActionsProps",
         "ModalProps",
         "NavigationButtonProps",
+        "NavigationButtonSize",
         "ProgressBarProps",
         "RadioProps",
+        "SkeletonProps",
+        "SkeletonShape",
+        "SkeletonText",
+        "SkeletonWidth",
         "SwitchProps",
         "SwitchSize",
         "TabProps",
         "TextFieldProps",
         "TextFieldSize",
         "TextFieldVariant",
+        "ThumbnailProps",
+        "ThumbnailSize",
         "ToastOptions",
         "ToastVariant",
         "ToasterPlacement",
@@ -293,6 +312,7 @@
         "CardTone",
         "EmptyStateProps",
         "FormSectionProps",
+        "ListRowEmphasis",
         "ListRowProps",
         "LivePreviewProps",
         "LivePreviewStatus"
@@ -587,6 +607,14 @@
         "Radio"
       ]
     },
+    {
+      "key": "skeleton",
+      "kind": "ui",
+      "status": "draft",
+      "exports": [
+        "Skeleton"
+      ]
+    },
     {
       "key": "switch",
       "kind": "ui",
@@ -611,6 +639,14 @@
         "TextField"
       ]
     },
+    {
+      "key": "thumbnail",
+      "kind": "ui",
+      "status": "draft",
+      "exports": [
+        "Thumbnail"
+      ]
+    },
     {
       "key": "toast",
       "kind": "ui",

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { AlarmIcon, AlertIcon, ArrowLeftIcon, ArrowRightIcon, BlankIcon, CableIcon, CameraIcon, CardIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, DashboardIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FilterIcon, GiftIcon, HelpIcon, HistoryIcon, HomeIcon, ImageIcon, InfoIcon, KeyIcon, LightbulbIcon, LinkIcon, LoadingIcon, LockIcon, LogoutIcon, MenuIcon, MessageIcon, MonitorIcon, MoreVerticalIcon, MousePointerClickIcon, PauseIcon, PencilIcon, PersonIcon, PhoneIcon, PlusIcon, ProductIcon, RefreshIcon, ReportIcon, SearchIcon, SendIcon, ShieldCheckIcon, SlidersIcon, SmartphoneIcon, SparklesIcon, StarIcon, StoreIcon, SuccessIcon, ThumbsUpIcon, TimerIcon, TrashIcon, TrendingUpIcon, TruckIcon, TypeIcon, UnplugIcon, UploadIcon } from './icons.js';
-export { AppShell, AppShellProps, BottomBar, BottomBarProps, Card, CardProps, CardTone, EmptyState, EmptyStateProps, FormSection, FormSectionProps, ListRow, ListRowProps, LivePreview, LivePreviewProps, LivePreviewStatus } from './patterns.js';
-export { Alert, AlertProps, AlertVariant, Badge, BadgeProps, BadgeSize, BadgeVariant, Button, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxProps, Chip, ChipProps, ChipSize, ChipVariant, DropdownButton, DropdownButtonAlign, DropdownButtonItem, DropdownButtonProps, DropdownButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, Link, LinkProps, LinkSize, LinkVariant, Modal, ModalActions, ModalActionsProps, ModalProps, NavigationButton, NavigationButtonProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Switch, SwitchProps, SwitchSize, Tab, TabProps, TextField, TextFieldProps, TextFieldSize, TextFieldVariant, ToastOptions, ToastVariant, Toaster, ToasterPlacement, ToasterProps, Tooltip, TooltipPlacement, TooltipProps, toast } from './ui.js';
+export { AppShell, AppShellProps, BottomBar, BottomBarProps, Card, CardProps, CardTone, EmptyState, EmptyStateProps, FormSection, FormSectionProps, ListRow, ListRowEmphasis, ListRowProps, LivePreview, LivePreviewProps, LivePreviewStatus } from './patterns.js';
+export { Alert, AlertProps, AlertVariant, Badge, BadgeProps, BadgeSize, BadgeVariant, Button, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxProps, Chip, ChipProps, ChipSize, ChipVariant, DropdownButton, DropdownButtonAlign, DropdownButtonItem, DropdownButtonProps, DropdownButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, Link, LinkProps, LinkSize, LinkVariant, Modal, ModalActions, ModalActionsProps, ModalProps, NavigationButton, NavigationButtonProps, NavigationButtonSize, ProgressBar, ProgressBarProps, Radio, RadioProps, Skeleton, SkeletonProps, SkeletonShape, SkeletonText, SkeletonWidth, Switch, SwitchProps, SwitchSize, Tab, TabProps, TextField, TextFieldProps, TextFieldSize, TextFieldVariant, Thumbnail, ThumbnailProps, ThumbnailSize, ToastOptions, ToastVariant, Toaster, ToasterPlacement, ToasterProps, Tooltip, TooltipPlacement, TooltipProps, toast } from './ui.js';
 import 'react';

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   FormSection,
   ListRow,
   LivePreview
-} from "./chunk-Q4UXASZH.js";
+} from "./chunk-3OXUONDZ.js";
 import "./chunk-EYFL232L.js";
 import {
   Alert,
@@ -23,13 +23,15 @@ import {
   NavigationButton,
   ProgressBar,
   Radio,
+  Skeleton,
   Switch,
   Tab,
   TextField,
+  Thumbnail,
   Toaster,
   Tooltip,
   toast
-} from "./chunk-GPCPGABI.js";
+} from "./chunk-PWAQFOM3.js";
 import {
   AlarmIcon,
   AlertIcon,
@@ -163,6 +165,7 @@ export {
   SearchIcon,
   SendIcon,
   ShieldCheckIcon,
+  Skeleton,
   SlidersIcon,
   SmartphoneIcon,
   SparklesIcon,
@@ -172,6 +175,7 @@ export {
   Switch,
   Tab,
   TextField,
+  Thumbnail,
   ThumbsUpIcon,
   TimerIcon,
   Toaster,

package/dist/patterns.d.ts

@@ -95,6 +95,7 @@ interface EmptyStateProps {
 }
 declare function EmptyState({ actionLabel, description, icon, onAction, title }: EmptyStateProps): react.JSX.Element;
 
+type FormSectionTone = 'plain' | 'filled';
 interface FormSectionProps {
     children: ReactNode;
     description?: ReactNode;
@@ -103,20 +104,40 @@ interface FormSectionProps {
     /** 섹션 아래 액션. 저장·초기화 버튼을 넣는다. */
     footer?: ReactNode;
     title: ReactNode;
+    /**
+     * 섹션 내용의 채움. `Card`·`ListRow`의 `tone`과 같은 축이고 같은 값이다.
+     * - `plain`(기본) — 면이 없다. 제목과 여백만으로 갈린다.
+     * - `filled` — **내용(`children`)만** 옅은 회색 필에 담는다. 제목·설명·오류·footer는 캔버스에
+     *   남는다. 섹션이 여럿 쌓여 제목과 여백만으로 묶음이 안 갈릴 때 쓴다.
+     */
+    tone?: FormSectionTone;
 }
 /**
  * 입력 필드를 제목 아래로 묶는 폼의 한 덩어리다.
  *
  * 필드 사이 간격만 잡고 필드 자체는 그리지 않는다. 라벨과 컨트롤의 간격은 `TextField`가 갖고
  * 있으므로 여기서 다시 주지 않는다.
+ *
+ * `tone="filled"`은 내용만 면에 담고 제목은 캔버스에 남긴다. 제목까지 담으면 곁(0032)과 같은
+ * 모양이 되어 곁이 본문에 흡수되기 때문이다. 갈래 셋의 비교는 `preview/section-fill.html`에 있다.
  */
-declare function FormSection({ children, description, error, footer, title }: FormSectionProps): react.JSX.Element;
+declare function FormSection({ children, description, error, footer, title, tone, }: FormSectionProps): react.JSX.Element;
 
+type ListRowEmphasis = 'default' | 'strong';
 interface ListRowProps {
     /** 누를 수 있는 행 오른쪽 끝의 chevron. `onClick`이 있으면 기본으로 붙는다. */
     chevron?: boolean;
     children?: ReactNode;
     description?: ReactNode;
+    /**
+     * 행이 놓인 층. 크기를 고르는 자리가 아니라 이 목록이 화면의 본문인지를 밝히는 자리다.
+     * - `default`(기본) — 제목 `body2`(14) · 설명 `label`(12). 곁·요약·참조 나열이다.
+     * - `strong` — 제목 `body1`(16) · 설명 `body2`(14). 선언서의 본문 문장이 가리키는 목록
+     *   하나에만 쓴다. 한 화면에 `strong` 목록은 하나다.
+     *
+     * `tone="filled"`와 함께 쓰지 않는다 — 곁이 본문 크기를 갖는 일이다 (0032, 0034).
+     */
+    emphasis?: ListRowEmphasis;
     /** 제목 앞 아이콘이나 썸네일. */
     leading?: ReactNode;
     /** 자리를 잡아 두는 로딩 표시. 켜면 내용 대신 뼈대를 그린다. */
@@ -140,9 +161,12 @@ interface ListRowProps {
  *
  * `onClick`을 주면 누를 수 있는 행이 되어 button으로 그려지고 오른쪽 끝에 chevron이 붙는다.
  *
+ * 이 목록이 화면의 본문이면 `emphasis="strong"`으로 제목·설명을 한 칸씩 올린다 (0034). 곁·요약
+ * 나열은 기본값 그대로 둔다.
+ *
  * 목록 전체가 비었을 때와 실패했을 때는 이 컴포넌트가 아니라 `EmptyState`를 쓴다.
  */
-declare function ListRow({ chevron, children, description, leading, loading, onClick, selected, title, tone, trailing, }: ListRowProps): react.JSX.Element;
+declare function ListRow({ chevron, children, description, emphasis, leading, loading, onClick, selected, title, tone, trailing, }: ListRowProps): react.JSX.Element;
 
 type LivePreviewStatus = 'ready' | 'loading' | 'empty' | 'error';
 interface LivePreviewProps {
@@ -159,4 +183,4 @@ interface LivePreviewProps {
  */
 declare function LivePreview({ children, message, status, title }: LivePreviewProps): react.JSX.Element;
 
-export { AppShell, type AppShellProps, BottomBar, type BottomBarProps, Card, type CardProps, type CardTone, EmptyState, type EmptyStateProps, FormSection, type FormSectionProps, ListRow, type ListRowProps, LivePreview, type LivePreviewProps, type LivePreviewStatus };
+export { AppShell, type AppShellProps, BottomBar, type BottomBarProps, Card, type CardProps, type CardTone, EmptyState, type EmptyStateProps, FormSection, type FormSectionProps, ListRow, type ListRowEmphasis, type ListRowProps, LivePreview, type LivePreviewProps, type LivePreviewStatus };

package/dist/patterns.js

@@ -6,8 +6,8 @@ import {
   FormSection,
   ListRow,
   LivePreview
-} from "./chunk-Q4UXASZH.js";
-import "./chunk-GPCPGABI.js";
+} from "./chunk-3OXUONDZ.js";
+import "./chunk-PWAQFOM3.js";
 import "./chunk-TWYJ2UTC.js";
 export {
   AppShell,