@hjmds/design-contracts 1.50.0 → 2.0.0

package/docs/usage/components/icon-button.md

@@ -80,14 +80,13 @@ import { NotificationBell } from "@hjmds/react-native/notification-bell";
 ### 아이콘 링크 — `IconButtonLink` (2026-10-23, 개발 소스·미게시)
 
 Button에 대한 ButtonLink처럼 IconButton 틀(`tone`·`size`·`shape`·`edge`·`hitSlop`·`layoutStyle`)을 이동 링크에 쓴다.
-토글·로딩·변경 행동은 IconButton에 남는다. `current`는 지금 보고 있는 화면의 진입점이며 선택된 IconButton과 같은 면
-(`iconButtonRecipe.states.selected`)으로 칠하고 Web `aria-current="page"`, Native `accessibilityState.selected`로 알린다.
+토글·로딩·변경 행동은 IconButton에 남는다. `current`는 지금 보고 있는 화면의 진입점이며 선택된 IconButton과 같이 기존 tone의 배경을 유지하고 Web `aria-current="page"`, Native `accessibilityState.selected`로 알린다.
 
 | prop | Web | Native | 기본값 |
 | --- | --- | --- | --- |
 | 목적지 | `href: string` | `destination: LinkDestination` | 필수 |
 | 이름 | `label: string`(접근성 이름, 빈 값이면 `TypeError`) | 같음 | 필수 |
-| `current` | `boolean` → `aria-current="page"` + 선택 면 | `boolean` → `selected` + 선택 면 | `false` |
+| `current` | `boolean` → `aria-current="page"` + 기존 배경 유지 | `boolean` → `selected` + 기존 배경 유지 | `false` |
 | `disabled` | `href`를 지우고 클릭·가운데 클릭을 막는다(ButtonLink와 같다) | 누름을 막는다 | `false` |
 | router 연결 | `renderAnchor(props)` — `ref`·`href`·이름·`aria-current`·차단 핸들러가 담긴 props를 자기 링크에 펼친다 | `onNavigate(destination)` 또는 `renderLink(props)`(TopBarAction `intent="link"`와 같다). 둘 다 없으면 `TypeError` | — |
 
@@ -124,7 +123,7 @@ Client Component에서 연결한다.
 | `size` | `small` 36 · `medium` 44 · `large` 52 | `medium` | `small`은 터치 여백 4 추가. 아이콘 크기는 각각 `sm`·`md`·`lg` |
 | `shape` | `rounded` · `circle` | `rounded` | — |
 | `elevation` | `none` · `raised` · `floating` · `overlay` | `none` | 떠 있는 컨트롤(번뚝 Dock 가운데 버튼)의 그림자 토큰 단계(`iconButtonRecipe.elevation`). `primary`·`secondary`·`danger`만 받고 `ghost`에 주면 `TypeError`. Web은 `--hjm-shadow-<단계>`, Native는 iOS 그림자 + Android elevation. `IconButtonLink`에는 없다(미게시, 2026-10-23) |
-| `selected` | `true` · `false` | — | 주면 토글이 된다(Web `aria-pressed`, Native 접근성 state) |
+| `selected` | `true` · `false` | — | 주면 토글이 된다(Web `aria-pressed`, Native 접근성 state). 선택 전후 tone 배경은 유지한다 |
 | `edge` | `start` · `end` · `both` | — | 버튼이 놓인 컨테이너 가장자리(논리 방향, RTL에서 뒤집힘). `ghost`면 터치 영역은 그대로 두고 그 쪽으로 (보이는 지름 − 아이콘 칸) / 2만큼 내민다(`medium` 10, `small` 8, `large` 12, `resolveIconButtonEdgeOverhang`). 테두리·배경이 있는 tone은 틀이 정렬 기준이라 움직이지 않는다 |
 | `loading` | `true` · `false` | — | 누름을 막고 스피너로 바꾼다. Native는 기본으로 포커스를 유지한다(`disableWhileLoading`으로만 옛 동작) |
 | `loading` 중 `renderLoadingIndicator`(Native) | `(props: { color: string; size: "small" }) => ReactNode` | 기본 스피너 | 스피너를 바꿀 때만 |
@@ -187,8 +186,7 @@ TopBar
   `tone="inverse"`를 준다. 다른 아이콘 라이브러리의 컴포넌트를 직접 넣으면(Native) 색을 제품이 넘겨야 한다.
 - Native `IconButton`의 `style`은 제거되었다. 배치는 `layoutStyle`, 외형은 `tone`·`size`·`shape`로 지정한다.
 
-2026-10-10 사용자 요청: Button과 같은 선택 표현을 쓴다. 선택은 bg 바탕·contentBrand 아이콘으로
-표시하고 추가 선택 테두리는 없다. aria-pressed/Native selected와 키보드 focus outline은 유지한다.
+2026-10-28 사용자 지시: **선택해도 배경색은 바꾸지 않는다.** Button·IconButton·현재 경로인 IconButtonLink는 원래 tone의 배경과 테두리를 유지한다. ghost는 선택 후에도 투명하며 primary·danger는 원래 채움과 대비되는 글자색을 유지한다. 선택은 글자·아이콘의 전경 표현 또는 채운 glyph로 표시한다. Web `aria-pressed`/`aria-current`, Native `accessibilityState.selected`와 키보드 focus outline을 유지한다. 스핀트 꽃 반응 주변에 선택 면이 중복으로 생긴 사례가 계기이며 2026-10-10의 선택 배경 지침을 대체한다. 제품별 접근성 상태 우회나 배경 덮어쓰기를 추가하지 않고 `selected`를 그대로 쓴다.
 
 ## 근거
 
@@ -199,3 +197,5 @@ TopBar
   컴포넌트마다 오프셋을 따로 두지 않고 이 한 규칙과 계약 값으로 맞췄다. Toast 닫기(같은 날 `toastRecipe.close.inlineOverhang`)와 같은 식이다.
 - 도구성 행동은 IconButton: 2026-10-17 사용자 지시 — '나의 기록' 헤더의 새로고침·새 기록 글자 버튼.
 - 선택 표현: 2026-10-10 사용자 요청 — Button과 같은 선택 표현을 쓴다.
+
+공개 recipe 직접 소비 시 `states.selected.background`·`border` 대신 `tones[tone].background`·`border`를 읽는다. 선택 recipe는 전경만 소유한다. 이 recipe 필드 제거는 다음 게시 시 contracts의 major 변경으로 기록하며 컴포넌트의 `selected`·`current` 사용법은 바꾸지 않는다.

package/docs/usage/components/profile-summary.md

@@ -50,7 +50,7 @@ import { ProfileSummary } from '@hjmds/react-native/screen-flows';
 | badge | ReactNode | 없음 | 이름 옆 배지 |
 | nameActions | ReactNode | 없음 | 이름 행의 행동 |
 | nameEdit | `{label,onAction,disabled?,pending?}` | 없음 | 이름 옆 편집(연필) 아이콘 버튼. 내 프로필에서 닉네임 바꾸기를 연다(2026-10-25, 아래 절) |
-| stats | `{id,value,label,onPress?,disabled?}[]` | `[]` | 통계 수치. `onPress`가 있으면 버튼 |
+| stats | `{id,value,label,onPress?,disabled?}[]` | `[]` | 통계 수치. `onPress`가 있으면 버튼. 한 줄 최대 4칸(`profileSummaryRecipe.stats.maxPerRow`), 넘치면 다음 줄로 가고 마지막 줄도 같은 칸 폭이다 |
 | actionsLayout | `inline` · `stacked` · `equal` | `inline` | 가로 보조 행동은 inline 줄바꿈 행, 세로 전체 폭은 stacked, 같은 폭의 가로 행동은 equal(개발 소스) |
 | actions | ReactNode | 없음 | 수치 아래 행동 줄. [ProfileScreen](profile-screen.md) `editPlacement="summary"` 안에서는 그 화면의 `edit`이 이 줄 맨 앞에 `secondary` `small` 버튼(`profileSummaryRecipe.editAction`)으로 먼저 들어간다(1.31.0) |
 | children | ReactNode | 없음 | 하단 footer |
@@ -62,7 +62,7 @@ import { ProfileSummary } from '@hjmds/react-native/screen-flows';
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 원형 아바타 프레임 48. ProfileScreen 수정 행동은 `Button` `secondary` `small` | `profileSummaryRecipe.avatarSize`·`editAction` |
-| 간격 | 수치 칸 사이 `spacing.md` 16, 값·라벨 사이 `spacing.xxs` 4, 행동 사이 `spacing.xs` 8. 영역 간격은 [CompositionLayout](composition-layout.md) | 양 renderer |
+| 간격 | 수치 칸 사이·수치 줄 사이 `spacing.md` 16, 값·라벨 사이 `spacing.xxs` 4, 행동 사이 `spacing.xs` 8. 영역 간격은 [CompositionLayout](composition-layout.md) | 양 renderer |
 | 순서·정렬 | 머리(아바타 → 이름·배지 → nameActions) → 수치 줄 → actions → children, 수치 칸은 균등 폭·가운데 | `CompositionLayout` + `flex: 1` 칸 |
 | 고정·스크롤 | 없음. ProfileScreen 본문 스크롤 안에 놓인다 | — |
 | 좁은 폭·큰 글자 | 수치 칸은 `minWidth: 0`으로 나눠 갖고, 행동 줄은 `wrap` | 양 renderer |

package/docs/usage/components/radio-group.md

@@ -163,3 +163,11 @@ Chip/직접 wrap으로 조립하고 있었다. `presentation="chips"`는 기존
 ### 그림 미리보기와 기본 선택 표시
 
 2026-10-20 다에리 반응 카드 이관: Web도 Native와 같이 `indicator="none"`으로 기본 원형 표시를 숨길 수 있다(로컬·미게시). `renderLabel`의 비상호작용 그림/문구와 공통 카드의 선택 색으로 상태를 나타낼 때 사용한다. 실제 radio·그룹 이름·checked·키보드 선택·비활성 계약은 유지되며, 기본값 `default`는 기존 원형 표시를 유지한다. 제품에서 카드 테두리/눌림/선택 틀을 다시 만들지 않는다.
+
+### 가로 스크롤 카드 (2026-10-28 개발 소스)
+
+오늘야구의 일자 카드 요청으로 `overflow="scroll"`을 Web/Native RadioGroup에 추가했다.
+`presentation="card"` 또는 `"chips"`에서 `grid` 없이 사용하며 기본 `wrap` 동작은 유지한다.
+공통 레일이 가로 스크롤과 선택 항목 노출을 소유한다. 제품은 `renderLabel`로 요일·일자 등
+콘텐츠만 공급한다. 비활성인 선택 날짜도 표시할 수 있다. 조회 실패를 비활성 날짜로 바꾸지 않는다.
+이 API는 아직 게시하지 않은 개발 소스 변경이다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.50.0",
+  "version": "2.0.0",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {