@hjmds/design-contracts 1.17.2 → 1.19.0

package/docs/usage/components/settings-screen.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
+- 적용: 1.17.1
 - 검토일: 2026-10-08
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
 - 스토리북: `배포/화면/설정/앱 설정`
@@ -11,7 +11,7 @@
 ## 언제 쓰나
 
 앱의 설정 화면 전체에 쓴다. 제목, 선택적 프로필 영역, id가 있는 섹션 목록을 받아
-[ScreenLayout](screen-layout.md) 안에 [Section](section.md)으로 쌓는다. 섹션 안의 행은
+[ScreenLayout](screen-layout.md) 안에 그룹으로 쌓는다(Web은 의미 있는 Section, Native는 Stack과 header 역할). 섹션 안의 행은
 기존 ListRow·Switch·Select·Field를 그대로 넣는다.
 
 2026-09-23 소비 감사에서 제품마다 같은 설정 화면을 직접 조립하고 있었다. 제목·섹션 틀·구분선·
@@ -34,75 +34,37 @@
 
 ## 최소 사용 예
 
-```tsx
-// Web — Switch는 /selection, ListRow는 /display, 행 이동은 onClick(또는 href)
-import { SettingsScreen } from "@hjmds/react/screens";
-import { Switch } from "@hjmds/react/selection";
-import { ListRow } from "@hjmds/react/display";
-
-<SettingsScreen
-  title={t("settings.title")}
-  sections={[
-    { id: "notifications", title: t("settings.notifications"), children: (
-      <Switch
-        presentation="row"
-        label={t("settings.push.label")}
-        description={t("settings.push.description")}
-        checked={pushEnabled}
-        onCheckedChange={setPushEnabled}
-      />
-    ) },
-    { id: "account", title: t("settings.account"), children: (
-      <ListRow title={t("settings.language")} description={currentLanguageName} onClick={openLanguageSheet} />
-    ) },
-  ]}
-/>
-```
-
-```tsx
-// Native — Switch는 /inputs, ListRow는 /data-display, 행 이동은 onPress
-import { SettingsScreen } from "@hjmds/react-native/screens";
-import { Switch } from "@hjmds/react-native/inputs";
-import { ListRow } from "@hjmds/react-native/data-display";
-
-<SettingsScreen
-  title={t("settings.title")}
-  sections={[
-    { id: "notifications", title: t("settings.notifications"), children: (
-      <Switch
-        presentation="row"
-        label={t("settings.push.label")}
-        description={t("settings.push.description")}
-        checked={pushEnabled}
-        onCheckedChange={setPushEnabled}
-      />
-    ) },
-    { id: "account", title: t("settings.account"), children: (
-      <ListRow title={t("settings.language")} description={currentLanguageName} onPress={openLanguageSheet} />
-    ) },
-  ]}
-/>
-```
+문서와 Storybook은 같은 실행 예제를 참조한다. 제품 데이터·문구·저장·라우팅은 제품에서 연결하고,
+아래 preview의 메모리 상태를 서버 저장으로 취급하지 않는다. 예제는 읽기용이며 제품에서 showcase를 import하지 않는다.
+
+<!-- usage-example: Web ../../../../../showcase/web/src/patterns/settings-page-preview.tsx -->
+- [Web 실행 예제](../../../../../showcase/web/src/patterns/settings-page-preview.tsx): 공개 SettingsScreen·행·Sheet 조합과 로컬 설정 상태.
+<!-- usage-example: Native ../../../../../showcase/native/src/settings-page-preview.tsx -->
+- [Native 실행 예제](../../../../../showcase/native/src/settings-page-preview.tsx): 같은 흐름의 Native 공개 API와 이벤트 연결.
+
+설치 패키지에서 소스 링크를 열 수 없다면 [Web 원본](https://github.com/jim1286/hjm-design-system/blob/v1.17.1/showcase/web/src/patterns/settings-page-preview.tsx)과
+[Native 원본](https://github.com/jim1286/hjm-design-system/blob/v1.17.1/showcase/native/src/settings-page-preview.tsx)을 참고한다.
+고정 버전 예제와 현재 checkout의 후속 변경은 구분하며 설치된 타입을 기준으로 사용한다.
 
 ## 축과 기본값
 
 | prop | 값 | 기본값 | 설명 |
 | --- | --- | --- | --- |
-| `sections` | `readonly { id: string; title: string; description?: string; children: ReactNode }[]` | 필수 | 각 항목을 Section 하나로 그린다. `id`는 안정적인 key |
+| `sections` | `readonly { id: string; title: string; description?: string; children: ReactNode }[]` | 필수 | 각 항목을 설정 그룹 하나로 그린다. `id`는 안정적인 key |
 | `profile` | `ReactNode` | 없음 | 섹션 위 프로필 영역 |
 | 나머지 | `ScreenLayout`과 같음(`children`·`scroll` 제외) | — | `title` 필수, `state`·`stateAction`·`notice`·`footer`·`header`·`leading`·`actions`·`contentInset`. 화면 전체가 스크롤한다 |
 
-두 플랫폼 모두 섹션 내용 위에 1px 구분선을 그리고 회색 카드 배경은 쓰지 않는다(2026-10-05 사용자 결정).
+두 플랫폼 모두 그룹 위의 별도 구분선과 카드 배경을 두지 않는다. 행 구분은 List·Switch의 계약을 따른다(2026-10-08 실제 설정 화면 재검토).
 
 ## 배치
 
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | ScreenLayout 폭(최대 720) 안에서 섹션을 세로로 쌓는다; 행 높이는 ListRow·Switch row 계약 | `ScreenLayout`, `Section` |
-| 간격 | 화면 padding `spacing.md` 16; `profile`·섹션 사이 `spacing.xl` 24; 섹션 제목–내용 `spacing.xs` 8, 제목–설명 `spacing.xxs` 4; 행 사이 간격은 없고 구분선 1 | Web·Native `SettingsScreen` `Stack gap="xl"`, `sectionRecipe` |
+| 간격 | 화면 padding `spacing.md` 16; `profile`·섹션 사이 `spacing.md` 16; 그룹 제목–내용 `spacing.xs` 8; Native 설명도 같은 Stack 간격. 행 간격·구분은 행 계약 | Web·Native `SettingsScreen` `Stack gap="md"` |
 | 순서·정렬 | 헤더(제목) → `notice` → `profile` → `sections` 순서대로 → `footer` | 렌더 순서 |
 | 고정·스크롤 | 헤더·footer 고정, 본문 화면 스크롤(`scroll` 고정 `"screen"`); 저장 실패는 `notice` | `ScreenLayout` |
-| 좁은 폭·큰 글자 | 섹션 제목·행 문구는 줄바꿈되고 자르지 않는다; 제목 열 최소 폭 120 × 글자 배율 | `.hjm-section` `overflow-wrap: anywhere`, `headerMinWidth` |
+| 좁은 폭·큰 글자 | 섹션 제목·행 문구는 줄바꿈되고 자르지 않는다 | Text와 각 행의 내용 기반 높이 |
 
 ## 꼭 지킬 것
 
@@ -120,7 +82,7 @@ import { ListRow } from "@hjmds/react-native/data-display";
 
 | 항목 | Web | Native |
 | --- | --- | --- |
-| 섹션 구분 | Section(`hjm-settings-section`) 내용 위 1px 구분선(CSS) | Section + 내용 위 1px 구분선(`View`) |
+| 섹션 구분 | Section(`hjm-settings-section`), 별도 그룹 선 없음 | Stack + header 역할, 별도 그룹 선 없음 |
 | 조각 import | `Switch` `/selection`, `ListRow` `/display` | `Switch` `/inputs`, `ListRow` `/data-display` |
 | Switch 기본 `presentation` | `inline` | `row` |
 | 행 이동 이벤트 | ListRow `href`/`onClick` | ListRow `onPress` |

package/docs/usage/components/sheet.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-07
+- 검토일: 2026-10-13
 - 근거: [Sheet 입력 화면과 가용 영역](../../sheet.md), [optional adapters](../../optional-adapters.md)(Native 제스처 확장), `src/component-recipes.ts`(`sheetRecipe`), `src/sheet.ts`(`sheetBehaviorDefaults`)
 - 스토리북: `배포/컴포넌트/오버레이/시트`
 
@@ -50,12 +50,17 @@ import { TextField } from "@hjmds/react/forms";
 import { Sheet } from "@hjmds/react/overlays";
 
 <Sheet open={open} onOpenChange={(next) => setOpen(next)}
+  returnFocusRef={openButtonRef}
   title={t("profile.edit.title")} closeLabel={t("common.close")}
   footer={<Button onClick={save} loading={saving}>{t("common.save")}</Button>}>
   <TextField label={t("profile.name")} value={name} onValueChange={setName} />
 </Sheet>
 ```
 
+Web의 외부 열기 버튼과 `returnFocusRef`에 같은 `useRef<HTMLButtonElement>(null)`을 연결한다.
+버튼 클릭 시 초점을 주지 않는 macOS WebKit에서도 닫은 뒤 호출 위치로 돌아오기 위해서다.
+`trigger` 슬롯을 쓰면 내부에서 연결한다([Dialog 초점 복귀](dialog.md#최소-사용-예)).
+
 ```tsx
 // Native — 입력 폼은 keyboardAvoidance + scrollable
 import { Button } from "@hjmds/react-native/actions";
@@ -86,7 +91,7 @@ import { Sheet } from "@hjmds/react-native/overlays";
 | `detents`(Web) · `activeDetent` · `onDetentChange` | `readonly ("medium" \| "large" \| "full")[]` · `(detent) => void` | — | 사용자가 높이를 바꿀 단계. `detentLabels: { expand, collapse }` 필수 |
 | `keyboardAvoidance` · `scrollable`(Native) | `boolean` | `false` | 입력 폼은 둘 다 켠다 |
 | `safeAreaInsets`(Native) | `Partial<Insets>` | provider inset | — |
-| `contentStyle`(Native) | 배치 key만 | — | 배치 밖 key(색·높이 등)는 deprecated(개발 모드 경고), 다음 major에서 배치 전용 타입으로 좁힌다 |
+| `contentStyle`(Native) | 배치 key만 | — | `HjmCompositionStyleProp` 배치 전용 타입. 색·padding·높이 등 시각 key는 받지 않는다 |
 
 ### 디자인 프로필 상속
 
@@ -108,7 +113,7 @@ import { Sheet } from "@hjmds/react-native/overlays";
 | 크기 | 하단 시트 높이: `auto` 내용 높이(최대 화면 높이 × `maxHeightRatio` 0.9), `medium` 60%, `large` 85%, `full` 위 safe area 안 전체 높이(0.9 상한 없음). Web 하단 시트 최대 폭 640. 위 두 모서리만 `radius.xl` 24. 옆 시트(`start`·`end`): Web 폭 `min(28rem, 100%)`·높이 화면 − 32, Native 폭 88%(최대 420)·화면 높이 | `sheetRecipe.sizes`·`content`·`web`, `.hjm-sheet`, Native `Sheet` |
 | 간격 | 두 플랫폼 같은 값: 좌우 `content.paddingHorizontal`(`spacing.lg` 20), 위·아래 `content.paddingTop/Bottom`(`spacing.sm` 12, 하단 시트는 아래 safe area를 더함), 머리·본문·footer 사이 `body.gap`(`spacing.md` 16), footer 위 `footer.paddingTop`(`spacing.sm` 12), 제목–닫기 `header.gap`(`spacing.sm` 12), footer 버튼 사이 `footer.gap`(`spacing.sm` 12) | `.hjm-sheet__*`, `sheetRecipe.content`·`body`·`footer` |
 | 순서·정렬 | 머리(제목·설명 + 닫기) → 본문 → `footer`. 머리 최소 높이 44(`control.minTouchTarget`), 닫기는 끝 쪽에서 제목 세로 중앙. Web footer는 오른쪽 정렬 가로 줄 [보조][주]. Native footer는 세로 열이라 꽉 찬 폭 버튼을 주 행동 먼저 둔다. Web에서 `detents`를 주면 위 가운데 36×4 손잡이 버튼(터치 최소 폭 44 · 높이 `spacing.lg` 20). Native 기본 Sheet는 손잡이가 없다 | `sheetRecipe.header`·`handle`, `.hjm-sheet__footer`, `.hjm-sheet__handle` |
-| 고정·스크롤 | 본문만 스크롤, 머리·`footer` 고정(Native는 `scrollable`일 때 ScrollView). 고정 높이(`medium`·`large`·`full`, 옆 시트)에서는 본문이 머리·footer를 뺀 남은 높이를 차지하고 `footer`는 시트 아래에 붙는다. 그래서 본문의 `flex: 1` 자식(SearchScreen, 목록 화면)이 그 높이를 채운다(Web `.hjm-sheet__body` `flex: 1 1 auto`, Native 본문 `flexGrow: 1`·`minHeight: 0`, 미게시(1.13.1 이후)). `auto`는 내용 높이 그대로다. 저장·확인은 `footer`에. 아래 안전 영역은 시트가 자기 여백에 더한다(`spacing.sm` 12 + 아래 inset, Web은 `env(safe-area-inset-bottom)`). 위 inset은 시트가 올라갈 높이를 줄인다. 제품이 inset을 다시 더하지 않는다 | `.hjm-sheet__body`, `sheetRecipe.safeArea`, Native `Sheet` |
+| 고정·스크롤 | 본문만 스크롤, 머리·`footer` 고정(Native는 `scrollable`일 때 ScrollView). 고정 높이(`medium`·`large`·`full`, 옆 시트)에서는 본문이 머리·footer를 뺀 남은 높이를 차지하고 `footer`는 시트 아래에 붙는다. 그래서 본문의 `flex: 1` 자식(SearchScreen, 목록 화면)이 그 높이를 채운다(Web `.hjm-sheet__body` `flex: 1 1 auto`, Native 본문 `flexGrow: 1`·`minHeight: 0`, 1.13.1 변경). `auto`는 내용 높이 그대로다. 저장·확인은 `footer`에. 아래 안전 영역은 시트가 자기 여백에 더한다(`spacing.sm` 12 + 아래 inset, Web은 `env(safe-area-inset-bottom)`). 위 inset은 시트가 올라갈 높이를 줄인다. 제품이 inset을 다시 더하지 않는다 | `.hjm-sheet__body`, `sheetRecipe.safeArea`, Native `Sheet` |
 | 좁은 폭·큰 글자 | 폭 < 640이면 하단 시트가 화면 폭을 채운다. Web footer는 줄을 바꾼다. 큰 글자로 내용이 길어지면 `auto`는 최대 90%에서 멈추고 본문이 스크롤된다(`full`은 위 safe area까지) | `.hjm-sheet[data-placement="bottom"]`, `maxHeightRatio` |
 
 ```text
@@ -136,7 +141,7 @@ import { Sheet } from "@hjmds/react-native/overlays";
 - 닫힌 뒤 다른 modal을 열거나 화면 이동은 `onDismissComplete`에서 한다. 두 modal을 동시에 띄우지 않는다.
 - 문구(`title`, `closeLabel`, 본문)는 i18n 키로 넣는다. 제목 정렬을 위해 `as unknown as string` 캐스트나
   `.hjm-sheet__header` CSS 덮어쓰기를 하지 않는다.
-- Native `contentStyle`은 배치 key만 쓴다. 높이는 `size`로 정한다(`contentStyle={{ height }}` 금지, 배치 밖 key는 deprecated).
+- Native `contentStyle`은 배치 key만 쓴다. 높이는 `size`로 정한다(`contentStyle={{ height }}` 금지, 배치 밖 key는 지원하지 않음).
 - Web Sheet는 `layoutStyle`을 받지 않는다(Web `layoutStyle` 제외 15개 중 하나). 표면 위치·크기는 `placement`·`size`가 정한다.
 
 ## 플랫폼 차이
@@ -162,7 +167,7 @@ import { Sheet } from "@hjmds/react-native/overlays";
 
 ## 함정
 
-- 미게시(1.12.1 이후) 변경: 1.12.1까지 `size="full"`(Web `detents`의 `full` 포함)은 0.9 상한에 걸려 90%에서 멈췄다. 1.12.1을 쓰는 앱에서 화면 전체가 필요하면 화면 전환을 쓴다.
+- `size="full"`(Web `detents`의 `full` 포함)은 위 안전 영역을 뺀 전체 높이를 사용한다. 0.9 상한은 `auto`에만 적용된다(1.13.0 변경).
 - 1.13.0 이하 Native 고정 높이 Sheet는 본문이 내용 높이라서 `flex: 1` 자식이 0pt가 됐다. 시트 안 SearchScreen이 검색 입력만 그리고
   필터 줄·목록이 사라졌다(2026-10-06 utilverse 채팅 도구 선택, iPhone 17 Pro · iOS 26.5). 제품은 창 높이 `flexBasis`로 우회했다.
   1.13.1부터는 그 우회 없이 채워진다. 1.13.0 이하에서도 footer는 본문 바로 아래에 있었고, 1.13.1부터 고정 높이 시트에서는 시트 아래에 붙는다.

package/docs/usage/components/sidebar.md

@@ -110,4 +110,4 @@ Native: 없음. 폰은 BottomNavigation, 태블릿 split view는 navigator가
 
 2026-10-07 소비 감사에서 Web 항목의 숫자 recipe 모서리가 프로필을 우회했다. 기존 `radius.md` 역할을 가까운 Provider의 CSS 변수로 읽고 변수 없는 독립 사용은 recipe 12를 유지한다. 레일 폭·링크·현재 위치·접기·초점과 Web 전용 범위는 바꾸지 않는다.
 
-프로필 연결은 1.15.0 이후 미게시 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.
+프로필 연결은 1.16.0 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.

package/docs/usage/components/skeleton.md

@@ -90,7 +90,7 @@ import { Skeleton } from "@hjmds/react-native/feedback";
 
 - 실제 콘텐츠와 같은 자리·비슷한 크기로 둔다. 로딩이 끝나면 Skeleton을 내용으로 **바꾼다**(겹쳐 두지 않는다).
 - 색·테두리는 recipe와 테마가 정한다. 배치는 `layoutStyle`로 하고 `style`/`className`으로 회색 배경을 덮지 않는다.
-  Native `style`은 deprecated(개발 모드 경고, 다음 major 제거)다.
+  Native `style`은 제거된 속성이다.
 - Web Skeleton은 `aria-hidden`이다. 로딩 사실을 알려야 하면 영역 단위로 한 번 알린다
   (예: 감싼 영역의 `aria-busy`, 또는 Spinner 하나). Skeleton마다 라벨을 붙이지 않는다.
 - Web은 `HjmProvider` 안에서 렌더한다. 원 지름·펄스 값을 provider가 내보내는 `--hjm-skeleton-*` 변수로 읽는다.

package/docs/usage/components/skip-nav.md

@@ -79,4 +79,4 @@ Native: 없음.
 
 2026-10-07 소비 감사에서 Web 링크의 숫자 recipe 모서리가 프로필을 우회했다. 기존 `radius.md` 역할을 가까운 Provider의 CSS 변수로 읽고 변수 없는 독립 사용은 recipe 12를 유지한다. 숨김·고정 위치·표시·본문 초점 이동과 Web 전용 범위는 바꾸지 않는다.
 
-프로필 연결은 1.15.0 이후 미게시 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.
+프로필 연결은 1.16.0 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.

package/docs/usage/components/slider.md

@@ -104,7 +104,7 @@ Native는 제품 프로필의 `tokens.fontFamily.ui`를 실제 텍스트/입력
 - `label`·`getValueText`·(Native) `incrementLabel`/`decrementLabel`은 i18n 문구로 준다. 단위·형식은 제품 소유다.
 - 사용자 입력만 step으로 snap된다. 제품이 준 `value`가 범위 안이면 step 밖이어도 그대로 그린다.
 - 색·트랙 두께·thumb 크기는 HJM 소유다. 배치는 `layoutStyle`로 한다. Web `style`/`className`/`inputClassName`은 배치용으로만 쓰고,
-  Native `containerStyle`/`controlStyle`은 deprecated(개발 모드 경고, 다음 major 제거)다.
+  Native `containerStyle`/`controlStyle`은 제거된 속성이다.
 
 ## 플랫폼 차이
 
@@ -113,7 +113,7 @@ Native는 제품 프로필의 `tokens.fontFamily.ui`를 실제 텍스트/입력
 | 접근성 | `input type="range"`, `aria-valuetext` | role `adjustable`, `accessibilityValue` |
 | 키 조작 | 방향키·Home/End·PageUp/PageDown(step×10) | `increment`/`decrement` action만(페이지 이동 없음) |
 | 필수 추가 문구 | 없음 | `incrementLabel`, `decrementLabel` |
-| 스타일 슬롯 | `layoutStyle`, `style`(루트), `className`, `inputClassName` | `layoutStyle`. `containerStyle`·`controlStyle`은 deprecated(`style` prop 없음) |
+| 스타일 슬롯 | `layoutStyle`, `style`(루트), `className`, `inputClassName` | `layoutStyle`. `containerStyle`·`controlStyle`은 제거된 속성(`style` prop 없음) |
 | 의존성 | 없음 | 없음(PanResponder 사용) |
 
 ## 함정

package/docs/usage/components/spinner.md

@@ -53,7 +53,7 @@ import { Spinner } from "@hjmds/react-native/feedback";
 | `tone`(Web) | `brand` · `neutral` · `inverse` | `brand` | — |
 | `size`(Native) | `small` · `large` | `small` | 플랫폼 `ActivityIndicator`를 테마 `contentBrand` 색으로 그린다. `tone`은 없다 |
 | `layoutStyle` | `HjmCompositionStyleProp`(margin·width·flex 계열·`alignSelf`) | — | 루트 배치. Web·Native 모두 |
-| `style`(Native) | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle` 또는 `size`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `size`. 현재 공개 props에서 제거되었다 |
 
 ## 배치
 
@@ -83,4 +83,4 @@ import { Spinner } from "@hjmds/react-native/feedback";
 | 크기 | 3단계 | `small`·`large` 2단계 |
 | tone | 있음 | 없음(항상 brand 색) |
 | reduced motion | 회전 멈춤(CSS) | 별도 처리 없음(`ActivityIndicator` 그대로) |
-| `style` | HTML 속성(`layoutStyle`과 합쳐지고 `layoutStyle`이 이김) | deprecated |
+| `style` | HTML 속성(`layoutStyle`과 합쳐지고 `layoutStyle`이 이김) | 제거된 속성 |

package/docs/usage/components/splitter.md

@@ -97,7 +97,7 @@ axis="horizontal"(기본)
 
 - 키보드는 pane 축 방향키만 쓴다(가로면 좌/우, 세로면 위/아래). 다른 방향키와 PageUp/PageDown은 pane 콘텐츠의 것이다.
 - 패널의 Tab 정지점은 넘침에 따라 생기고 사라진다(ResizeObserver·MutationObserver로 다시 잰다). 테스트에서 패널 `tabIndex`를 고정값으로 기대하지 않는다.
-  패널에는 접근성 이름이 없다(이름 prop은 breaking 변경이라 두지 않았다, `splitter.tsx` 주석). 미게시(1.12.1 이후) 변경이며 1.12.1까지는 패널이 포커스를 받지 않았다.
+  패널에는 접근성 이름이 없다(이름 prop은 breaking 변경이라 두지 않았다, `splitter.tsx` 주석). 1.13.0 변경이며 1.12.1까지는 패널이 포커스를 받지 않았다.
 - RTL에서는 ArrowLeft가 increment다. 드래그 거리도 같은 기준으로 잰다.
 - primary pane 폭은 `value`가 아니라 `(value-min)/(max-min)` 비율로 그려진다. `value=min`이면 primary pane이 0%, `max`면 100%다.
   예를 들어 `min=15, max=60, value=30`은 33%로 그려진다. 원하는 실제 폭 범위에 맞춰 `min`/`max`를 정하고 화면에서 확인한다.

package/docs/usage/components/statistic.md

@@ -84,7 +84,7 @@ import { Statistic } from "@hjmds/react-native/data-display";
 | `renderValue`(Web) | `(value: string) => ReactNode` | — | 보이는 값만 바꾼다. 접근성 값은 descriptor 그대로 |
 | `availableWidth`(Native `StatisticGroup`) | `number` | 측정 폭 | 열 수 계산에 쓸 폭 |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 루트 배치. Web·Native 모두 |
-| Native `style`·`labelStyle`·`valueStyle`·`affixStyle`·`trendStyle`·`hintStyle`, 그룹 `style`·`itemStyle` | `StyleProp` | — | deprecated — `layoutStyle` 또는 `density`·`presentation`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| Native `style`·`labelStyle`·`valueStyle`·`affixStyle`·`trendStyle`·`hintStyle`, 그룹 `style`·`itemStyle` | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `density`·`presentation`. 현재 공개 props에서 제거되었다 |
 
 ## 배치
 
@@ -93,7 +93,7 @@ Native 프레임의 모서리는 `statisticRecipe.presentations`의 역할을 Pr
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | `presentation="surface"`의 안쪽 여백: `comfortable` `spacing.md` 16 · `compact` `spacing.sm` 12(두 플랫폼). 테두리 `stroke.default` 1, radius `md` 12 | `statisticRecipe.density`·`presentations`, `styles.css` `.hjm-statistic[data-presentation="surface"]` |
-| 글자 | 라벨 `label` 12 semibold(`compact` `caption` 11), 값 `heading` 24 heavy(`compact` `title` 18), prefix·suffix `body` 14 semibold 본문색, hint `caption`, 추세 `caption` bold(두 플랫폼). 2026-10-06까지 Web은 라벨 본문 14 medium, 값은 밀도와 관계없이 18, prefix·suffix는 흐린색이었다(1.12.1 이후 미게시) | `statisticRecipe.density`·`label`·`value`·`affix`·`hint`·`trend`, `.hjm-statistic__*` |
+| 글자 | 라벨 `label` 12 semibold(`compact` `caption` 11), 값 `heading` 24 heavy(`compact` `title` 18), prefix·suffix `body` 14 semibold 본문색, hint `caption`, 추세 `caption` bold(두 플랫폼). 2026-10-06까지 Web은 라벨 본문 14 medium, 값은 밀도와 관계없이 18, prefix·suffix는 흐린색이었다(1.13.0 변경) | `statisticRecipe.density`·`label`·`value`·`affix`·`hint`·`trend`, `.hjm-statistic__*` |
 | 간격 | 그룹 간격 `statisticRecipe.group.gap` = `spacing.xs` 8. 지표 안 줄 간격(라벨·값·추세) `comfortable` `spacing.xs` 8 · `compact` `spacing.xxs` 4(두 플랫폼) | `styles.css` `.hjm-statistic`·`.hjm-statistic-group`, `statisticRecipe` |
 | 순서·정렬 | 화면 위쪽 요약 영역이나 카드 안에 둔다. 지표 여러 개는 [Grid](grid.md)를 직접 짜지 말고 `StatisticGroup`으로 묶는다 | — |
 | 고정·스크롤 | — | — |
@@ -106,7 +106,7 @@ Native 프레임의 모서리는 `statisticRecipe.presentations`의 역할을 Pr
 - `direction`과 `tone`은 따로 정한다. 증가가 나쁜 지표는 `up` + `danger`다([계약](../../statistic.md)).
 - 접근성 이름은 기본으로 `[contextLabel, label, 값, trend label, hint]`를 이어 만든다. 어순을 바꿔야 하면
   `composeAccessibilityLabel`을 쓴다. `StatisticGroup`은 group `label`을 각 항목의 `contextLabel`로 넘긴다.
-- 배치는 `layoutStyle`로만 한다. Native의 deprecated `style`·`*Style`·`itemStyle`로 recipe 색·굵기를 덮지 않는다.
+- 배치는 `layoutStyle`로만 한다. Native에서 제거된 `style`·`*Style`·`itemStyle`로 recipe 색·굵기를 덮지 않는다.
 
 ## 플랫폼 차이
 
@@ -114,7 +114,7 @@ Native 프레임의 모서리는 `statisticRecipe.presentations`의 역할을 Pr
 | --- | --- | --- |
 | 값 렌더 교체 | `renderValue`(접근성 값은 descriptor 유지) | 없음 |
 | 그룹 폭 | CSS grid, 좁은 화면에서 1열 | `availableWidth` 또는 측정 폭, 최소 항목 폭 120×글자 배율로 열 수 감소 |
-| 슬롯 스타일 prop | 없음(`className`, 배치는 `layoutStyle`) | `style`·`*Style`, 그룹 `itemStyle`(모두 deprecated, 배치는 `layoutStyle`) |
+| 슬롯 스타일 prop | 없음(`className`, 배치는 `layoutStyle`) | `style`·`*Style`, 그룹 `itemStyle`(모두 제거된 속성, 배치는 `layoutStyle`) |
 | `AnimatedStatistic` 모션 | 숫자 자리 단위 NumberFlow | 지표 전체 `rise` 전환 |
 | `renderTrendMark` color | `"currentColor"` | trend tone을 푼 색 문자열 |
 
@@ -122,6 +122,7 @@ Native 프레임의 모서리는 `statisticRecipe.presentations`의 역할을 Pr
 
 - Web `AnimatedStatistic`은 reduced motion, RTL, 라틴 숫자가 아닌 numbering system, `ar`·`fa`·`he`·`ur` locale,
   `scientific`·`engineering` 표기에서는 애니메이션 없이 `Intl` 결과 문자열만 그린다.
+- Web은 탭이 숨겨지거나 숫자 호스트가 제거되면 진행 중 전환을 최종 값으로 완료한다. 화면 밖에서는 모션을 정지하고 새 값·접근 이름을 즉시 반영하며, 화면 안으로 돌아오면 다음 값부터 다시 전환한다. IntersectionObserver 미지원 환경은 정적으로 표시한다.
 - `AnimatedStatistic`의 `descriptor`에는 `value`를 넣지 않는다. 값은 `value` prop의 숫자로 받는다.
 
 ### 외부 숫자 효과 대조

package/docs/usage/components/steps.md

@@ -75,7 +75,7 @@ import { Steps } from "@hjmds/react-native/steps";
 | `composeAccessibleName` | `(info: { position: number, total: number, label: string }) => string` | — (필수) | `position`은 1부터 |
 | `renderMark` | `(status: StepStatus, position: number) => ReactNode` | `✓`·`!`·번호 | 원 안 표시를 바꾼다 |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 루트 배치. Web·Native 모두 |
-| `style`(Native) | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle`. 현재 공개 props에서 제거되었다 |
 | `StepPlayer` `progress`·`playing` | `number`(0~1)·`boolean` | — (필수) | 호스트 소유 |
 | `StepPlayer` `onPlayingChange`·`onReplay` | `(playing: boolean) => void`·`() => void` | — (필수) | 재생/일시정지·다시 보기 요청 |
 | `StepPlayer` `labels` | `{ play, pause, replay, progress }` | — (필수) | — |
@@ -105,6 +105,6 @@ import { Steps } from "@hjmds/react-native/steps";
 | 항목 | Web | Native |
 | --- | --- | --- |
 | 구조 | `<ol>`, 현재 단계 `aria-current="step"`, 상태 문구는 숨은 텍스트 | `accessibilityRole="summary"`, 단계마다 이름 + `accessibilityHint`에 상태 문구 |
-| 스타일 | `className`·`style`(HTML 속성), 배치는 `layoutStyle` | 배치는 `layoutStyle`(`style`은 deprecated) |
+| 스타일 | `className`·`style`(HTML 속성), 배치는 `layoutStyle` | 배치는 `layoutStyle`(`style`은 제거된 속성) |
 | ref | `forwardRef`(`ol`) | 없음 |
 | import 경로 | root, `/navigation`, `/steps` | root, `/steps`(`/navigation` 없음) |

package/docs/usage/components/surface.md

@@ -34,8 +34,7 @@
 
 공개 guide가 HJM profile context를 서버 module에서 평가해 실패한 사례(2026-10-07)를 보완했다.
 현재 main의 Web `/layout`은 client entry이므로 서버가 작성한 JSX children과 직렬화 가능한 props를
-Surface로 넘길 수 있다. 서버 page 전체를 client로 바꿀 필요는 없다. 이 보완은1.15.0 이후 미게시이므로
-설치1.15.0에서는 제품의 작은 `"use client"` 재수출 경계를 유지한다. callback/ref 등 client 실행이
+Surface로 넘길 수 있다. 서버 page 전체를 client로 바꿀 필요는 없다. 이 client entry는 1.16.0 변경이다. callback/ref 등 client 실행이
 필요한 props는 소비 Client Component에서 만든다. 루트 barrel/다른 entry를 서버에 직접 import해도
 된다는 보장은 아니다. [재현·검증](../../../../../docs/qa/2026-10-07-rsc-profile-boundary.md)을 따른다.
 
@@ -71,7 +70,7 @@ import { Surface } from "@hjmds/react-native/primitives";
 | `as`(Web) | `div` · `section` · `article` | `div` | — |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | Surface 자신의 바깥 여백·폭·flex·`alignSelf`. Web·Native 모두 |
 
-### 프로필 표면 질감(미게시)
+### 프로필 표면 질감(1.15.0 추가)
 
 선택한 `designProfile.material.surface`를 자동으로 읽는다. glass는 지원하는 Web에서 실제 배경 흐림,
 clay는 안쪽 그림자를 사용한다. Native는 루트 Provider의 선택형 `surfaceEffects` host와 inset capability를

package/docs/usage/components/switch.md

@@ -69,7 +69,7 @@ import { Switch } from "@hjmds/react-native/inputs";
 | `description` | 문구 | — | 이름과 따로 연결한다(Web `aria-describedby`, Native `accessibilityHint` 기본값) |
 | `disabled` | `boolean` | `false` | — |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 루트(행) 배치. Web·Native 모두 |
-| `style`(Native) | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle` 또는 `size`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `size`. 현재 공개 props에서 제거되었다 |
 
 큰 글자(공통 large-text 기준)에서 `row`는 설명 아래로 track을 내린다.
 

package/docs/usage/components/tabs.md

@@ -77,12 +77,12 @@ import { Tabs } from "@hjmds/react-native/navigation";
 | `overflow` | `scroll` · `clip` | `scroll` | — |
 | `orientation` | `horizontal` · `vertical` | `horizontal` | — |
 | `loop` | `boolean` | `true` | — |
-| `appearance` | `standard` · `slide` · `gooey` | 미지정 시 프로필의 selectionMotion; 없으면 `standard` | 미게시(1.14.0 이후): `slide`는 2점 표시선 이동, `gooey`는 6점 표시선 늘어남. 명시 값 우선, 세로는 standard 유지 |
+| `appearance` | `standard` · `slide` · `gooey` | 미지정 시 프로필의 selectionMotion; 없으면 `standard` | 1.15.0 변경: `slide`는 2점 표시선 이동, `gooey`는 6점 표시선 늘어남. 명시 값 우선, 세로는 standard 유지 |
 | `renderPanels` | `boolean` | `true` | `false`면 패널을 그리지 않는다. 패널을 라우터·스크롤 상태와 함께 따로 둘 때 `TabPanel`에 `tabsId`(Tabs의 `id`와 같게)·`activeValue`·`value`를 넘긴다 |
 | `children`(Native) | `(selectedValue: Value) => ReactNode` | — | 항목 `panel` 대신 선택 값으로 패널을 그린다 |
 | `TabPanel` | `{ tabsId, activeValue, children, mode?: "keyed", value, mountPolicy? }` 또는 `{ mode: "dynamic" }`, Native는 `label` 필수 | — | — |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | Tabs·TabPanel 루트 배치. Web·Native 모두 |
-| Native `style`·`tabListStyle`, TabPanel `style` | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle` 또는 `size`·`layout`·`overflow`·`appearance`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| Native `style`·`tabListStyle`, TabPanel `style` | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `size`·`layout`·`overflow`·`appearance`. 현재 공개 props에서 제거되었다 |
 
 ## 배치
 
@@ -112,7 +112,7 @@ import { Tabs } from "@hjmds/react-native/navigation";
   Web controlled `value`가 비활성·없는 항목이면 `RangeError`다.
 - 아이콘은 `renderLeading`으로 넣고 받은 `color`·`size`를 쓴다. 색을 직접 정하지 않는다.
 - 탭을 바꿔도 화면 이동(뒤로 가기 대상)이 아니다. 주소에 남겨야 하면 제품이 controlled 값으로 동기화한다.
-- 배치는 `layoutStyle`로 한다. Web 루트 `div` 속성(`className`·`style`)과 Native의 deprecated `style`·`tabListStyle`로
+- 배치는 `layoutStyle`로 한다. Web 루트 `div` 속성(`className`·`style`)과 Native에서 제거된 `style`·`tabListStyle`로
   색·높이·인디케이터를 덮지 않는다.
 
 ## 플랫폼 차이
@@ -131,7 +131,7 @@ import { Tabs } from "@hjmds/react-native/navigation";
 
 - 2026-10-07 [Animated Tabs 대조](../../../../../docs/plans/aceternity-interaction-adoption-2026-10-07.md)에서
   선택 표시의 이동과 겹친 패널의 이동을 구분했다. 현재 `appearance="gooey"`는 표시선만 늘어나며,
-  패널을 겹쳐 복제하거나 순서를 바꾸지 않는다. 미게시(1.14.0 이후) 후속 구현에서
+  패널을 겹쳐 복제하거나 순서를 바꾸지 않는다. 1.15.0 변경 후속 구현에서
   `appearance`를 생략하면 `designProfile.interactions.selectionMotion="slide"`가 일반 이동선으로
   연결된다. 명시 `standard`는 이동을 끄고 명시 `gooey`만 늘어남을 고른다. `slide`와 `gooey`를
   같은 의미로 간주하지 않는다. 전환 표현이 필요하면 [ContentTransition](content-transition.md)의

package/docs/usage/components/tag.md

@@ -53,7 +53,7 @@ import { Tag } from "@hjmds/react-native/data-display";
 | `tone` | `neutral` · `info` · `success` · `attention` · `brand` | `neutral` | `warning`·`danger`는 없다(이유는 계약 문서) |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 바깥 여백·`alignSelf` 같은 배치. Web·Native 모두 |
 | `accessibilityLabel`(Native) | `string` | 라벨 | — |
-| `style`·`labelStyle`(Native) | `StyleProp` | — | deprecated — `layoutStyle` 또는 `tone`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`·`labelStyle`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `tone`. 현재 공개 props에서 제거되었다 |
 
 모양은 radius `sm` 사각형, 최소 높이 20(큰 글자에서 늘어남), caption 크기 semibold 글자다.
 
@@ -81,6 +81,6 @@ Native의 모서리는 Provider의 `tokens.radius.sm`이다. metadata 의미와
 | 항목 | Web | Native |
 | --- | --- | --- |
 | 접근 이름 | 보이는 글자 | 기본은 라벨, `accessibilityLabel`로 바꿀 수 있음 |
-| 추가 style prop | `className`·`style`(HTML 속성) | `style`·`labelStyle`(deprecated) |
+| 추가 style prop | `className`·`style`(HTML 속성) | `style`·`labelStyle`(제거된 속성) |
 | ref | `forwardRef`(`span`) | 없음 |
 | import 경로 | `/display` | `/data-display` |

package/docs/usage/components/tags-input.md

@@ -80,7 +80,7 @@ import { TagsInput } from "@hjmds/react-native/tags-input";
 | `suggestions` · `suggestionsLabel` | 제품이 거른 후보(`id`·`label`·`value?`·`disabled?`)와 목록 이름 | — | 거르려면 `onDraftChange`로 입력 중 문자를 받는다 |
 | `placeholder`·`description`·`disabled` | `string`·`string`·`boolean` | — | `disabled`는 라벨과 입력 틀을 `fieldRecipe.disabledOpacity`(0.6)로 흐리고 `description`은 그대로 둔다([Field](field.md)) |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 필드 전체 배치. Web·Native 모두 |
-| `style`(Native) | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle`. 현재 공개 props에서 제거되었다 |
 
 ## 배치
 
@@ -91,7 +91,7 @@ Native 입력 프레임의 `md` 모서리는 Provider의 `tokens.radius.md`를
 
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
-| 크기 | 입력 틀 최소 높이 44(필드 틀과 같음), 모서리 `radius.md` 12. 입력 칸 최소 Web `8ch`, Native 80. 태그 칩 높이 28, 삭제 버튼 터치 영역 44(`control.minTouchTarget`). 후보 행 최소 높이 44(두 플랫폼, Native는 미게시(1.12.1 이후). 1.12.1 Native는 28) | `tagsInputRecipe`, `.hjm-tags-input__frame`·`__remove::after`·`__suggestion` |
+| 크기 | 입력 틀 최소 높이 44(필드 틀과 같음), 모서리 `radius.md` 12. 입력 칸 최소 Web `8ch`, Native 80. 태그 칩 높이 28, 삭제 버튼 터치 영역 44(`control.minTouchTarget`). 후보 행 최소 높이 44(두 플랫폼, Native는 1.13.0 변경. 1.12.1 Native는 28) | `tagsInputRecipe`, `.hjm-tags-input__frame`·`__remove::after`·`__suggestion` |
 | 간격 | 라벨과 틀 사이 Web `spacing.xxs` 4, Native `spacing.xs` 8. 틀 안 태그·입력 칸 사이 `spacing.xs` 8. 이웃 필드와의 간격은 폼이 정한다 | `.hjm-tags-input`, `react-native/src/tags-input.tsx` |
 | 순서·정렬 | 라벨 → 입력 틀 → 후보 목록 → 설명. 폼 안에서 다른 [Field](field.md)와 같은 세로 줄에 두고 폭을 꽉 채운다 | `react/src/tags-input.tsx`, `react-native/src/tags-input.tsx` |
 | 고정·스크롤 | 후보 목록은 틀 바로 아래 문서 흐름에 펼쳐진다(떠 있는 층이 아니다). Web은 최대 높이 12rem에서 스크롤 | `.hjm-tags-input__suggestions` |
@@ -103,7 +103,7 @@ Native 입력 프레임의 `md` 모서리는 Provider의 `tokens.radius.md`를
 - 거절 사유 문장("이미 있어요")은 제품이 `reason`으로 만든다. HJM은 판정만 한다.
 - 한국어처럼 공백이 값의 일부인 도메인에서는 `Space`를 확정 키로 켜지 않는다.
 - 후보 필터링·정렬은 제품이 한다. HJM은 받은 후보를 보여 주고 고른 값을 확정한다.
-- 배치는 `layoutStyle`로 한다(Web `className`도 받는다). Native `style`은 deprecated다.
+- 배치는 `layoutStyle`로 한다(Web `className`도 받는다). Native `style`은 제거된 속성이다.
 
 ## 플랫폼 차이
 
@@ -113,7 +113,7 @@ Native 입력 프레임의 `md` 모서리는 Provider의 `tokens.radius.md`를
 | 빈 입력 Backspace | 첫 번째는 마지막 태그 선택, 두 번째에 삭제 | 해당 키 계약 없음, 태그 옆 삭제 버튼 |
 | 후보 이동 | ArrowUp/Down(끝에서 순환) | 후보를 버튼으로 누름 |
 | ref | `forwardRef`(`input`) | 없음 |
-| 스타일 prop | `className`, `layoutStyle` | `layoutStyle`(`style`은 deprecated) |
+| 스타일 prop | `className`, `layoutStyle` | `layoutStyle`(`style`은 제거된 속성) |
 
 
 ### 고정 아이콘과 큰 글자

package/docs/usage/components/text-area.md

@@ -69,7 +69,7 @@ import { TextArea } from "@hjmds/react-native/inputs";
 | `onChange`(Web) | `(event: ChangeEvent<HTMLTextAreaElement>) => void` | — | DOM 이벤트. 값은 `event.currentTarget.value` |
 | `onValueChange`(Native) | `(value: string) => void` | — | 다음 문자열 |
 | `minVisibleLines` · `maxVisibleLines` | 줄 수 | 최소 높이 80, 상한 없음 | 높이는 줄 수로만 정한다. 최소 높이는 `max(80, 줄 수 × typography.body 줄 높이 20 + spacing.sm 12 × 2)`라 `minVisibleLines`가 1·2여도 80(`fieldRecipe.multilineMinHeight`) 아래로 내려가지 않고 3부터 커진다(3줄 84). Web·Native 같다 |
-| `leadingAction` | `ReactNode` | — | 틀 안 글자 앞 행동 버튼. 자라는 글자의 세로 가운데에 맞추고 흐린 affix 색을 쓰지 않는다. 미게시(1.12.1 이후) |
+| `leadingAction` | `ReactNode` | — | 틀 안 글자 앞 행동 버튼. 자라는 글자의 세로 가운데에 맞추고 흐린 affix 색을 쓰지 않는다. 1.13.0 변경 |
 | `trailing` | `ReactNode` | — | 틀 안 글자 뒤 슬롯 |
 | `description` · `error` · `required` · `disabled` | Web `ReactNode`, Native `string` · `boolean` | — | Field와 같은 틀로 그려지고 보조기기 설명에 연결된다 |
 | `busy`(Native) | `boolean` | `false` | — |
@@ -110,5 +110,7 @@ Native는 제품 프로필의 `tokens.fontFamily.ui`를 실제 텍스트/입력
 
 ## 함정
 
-- 현재 Web `TextField`의 `onValueChange` 주석은 "Web TextArea와 같은 콜백"이라고 적지만 Web `TextAreaProps`에는
-  `onValueChange`가 없다(`react/src/forms.tsx`). 공유 폼 코드는 Web TextArea만 `onChange`로 분기한다.
+- Web `TextAreaProps`에는 `onValueChange`가 없다. 공유 폼 코드는 Web TextArea의 `onChange`에서 `event.currentTarget.value`를 읽어 같은 값 변경 함수로 연결한다.
+
+
+2026-10-09 번뚝 시뮬레이터 확인: Native bounded 입력은 같은 너비의 비노출 텍스트로 줄 높이를 측정한다. iOS TextInput의 contentSize가 현재 viewport 높이로 제한되는 경우를 피하고, 마지막 줄바꿈도 크기에 포함한다. 화면에서 수동 픽셀 높이를 덧씌우지 않는다. 최대 표시 줄에 도달하기 전에는 커지고 이후 내부 스크롤을 사용한다.

package/docs/usage/components/text.md

@@ -17,6 +17,7 @@
 
 | 상황 | 대신 쓸 것 |
 | --- | --- |
+| 짧은 상태·결과 문구를 변경 알림으로 전달 | [StatusText](#statustext) |
 | 문서 제목 단계(`h1`~)가 필요하거나 24px보다 큰 제목 | [Heading](heading.md) |
 | 화면 첫 자리의 제목 블록(보조 문장·행동 포함) | [Top](top.md) |
 | 본문 묶음의 헤더 행 | [Section](section.md) |
@@ -33,6 +34,7 @@ Text와 Heading의 경계: Text의 `variant="heading"`(24px)은 **모양만**
 | 이름 | 역할 | Web | Native |
 | --- | --- | --- | --- |
 | `Text` | 기본 | `@hjmds/react`, `/layout` | `@hjmds/react-native`, `/primitives` |
+| `StatusText` | 짧은 상태·결과 알림 companion | `@hjmds/react`, `/status-text` | `@hjmds/react-native`, `/status-text` |
 | `GravityLetters` | 확장(홍보용 글자 낙하 장식, optional-extension) | `/gravity-letters` | `/gravity-letters` |
 
 `GravityLetters`는 granular subpath로만 import 된다. 추가 peer 의존성은 없다(Web은 WAAPI, Native는 RN `Animated`).
@@ -58,8 +60,8 @@ import { Text } from "@hjmds/react-native/primitives";
 | prop | 값 | 기본값 | 설명 |
 | --- | --- | --- | --- |
 | `variant` | `caption`(11) · `label`(12) · `body`(14) · `bodyLarge`(16) · `title`(18) · `titleLarge`(20) · `heading`(24) | `body` | 화면·섹션 제목은 모양이 아니라 [Heading](heading.md)으로 쓴다 |
-| `fontRole` | `ui` · `display` · `reading` · `code` | 제목 variant는 display, 본문은 reading, caption/label은 ui | 명시값이 기본을 덮는다. [역할 지침](../tokens/font-roles.md), 1.15.0 이후 미게시 |
-| `emphasis` | `regular` · `medium`(semibold) · `strong`(bold) | `regular` | — |
+| `fontRole` | `ui` · `display` · `reading` · `code` | 제목 variant는 display, 본문은 reading, caption/label은 ui | 명시값이 기본을 덮는다. [역할 지침](../tokens/font-roles.md), 1.16.0 변경 |
+| `emphasis` | `regular` · `medium`(semibold) · `strong`(bold) | 프로필이 있으면 variant 굵기, 없으면 `regular` | 명시값이 프로필과 variant보다 우선 |
 | `tone` | `primary` · `body` · `muted` · `subtle` · `weak` · `brand` · `danger` · `inverse` | `primary` | — |
 | `as` | `span` · `p` · `div` · `strong` · `small` | `span` | Web만. 문단은 `as="p"` |
 | `align` | `TextStyle["textAlign"]` | 쓰기 방향의 시작 쪽 | Native만 |
@@ -100,5 +102,84 @@ Native는 Text의 역할을 해당 stack에, 입력/조작 host는 제품 프로
 
 ## 함정
 
-- `emphasis`가 `variant`의 굵기를 덮는다. `variant="title"`도 기본 `emphasis="regular"`면 보통 굵기로
-  그려진다. 굵은 제목이 필요하면 `emphasis="strong"`을 명시한다(두 renderer 동일).
+- `emphasis`를 명시하면 `variant`의 굵기를 덮는다. `designProfile`이 있으면 생략한 `emphasis`는 해당 프로필의 `tokens.typography[variant].fontWeight`를 따른다. 프로필이 없으면 기존 기본값 `regular`를 유지하므로 `variant="title"`도 보통 굵기로 그려진다. 그 경우 굵은 제목은 `emphasis="strong"`으로 지정한다(두 renderer 동일).
+
+
+## StatusText
+
+Text와 같은 표현을 유지하면서 상태 변경 알림을 연결하는 공개 companion이다.
+기존 `본문 글자` Story의 `상태 알림`에서 지속 안내와 저장 결과를 확인한다.
+
+### StatusText 선택 기준
+
+저장 결과, 선택 개수, 요청 진행처럼 **짧은 문자열 하나**를 화면 안에 유지하며 변경을 알릴 때 쓴다.
+Text의 companion으로 같은 `variant`·`tone`·`emphasis`·`layoutStyle`을 받으며 글꼴·색·간격을 새로 만들지 않는다.
+문구와 성공·실패 판정은 제품이 소유한다.
+
+| 상황 | 선택 |
+| --- | --- |
+| 읽기만 하는 본문·계속 표시되는 설명 | Text |
+| 짧은 상태·결과 문자열의 변경 알림 | StatusText |
+| 제목·설명·아이콘·재시도 행동을 묶은 안내 | Notice |
+| 화면 위에 일시적으로 나타나며 닫히는 알림 | Toast |
+
+### 가져오기
+
+```tsx
+// Web
+import { StatusText } from "@hjmds/react/status-text";
+// Native: import { StatusText } from "@hjmds/react-native/status-text";
+// 두 renderer의 root에서도 내보낸다.
+```
+
+### StatusText가 놓이는 자리
+
+```text
+관련 입력 또는 행동
+↕ 부모 Stack의 gap
+StatusText: 결과 문자열
+```
+
+자체 여백·판·최소 높이는 없다. 관련 행동 가까이에 두고 부모 Stack이 간격을 소유한다.
+화면 전체를 대체하는 로딩·실패·빈 상태는 해당 영역의 ScreenLayout/StateView/Notice로 구성한다.
+
+### 공개 props
+
+| prop | 기본값 | 의미 |
+| --- | --- | --- |
+| `children: string` | 필수 | 제품의 지역화된 상태 문구. 빈 문자열도 허용 |
+| `announcement` | `polite` | `none`·`polite`·`assertive`. 시각적 tone과 알림 우선순위는 독립 |
+| `announceOnMount` | `false` | Native iOS 옵션. 조건부로 새로 나타난 행동 결과를 처음에도 알림 |
+| 나머지 Text props·ref | Text와 같음 | Web role/live/atomic, Native live region은 StatusText가 소유 |
+
+### 지속 안내와 새 결과
+
+```tsx
+// Native
+import { StatusText } from "@hjmds/react-native/status-text";
+
+// 계속 유지되는 노드: 최초 안내는 iOS에서 읽지 않고 이후 문자열 변경만 알린다.
+<StatusText>{message}</StatusText>
+
+// Native: 행동 뒤 조건부로 새로 마운트되는 결과는 opt-in한다.
+{saved ? <StatusText announceOnMount>{t("save.complete")}</StatusText> : null}
+
+<StatusText announcement="assertive" tone="danger">{errorMessage}</StatusText>
+```
+
+Web은 `polite`를 `role="status"`, `assertive`를 `role="alert"`로 연결하고 `aria-live`와
+`aria-atomic`을 설정한다. `none`은 `aria-live="off"`이고 상태 role을 붙이지 않는다.
+같은 live node의 텍스트를 갱신하는 것이 기본이다. Web에는 `announceOnMount` prop이 없으며,
+새로 마운트된 live region의 읽힘은 브라우저·보조기술에 따라 달라진다.
+
+Native Android는 `accessibilityLiveRegion`만 사용한다. iOS는 앱이 active이고 비어 있지 않은 문구가
+바뀔 때 `announceForAccessibilityWithOptions`를 호출한다. `polite`는 queue, `assertive`는 즉시 우선순위다.
+`none`, 같은 문구 재렌더, 빈 문구, 배경 변경은 발표하지 않는다. foreground 복귀나 announcement 모드 변경만으로
+과거 문구를 재생하지 않는다. 빈 문구로 지웠다가 같은 결과를 다시 표시하면 새 변경이다.
+`announceOnMount`는 마운트 시점에 결정하며 나중에 true로 바꿔 초기 안내를 재생하지 않는다.
+
+### 경계
+
+동일 결과를 매 렌더 다시 알리기 위해 key를 바꾸지 않는다. Toast·Notice에서 이미 알리는 결과를 중복 알리지 않는다.
+Showcase의 `PatternStatus`는 이 공개 컴포넌트를 가리키는 내부 별칭일 뿐이며 제품에서 Showcase 파일을 import하지 않는다.
+DOM 속성·Native host 호출 검사는 실제 VoiceOver·TalkBack의 낭독 확인과 구분한다.

package/docs/usage/components/timeline.md

@@ -75,7 +75,7 @@ import { Timeline } from "@hjmds/react-native/data-display";
 | `items[].tone` | `neutral` · `info` · `success` · `attention` | `neutral` | `warning`·`danger`는 없다 |
 | `composeAccessibleName`(필수) | `(info: { position: number, total: number, label: string }) => string` | — | position은 1부터 |
 | `layoutStyle` | `HjmCompositionStyleProp` | — | 루트 배치. Web·Native 모두 |
-| `style`(Native) | `StyleProp<ViewStyle>` | — | deprecated — `layoutStyle`. 개발 모드에서 한 번 경고하고 다음 major에서 제거된다 |
+| `style`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle`. 현재 공개 props에서 제거되었다 |
 | 나머지 | Web `<ol>` 속성, Native `ViewProps`(`style` 제외) | — | — |
 
 ## 배치
@@ -94,7 +94,7 @@ import { Timeline } from "@hjmds/react-native/data-display";
 - 빈 배열, 중복 `id`, 앞뒤 공백이 있는 `id`, 빈 문자열 필드, 목록 밖 tone은 실행 중 오류를 던진다.
 - 접근 이름의 어순은 언어마다 다르므로 `composeAccessibleName`은 i18n 키로 만든다.
 - 제품 고유 색(구단 색 등)은 adapter에서 네 tone 중 하나로 먼저 매핑한다. dot 색을 직접 칠하지 않는다.
-- 배치는 `layoutStyle`로 한다. Web `className`/`style`과 Native의 deprecated `style`로 dot·connector·글자 색을 덮지 않는다.
+- 배치는 `layoutStyle`로 한다. Web `className`/`style`과 Native에서 제거된 `style`로 dot·connector·글자 색을 덮지 않는다.
 
 ## 플랫폼 차이