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

package/dist/{chunk-Q4UXASZH.js → chunk-3OXUONDZ.js}

@@ -1,6 +1,7 @@
 import {
-  Button
-} from "./chunk-GPCPGABI.js";
+  Button,
+  Skeleton
+} from "./chunk-PWAQFOM3.js";
 import {
   ChevronRightIcon
 } from "./chunk-TWYJ2UTC.js";
@@ -91,8 +92,15 @@ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var TITLE_TYPOGRAPHY_CLASS3 = "palda-text-body1-regular-semibold";
 var DESCRIPTION_TYPOGRAPHY_CLASS3 = "palda-text-body2-reading-medium";
 var ERROR_TYPOGRAPHY_CLASS = "palda-text-label-reading-medium";
-function FormSection({ children, description, error, footer, title }) {
-  return /* @__PURE__ */ jsxs5("section", { className: "palda-form-section", children: [
+function FormSection({
+  children,
+  description,
+  error,
+  footer,
+  title,
+  tone = "plain"
+}) {
+  return /* @__PURE__ */ jsxs5("section", { className: `palda-form-section palda-form-section--${tone}`, children: [
     /* @__PURE__ */ jsxs5("header", { className: "palda-form-section__header", children: [
       /* @__PURE__ */ jsx5("h2", { className: TITLE_TYPOGRAPHY_CLASS3, children: title }),
       description ? /* @__PURE__ */ jsx5("p", { className: DESCRIPTION_TYPOGRAPHY_CLASS3, children: description }) : null
@@ -105,12 +113,27 @@ function FormSection({ children, description, error, footer, title }) {
 
 // ../../patterns/src/ListRow/ListRow.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var TITLE_TYPOGRAPHY_CLASS4 = "palda-text-body2-regular-semibold";
-var DESCRIPTION_TYPOGRAPHY_CLASS4 = "palda-text-label-reading-medium";
+var TITLE_TYPOGRAPHY_CLASS4 = {
+  default: "palda-text-body2-regular-semibold",
+  strong: "palda-text-body1-regular-semibold"
+};
+var DESCRIPTION_TYPOGRAPHY_CLASS4 = {
+  default: "palda-text-label-reading-medium",
+  strong: "palda-text-body2-reading-medium"
+};
+var SKELETON_TITLE_TEXT = {
+  default: "body2",
+  strong: "body1"
+};
+var SKELETON_DESCRIPTION_TEXT = {
+  default: "label",
+  strong: "body2"
+};
 function ListRow({
   chevron,
   children,
   description,
+  emphasis = "default",
   leading,
   loading = false,
   onClick,
@@ -122,21 +145,22 @@ function ListRow({
   const classes = [
     "palda-list-row",
     `palda-list-row--${tone}`,
+    `palda-list-row--${emphasis}`,
     selected ? "palda-list-row--selected" : "",
     loading ? "palda-list-row--loading" : ""
   ].filter(Boolean).join(" ");
   if (loading) {
     return /* @__PURE__ */ jsxs6("div", { "aria-hidden": "true", className: classes, children: [
-      /* @__PURE__ */ jsx6("span", { className: "palda-list-row__skeleton palda-list-row__skeleton--title" }),
-      /* @__PURE__ */ jsx6("span", { className: "palda-list-row__skeleton palda-list-row__skeleton--description" })
+      /* @__PURE__ */ jsx6(Skeleton, { text: SKELETON_TITLE_TEXT[emphasis], width: "narrow" }),
+      /* @__PURE__ */ jsx6(Skeleton, { text: SKELETON_DESCRIPTION_TEXT[emphasis], width: "wide" })
     ] });
   }
   const showChevron = chevron ?? Boolean(onClick);
   const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     leading ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-list-row__leading", children: leading }) : null,
     /* @__PURE__ */ jsxs6("span", { className: "palda-list-row__copy", children: [
-      /* @__PURE__ */ jsx6("span", { className: TITLE_TYPOGRAPHY_CLASS4, children: title }),
-      description ? /* @__PURE__ */ jsx6("span", { className: `palda-list-row__description ${DESCRIPTION_TYPOGRAPHY_CLASS4}`, children: description }) : null,
+      /* @__PURE__ */ jsx6("span", { className: TITLE_TYPOGRAPHY_CLASS4[emphasis], children: title }),
+      description ? /* @__PURE__ */ jsx6("span", { className: `palda-list-row__description ${DESCRIPTION_TYPOGRAPHY_CLASS4[emphasis]}`, children: description }) : null,
       children
     ] }),
     trailing ? /* @__PURE__ */ jsx6("span", { className: "palda-list-row__trailing", children: trailing }) : null,

package/dist/{chunk-GPCPGABI.js → chunk-PWAQFOM3.js}

@@ -485,31 +485,57 @@ function Modal({
 }
 
 // ../../components/src/NavigationButton/NavigationButton.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function NavigationButton({
-  children,
-  className = "",
-  icon,
-  selected = false,
-  ...props
-}) {
-  const classes = [
+import { Fragment, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS6 = {
+  md: "palda-text-body2-regular-semibold",
+  sm: "palda-text-body2-regular-medium"
+};
+function classesFor(size, selected, className) {
+  return [
     "palda-navigation-button",
+    `palda-navigation-button--${size}`,
     selected ? "palda-navigation-button--selected" : "",
-    "palda-text-body2-regular-semibold",
+    TYPOGRAPHY_CLASS6[size],
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs9(
+}
+function contentFor(icon, children) {
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "palda-navigation-button__icon", children: icon }) : null,
+    /* @__PURE__ */ jsx10("span", { className: "palda-navigation-button__label", children })
+  ] });
+}
+function NavigationButton(props) {
+  if (props.href !== void 0) {
+    const {
+      children: children2,
+      className: className2 = "",
+      href,
+      icon: icon2,
+      selected: selected2 = false,
+      size: size2 = "md",
+      ...anchorProps
+    } = props;
+    return /* @__PURE__ */ jsx10(
+      "a",
+      {
+        ...anchorProps,
+        "aria-current": selected2 ? "page" : void 0,
+        className: classesFor(size2, selected2, className2),
+        href,
+        children: contentFor(icon2, children2)
+      }
+    );
+  }
+  const { children, className = "", icon, selected = false, size = "md", ...buttonProps } = props;
+  return /* @__PURE__ */ jsx10(
     "button",
     {
-      ...props,
+      ...buttonProps,
       "aria-current": selected ? "page" : void 0,
-      className: classes,
+      className: classesFor(size, selected, className),
       type: "button",
-      children: [
-        icon ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "palda-navigation-button__icon", children: icon }) : null,
-        /* @__PURE__ */ jsx10("span", { className: "palda-navigation-button__label", children })
-      ]
+      children: contentFor(icon, children)
     }
   );
 }
@@ -546,8 +572,27 @@ function Radio({ children, className = "", disabled, ...props }) {
   ] });
 }
 
+// ../../components/src/Skeleton/Skeleton.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Skeleton({
+  className = "",
+  shape = "text",
+  text = "body2",
+  width = "full",
+  ...props
+}) {
+  const classes = [
+    "palda-skeleton",
+    `palda-skeleton--${shape}`,
+    shape === "text" ? `palda-skeleton--${text}` : "",
+    shape === "text" ? `palda-skeleton--${width}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx13("span", { ...props, "aria-hidden": "true", className: classes });
+}
+
 // ../../components/src/Switch/Switch.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function Switch({ className = "", disabled, size = "md", ...props }) {
   const classes = [
     "palda-switch",
@@ -556,7 +601,7 @@ function Switch({ className = "", disabled, size = "md", ...props }) {
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs11("label", { className: classes, children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         ...props,
@@ -566,13 +611,20 @@ function Switch({ className = "", disabled, size = "md", ...props }) {
         type: "checkbox"
       }
     ),
-    /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "palda-switch__track", children: /* @__PURE__ */ jsx13("span", { className: "palda-switch__knob" }) })
+    /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "palda-switch__track", children: /* @__PURE__ */ jsx14("span", { className: "palda-switch__knob" }) })
   ] });
 }
 
 // ../../components/src/Tab/Tab.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function Tab({ children, className = "", icon, selected = false, ...props }) {
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Tab({
+  children,
+  className = "",
+  icon,
+  badge,
+  selected = false,
+  ...props
+}) {
   const classes = [
     "palda-tab",
     selected ? "palda-tab--selected" : "",
@@ -580,14 +632,15 @@ function Tab({ children, className = "", icon, selected = false, ...props }) {
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs12("button", { ...props, "aria-selected": selected, className: classes, role: "tab", type: "button", children: [
-    icon ? /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "palda-tab__icon", children: icon }) : null,
-    /* @__PURE__ */ jsx14("span", { className: "palda-tab__label", children })
+    icon ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "palda-tab__icon", children: icon }) : null,
+    /* @__PURE__ */ jsx15("span", { className: "palda-tab__label", children }),
+    badge ? /* @__PURE__ */ jsx15("span", { className: "palda-tab__badge", children: badge }) : null
   ] });
 }
 
 // ../../components/src/TextField/TextField.tsx
 import { useId as useId3, useState as useState2 } from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var LABEL_TYPOGRAPHY_CLASS3 = "palda-text-body2-regular-semibold";
 var FOOTER_TYPOGRAPHY_CLASS = "palda-text-label-regular-semibold";
 var CONTROL_TYPOGRAPHY_CLASS = {
@@ -649,17 +702,17 @@ function TextField({
   return /* @__PURE__ */ jsxs13("div", { className: classes, children: [
     label === void 0 || label === null || label === "" ? null : /* @__PURE__ */ jsxs13("label", { className: `palda-text-field__label ${LABEL_TYPOGRAPHY_CLASS3}`, htmlFor: controlId, children: [
       label,
-      required ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "palda-text-field__required", children: "*" }) : null
+      required ? /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "palda-text-field__required", children: "*" }) : null
     ] }),
     /* @__PURE__ */ jsxs13("div", { className: "palda-text-field__field", children: [
       size === "md" ? (
         // input과 textarea는 같은 prop을 받지만 이벤트 타입만 다르다.
-        /* @__PURE__ */ jsx15("textarea", { ...controlProps })
-      ) : /* @__PURE__ */ jsx15("input", { ...controlProps }),
-      icon ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "palda-text-field__icon", children: icon }) : null
+        /* @__PURE__ */ jsx16("textarea", { ...controlProps })
+      ) : /* @__PURE__ */ jsx16("input", { ...controlProps }),
+      icon ? /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "palda-text-field__icon", children: icon }) : null
     ] }),
     description || showCount ? /* @__PURE__ */ jsxs13("div", { className: `palda-text-field__footer ${FOOTER_TYPOGRAPHY_CLASS}`, children: [
-      /* @__PURE__ */ jsx15("span", { className: "palda-text-field__description", id: descriptionId, children: description }),
+      /* @__PURE__ */ jsx16("span", { className: "palda-text-field__description", id: descriptionId, children: description }),
       showCount ? /* @__PURE__ */ jsxs13("span", { className: "palda-text-field__count", id: countId, children: [
         length,
         "/",
@@ -669,6 +722,22 @@ function TextField({
   ] });
 }
 
+// ../../components/src/Thumbnail/Thumbnail.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Thumbnail({
+  alt,
+  className = "",
+  // 상품 목록은 수백 개까지 가므로 기본을 lazy로 둔다. 첫 화면에 보이는 자리는 쓰는 쪽이
+  // `loading="eager"`로 되돌린다.
+  loading = "lazy",
+  size = "md",
+  src,
+  ...props
+}) {
+  const classes = ["palda-thumbnail", `palda-thumbnail--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17("img", { ...props, alt, className: classes, loading, src });
+}
+
 // ../../components/src/Toast/toastStore.ts
 var queue = [];
 var lastId = 0;
@@ -703,8 +772,8 @@ import { useSyncExternalStore } from "react";
 
 // ../../components/src/Toast/Toast.tsx
 import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-var TYPOGRAPHY_CLASS6 = "palda-text-body2-reading-medium";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS7 = "palda-text-body2-reading-medium";
 var DEFAULT_DURATION_MS = 5e3;
 function Toast({
   actionLabel,
@@ -733,7 +802,7 @@ function Toast({
       remainingRef.current = Math.max(remainingRef.current - (Date.now() - startedAt), 0);
     };
   }, [duration, onClose, paused]);
-  const classes = ["palda-toast", `palda-toast--${variant}`, TYPOGRAPHY_CLASS6, className].filter(Boolean).join(" ");
+  const classes = ["palda-toast", `palda-toast--${variant}`, TYPOGRAPHY_CLASS7, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -744,17 +813,17 @@ function Toast({
       onMouseLeave: () => setPaused(false),
       role: variant === "danger" ? "alert" : "status",
       children: [
-        icon ? /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "palda-toast__icon", children: icon }) : null,
-        /* @__PURE__ */ jsx16("span", { className: "palda-toast__content", children }),
-        actionLabel ? /* @__PURE__ */ jsx16("button", { className: "palda-toast__action", onClick: onAction, type: "button", children: actionLabel }) : null,
-        onClose ? /* @__PURE__ */ jsx16(
+        icon ? /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "palda-toast__icon", children: icon }) : null,
+        /* @__PURE__ */ jsx18("span", { className: "palda-toast__content", children }),
+        actionLabel ? /* @__PURE__ */ jsx18("button", { className: "palda-toast__action", onClick: onAction, type: "button", children: actionLabel }) : null,
+        onClose ? /* @__PURE__ */ jsx18(
           "button",
           {
             "aria-label": closeLabel,
             className: "palda-toast__close",
             onClick: onClose,
             type: "button",
-            children: /* @__PURE__ */ jsx16(CloseIcon, {})
+            children: /* @__PURE__ */ jsx18(CloseIcon, {})
           }
         ) : null
       ]
@@ -763,12 +832,12 @@ function Toast({
 }
 
 // ../../components/src/Toast/Toaster.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 import { createElement } from "react";
 function Toaster({ className = "", placement = "bottom-center" }) {
   const toasts = useSyncExternalStore(subscribeToToasts, getToasts, getToasts);
   const classes = ["palda-toaster", `palda-toaster--${placement}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx17("div", { className: classes, children: toasts.map(({ id, message, onAction, ...options }) => /* @__PURE__ */ createElement(
+  return /* @__PURE__ */ jsx19("div", { className: classes, children: toasts.map(({ id, message, onAction, ...options }) => /* @__PURE__ */ createElement(
     Toast,
     {
       ...options,
@@ -794,7 +863,7 @@ import {
   useRef as useRef4,
   useState as useState4
 } from "react";
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var OPPOSITE = {
   bottom: "top",
   left: "right",
@@ -944,7 +1013,7 @@ function Tooltip({ children, className = "", label, placement = "top" }) {
             ),
             children: [
               label,
-              /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "palda-tooltip__arrow" })
+              /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: "palda-tooltip__arrow" })
             ]
           }
         ) : null
@@ -967,9 +1036,11 @@ export {
   NavigationButton,
   ProgressBar,
   Radio,
+  Skeleton,
   Switch,
   Tab,
   TextField,
+  Thumbnail,
   toast,
   Toaster,
   Tooltip

package/dist/guide/README.md

@@ -35,13 +35,13 @@ import { Button } from '@highpixel-co/palda-design-system/ui';
 `styles.css`를 함께 불러오지 않으면 토큰이 없어 색이 나오지 않습니다.
 
 `tokens/`, `icons/`, `components/`, `patterns/`는 저장소 내부 모듈이며 개별 배포하지 않습니다.
-배포와 소비 설정은 [`packages/palda-design-system/README.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/packages/palda-design-system/README.md)를
+배포와 소비 설정은 [`packages/palda-design-system/README.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/packages/palda-design-system/README.md)를
 따릅니다.
 
-- 디자이너: [`docs/REPOSITORY_GUIDE.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/REPOSITORY_GUIDE.md)부터 읽습니다.
+- 디자이너: [`docs/REPOSITORY_GUIDE.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/REPOSITORY_GUIDE.md)부터 읽습니다.
 - 디자인 원칙: [`docs/DESIGN_PRINCIPLES.md`](docs/DESIGN_PRINCIPLES.md)
 - Figma 운영: [`docs/FIGMA_WORKFLOW.md`](docs/FIGMA_WORKFLOW.md)
-- 기여 절차: [`docs/CONTRIBUTING.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/CONTRIBUTING.md)
+- 기여 절차: [`docs/CONTRIBUTING.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/CONTRIBUTING.md)
 
 현재 토큰과 컴포넌트 값은 구조를 보여주기 위한 예시이며, 디자이너 검토 후 확정해야 합니다.
 

package/dist/guide/catalog/components.yml

@@ -98,7 +98,15 @@ dropdown-button:
     outline: 테두리가 있는 기본 트리거
     subtle: 테두리 없는 저강도 트리거. 툴바와 인라인
   note: 트리거는 시안 확정. 메뉴 패널·align·chevron 아이콘은 확정 전이다.
-  planned: 다중 선택은 아직 없다. 들일 때 선택된 항목은 체크 아이콘(`CheckIcon`)으로 표시한다(2026-07-31 확정). 아이콘은 2026-07-31에 추가했다. 남은 것은 `DropdownButtonItem`에 선택 상태를 어떻게 두고 `onSelect`가 무엇을 돌려줄지 정하는 것이며, 공개 API가 바뀌므로 결정 기록을 함께 남긴다.
+  planned: >-
+    다중 선택은 아직 없다. 들일 때 선택된 항목은 체크 아이콘(`CheckIcon`)으로 표시한다(2026-07-31
+    확정). 아이콘은 2026-07-31에 추가했다. 남은 것은 `DropdownButtonItem`에 선택 상태를 어떻게
+    두고 `onSelect`가 무엇을 돌려줄지 정하는 것이며, 공개 API가 바뀌므로 결정 기록을 함께 남긴다.
+    상단 행의 스토어 스위처를 여기로 흡수하는 것은 메뉴 패널이 확정된 뒤로 미뤘다(2026-09-05).
+    하려는 일은 같지만(단일 선택) 트리거가 셋 다르다 — 라벨 앞 아이콘 슬롯이 없고, 라벨이
+    body1/semibold가 아니라 body2/medium 고정이고, chevron이 border/strong이 아니라
+    primary/default다. 축 이름부터 걸린다: 둘 다 높이 36px이라 `size`가 아니고 `variant`는 이미
+    보더 유무다. 그때까지 스위처는 preview 시안의 손 CSS로 남는다.
 
 icon-button:
   status: stable
@@ -156,13 +164,28 @@ navigation-button:
   story: components/src/NavigationButton/NavigationButton.stories.tsx
   figma: TODO
   use_for:
-    - 사이드바·내비게이션의 화면 이동 항목
+    - 사이드바·내비게이션의 화면 이동 항목 (size="md")
+    - 상단 행의 마이페이지 진입점 — 내 아이디가 든다 (size="sm")
     - 지금 보고 있는 화면을 목록에서 표시하기
   avoid_for:
     - 화면을 옮기지 않는 액션 (Button을 쓴다)
     - 목록을 좁히는 필터 토글 (Chip을 쓴다)
-  note: 현재 위치는 색만으로 전달하지 않도록 `aria-current="page"`로 함께 노출한다. 아이콘은 라벨 앞에 온다. 폭은 부모를 채우고 라벨은 넘치면 잘린다.
-  planned: 시안에 hover/pressed가 없어 default 위에 `state/hover-pressed` 채움만 얹는 것으로 정의했고 확정 전이다. 선택 안 된 항목의 텍스트는 시안대로 `text/disabled`라 흰 배경에서 대비가 2.3:1로 미달이다. `<a href>` 렌더는 두지 않았다.
+    - 문장 안이나 보조 안내 줄의 이동 (Link를 쓴다 — 아이콘 슬롯도 hover 채움도 없는 자리다)
+  size:
+    md: 사이드바 항목. 48px · 아이콘 24 · semibold · 부모 폭을 채운다. 기본값이다
+    sm: 상단 행 항목. 36px · 아이콘 20 · medium · 내용만큼
+  note: >-
+    현재 위치는 색만으로 전달하지 않도록 `aria-current="page"`로 함께 노출한다. 아이콘은 라벨
+    앞에 오고 라벨은 넘치면 잘린다. `href`를 주면 `<a>`로 그려진다 — 화면을 옮기는 항목은
+    링크여야 새 탭·주소 복사·가운데 클릭이 동작한다(Link와 같은 근거). 링크에는 `disabled`가
+    없다. 갈 수 없는 링크는 링크로 두지 않는다.
+    size는 크기만 가르지 않고 색도 함께 간다 — md는 회색 사이드바 위 목록이라 안 고른 항목이
+    흐리고(text/disabled · 아이콘 border/strong), sm은 흰 상단 행의 단독 항목이라 흐리지
+    않다(text/primary · 아이콘 primary/default). 두 조합은 각각 시안에 있고, 축을 색과 크기로
+    쪼개면 시안에 없는 조합이 열린다(0003).
+    selected 채움은 md에만 있다. 선택 표시는 형제들 사이에서만 뜻이 있는데 상단 행의 항목은
+    하나뿐이라 대조할 형제가 없다 — sm은 aria-current만으로 현재 위치를 전한다(2026-09-05 확정).
+  planned: 시안에 hover/pressed가 없어 default 위에 `state/hover-pressed` 채움만 얹는 것으로 정의했고 확정 전이다. md에서 선택 안 된 항목의 텍스트는 시안대로 `text/disabled`라 흰 배경에서 대비가 2.3:1로 미달이다 — sm에 물려주지 않았고, md 쪽은 그대로 남아 있다.
 
 progress-bar:
   status: draft
@@ -196,6 +219,30 @@ radio:
     - 선택지를 펼쳐 놓을 자리가 좁을 때 (DropdownButton을 쓴다)
   note: 라벨을 넘기지 않으면 접근 가능한 이름을 `aria-label`로 준다.
 
+skeleton:
+  status: draft
+  source: components/src/Skeleton/Skeleton.tsx
+  story: components/src/Skeleton/Skeleton.stories.tsx
+  figma: TODO
+  use_for:
+    - 값이 오기 전 그 자리를 잡아 두기
+    - 판정이 안 끝난 화면에서 본문 자리 세우기 (게이팅·잔액 등)
+  avoid_for:
+    - 얼마나 걸릴지 모르는 대기 (자리를 잡을 것이 없다)
+    - 버튼을 누른 뒤의 진행 표시 (Button의 `disabled`를 쓴다)
+    - 끝이 정해진 작업의 진행률 (ProgressBar를 쓴다)
+    - 값이 비어 있는 것 (EmptyState를 쓴다 — 비었다는 것은 이미 도착한 답이다)
+  note: >-
+    글자 자리(`shape="text"`)의 높이는 대신할 텍스트 스타일의 글자 크기다. 갈리면 값이 도착할 때
+    자리가 튄다. 면 자리(`shape="block"`)는 크기를 스스로 갖지 않고 놓인 자리를 채운다. 폭은
+    `full`·`wide`·`narrow` 셋뿐이고 값으로 받지 않는다 — 글자 폭에 정확한 값이 없고, 자리마다
+    다른 값이 들어가면 같은 목록의 뼈대가 갈린다. 여러 줄은 화면이 조립한다. 늘 `aria-hidden`이라
+    진행 중이라는 사실은 이것을 놓은 자리가 알린다. 결정 근거는 0038이다.
+  planned: >-
+    시안 없이 만든 초안. 박동은 opacity 1↔0.4이고 `duration/normal`을 쓴다 — ListRow의 뼈대가
+    쓰던 값 그대로다. shimmer(쓸고 지나가는 빛)는 두지 않았다. size가 없다 — 높이는 대신할 글자가
+    정하고 면은 자리가 정해서, 고를 축이 아니다.
+
 switch:
   status: stable
   source: components/src/Switch/Switch.tsx
@@ -242,6 +289,26 @@ textfield:
     subtle: 배경과 보더 없음. 인라인과 저강도
   note: 크기가 렌더 요소를 정한다. `md`는 120px textarea, `sm`은 40px input이다. 글자 수 표시는 `maxLength`로 켠다.
 
+thumbnail:
+  status: draft
+  source: components/src/Thumbnail/Thumbnail.tsx
+  story: components/src/Thumbnail/Thumbnail.stories.tsx
+  figma: TODO
+  use_for:
+    - 목록 행이나 카드 안에서 항목을 알아보게 하는 작은 사각 이미지
+    - 고른 상품처럼 여러 개를 나란히 늘어놓는 자리
+  avoid_for:
+    - 사람을 나타내는 원형 아바타 (다른 것이다. 지금 시스템에 없다)
+    - 읽어야 하는 크기의 이미지 (템플릿 미리보기는 화면이 직접 그린다)
+  note: >-
+    `alt`가 필수다. 장식이면 빈 문자열을 명시적으로 넘긴다 — 빠뜨린 것과 장식인 것이 코드에서
+    갈려야 한다. 목록이 길어질 수 있어 `loading`의 기본이 `lazy`이며, 첫 화면에 보이는 자리는
+    쓰는 쪽이 `eager`로 되돌린다.
+  planned: >-
+    md 40 · sm 32는 2026-09-04에 고른 값이지 실측이 아니다. Figma에 대응하는 컴포넌트가 없어
+    대조할 것이 없었고, 시안이 다른 값을 요구하면 다시 본다. 이미지가 없거나 깨졌을 때는 회색
+    면만 남긴다 — 대체 아이콘을 둘지와 어떤 아이콘인지는 확정 전이다.
+
 toast:
   status: draft
   source: components/src/Toast/Toaster.tsx

package/dist/guide/catalog/drafts.yml

@@ -151,6 +151,32 @@ progress-bar:
     - 높이 8px은 명세 실측값이고 대응 토큰이 없다. 반복이 확인되면 토큰으로 올릴 것인가
     - 색으로 상태를 가르는 variant가 필요한가 — 지금은 채움이 accent가 아니라 primary 하나다
 
+skeleton:
+  catalog: components
+  entry: skeleton
+  based_on_none_reason: 값이 오기 전 자리를 잡아 두는 Stable 요소가 없다 — ListRow가 뼈대를 자기 안에 감춰 두고 있었다
+  reused:
+    - ListRow 뼈대가 쓰던 색·라운드·박동 값 그대로 (surface/sunken, radius/control-sm, duration/normal, opacity 1↔0.4)
+    - 폭 40%·70% — ListRow 뼈대의 제목·설명 폭이 narrow·wide가 됐다
+    - 높이를 글자 크기로 잡는 규칙 — ListRow가 emphasis에 따라 뼈대를 같이 올리던 것과 같다
+  gap: 잔액·게이팅 판정을 기다리는 동안 화면이 세울 것이 없어, 없는 값으로 본문을 그렸다가 지웠다
+  rejected_alternatives:
+    - 판정 전까지 아무것도 안 그리기 — 흰 화면이 남고 머리만 뜬 채로 기다린다
+    - ‘불러오는 중’ 글자 — 자리를 잡지 못해 값이 오면 그대로 튄다
+    - ProgressBar — 끝이 정해진 값의 진행률이라 얼마나 걸릴지 모르는 대기에 못 쓴다
+    - FormSection에 loading prop — 틀은 상태를 갖지 않는다 (DESIGN_GRAMMAR §상태는 누가 갖나)
+    - shimmer(쓸고 지나가는 빛) — 아직 오지 않은 값이 움직이는 것처럼 보인다
+  added:
+    - shape text·block 둘과 text body1·body2·label 셋, width full·wide·narrow 셋
+    - 면 자리(block) — ListRow 뼈대에는 글자 줄만 있었다. 카드·썸네일 자리를 이것이 받는다
+  unchanged:
+    - ListRow의 loading prop과 그 마크업 구조. 안에 든 뼈대만 이 컴포넌트로 갈아 끼운다
+    - 로딩을 컨트롤의 별도 상태로 두지 않는 규칙 (COMPONENT_POLICY §로딩) — Button은 그대로 disabled다
+  feedback_questions:
+    - 폭 셋(100·70·40%)으로 충분한가 — 목록 뼈대에서 줄마다 길이를 다르게 주고 싶은 자리가 나오는가
+    - 박동 주기 180ms가 맞는가 — ListRow에서 물려받은 값이고 뼈대 여럿이 함께 뛰면 산만할 수 있다
+    - text에 headline을 더할 자리가 있는가 — 지금은 머리가 늘 즉시 그려져서 안 뒀다
+
 tab:
   catalog: components
   entry: tab
@@ -331,3 +357,23 @@ empty-state:
     - Button action contract와 semantic text hierarchy
   feedback_questions:
     - 최대 폭과 vertical spacing과 action 강조가 적절한가
+
+thumbnail:
+  catalog: components
+  entry: thumbnail
+  based_on_none_reason: 이미지를 담는 Stable 컴포넌트가 없다. Card는 면이고 Badge는 라벨이라 둘 다 이미지 자리가 아니다
+  reused:
+    - radius/control과 surface/raised — 목록 행의 채운 면과 같은 눈금이다
+    - size를 md·sm 두 단계로 두는 기존 컴포넌트 규칙
+  gap: 상품처럼 사진으로 알아보는 항목을 목록과 카드에 놓을 자리가 없다
+  rejected_alternatives:
+    - 화면마다 img에 클래스를 직접 주는 방식은 라운드와 크기가 화면마다 갈린다
+    - 원형 아바타로 겸용하는 것은 사람과 사물을 한 컴포넌트에 넣는 일이라 뜻이 흐려진다
+    - 대체 아이콘을 얹는 것은 어떤 아이콘인지 근거가 없어 자산을 지어내게 된다
+  added:
+    - md 40 · sm 32 두 단계의 사각 썸네일과 필수 alt
+  unchanged:
+    - 채운 면의 회색은 한 종류라는 배경 위계와 기존 radius 스케일
+  feedback_questions:
+    - md 40 · sm 32가 맞는 눈금인가 — 실측이 아니라 고른 값이다
+    - 이미지가 없거나 깨졌을 때 회색 면만 남기면 되는가, 대체 아이콘이 필요한가

package/dist/guide/catalog/patterns.yml

@@ -58,6 +58,10 @@ list-row:
     - 섹션 안에서 tone="filled"로 값을 강조해 담는 요약 행 (옅은 회색 필, 보더 없음).
       페이지 바디 최상위 블록은 Card다 — 안쪽 여백은 둘 다 16으로 같고 라운드가 갈린다
     - onClick을 주면 누를 수 있는 행(선택 상태 포함)
+    - 그 목록이 화면의 본문이면 emphasis="strong"으로 행을 한 칸 올린다
+  emphasis:
+    default: 제목 body2(14) + 설명 label(12). 곁·요약·참조 나열이다. 기본값이다
+    strong: 제목 body1(16) + 설명 body2(14). 선언서의 본문 문장이 가리키는 목록 하나에만 쓴다
   avoid_for:
     - 진행률·CTA·취소를 함께 든 작업 행. leading이 16px 아이콘 고정이라 썸네일이 들어가지 않고,
       세로 여백과 가운데 정렬이 제목·설명 두 줄 기준이라 여러 단 내용이 붙어 보인다.
@@ -68,7 +72,11 @@ list-row:
     선택은 보더가 아니라 색이다. onClick이 있으면 chevron이 기본으로 붙고, 오른쪽에 컨트롤이 오면
     chevron={false}로 끈다. 목록 위에서 갈래를 가르는 것은 Tab이다(0023).
     목록 전체의 empty/error는 EmptyState가 맡는다(docs/DESIGN_GRAMMAR.md의 §상태는 누가 갖나).
-    뼈대 높이는 텍스트 스타일의 font-size를 따른다.
+    뼈대 높이는 텍스트 스타일의 font-size를 따르고 emphasis를 따라 같이 올라간다.
+    emphasis는 크기를 고르는 자리가 아니라 이 목록이 화면의 본문인지를 밝히는 자리다 — 판정은
+    "선언서의 본문 문장이 가리키는 목록인가" 하나이고 한 화면에 strong은 하나다(0034).
+    제목만 올리지 않는다. 16 → 12로 두 칸을 건너뛰면 설명이 각주가 된다.
+    tone="filled"와 겹쳐 쓰지 않는다 — 곁이 본문 크기를 갖는 일이다(0032).
 
 form-section:
   status: draft
@@ -79,11 +87,18 @@ form-section:
     - 설정·정보 섹션을 제목 아래로 묶기 — 0011 이후 섹션의 기본 단위다
     - 입력 필드를 제목 아래로 묶는 폼의 한 덩어리
     - 섹션 단위 오류 표시
+  tone:
+    plain: 면이 없다. 0011의 기본값이고, 제목과 여백만으로 갈린다
+    filled: >-
+      내용만 옅은 회색 필(surface/raised)에 담고 제목은 캔버스에 남긴다. 섹션이 여럿 쌓여 제목과
+      여백만으로 묶음이 안 갈릴 때만 쓴다. 면 위에서 TextField는 흰 면으로 한 단계 밝아진다
   note: >-
-    0011에 따라 보더와 배경을 갖지 않는다. 섹션을 Card로 감싸지 않고 이것을 쓴다. 섹션 사이 여백은
-    AppShell이 --space-8(32)로 준다. 라벨↔컨트롤 간격은 TextField가 갖고 있어 여기서 다시 주지
-    않는다. 섹션 오류는 role="alert"이고, 필드 하나의 오류는 TextField의 error를 쓴다.
-    폼이 아닌 섹션에도 쓰이므로 이름이 좁다 — 개명 여부 확정 대기.
+    섹션을 Card로 감싸지 않고 이것을 쓴다. 섹션 사이 여백은 AppShell이 --space-8(32)로 준다.
+    라벨↔컨트롤 간격은 TextField가 갖고 있어 여기서 다시 주지 않는다. 섹션 오류는 role="alert"이고,
+    필드 하나의 오류는 TextField의 error를 쓴다. 폼이 아닌 섹션에도 쓰이므로 이름이 좁다 —
+    개명 여부 확정 대기.
+    tone="filled"는 0011(박스 없는 것이 기본값)에서 벗어나는 자리다. 기본값은 여전히 plain이고,
+    쓰는 조건과 근거는 ADR 0037에 있다.
 
 live-preview:
   status: draft

package/dist/guide/docs/ACCESSIBILITY.md

@@ -2,9 +2,35 @@
 
 **모든 컴포넌트와 화면이 예외 없이 지켜야 하는 접근성 최소선이다.**
 
-- 텍스트와 UI의 색상 대비를 확인한다.
+- 텍스트와 UI의 색상 대비를 확인한다. 수치는 아래 §대비가 갖는다.
 - 모든 조작 요소에 visible focus를 제공한다.
 - icon-only button에는 접근 가능한 이름을 제공한다.
 - 색상만으로 상태를 전달하지 않는다.
 - Form error는 관련 입력과 연결한다.
 - motion 감소 설정을 존중한다.
+
+## 대비
+
+**읽어야 하는 글자는 아래를 넘는다.** 넘지 못하면 시각 표현이 아니라 위반이다 —
+[`DESIGN_PRINCIPLES.md`](DESIGN_PRINCIPLES.md) §7의 "글자가 배경에 묻힌다 → 읽히는 쪽이 이긴다"에
+수치를 준 것이다.
+
+| 무엇                                              | 하한    |
+| ------------------------------------------------- | ------- |
+| 본문 글자 (18.66px 미만, 또는 24px 미만 non-bold) | `4.5:1` |
+| 큰 글자 (18.66px 이상 bold, 또는 24px 이상)       | `3:1`   |
+| 조작 요소의 경계와 상태 표시                      | `3:1`   |
+
+흰 배경(`surface/base`) 위 실측이다.
+
+| 토큰               | 값                     | 대비         |
+| ------------------ | ---------------------- | ------------ |
+| `text/primary`     | `gray-900` `#323236`   | `12.76:1`    |
+| `text/accent`      | `purple-600` `#4345e5` | `6.52:1`     |
+| `text/primary-sub` | `gray-500` `#86868d`   | **`3.62:1`** |
+
+**`text/primary-sub`는 14px 본문에서 하한을 넘지 못한다.** 24px 이상이거나 18.66px 이상 bold인
+자리에만 쓴다. 그보다 작은 글자에 쓰면 읽히지 않는다.
+
+**아직 정리되지 않은 자리가 있다.** `ListRow`의 `description`이 `label`(12px)에
+`text/primary-sub`라 같은 미달이다. 토큰 값을 올릴지 그 자리만 바꿀지는 결정 대기다.