@hjmds/design-contracts 1.37.0 → 1.37.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /** Package release shown by documentation surfaces. Kept in sync by a test. */
2
- export declare const designSystemVersion: "1.37.0";
2
+ export declare const designSystemVersion: "1.37.2";
3
3
  //# sourceMappingURL=version.d.ts.map
package/dist/version.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /** Package release shown by documentation surfaces. Kept in sync by a test. */
2
- export const designSystemVersion = "1.37.0";
2
+ export const designSystemVersion = "1.37.2";
3
3
  //# sourceMappingURL=version.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.37.0\" as const;\n"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.37.2\" as const;\n"]}
@@ -1,6 +1,6 @@
1
1
  # Component maturity and evidence manifest
2
2
 
3
- > Generated from `@hjmds/design-contracts` 1.37.0. Do not edit this file directly; run `pnpm contracts:sync`.
3
+ > Generated from `@hjmds/design-contracts` 1.37.2. Do not edit this file directly; run `pnpm contracts:sync`.
4
4
 
5
5
  This document is the human-readable projection of the same catalog and Showcase manifest consumed by product CI.
6
6
 
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "designSystemVersion": "1.37.0",
3
+ "designSystemVersion": "1.37.2",
4
4
  "source": "packages/design-contracts/docs/generated/showcase-manifest.json",
5
5
  "surfaces": {
6
6
  "web": {
7
7
  "packageName": "@hjmds/react",
8
- "packageVersion": "1.37.0",
8
+ "packageVersion": "1.37.2",
9
9
  "activeComponents": 131,
10
10
  "claimedComponents": 131,
11
11
  "completeScenarioComponents": 130,
@@ -7062,7 +7062,7 @@
7062
7062
  },
7063
7063
  "native": {
7064
7064
  "packageName": "@hjmds/react-native",
7065
- "packageVersion": "1.37.0",
7065
+ "packageVersion": "1.37.2",
7066
7066
  "activeComponents": 113,
7067
7067
  "claimedComponents": 113,
7068
7068
  "completeScenarioComponents": 110,
@@ -1,6 +1,6 @@
1
1
  # Renderer evidence coverage
2
2
 
3
- > Generated for HJM 1.37.0. Do not edit directly; run `pnpm evidence:sync`.
3
+ > Generated for HJM 1.37.2. Do not edit directly; run `pnpm evidence:sync`.
4
4
 
5
5
  This projection joins the canonical surface maturity manifest with first-party renderer claims. Missing scenarios are explicit beta promotion debt; stable surfaces are blocked by CI until none remain.
6
6
 
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 2,
3
- "designSystemVersion": "1.37.0",
3
+ "designSystemVersion": "1.37.2",
4
4
  "packageName": "@hjmds/design-contracts",
5
5
  "components": [
6
6
  {
package/docs/toast.md CHANGED
@@ -249,3 +249,12 @@ overflow와 update를 검증합니다.
249
249
  일괄 기본 행간 변경은 기존 알림 레이아웃까지 바꾸므로 채택하지 않았다. Native 본문 행간은 이미 body
250
250
  토큰을 소비하며, 이번 Native 변경은 action 라벨의 ui 서체 역할만 명시한다. 알림 문구·큐·시간·닫기·
251
251
  행동·초점 계약은 바꾸지 않는다.
252
+
253
+ ## 2026-10-20 저장 알림 시안 반영 (1.37.1)
254
+
255
+ 사용자가 카드형 저장 피드백(이전 3번)을 제거하고 한 줄·요약 토스트의 라이트·다크 시안을 선택했다.
256
+ 일반 토스트의 최신 표면 정본은 `toastRecipe.material`이다. 이전 절의 tinted badge·강한 경계·프로필 모서리는 일반 표면의 현재 규격이 아니다.
257
+ 배지 색 면을 없애고 요약형의 장식 아이콘은 생략한다. 한 줄 본문과 제목은 primary, 제목 아래 설명은 secondary다.
258
+ 24 모서리·얇은 경계·floating 그림자를 공유하고, 내용 구성·타이머·큐·press/action/닫기 계약은 유지한다.
259
+ 웹은 지원 환경에서 실제 backdrop blur, 투명도 감소에서는 불투명이다. Native 기본 renderer는 같은 색의 불투명 표면이다.
260
+ 선택형 liquid 어댑터의 host·움직임 계약은 유지한다. 자세한 선택은 [저장 결과](usage/compositions/save-feedback.md)를 따른다.
@@ -196,7 +196,7 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
196
196
  | [ThinkingOrb](components/thinking-orb.md) | 상태와 알림 | AI 에이전트가 실제로 검색·생성·듣기 같은 작업을 하는 동안 그 단계를 보여 줄 때만 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
197
197
  | [Timeline](components/timeline.md) | 데이터 표시 | 이미 일어난 일을 시간 순서대로 보여 줄 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
198
198
  | [TimePicker](components/time-picker.md) | 입력 | 하루 중 시각 하나를 시·분 두 열에서 고를 때 쓴다. | 미게시(1.34.0 이후) | Web · Native | Web stable / Native stable | 배포 |
199
- | [Toast](components/toast.md) | 상태와 알림 | 저장 완료의 한 줄형·대상 요약형과 화면 안 상태 표시의 선택은 저장 결과 구성을 따른다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
199
+ | [Toast](components/toast.md) | 상태와 알림 | 저장 완료의 한 줄형·대상 요약형 선택은 저장 결과 구성을 따른다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
200
200
  | [ToggleFeedbackButton](components/toggle-feedback-button.md) | 구성/직접 조작과 모션 | 좋아요·저장·알림 받기처럼 켜고 끄는 선택에 반응 모션과 개수를 붙인다. | 1.21.0 | Web · Native | 개별 API 계약 참조 | 배포 |
201
201
  | [ToggleGroup](components/toggle-group.md) | 입력 | 여러 개를 동시에 켜고 끄는 짧은 버튼 묶음에 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
202
202
  | [Tooltip](components/tooltip.md) | 오버레이 | Web에서 이미 이름과 focus를 가진 컨트롤(대개 IconButton)에 **짧은 보충 설명 한 문장**을 붙일 때 쓴다. | 1.12.1 | Web | Web stable / Native unsupported | 배포 |
@@ -88,6 +88,11 @@ import { Notice } from "@hjmds/react-native/feedback";
88
88
 
89
89
  ## 배치
90
90
 
91
+ 2026-10-20 선택의창 지도 위에서 Native 안내 배경의 alpha가 지도 지명·도로를 그대로 비춰 문구와 겹쳤다.
92
+ `panel`은 불투명한 테마 바탕 위에 tone tint를 합성한다(Web의 기존 color-mix와 같은 방식).
93
+ 지도·사진 위에서도 아래 콘텐츠가 비치지 않는다. `status`는 기존처럼 배경 없이 유지한다.
94
+ 설명을 생략하면 제목만 표시하며 설명 자리와 제목·설명 사이 간격을 남기지 않는다.
95
+
91
96
  | 항목 | 값 | 근거 |
92
97
  | --- | --- | --- |
93
98
  | 크기 | 본문 폭을 꽉 채운다. 아이콘 20(`glyph.sm`), 테두리 1(`stroke.default`), radius `radius.md` 12 | `noticeRecipe` |
@@ -10,8 +10,8 @@
10
10
 
11
11
  ## 언제 쓰나
12
12
 
13
- 저장 완료의 한 줄형·대상 요약형과 화면 안 상태 표시의 선택은 [저장 결과 구성](../compositions/save-feedback.md)을 따른다.
14
- 한 줄형은 `description`, 요약형은 기존 `title` + `description`을 사용한다. 저장된 카드가 보이면 같은 성공 토스트를 겹치지 않는다.
13
+ 저장 완료의 한 줄형·대상 요약형 선택은 [저장 결과 구성](../compositions/save-feedback.md)을 따른다.
14
+ 한 줄형은 `description`, 요약형은 기존 `title` + `description`을 사용한다. 카드형 저장 완료 예시는 제거했다.
15
15
 
16
16
  방금 한 행동의 결과처럼 **무시해도 안전한 짧은 알림**에 쓴다. 저장 완료, 복사 완료, 백그라운드 작업 완료
17
17
  알림이 여기에 속한다. 화면 흐름 밖에 떠서 3초 뒤 스스로 닫히고, 큐에 쌓인 다음 알림이 이어서 뜬다.
@@ -103,8 +103,8 @@ function useProfileSavedToast() {
103
103
  ### 디자인 프로필 상속
104
104
 
105
105
  2026-10-07 테마 소비 경로 점검에서 고정 foundation/recipe 값이 남은 곳을 보완했다.
106
- 모서리의 recipe 역할은 유지하고 값은 가장 가까운 Provider의 `designProfile.tokens.radius`를
107
- 읽는다. Dialog/AlertDialog/Sheet/일반 Toast의 그림자는 `tokens.shadow.floating`을 읽으며
106
+ Dialog/AlertDialog/Sheet의 모서리는 가장 가까운 Provider의 `designProfile.tokens.radius`를 읽는다.
107
+ 일반 Toast는 승인된 알림 시안의 `toastRecipe.material.radius` 24를 사용한다. Dialog/AlertDialog/Sheet/일반 Toast의 그림자는 `tokens.shadow.floating`을 읽으며
108
108
  프로필 없는 소비자의 기본값은 유지한다. 상태·초안·선택·Modal teardown은 이 축의 소유가 아니다.
109
109
  플랫폼 근사와 미검증 범위는 [프로필 계약](../../design-profile.md#오버레이선택-입력의-프로필-연결-보완)을 따른다.
110
110
 
@@ -121,7 +121,7 @@ Native의 선택형 `/toast-liquid`도 가장 가까운 프로필의 `radius.xl`
121
121
 
122
122
  | 항목 | 값 | 근거 |
123
123
  | --- | --- | --- |
124
- | 크기 | 카드 최대 폭 420(Web `min(420px, 100vw − 2×spacing.md)`, Native 화면 폭 − 안전 영역 − 2×16에서 420으로 자름). 최소 높이 56(`layout.rowHeight.singleLine`). 모서리 `radius.xl` 24(패널, 미게시 1.17.2 이후. 그전 `lg` 16). 열은 [아이콘 배지 32 또는 `media` 44][문구][닫기 44]. `action`은 높이 44(`control.minTouchTarget`), 좌우 여백 `spacing.md` 16의 pill. `progress` 점 6(현재 단계 1.4배) | `toastRecipe.viewport`·`surface`·`icon`·`action`, `.hjm-toast`, `react-native/src/feedback.tsx` |
124
+ | 크기 | 카드 최대 폭 420(Web `min(420px, 100vw − 2×spacing.md)`, Native 화면 폭 − 안전 영역 − 2×16에서 420으로 자름). 최소 높이 56(`layout.rowHeight.singleLine`). 모서리 `toastRecipe.material.radius` 24. 한 줄 열은 [장식 아이콘 32 또는 `media` 44][문구][닫기 44]. 요약형은 장식 아이콘 없이 [제목·설명][닫기 44]이며 제품 `media`는 유지한다. `action`은 높이 44(`control.minTouchTarget`), 좌우 여백 `spacing.md` 16의 pill. `progress` 점 6(현재 단계 1.4배) | `toastRecipe.viewport`·`surface`·`icon`·`action`, `.hjm-toast`, `react-native/src/feedback.tsx` |
125
125
  | 안쪽 여백 | 카드 위아래 `spacing.sm` 12, 좌우 양쪽 `spacing.md` 16(`toastRecipe.surface.padding`, 미게시). 닫기는 44 터치 영역을 유지하되 끝 쪽으로 (44 − 글리프 14)/2 = 15만큼 여백에 겹쳐(`close.inlineOverhang`) × 글리프 끝이 카드 끝에서 16 — 배지의 시작 여백 16과 같다. RTL에서도 논리 방향(시작·끝)으로 대칭이다. `action`·`progress`는 문구 열에 맞춘다 | `toastRecipe.surface`·`close`, `.hjm-toast`·`.hjm-toast__close`, `react-native/src/feedback.tsx` |
126
126
  | 첫 줄 기준 | 배지 32 상자(`toastRecipe.anchor.blockSize`)가 기준선이다. 첫 줄(제목, 없으면 설명)은 (32 − 그 줄의 행간)/2만큼 내려 배지 가운데에 맞추고, 닫기는 위아래 −(44 − 32)/2 = −6(`close.blockOverhang`)으로 같은 가운데에 둔 채 행을 늘리지 않는다. 한 줄이면 12 + 32 + 12 = 56에 배지·글자·닫기 가운데가 모두 28. 여러 줄이면 배지·닫기는 첫 줄 옆에 남고 나머지 줄은 아래로 자란다(문구 덩어리 전체의 가운데에 맞추지 않는다). `media` 44는 같은 위쪽에서 시작하고 기준 상자가 아니다 — 제목을 media 가운데에 맞추면 설명이 아바타 아래로 밀려나서다. Web은 첫 줄의 `1lh`, Native는 body 토큰 행간 × 현재 글자 배율로 계산해 프로필·글자 확대에서도 맞는다 | `toastRecipe.anchor`·`close`, `.hjm-toast__content`, `react-native/src/feedback.tsx` |
127
127
  | 간격 | 화면 가장자리에서 `spacing.md` 16 + 안전 영역(`safeAreaMode: "additive"`). 여러 장 사이 `spacing.sm` 12. 카드 안 열 간격 `spacing.sm` 12 | `toastRecipe.viewport`, `.hjm-toast-viewport` |
@@ -219,3 +219,12 @@ Web은 전체 영역의 투명한 button과 두 제어 버튼을 형제로, Nati
219
219
  닫기 글리프 30이 서로 달랐고(배지 `start`·문구 `center`·닫기 `start`−4의 세 정렬), 시작 여백 16과 닫기 글리프 끝 여백 22가 비대칭이었다
220
220
  (여백 12/8/12/16 안에 44 터치 영역). Native는 사방 16 여백과 문구 `center` 정렬로 따로 어긋났다. 첫 줄 기준과 대칭 여백을 recipe 값으로 두고
221
221
  두 renderer가 같은 값을 읽게 바꿨다. 수정 후 한 줄·여러 줄·action·media·RTL 모두 가운데 28(테두리 포함 29), 양쪽 여백 16으로 측정됐다.
222
+
223
+ ## 2026-10-20 라이트·다크 표면 갱신 (1.37.1)
224
+
225
+ 승인된 알림 시안을 따라 일반 Toast는 프로필의 큰 모서리 대신 `toastRecipe.material.radius` 24를 사용한다.
226
+ 위의 과거 프로필 모서리 설명은 선택형 리퀴드 표현에만 적용된다. 배지 색 면을 제거하고 한 줄의 아이콘과 본문은 primary 색,
227
+ 제목 아래의 설명은 secondary 색으로 구분한다. 요약형은 장식 아이콘을 생략한다. 문구·타이머·큐·닫기·행동 API는 유지한다.
228
+ 라이트는 우윳빛, 다크는 차콜이며 같은 material 값과 floating 그림자를 두 renderer가 사용한다.
229
+ 웹은 지원 환경에서 backdrop blur와 0.96 fill을 사용한다. Native 기본 표현은 blur host를 요구하지 않는 불투명 표면이다.
230
+ 이는 새 npm 게시나 운영 제품 배포를 뜻하지 않는다.
@@ -3,91 +3,62 @@
3
3
  - 단계: 구성
4
4
  - 상태: 실험
5
5
  - 지원: Web · Native
6
- - 적용: 1.37.0
6
+ - 적용: 1.37.1
7
7
  - 검토일: 2026-10-20
8
- - 근거: 사용자 요청으로 저장 결과 세 유형을 보존하고 모든 제품의 저장 피드백을 같은 선택 기준으로 연결했다.
8
+ - 근거: 사용자 요청으로 카드 안 저장 완료 예시(이전 3번)를 제거하고, 승인된 라이트·다크 토스트 시안으로 두 유형을 통일했다.
9
9
  - 스토리북: `실험/구성/피드백과 복구/저장 결과`
10
10
 
11
11
  ## 언제 쓰나
12
12
 
13
- 사용자 저장 요청의 성공이 확인된 뒤, 대상과 현재 화면에 맞는 피드백을 선택할 때 쓴다.
13
+ 실제 영속 저장 성공 뒤 짧게 결과를 알린다. 문구·대상·저장 판정은 제품이 소유하고, 표면·안전 영역·타이머·접근성은 기존 Toast가 소유한다.
14
14
 
15
15
  ## 구성 요소
16
16
 
17
- | 컴포넌트 | 역할 | 지침 |
17
+ | 유형 | 쓰는 상황 | 공개 API |
18
18
  | --- | --- | --- |
19
- | Toast + Provider/Region | 컴팩트·대상 요약 알림 | [Toast](../components/toast.md) |
20
- | Notice status | 항목 안의 작은 저장 상태 | [Notice](../components/notice.md) |
21
- | Card·CompositionLayout·ListRow | 저장된 대상과 설명의 배치 | [구성 골격](../components/composition-layout.md) |
19
+ | 1 · 한 줄 토스트 | 짧은 완료 확인 | Toast `description`, `tone="success"` |
20
+ | 2 · 요약 토스트 | 저장한 대상까지 확인 | 같은 Toast의 `title` + `description` |
22
21
 
23
- | 유형 | 쓰는 상황 | 기존 공개 API |
24
- | --- | --- | --- |
25
- | 컴팩트 토스트 | 현재 화면에서 저장 결과를 직접 볼 수 없고 짧은 완료 확인이면 충분함 | Toast `description`, `tone="success"`; 앱 루트의 ToastProvider/ToastRegion 사용 |
26
- | 대상 요약 토스트 | 저장한 대상이나 변경 내용을 함께 확인해야 함 | 같은 Toast의 `title` + `description`; 필요 시 기존 `media` 사용 |
27
- | 저장 카드에 바로 반영 | 저장된 카드·목록·폼이 보임 | Card/ListRow/CompositionLayout 슬롯의 Notice `appearance="status"`; 기존 저장 버튼의 체크·저장됨 표시도 이 유형 |
28
-
29
- 1·2는 별도 알림 엔진이나 토스트 변형 prop이 아니다. 기존 Toast의 내용 구성이다.
30
- 3은 기존 Notice의 작은 상태 표현이며 별도 타이머·큐가 없다. 같은 성공을 토스트와 카드에서 중복 알리지 않는다.
31
- 오류·경고·필수 안내는 기존 Notice 패널을 유지한다. 자동 저장의 처리 중·실패·미저장 상태를 성공으로 바꾸지 않는다.
22
+ 두 유형은 별도 엔진이나 변형 prop이 아니다. 웹은 ToastProvider, Native는 ToastRegion을 앱 루트에 둔다. 카드형 저장 결과는 선택지에서 제거했다. 일반 Notice·Card·Badge의 다른 용도는 유지한다.
32
23
 
33
24
  ## 배치
34
25
 
35
- | 영역 | 컴포넌트 | 위치 | 크기·간격 |
36
- | --- | --- | --- | --- |
37
- | 바깥 틀 | ToastProvider/ToastRegion 또는 기존 Card·폼 | 화면 위 알림 층 또는 저장한 항목 안 | 토스트 가장자리 `spacing.md` 16 + 안전 영역 |
38
- | 상태 | Toast 또는 Notice status | 토스트 내용 / CompositionLayout `badge` | 토스트 최소 높이 56, status 바깥 padding 0 |
39
- | 보조 설명 | Toast description / CompositionLayout footer | 상태 아래 | 기본 구성의 `spacing.sm` 12 간격 |
26
+ | 영역 | 위치·크기 |
27
+ | --- | --- |
28
+ | 바깥 틀 | 최대 폭 420, 최소 높이 56, 모서리 24 |
29
+ | 화면 가장자리 | 16 + 안전 영역. 광고 footer가 있으면 상단 |
30
+ | 내부 | 가로 16·세로 12, 첫 줄 기준 정렬, 닫기 터치 영역 44 유지 |
31
+ | 한 줄 | 장식 아이콘 → 본문 → 닫기 |
32
+ | 요약 | 제목 → 보조 설명, 오른쪽 닫기. 장식 아이콘은 생략; 제품 media는 유지 |
40
33
 
41
34
  ```text
42
- 컴팩트: [ ✓ KE123 저장했어요 × ]
43
- 요약: [ ✓ 항공편을 저장했어요 × ]
44
- [ KE123 · 인천 → 도쿄 ]
45
- 카드: [ KE123 (저장됨) ]
46
- [ 인천 → 도쿄 ]
47
- [ 내 항공편에 추가했어요 ]
35
+ 한 줄: [ ✓ KE123 저장했어요 × ]
36
+ 요약: [ 항공편을 저장했어요 × ]
37
+ [ KE123 · 인천 → 도쿄 ]
48
38
  ```
49
39
 
50
- - 토스트는 기존 최대 폭 420, 최소 높이 56, 가장자리 `spacing.md` 16 + 안전 영역을 따른다. 기본 3초이며 요약이 길면 제품이 읽을 시간을 늘린다. 광고 footer가 있는 제품은 상단에 둔다.
51
- - 카드는 기존 Card와 CompositionLayout이 배치한다. `badge`에 상태 Notice, `footer`에 보조 설명을 넣는다. Notice status는 바깥 padding·border가 0이고 배지는 기존 Badge `size="small"`을 쓴다. 색·높이·정렬을 제품에서 다시 만들지 않는다.
52
- - 목록은 상태를 기존 행 슬롯에 둔다. 방금 저장한 항목이 현재 정렬에서 안 보이면 해당 결과를 보여 주되 기존 현재 항목의 우선순위를 바꾸지 않는다.
53
- - 상태 문구와 보조 설명은 제품이 지역화한다. 짧은 상태는 `저장됨`, 대상 요약은 실제 저장한 식별자를 쓴다. 실제 저장 응답/영속 저장 완료 전에는 성공 표시를 만들지 않는다.
40
+ 라이트는 우윳빛 표면·짙은 글자, 다크는 차콜 표면·밝은 글자다. 얇은 경계와 floating 그림자를 사용한다. 값은 toastRecipe.material이 소유한다. 웹은 지원 환경에서 backdrop blur를 사용하고 투명도 감소 설정에서는 불투명하다. Native 기본 renderer는 추가 blur 의존성 없이 같은 색의 불투명 표면을 사용한다. 실제 배경 흐림 효과로 보고하지 않는다.
54
41
 
55
42
  ## 흐름과 상태
56
43
 
57
- 1. 수정하면 현재 초안의 저장 상태를 해제한다.
58
- 2. 저장 중에는 기존 제출 상태를 유지한다.
59
- 3. 성공한 스냅샷을 확인한 뒤 대상에 맞는 상태를 표시한다. 실패하면 초안을 유지하고 기존 오류 패널을 쓴다.
60
- 성공 후 다시 편집하면 현재 초안의 저장 표시를 해제한다. 목록의 저장된 사본은 그대로 보존한다.
44
+ | 상태 | 표시·행동 |
45
+ | --- | --- |
46
+ | 저장 중 | 기존 제출 상태, 성공 알림 없음 |
47
+ | 성공 | 저장 응답/영속 저장 완료 후 토스트 한 장, polite 낭독 한 번 |
48
+ | 실패 | 입력 보존, 기존 오류·재시도 |
61
49
 
62
- | 상태 | 모습 | 포커스·알림 |
63
- | --- | --- | --- |
64
- | 기본 | 초안 또는 이전 저장 사본 | 새 성공 알림 없음 |
65
- | 진행 중 | 기존 저장 버튼의 busy 상태 | 포커스 유지 |
66
- | 완료 | 토스트 한 장 또는 해당 항목의 status | polite 낭독 한 번 |
67
- | 실패 | 기존 오류 패널, 초안 유지 | 기존 오류 낭독·재시도 유지 |
50
+ 기본 3초이며 긴 요약은 제품에서 시간을 늘린다. 같은 성공을 카드 상태와 토스트로 중복 알리지 않는다. 이전 초안의 늦은 응답을 새 초안의 성공으로 표시하지 않는다.
68
51
 
69
52
  ## 코드 골격
70
53
 
71
- 실행 예제는 [Web](../../../../../showcase/web/src/components/save-feedback-preview.tsx), [Native](../../../../../showcase/native/src/save-feedback-preview.tsx), 공통 문구 fixture는 [shared](../../../../../showcase/shared/save-feedback.ts)를 참조한다. 예제의 `durationMs: null`은 비교용이며 제품 기본 타이머를 바꾸는 규칙이 아니다.
72
-
73
- ```tsx
74
- // Web (Native는 같은 슬롯에 announcement="polite"를 연결한다)
75
- <CompositionLayout title={subject} description={detail}
76
- badge={saved ? <Notice appearance="status" tone="success" title={savedLabel} /> : undefined}
77
- footer={saved ? <Text tone="muted">{savedDescription}</Text> : undefined} />
78
- ```
79
-
80
54
  ```tsx
81
- // Native
82
- <CompositionLayout title={subject} description={detail}
83
- badge={saved ? <Notice appearance="status" tone="success" announcement="polite" title={savedLabel} /> : undefined}
84
- footer={saved ? <Text tone="muted">{savedDescription}</Text> : undefined} />
55
+ // 영속 저장 성공 뒤; Native useToastRegion / Web useToast의 기존 publish.
56
+ toast.publish({ id: "saved", description: savedLabel, tone: "success", closeLabel });
57
+ toast.publish({ id: "saved", title: savedTitle, description: subjectSummary, tone: "success", closeLabel });
85
58
  ```
86
59
 
87
- Native에서는 새 성공에만 `announcement="polite"`를 연결한다. 이미 저장된 목록을 다시 그릴 때는 `none`이다.
88
- Web은 Notice의 `role="status"`와 `aria-live="polite"`를 유지한다. 저장 결과를 없애려고 포커스를 이동하지 않는다.
89
- 현재 초안의 저장 판정은 기존 `resolveSaveFeedback` 계약을 따른다. 이전 초안 저장이 늦게 끝났다고 최신 초안을 저장됨으로 표시하지 않는다.
60
+ 실행 예제: [Web](../../../../../showcase/web/src/components/save-feedback-preview.tsx), [Native](../../../../../showcase/native/src/save-feedback-preview.tsx), [공통 문구](../../../../../showcase/shared/save-feedback.ts). 비교 예제의 durationMs: null은 제품 기본 타이머를 바꾸지 않는다.
90
61
 
91
62
  ## 배포 경계
92
63
 
93
- 개발 소스 연결과 설치 패키지는 별개다. status prop은 1.37.0부터 제공한다. 앱·웹의 소스 채택을 각 제품의 운영 배포 완료로 판단하지 않는다.
64
+ 새 라이트·다크 표면은 1.37.1부터 제공한다. npm 게시·소비 제품의 패키지 갱신·제품 운영 배포를 각각 확인한다.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hjmds/design-contracts",
3
- "version": "1.37.0",
3
+ "version": "1.37.2",
4
4
  "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
5
5
  "license": "MIT",
6
6
  "repository": {