@hjmds/design-contracts 0.8.2

package/docs/floating-action-button.md

@@ -0,0 +1,111 @@
+# FloatingActionButton contract
+
+## 문제
+
+목록·피드처럼 스크롤되는 콘텐츠 위에, 화면 전체 폭을 쓰지 않으면서도 항상 손닿는
+자리에 떠 있는 단일 생성 행동(새 기록 추가, 새 글 작성)이 필요하다. antd
+`FloatButton`이 이 문제를 커버한다.
+
+## BottomCTA와 겹치지 않는다 (판정)
+
+이 시스템에는 이미 화면 하단에 고정된 주요 행동(`bottomCtaRecipe`)이 있다. 둘의
+차이는 이름이 아니라 **콘텐츠와의 관계**다.
+
+| | BottomCTA | FloatingActionButton |
+| --- | --- | --- |
+| 폭 | 화면 전체(`bottomCtaRecipe`에 `paddingHorizontal: layout.pagePadding.regular`) | 콘텐츠 폭과 무관한 고정 크기 원/알약 |
+| 의미 | 그 화면의 **결론** — 이 흐름은 이 행동으로 끝난다 | 아직 브라우징 중인 콘텐츠 **위에 뜬** 생성 행동 — 화면의 결론이 아니다 |
+| 콘텐츠와의 관계 | 콘텐츠 아래 고정된 별도 행(`bottomCtaRecipe.slots`에 `root/description/secondaryAction/primaryAction`) | 콘텐츠 **위에 겹쳐** 뜨고, 콘텐츠 마지막 항목을 가리는 문제가 생긴다(아래 참고) |
+| 스크롤 반응 | 없음 — 위치 고정, 크기 불변 | 스크롤 방향에 따라 확장/축소(아래 참고) |
+
+즉 한 화면에 어느 하나만 있는 경우가 대부분이지만, 원리상 공존도 가능하다(예:
+목록 화면에 "필터 적용" 같은 BottomCTA 결론 행동과 별개로 "새 항목 추가" FAB가
+뜨는 경우). 두 계약을 하나로 합치면 "화면의 결론"과 "콘텐츠 위 생성 행동"이라는
+서로 다른 두 의미를 한 recipe가 떠안게 되므로 분리를 유지한다.
+
+## 일반화한 계약
+
+### Button/IconButton recipe를 재사용한다 — 새 recipe를 얻지 못한다
+
+`floatingActionButtonRecipe`는 새 톤·크기·그림자를 선언하지 않는다.
+
+- `circle`은 `iconButtonRecipe.sizes.large`(diameter 52) 그대로.
+- `tone`은 `iconButtonRecipe.tones.primary` 그대로.
+- `shape`는 `iconButtonRecipe.shapes.circle`(`radius.full`) 그대로.
+- `expandedLabel`은 `buttonRecipe.sizes.large`의 `textVariant`/`paddingHorizontal` 그대로.
+
+두 모드(collapsed/expanded) 모두 `large` 티어를 공유하므로 모양이 원 ↔ 알약으로
+바뀌는 동안 높이(터치 타깃)는 52로 고정된다 — 라벨이 나타나거나 사라질 때 버튼
+전체가 세로로 들썩이지 않는다. `docs/dropdown.md`가 "Menu와 거의 같은 anatomy를
+다시 선언하지 않는다"고 판정한 것과 같은 이유로, 이 모듈도 `Button`의 recipe를
+포크하지 않는다.
+
+### 스크롤에 따른 확장/축소
+
+`FloatingActionButtonScrollSignal`(`away-from-start`/`toward-start`/`idle`)은
+LoadMore의 `viewport` 신호, Popover의 `AnchoredOverlay`와 같은 경계를 따른다 —
+**스크롤 리스너와 임계값 판단은 렌더러 소유**이고, 이 모듈은 이산적인 신호 하나만
+받아 다음 모드를 돌려준다(`resolveFloatingActionButtonLayoutMode`). `idle`은
+"판단할 근거가 없다"는 뜻이므로 현재 모드를 그대로 유지한다 — 델타가 0인 프레임마다
+매번 추측해서 버튼이 깜빡이는 사고를 막는다.
+
+라벨이 숨어도(`collapsed`) 접근성 이름은 줄어들지 않는다.
+`resolveFloatingActionButtonDescriptor`는 두 모드 모두에서
+`resolvedAccessibilityLabel`을 항상 전체 `label`로 고정한다 — 아이콘만 보이는
+상태가 "이름 없는 버튼"이 되는 사고를 타입 차원에서 막는다.
+
+### 콘텐츠 마지막 항목을 가리는 문제 — 여백은 계약이 책임진다
+
+FAB는 콘텐츠 위에 겹쳐 뜨므로, 스크롤 가능한 콘텐츠는 항상 FAB의 발자국만큼 하단
+여백을 예약해야 한다. 이 계산을 Web/RN 렌더러가 각자 다시 하면 어긋날 수 있으므로
+`resolveFloatingActionButtonContentClearance(safeAreaBottomInset)`이 한 곳에서
+`diameter + margin × 2 + safeAreaBottomInset`을 계산해 돌려준다. safe-area
+inset은 BottomNavigation·Sheet·Toast와 같은 **additive** 모드다(base 여백에
+더하지, `max()`로 대체하지 않는다).
+
+### 낭독·탭 순서에서의 자리
+
+FAB는 collection 항목이 아니다. 스크롤 콘텐츠 **뒤**에 오는 고정 sibling으로
+렌더링하고, 콘텐츠 안에 넣지 않는다 — 항목이 추가/삭제되어도 FAB의 낭독·탭 순서
+위치가 흔들리지 않는다. `BottomNavigation`이 "생성 행동은 destination 목록에
+넣지 않고 별도 Button/IconButton으로 합성한다"고 이미 정한 경계와 같은 이유다.
+
+## HJM 기본값
+
+- `layoutMode` 기본값 `expanded` — 첫 진입 시 라벨이 보여야 사용자가 무슨
+  행동인지 먼저 읽는다.
+- 전환은 `motionPreset.micro`(120ms, Reduce Motion에서 즉시 전환)를 쓴다.
+  스크롤마다 반복 트리거될 수 있는 상태 변화이므로, 다른 recipe들의 열기/닫기용
+  `enter`/`exit`(200ms대)보다 hover/press급의 가장 빠른 티어를 골랐다 — 빠른
+  스크롤 뒤로 전환이 밀려 쌓이는 사고를 막는다.
+- `shadow.floating`을 재사용한다 — identity.md의 "floating은 menu·toast" 목록에
+  이름이 명시돼 있지는 않지만, 콘텐츠 위에 실제로 떠 있는 계층이라는 같은
+  조건을 만족하는 유일한 기존 티어다.
+- 모서리 여백은 `spacing.md`(16) — BottomCTA의 화면 폭 여백(`layout.pagePadding`)과
+  다른 스케일이다. FAB는 화면 가장자리에서 안쪽으로 들어온 작은 원이지, 폭 전체
+  콘텐츠 정렬을 따르는 요소가 아니다.
+
+## 플랫폼 번역
+
+- Web: `position: fixed`(또는 스크롤 컨테이너 기준 `sticky`), `aria-label`이
+  항상 전체 `label`(모드 무관). 아이콘은 decorative(`aria-hidden`).
+- Native: 절대 위치 + safe-area 하단 inset을 additive로 적용.
+  `accessibilityLabel` 역시 항상 전체 `label`.
+- Reduce Motion: 모양 tween(원 ↔ 알약) 없이 아이콘/라벨 opacity 교차로 대체.
+
+## 공개한 축 / 배제한 축
+
+| 축 | 상태 |
+| --- | --- |
+| `layoutMode`(expanded/collapsed) | 공개 |
+| 접근성 이름(항상 전체 label) | 공개, 모드와 독립 |
+| 콘텐츠 하단 여백 계산 | 공개(`resolveFloatingActionButtonContentClearance`) |
+| `disabled` | **배제** — 측정된 요구 없음. 생성 행동은 보통 항상 활성 상태다. 필요해지면 그때 연다 |
+| 비동기/로딩 상태 | **배제** — FAB를 누르면 보통 즉시 다음 화면/시트가 열린다. 그 목적지 자체의 비동기 상태는 그 목적지(Dialog/Sheet)의 session이 소유할 몫이지 FAB의 몫이 아니다 |
+| 위치(코너) 커스터마이즈 | **배제** — 측정된 제품 요구가 없다. 기본값(화면 논리적 끝 쪽 하단)만 공개하고, 다른 코너가 필요해지면 그때 연다 |
+| BottomNavigation의 `center-gap` sibling action과의 통합 | **배제** — 그쪽은 이미 별도 Button/IconButton 합성으로 해결된 문제(`docs/architecture.md`)이고, 이 계약이 그 자리를 대신 흡수하지 않는다 |
+
+## 검증 화면
+
+아직 없음. `planned → beta` 승격은 실제 제품 vertical slice 이후 리드가
+진행한다. 유력 후보: Yajalal 마이 플레이어 목록의 "선수 추가".

package/docs/form.md

@@ -0,0 +1,134 @@
+# Form contract
+
+## 문제
+
+antd `Form`은 레이아웃과 상태 관리 라이브러리를 겸합니다(`useForm`, `dependencies`,
+`validateTrigger`, `Form.List`...). HJM에는 런타임이 없으므로 그 표면을 옮길 수 없고,
+옮기려는 시도 자체가 잘못입니다. 실제로 반복되는 사용자 문제는 두 가지뿐입니다.
+
+1. 여러 `Field`를 한 화면에 쌓을 때 라벨·필드·도움말·오류 사이의 리듬이 화면마다
+   제각각이 된다.
+2. 제출은 항상 같은 모양의 실패를 만든다 — 두 번 눌러 두 번 전송되거나, 실패 메시지가
+   어느 필드 것인지 폼 전체 것인지 헷갈리거나, 실패 후 포커스가 아무 데도 가지 않는다.
+
+## 일반화한 계약
+
+Form은 **필드들 사이의 리듬**과 **제출 세션**만 소유합니다. 그 외에는 모두 제품(React
+Hook Form 등)이 소유합니다.
+
+### Field와의 경계
+
+`Field`는 이미 한 필드의 프레임(background/border/상태별 border, label-to-control
+gap, control-to-support-text gap)을 `fieldRecipe`로 소유합니다. `Form`은 그 프레임을
+다시 정의하지 않고, 프레임이 끝난 뒤 **다음 필드까지의 세로 간격**만 `formRecipe`로
+정의합니다. 한 필드 내부의 리듬을 바꾸고 싶다면 그것은 Field의 변경이지 Form의
+prop이 아닙니다.
+
+### 제출 세션
+
+`AlertDialog`가 이미 `idle → busy → error/closing → closed` 세션을 갖고 있습니다.
+Form은 같은 문제(중복 실행 차단, 실패 후 재시도, 정확히 한 번의 정산)를 같은 모양으로
+풀되, 한 가지 실제 차이를 반영합니다 — AlertDialog의 side effect는 한 번 확인하고
+닫히는 것이 목적이지만, Form은 대개 화면에 계속 남아 여러 번 다시 제출됩니다(수정 →
+재시도, 또는 설정 화면을 나중에 다시 저장). 그래서 `succeeded`/`failed`는
+AlertDialog의 `closed`처럼 종결 상태가 아니라 **쉬는 상태**입니다 — 둘 다에서 다시
+`submit()`을 부를 수 있습니다.
+
+```text
+idle ──submit──→ submitting ──resolve──→ succeeded ──submit──→ submitting …
+                      │                                              ↑
+                      └──reject──→ failed ───────submit(retry)───────┘
+submitting 중에는 submit()이 즉시 blocked를 반환하고 onSubmit을 다시 부르지 않는다.
+dispose()가 submitting 중 호출되면 그 attempt는 interrupted로 한 번만 정산된다.
+```
+
+- `submit(values)`는 매 호출마다 자신의 반환 Promise를 **정확히 한 번** 정산합니다.
+  같은 attempt가 실제 handler 성공/실패로 정산되거나, `dispose()`로 `interrupted`로
+  정산되거나 — 둘 중 하나만 일어납니다.
+- `submitting` 중의 모든 `submit()` 호출은 handler를 다시 부르지 않고
+  `{ outcome: "blocked", reason: "already-submitting" }`을 돌려줍니다.
+- `reset()`은 `succeeded`/`failed`처럼 쉬는 상태에서만 `idle`로 되돌리며,
+  `submitting` 중에는 아무것도 바꾸지 않고 `false`를 돌려줍니다(경합 방지).
+- Form은 값을 들고 있지 않습니다. `submit(values)`가 호출될 때마다 그 순간의 값을
+  전달받을 뿐이며, 언제 제출을 시작해도 되는지(dirty/valid 여부)는 제품이 판단합니다.
+
+### 오류 소유권
+
+- **필드 오류**는 각 Field의 `validation`(`valid`/`invalid`) 축이 소유합니다. Form은
+  그 오류 문자열을 복제해서 다시 들지 않습니다.
+- **form-level 오류**(서버 거부, 네트워크)만 Form의 `failed` phase가 `message: string`
+  하나로 소유합니다. `FormSubmitOutcome`의 `failed` variant에는 필드별 매핑이 타입
+  수준에서 아예 존재하지 않습니다 — 같은 사실을 두 곳이 말하게 되는 경로를 원천적으로
+  막습니다.
+- form-level 오류는 기존 Notice `tone="danger"` 계약으로 렌더링합니다. `formRecipe`는
+  그 배치 위치(`fields` 다음, `actions` 이전)만 고정하고 색을 다시 선언하지 않습니다.
+
+### 접근성 — 실패 후 포커스
+
+제출 실패는 두 경로 중 하나입니다.
+
+1. **클라이언트 검증 실패** — 제품의 검증 라이브러리가 애초에 `onSubmit`을 부르지
+   않고 필드별 오류만 남깁니다. Form은 검증을 실행하지 않으므로 어느 필드가 첫
+   오류인지 스스로 알 수 없습니다. 대신 제품이 자신의 필드 렌더 순서와 현재 무효
+   필드 id 집합을 넘기면, `resolveFirstInvalidFieldFocusTarget`이 **렌더 순서상
+   가장 먼저인 무효 필드**를 하나로 정합니다. 이 답을 정하는 규칙만 공용이고, 포커스
+   이동 자체(Web `.focus()`, RN accessibility focus)는 renderer가 실행합니다.
+2. **제출 실패**(서버 거부, 네트워크) — 특정 필드가 없으므로 포커스는 form-level
+   오류 슬롯으로 가고, `formBehaviorDefaults.errorAnnouncementPriority`가
+   `"high"`(Toast가 이미 쓰는 `normal | high` 어휘 재사용)로 assertive 발표를
+   요구합니다.
+
+이 두 경로는 항상 상호 배타적입니다 — 클라이언트 검증이 막았다면 `onSubmit`은 아예
+불리지 않으므로 Form의 `failed` phase도 생기지 않습니다.
+
+## HJM 기본값
+
+- `formDefaults.density = "comfortable"` — `fieldGap`은 comfortable(`spacing.lg`)이
+  compact(`spacing.sm`)보다 넓습니다.
+- anatomy는 `["root", "field", "formError", "actions"]` 순서로 고정이며 prop으로 바꿀
+  수 없습니다 — 로드맵의 "모든 조합을 열어두지 않는다" 원칙을 그대로 따릅니다.
+- `errorAnnouncementPriority = "high"`.
+
+## 플랫폼 번역
+
+- Web: 실패 시 첫 무효 필드에 `.focus()`, form-level 오류는 `role="alert"` 또는
+  동등한 `aria-live="assertive"` 영역으로 발표. `submitting` 중에는 제출 버튼과 모든
+  필드가 `aria-disabled`/`disabled`로 재입력을 막습니다(값은 그대로 보존).
+- React Native: 실패 시 첫 무효 필드로 accessibility focus 이동, form-level 오류는
+  live-region 동등물(`AccessibilityInfo.announceForAccessibility` 또는 동등 API)로
+  발표. `submitting` 중에는 제출 버튼이 `accessibilityState.busy`를 얻습니다.
+
+## 검증 화면
+
+Form은 이제 `beta`입니다. BurnTok Web의
+`apps/web/src/app/ideas/page.tsx`가 실제 2필드 생성 흐름에서 아래 계약을 소비합니다.
+
+- `apps/web/src/lib/form-contract.ts`: `formRecipe` 간격, `createFormSubmitSession`,
+  `resolveFirstInvalidFieldFocusTarget`을 제품 validation과 React lifecycle에 연결합니다.
+- `apps/web/src/app/ideas/page.tsx`: 첫 invalid control에 실제 `.focus()`를 실행하고,
+  field error와 `role="alert"` form-level error를 분리하며 submitting 중 중복 제출을
+  canonical session으로 차단합니다.
+- `apps/web/src/components/ui/AppTextField.tsx`: input/textarea ref를 실제 control까지
+  전달해 focus 계약이 설명에 그치지 않게 합니다.
+
+Web 한 제품의 vertical slice만으로 `stable`을 주장하지 않습니다. Native renderer의
+accessibility focus와 busy 발표 증거가 추가되기 전까지 `beta`를 유지합니다.
+
+## 공개하지 않기로 한 것
+
+- **값 상태 관리** — 어떤 필드가 무엇을 담고 있는지, dirty/touched 여부는 전부 제품
+  또는 React Hook Form이 소유합니다. Form은 `submit(values)`의 인자로만 값을
+  받습니다.
+- **필드 등록·의존성·조건부 필드** — antd의 `Form.Item name`/`dependencies`에 해당하는
+  개념이 없습니다. 어떤 필드가 렌더되는지는 제품의 React 트리가 결정합니다.
+- **validateTrigger 정책** — 언제 검증을 실행할지(`onChange`/`onBlur`/`onSubmit`)는
+  전적으로 제품의 검증 라이브러리 설정입니다.
+- **`Form.List`(반복 필드 그룹)** — 배열 형태의 반복 입력은 별도 문제이며, 현재 어떤
+  실제 화면도 요구하지 않아 임의로 데이터 모델을 만들지 않습니다.
+- **라벨 위치 변형(수평/inline 레이아웃)** — `Field`가 라벨-위·컨트롤-아래 하나의
+  문법만 지원하므로 Form도 antd의 `layout="horizontal"`에 해당하는 변형을 추가하지
+  않습니다. 필요해지면 그것은 먼저 `Field`의 새 변형이어야 합니다.
+- **actions(제출/취소 버튼) 레이아웃** — 버튼 간격·정렬은 기존 Button/Stack의 몫입니다.
+  Stack이 아직 실제 사용 사례 전까지 `planned` 이상으로 승격하지 않은 것과 같은
+  이유로, Form도 actions 슬롯의 위치만 고정하고 그 안의 레이아웃 토큰은 만들지
+  않습니다.

package/docs/generated/component-maturity.md

@@ -0,0 +1,103 @@
+# Component maturity and evidence manifest
+
+> Generated from `@hjmds/design-contracts` 0.8.2. Do not edit this file directly; run `pnpm contracts:sync`.
+
+This document is the human-readable projection of the same catalog and Showcase manifest consumed by product CI.
+
+- Contract: stable 4 · beta 58 · planned 29
+- Web renderer: beta 60 · planned 29 · unsupported 2
+- Native renderer: beta 61 · planned 12 · unsupported 18
+
+| Component | Canonical story ID | Contract | Web | Native | Documentation | Required evidence |
+| --- | --- | --- | --- | --- | --- | --- |
+| Text | `foundation/text` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Icon | `foundation/icon` | beta | beta | beta | [authored](../icon.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Surface | `layout/surface` | stable | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Divider | `layout/divider` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Section | `layout/section` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Stack | `layout/stack` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Grid | `layout/grid` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, platform-parity |
+| Layout | `layout/layout` | beta | beta | beta | [authored](../layout.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Masonry | `layout/masonry` | planned | planned | planned | generated only | contract: contract |
+| Splitter | `layout/splitter` | planned | planned | unsupported | [authored](../splitter.md) | contract: contract |
+| Button | `action/button` | stable | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| IconButton | `action/icon-button` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Link | `action/link` | beta | beta | beta | [authored](../link.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| BottomCTA | `action/bottom-cta` | beta | unsupported | beta | generated only | contract: contract; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| FloatingActionButton | `action/floating-action-button` | planned | planned | planned | [authored](../floating-action-button.md) | contract: contract |
+| Field | `input/field` | stable | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| SearchField | `input/search-field` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| TextArea | `input/text-area` | stable | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| PasswordField | `input/password-field` | beta | beta | beta | [authored](../password-field.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| OtpField | `input/otp-field` | beta | beta | beta | [authored](../otp-field.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Checkbox | `input/checkbox` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Radio | `input/radio` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| CheckboxGroup | `input/checkbox-group` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| RadioGroup | `input/radio-group` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Switch | `input/switch` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Chip | `input/chip` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| SegmentedControl | `input/segmented-control` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Slider | `input/slider` | beta | beta | beta | [authored](../slider.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| NumberField | `input/number-field` | beta | beta | beta | [authored](../number-field.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Select | `input/select` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Combobox | `input/combobox` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| DatePicker | `input/date-picker` | beta | beta | beta | [authored](../date-picker.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| TimePicker | `input/time-picker` | planned | planned | planned | [authored](../time-picker.md) | contract: contract |
+| ColorPicker | `input/color-picker` | planned | planned | unsupported | [authored](../color-picker.md) | contract: contract |
+| FilePicker | `input/file-picker` | beta | beta | beta | [authored](../file-picker.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Cascader | `input/cascader` | planned | planned | planned | [authored](../cascader.md) | contract: contract |
+| Form | `input/form` | beta | beta | beta | [authored](../form.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Mentions | `input/mentions` | planned | planned | planned | [authored](../mentions.md) | contract: contract |
+| Rating | `input/rating` | planned | planned | planned | [authored](../rating.md) | contract: contract |
+| TransferList | `input/transfer-list` | planned | planned | planned | [authored](../transfer-list.md) | contract: contract |
+| TreeSelect | `input/tree-select` | planned | planned | unsupported | [authored](../tree-select.md) | contract: contract |
+| UploadItem | `data-display/upload-item` | beta | beta | beta | [authored](../upload-item.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Tabs | `navigation/tabs` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| TopBar | `navigation/top-bar` | beta | unsupported | beta | generated only | contract: contract; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| BottomNavigation | `navigation/bottom-navigation` | beta | beta | beta | [authored](../bottom-navigation.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Breadcrumb | `navigation/breadcrumb` | planned | planned | unsupported | [authored](../breadcrumb.md) | contract: contract |
+| Pagination | `navigation/pagination` | planned | planned | unsupported | [authored](../pagination.md) | contract: contract |
+| LoadMore | `navigation/load-more` | beta | beta | beta | [authored](../load-more.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Steps | `navigation/steps` | beta | beta | beta | [authored](../steps.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Menu | `navigation/menu` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Anchor | `navigation/anchor` | planned | planned | unsupported | [authored](../anchor.md) | contract: contract |
+| Avatar | `data-display/avatar` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Badge | `data-display/badge` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| CounterBadge | `data-display/counter-badge` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Card | `data-display/card` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| List | `data-display/list` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| ListRow | `data-display/list-row` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| VirtualList | `data-display/virtual-list` | planned | planned | planned | [authored](../virtual-list.md) | contract: contract |
+| Accordion | `data-display/accordion` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| Statistic | `data-display/statistic` | beta | beta | beta | [authored](../statistic.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Timeline | `data-display/timeline` | beta | beta | beta | [authored](../timeline.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| DataTable | `data-display/data-table` | planned | planned | unsupported | [authored](../data-table.md) | contract: contract |
+| Tree | `data-display/tree` | planned | planned | unsupported | [authored](../tree.md) | contract: contract |
+| Calendar | `data-display/calendar` | planned | planned | planned | [authored](../calendar.md) | contract: contract |
+| Carousel | `data-display/carousel` | planned | planned | planned | [authored](../carousel.md) | contract: contract |
+| DescriptionList | `data-display/description-list` | beta | beta | beta | [authored](../description-list.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Image | `data-display/image` | beta | beta | beta | [authored](../image.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| QRCode | `data-display/qrcode` | planned | planned | planned | [authored](../qr-code.md) | contract: contract |
+| Tag | `data-display/tag` | beta | beta | beta | [authored](../tag.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Tour | `overlay/tour` | planned | planned | unsupported | [authored](../tour.md) | contract: contract |
+| EmptyState | `feedback/empty-state` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Notice | `feedback/notice` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Progress | `feedback/progress` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Spinner | `feedback/spinner` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Skeleton | `feedback/skeleton` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Result | `feedback/result` | beta | beta | beta | [authored](../result.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Toast | `feedback/toast` | beta | beta | beta | [authored](../toast.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Watermark | `feedback/watermark` | planned | planned | unsupported | [authored](../watermark.md) | contract: contract |
+| Dialog | `overlay/dialog` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| AlertDialog | `overlay/alert-dialog` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| Sheet | `overlay/sheet` | beta | beta | beta | generated only | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard, platform-parity |
+| SidePanel | `overlay/side-panel` | planned | planned | unsupported | [authored](../side-panel.md) | contract: contract |
+| Popover | `overlay/popover` | planned | planned | unsupported | [authored](../popover.md) | contract: contract |
+| ConfirmPopover | `overlay/confirm-popover` | planned | planned | unsupported | [authored](../confirm-popover.md) | contract: contract |
+| Tooltip | `overlay/tooltip` | beta | beta | unsupported | [authored](../tooltip.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility, keyboard |
+| CommandPalette | `overlay/command-palette` | planned | planned | unsupported | [authored](../command-palette.md) | contract: contract |
+| Affix | `utility/affix` | planned | planned | unsupported | [authored](../affix.md) | contract: contract |
+| AppProvider | `provider/app-provider` | planned | planned | planned | [authored](../app-provider.md) | contract: contract |
+| BorderBeam | `utility/border-beam` | planned | planned | unsupported | [authored](../border-beam.md) | contract: contract |
+| DesignSystemProvider | `provider/design-system-provider` | beta | beta | beta | [authored](../design-system-provider.md) | contract: contract; web: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility; native: default, dark, long-copy, large-text, rtl, reduced-motion, accessibility |
+| Utility | `utility/utility` | planned | planned | unsupported | [authored](../utility.md) | contract: contract |