@neurocle/synapse-react 0.0.0-bootstrap

package/skills/components/menu/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: 'menu'
+description: 'Menu — trigger나 오른쪽 클릭으로 여는 명령 목록으로, 하나를 고르면 그 명령이 실행되고 목록이 닫힙니다. 하나의 machine이 두 제스처를 모두 뒷받침하며, 드롭다운과 컨텍스트 메뉴는 제품이 어떤 part를 렌더링하는지만 다릅니다. machine이 제공하는 세 번째 패턴인 중첩 하위 메뉴는 현재 렌더링할 수 없습니다. 아래에 기록된 부재를 참고하세요. 다른 이름: menu, dropdown menu, context menu, right-click menu, actions menu, overflow menu, kebab menu, 메뉴, 드롭다운 메뉴, 컨텍스트 메뉴, 우클릭 메뉴, 더보기 메뉴, 케밥 메뉴.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/menu.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/menu.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Menu
+
+> trigger나 오른쪽 클릭으로 여는 명령 목록으로, 하나를 고르면 그 명령이 실행되고 목록이 닫힙니다. 하나의 machine이 두 제스처를 모두 뒷받침하며, 드롭다운과 컨텍스트 메뉴는 제품이 어떤 part를 렌더링하는지만 다릅니다. machine이 제공하는 세 번째 패턴인 중첩 하위 메뉴는 현재 렌더링할 수 없습니다. 아래에 기록된 부재를 참고하세요.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Menu`
+- 분류: `floating-and-overlay`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 3개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### WCAG 2.2 SC 1.4.11 비텍스트 대비 (AA)
+
+- 대상 part: `item`
+- 충족하지 못하는 것: Menu의 강조된 항목은 `secondary.default` 배경만으로 표시되며, overlay 배경 대비 1.16:1(밝은 테마), 1.46:1(어두운 테마)로 3:1에 못 미칩니다. 포인터와 키보드 모두 링을 그리지 않습니다.
+- 의도한 이유: 모든 강조 행에 링을 그리면 시스템의 다른 어떤 hover보다 무겁게 보였습니다. 포커스는 목록에 머물고 강조된 항목은 `aria-activedescendant`로 보조 기술에 전달되며, 선택된 항목은 파란 글자와 체크 표시로 따로 구분됩니다. `contrast-pairs.json`에 `highlight` 용도로 기록되어 있습니다.
+- 사용 시 유의점: 저시력 사용자에게 강조 위치가 잘 보이지 않을 수 있습니다. 접근성 감사 대상 제품이라면 이 예외를 감사 문서에 포함하세요. 항목을 직접 그릴 때는 선택 상태의 글자색과 체크 표시를 지워 강조와 선택을 같은 모양으로 만들지 마세요.
+
+### WAI-ARIA APG 메뉴 버튼 패턴 — Tab 키
+
+- 충족하지 못하는 것: Tab이 열린 content 안에 갇힙니다. APG는 Tab이 메뉴를 닫고 포커스를 다음 요소로 옮기기를 권장하지만, 이 메뉴는 닫히지도 포커스가 밖으로 나가지도 않습니다.
+- 의도한 이유: 업스트림 machine의 동작이며, machine 밖에서 키 처리를 덧붙이는 것은 금지되어 있으므로 그대로 둡니다.
+- 사용 시 유의점: 키보드 사용자는 Escape로 메뉴를 닫아야 합니다. content 안에 포커스 가능한 요소를 넣지 마세요. 넣으면 그 요소들 사이를 순환하며 양 끝에서 막힙니다.
+
+### 알려진 결함 — 중첩 메뉴와 체크 항목
+
+- 대상 part: `triggerItem`
+- 충족하지 못하는 것: `Menu.TriggerItem`은 렌더링하는 순간 예외를 던지므로 하위 메뉴를 만들 수 없고, ArrowRight·ArrowLeft 하위 메뉴 키도 아무 일을 하지 않습니다. `menuitemcheckbox`·`menuitemradio` 항목도 렌더링하지 않습니다.
+- 의도한 이유: machine의 `getTriggerItemProps(childApi)`는 하위 메뉴의 api를 위치 인자로 받는데 part 팩토리가 그 형태를 지원하지 않습니다. 체크 항목의 getter는 anatomy 키가 없어 part가 될 수 없습니다. 둘 다 기반 계층의 결함으로 기록되어 있습니다.
+- 사용 시 유의점: `Menu.Root`를 다른 Menu 안에 중첩하지 마세요. 동작하지 않는 두 번째 메뉴가 생깁니다. 하위 메뉴나 체크할 수 있는 메뉴가 필요하면 다른 컨트롤(예: Popover 안의 Checkbox·RadioGroup)로 구성하세요.
+
+## Do
+
+> trigger가 속한 대상에 대한 짧은 동작 목록에 쓰세요. 이름 바꾸기, 복제, 삭제, 내보내기가 그렇습니다. 동작이 버튼이 아니라 영역에 속한다면 ContextTrigger 방식을 쓰고, 둘 다가 아니라 둘 중 하나만 렌더링하세요. 같은 machine이므로 전환하는 데 드는 비용은 구성 변경뿐입니다. 관련 명령은 ItemGroup으로 묶고 그룹마다 레이블을 주세요. 접근 가능한 이름이 없는 그룹은 이름 없는 그룹으로 안내되어, 얻는 시각적 구분선보다 치르는 비용이 더 큽니다.
+
+## Don't
+
+> 값을 고르는 데 쓰지 마세요. menuitem은 선택 상태도 폼 값도 없는 명령으로 안내되므로, 하나를 고른 사용자는 지금 무엇이 적용되어 있는지 알 수 없습니다. 그것은 Select이거나, 선택지가 적다면 RadioGroup입니다. 사이트 내비게이션에도 쓰지 마세요. NavigationMenu는 랜드마크이고 그 링크는 aria-current를 지니는데, 링크로 이루어진 메뉴는 이를 버립니다. 길거나 검색이 필요한 목록에도 쓰지 마세요. 여기에는 컬렉션도, 윈도잉도, 입력해서 거르는 방법도 없으므로, 대략 한 화면을 넘는 메뉴는 아무도 탐색할 수 없는 스크롤이 됩니다. 그리고 현재 이 컴포넌트로 중첩 메뉴를 계획하지 마세요. TriggerItem이 렌더링되지 않으므로 하위 메뉴는 그냥 존재하지 않게 됩니다.
+
+## Anti-patterns
+
+> 항목 안에 두 번째 `Menu.Root`를 중첩해 하위 메뉴를 만드는 것. part는 타입 검사를 통과하고 바깥 메뉴도 계속 동작하므로 거의 맞아 보이지만, 두 machine은 서로를 전혀 알지 못합니다. 안쪽 메뉴는 바깥 메뉴와 함께 닫히지 않고, 바깥 메뉴는 안쪽 content를 바깥 상호작용으로 여겨 스스로 닫히며, 화살표 키 탐색은 경계에서 멈춥니다. 이 중첩은 없는 TriggerItem의 우회책이 아니라 두 번째로 망가진 메뉴입니다. 기반 결함이 고쳐질 때까지는 평평한 메뉴나 Dialog를 제공하세요.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Select` (`select`)
+- `NavigationMenu` (`navigation-menu`)
+- `Popover` (`popover`)
+- `ToggleGroup` (`toggle-group`)
+- `Dialog` (`dialog`)
+
+## 가져오기
+
+```tsx
+import { Menu } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 15개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Menu.Root>
+  <Menu.ContextTrigger />
+  <Menu.Positioner>
+    <Menu.Content>
+      <Menu.Arrow>
+        <Menu.ArrowTip />
+      </Menu.Arrow>
+      <Menu.ItemGroup>
+        <Menu.Item>
+          <Menu.ItemIndicator />
+          <Menu.ItemText />
+        </Menu.Item>
+        <Menu.ItemGroupLabel />
+      </Menu.ItemGroup>
+      <Menu.Separator />
+      <Menu.TriggerItem />
+    </Menu.Content>
+  </Menu.Positioner>
+  <Menu.Trigger>
+    <Menu.Indicator />
+  </Menu.Trigger>
+</Menu.Root>
+```
+
+- `Menu.Root`
+- `Menu.Arrow` — `Content` 안에 놓입니다
+- `Menu.ArrowTip` — `Arrow` 안에 놓입니다
+- `Menu.Content` — `Positioner` 안에 놓입니다
+- `Menu.ContextTrigger` — 최상위에 놓입니다
+- `Menu.Indicator` — `Trigger` 안에 놓입니다
+- `Menu.Item` — `ItemGroup` 안, 또는 `Content` 안에 놓입니다
+- `Menu.ItemGroup` — `Content` 안에 놓입니다
+- `Menu.ItemGroupLabel` — `ItemGroup` 안에 놓입니다
+- `Menu.ItemIndicator` — `Item` 안에 놓입니다
+- `Menu.ItemText` — `Item` 안에 놓입니다
+- `Menu.Positioner` — 최상위에 놓입니다
+- `Menu.Separator` — `Content` 안에 놓입니다
+- `Menu.Trigger` — 최상위에 놓입니다
+- `Menu.TriggerItem` — `Content` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 17개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `open` — `boolean`, 선택. 제어되는 열림 상태.
+- `defaultOpen` — `boolean`, 선택. 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다.
+- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 메뉴가 열리거나 닫힐 때마다 호출됩니다.
+- `onValueChange` — `(details: ValueChangeDetails<string>) => void`, 선택. 아이템이 선택됐을 때 그 아이템의 `value`와 함께 호출됩니다. machine은 이 prop을 `onSelect`라 부르는데, 어휘는 그것을 단 하나뿐인 변경 콜백의 경쟁 표기로 보고 거부합니다(`COMPETING_NAMES`). 변환은 이음매의 machine 쪽인 `useMachineProps`에서 일어나므로, 사용처는 이름 하나만 익히면 됩니다.
+- `highlightedValue` — `string | null`, 선택. 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다.
+- `defaultHighlightedValue` — `string | null`, 선택. 비제어 모드에서 처음 하이라이트되는 아이템.
+- `onHighlightChange` — `(details: MenuHighlightChangeDetails) => void`, 선택. 하이라이트가 옮겨 갈 때 호출됩니다.
+- `closeOnSelect` — `boolean`, 선택. 아이템이 선택되면 메뉴를 닫습니다. 기본값은 true입니다.
+- `loopFocus` — `boolean`, 선택. 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다.
+- `typeahead` — `boolean`, 선택. 레이블을 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다.
+- `composite` — `boolean`, 선택. 내용을 아이템이 복합 자식인 `menu`로 알립니다. 기본값은 true입니다. 복합이 아닌 메뉴는 `dialog`로 알려지며, 임의의 내용을 담은 메뉴에 씁니다.
+- `positioning` — `MenuPositioning`, 선택. 메뉴가 trigger를 기준으로 놓이는 위치.
+- `anchorPoint` — `MenuAnchorPoint`, 선택. trigger가 아니라 한 지점에 메뉴를 붙입니다. 컨텍스트 메뉴는 이렇게 자리를 잡습니다.
+- `'aria-label'` — `string`, 선택. 어떤 trigger도 이름을 주지 않을 때 쓰는 메뉴의 접근성 이름.
+- `translations` — `TranslationOverrides`, 선택. 이 Menu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size는 trigger의 최소 높이, 각 항목의 글자와 인라인 패딩, content 자체의 패딩, 두 아이콘의 크기를 조절합니다. 메뉴의 너비는 정하지 않습니다. 메뉴는 가장 긴 레이블만큼 넓으며, 이는 다섯 단계 척도가 아니라 content가 정할 일입니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. `onValueChange`는 어떤 명령이 선택되었는지 알리는데, 이는 필드가 아니라 동작입니다. 제출될 값을 고르는 데 쓰는 메뉴라면 그것은 Select입니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 명령이 없는 메뉴는 렌더링하지 말았어야 할 trigger입니다. 항목은 이 컴포넌트가 불러오는 컬렉션이 아니라 제품이 작성하는 JSX이므로, 이 조건은 Menu가 존재하기 전에 결정됩니다. 아무것도 없는 곳으로 열리는 빈 팝업은 trigger가 없거나 비활성화된 것보다 나쁩니다.
+- `loading-state` — 여기서는 아무것도 로드되지 않습니다. 명령은 자식으로 작성되므로 렌더링 시점에 이미 알려져 있으며, 명령 목록이 가져오기에 의존하는 제품은 trigger를 렌더링할지 결정하기 전에 그 가져오기를 끝냅니다.
+- `error-state` — 항목을 고르면 `onValueChange`로 제품에 알릴 뿐입니다. 그 명령이 무엇을 하든, 무엇을 잘못하든, 그것은 메뉴가 이미 닫힌 뒤에 일어납니다. 실패는 더는 화면에 없는 팝업이 아니라 명령을 실행한 표면, 곧 Toast, 폼 필드, 페이지에 속합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> content는 aria-labelledby를 통해 trigger에서 이름을 얻거나, 기준점이 설정되면 ContextTrigger에서 얻습니다. `Menu.Root`는 `aria-label`도 받으며 machine이 이를 content에 기록합니다. 이름 계산은 aria-labelledby를 우선하므로, 이 prop은 영역에 자체 텍스트가 없는 컨텍스트 메뉴를 위한 대체 수단입니다. 모든 항목은 자신의 내용으로 이름을 얻습니다. 이 machine은 영어 문자열을 하나도 하드코딩하지 않고 `translations`도 받지 않으므로, 제품이 바꿀 수 없는 이름을 내보내는 것이 없습니다. 이번 묶음의 컴포넌트 중에서는 규칙이 아니라 예외입니다.
+
+### 포커스
+
+> content는 tabIndex=0을 지니고 machine이 열릴 때 여기에 포커스를 주며, DOM 포커스를 항목마다 옮기는 대신 aria-activedescendant로 활성 항목을 가리킵니다. 닫히면 포커스가 trigger로 돌아오며, Escape로 닫을 때와 포커스 가능한 것에 닿지 않은 바깥 클릭으로 닫을 때도 마찬가지입니다.
+
+### 알려진 빈틈
+
+> `Menu.TriggerItem`은 렌더링할 수 없습니다. `@zag-js/menu`는 `getTriggerItemProps(childApi)`를 연결하는데, 이 함수는 하위 메뉴의 연결된 api를 위치 인자로 받습니다. 반면 part 팩토리가 지원하는 getter 인자 형태는 선언된 prop으로 만든 옵션 객체뿐이므로, 무언가가 이 part를 렌더링하는 즉시 getter가 예외를 던집니다. 그 이음매가 있다 해도 하위 메뉴는 마운트 시점에 `parentApi.setChild`와 `childApi.setParent`가 필요한데, Root는 자신을 감싸는 Root의 machine에 연결할 방법이 없습니다. 결과를 분명히 말하면, Synapse는 현재 중첩 메뉴를 제공하지 않으며, 이 part는 하네스 픽스처에 커버할 수 없는 것으로 기록되어 있고, 해결책은 이 컴포넌트가 할 수 있는 무언가가 아니라 `tools/vocabulary-check/src/exceptions.ts`의 기반 결함 `trigger-item-takes-a-child-api`입니다.
+
+### 렌더링하지 않는 getter
+
+> `getOptionItemProps`는 `menuitemcheckbox`나 `menuitemradio`를 만들지만 anatomy 키가 없으므로, part는 anatomy와 같아야 한다는 규칙을 깨지 않고는 part가 될 수 없습니다. `menu.tsx`에서 의도적인 결정으로 렌더링하지 않는다고 선언되어 있습니다. 현재 체크할 수 있는 메뉴가 필요한 제품은 다른 컨트롤을 써야 합니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 배치는 논리적이어서 `bottom-start`가 텍스트 방향을 따르고, 화살표 키 탐색은 `dir`에 맞춰 해석되므로 오른쪽에서 왼쪽으로 쓰는 제품에서는 ArrowRight와 ArrowLeft의 의미가 뒤바뀝니다. 타입어헤드는 제품이 제공하는 항목 레이블, 곧 해당 로케일의 레이블과 대조합니다.
+- 컬렉션 윈도잉: 아니요. Menu에는 컬렉션이 전혀 없습니다. 모든 항목은 사용처가 작성하는 요소이며, machine은 DOM을 질의해 그것들을 찾습니다. 윈도잉이 필요할 만큼 긴 메뉴는 명령 목록으로 잘못 이름 붙은 리스트박스이며, `whenNotToUse`가 짚는 실수가 바로 그것입니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `command-list`, `context-menu`, `grouped-options`, `typeahead`, `floating-layer`, `translatable-strings`.
+- 다른 이름: `menu`, `dropdown menu`, `context menu`, `right-click menu`, `actions menu`, `overflow menu`, `kebab menu`, `메뉴`, `드롭다운 메뉴`, `컨텍스트 메뉴`, `우클릭 메뉴`, `더보기 메뉴`, `케밥 메뉴`.
+- 어휘 상태: `controlled`.

package/skills/components/navigation-menu/SKILL.md

@@ -0,0 +1,172 @@
+---
+name: 'navigation-menu'
+description: "NavigationMenu — 최상위 항목이 hover나 클릭으로 링크 패널을 여는 내비게이션 랜드마크입니다. 이번 묶음의 floating 컴포넌트 중 machine에 `root` anatomy part가 있는 유일한 것이어서 Root가 렌더링되며, `nav`로 렌더링됩니다. '내비게이션으로 건너뛰기'가 애초에 동작하게 하는 것이 바로 내비게이션 랜드마크이기 때문입니다. 다른 이름: navigation menu, nav menu, mega menu, main nav, header navigation, site menu, 내비게이션 메뉴, 내비 메뉴, 메가 메뉴, 주 내비게이션, 헤더 메뉴, 사이트 메뉴."
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/navigation-menu.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/navigation-menu.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# NavigationMenu
+
+> 최상위 항목이 hover나 클릭으로 링크 패널을 여는 내비게이션 랜드마크입니다. 이번 묶음의 floating 컴포넌트 중 machine에 `root` anatomy part가 있는 유일한 것이어서 Root가 렌더링되며, `nav`로 렌더링됩니다. '내비게이션으로 건너뛰기'가 애초에 동작하게 하는 것이 바로 내비게이션 랜드마크이기 때문입니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `NavigationMenu`
+- 분류: `floating-and-overlay`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### WCAG 2.2 SC 2.1.1 키보드 (A)
+
+- 충족하지 못하는 것: 공유 viewport를 쓰면 열린 trigger에서 Tab으로 그 패널 안에 들어가지 못합니다. 화살표 키와 포인터로는 여전히 조작할 수 있습니다.
+- 의도한 이유: trigger에서 viewport로 포커스를 넘기는 프록시 요소(`getTriggerProxyProps`, `getViewportProxyProps`)는 인자를 받는 getter라 현재 팩토리로 렌더링할 수 없습니다. 기반 계층의 결함입니다.
+- 사용 시 유의점: 키보드 사용자가 Tab으로 패널에 닿아야 한다면 공유 viewport 대신 항목별 패널을 쓰세요. 항목별 패널은 이 결함의 영향을 받지 않습니다.
+
+## Do
+
+> 사이트나 애플리케이션 셸의 주 내비게이션으로, 최상위 섹션이 곧바로 이동하지 않고 링크 패널을 여는 경우에 쓰세요. 사용자가 있는 페이지의 링크에 `current`를 전달하세요. 이것은 aria-current=page가 되며, 스크린 리더 사용자에게 자신이 이미 어디에 있는지 알려 주는 유일한 수단입니다. 모든 패널이 크기 사이를 애니메이션하는 하나의 상자를 차지해야 한다면 공유 Viewport를 쓰고, 패널이 작다면 각 Content를 자신의 Item 안에 렌더링하세요. 후자는 위에 기록된 탭 순서 공백도 피합니다.
+
+## Don't
+
+> 명령에는 쓰지 마세요. 항목은 내비게이션 랜드마크 안의 링크이므로, 이름을 바꾸고 삭제하는 버튼들의 패널은 어딘가로 이동하는 내비게이션으로 안내되는데, 실제로 일어나는 일과 정반대입니다. 그것은 Menu입니다. 임의 콘텐츠를 여닫는 단일 영역에도 쓰지 마세요. trigger 하나와 패널 하나는 Popover이며, 이를 `nav`로 감싸면 랜드마크 목록을 어지럽히는 랜드마크가 하나 늘어납니다. 콘텐츠가 페이지에 그대로 있는 페이지 내 섹션 전환에도 쓰지 마세요. 그것은 Tabs이며, 그 tablist와 패널은 내비게이션 메뉴에는 없는 관계를 지닙니다. 그리고 터치와 동등해지리라 기대하며 `disableHoverTrigger`를 끄지 마세요. hover로 여는 것은 포인터 어포던스이며, 터치 사용자가 얻는 것은 클릭 경로입니다.
+
+## Anti-patterns
+
+> Trigger를 List 안의 Item 안이 아니라 List의 형제로 렌더링하는 것. machine은 목록 요소를 기준으로 한 DOM 질의로 trigger를 찾은 다음 첫 번째 trigger의 `dir`을 검사 없이 읽습니다. 그래서 바깥에 놓인 trigger는 그저 무시되는 데 그치지 않고, 아무도 망가뜨리지 않은 컴포넌트의 이펙트 안에서 처리되지 않은 TypeError를 일으킵니다. HTML만으로는 이 중첩을 요구하지 않기 때문에, 하네스는 이를 machine이 부과하는 중첩 규칙으로 고정해 둡니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Menu` (`menu`)
+- `Tabs` (`tabs`)
+- `Popover` (`popover`)
+- `Toc` (`toc`)
+- `HoverCard` (`hover-card`)
+
+## 가져오기
+
+```tsx
+import { NavigationMenu } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 11개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<NavigationMenu.Root>
+  <NavigationMenu.ViewportPositioner>
+    <NavigationMenu.Viewport />
+  </NavigationMenu.ViewportPositioner>
+  <NavigationMenu.List>
+    <NavigationMenu.Item>
+      <NavigationMenu.Trigger>
+        <NavigationMenu.ItemIndicator />
+      </NavigationMenu.Trigger>
+      <NavigationMenu.Content>
+        <NavigationMenu.Link />
+      </NavigationMenu.Content>
+    </NavigationMenu.Item>
+  </NavigationMenu.List>
+  <NavigationMenu.Indicator>
+    <NavigationMenu.Arrow />
+  </NavigationMenu.Indicator>
+</NavigationMenu.Root>
+```
+
+- `NavigationMenu.Root` — 최상위에 놓입니다
+- `NavigationMenu.ViewportPositioner` — `Root` 안에 놓입니다
+- `NavigationMenu.Viewport` — `ViewportPositioner` 안에 놓입니다
+- `NavigationMenu.Trigger` — `Item` 안에 놓입니다
+- `NavigationMenu.Content` — `Item` 안, 또는 `Viewport` 안에 놓입니다
+- `NavigationMenu.List` — `Root` 안에 놓입니다
+- `NavigationMenu.Item` — `List` 안에 놓입니다
+- `NavigationMenu.Link` — `Content` 안, 또는 `Item` 안에 놓입니다
+- `NavigationMenu.Indicator` — `Root` 안에 놓입니다
+- `NavigationMenu.ItemIndicator` — `Trigger` 안에 놓입니다
+- `NavigationMenu.Arrow` — `Indicator` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 13개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `string | null`, 선택. 제어되는 열린 아이템. 내용이 보이는 아이템의 `value`이거나 null입니다.
+- `defaultValue` — `string | null`, 선택. 비제어 모드에서 처음 열려 있는 아이템. `value`를 주면 무시됩니다.
+- `onValueChange` — `(details: ValueChangeDetails<string | null>) => void`, 선택. 제어 여부와 무관하게 열린 아이템이 바뀔 때마다 호출됩니다.
+- `orientation` — `Orientation`, 선택. 메뉴가 배치되는 축. 기본값은 `horizontal`입니다.
+- `openDelay` — `number`, 선택. 포인터가 trigger 위에 머물러야 그 내용이 열리기까지의 시간(밀리초).
+- `closeDelay` — `number`, 선택. 포인터가 벗어난 뒤 내용이 닫히기까지의 시간(밀리초).
+- `disableClickTrigger` — `boolean`, 선택. trigger의 클릭을 사용처에 맡깁니다. trigger가 링크를 겸할 때 씁니다.
+- `disableHoverTrigger` — `boolean`, 선택. hover가 아니라 클릭으로만 내용을 엽니다.
+- `disablePointerLeaveClose` — `boolean`, 선택. 포인터가 내용을 벗어나도 계속 열어 둡니다.
+- `'aria-label'` — `string`, 선택. 내비게이션 랜드마크의 접근성 이름입니다. machine prop이 아니라 `nav` 요소에 붙는 DOM 속성입니다. machine 자체의 `rootLabel`은 기본값이 `undefined`라 덮어쓸 것도, 번역할 것도 없습니다. 한 페이지에 내비게이션 랜드마크가 둘 있는 제품은 둘을 구별하기 위해 이 값이 필요합니다.
+- `translations` — `TranslationOverrides`, 선택. 이 NavigationMenu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size는 trigger와 링크의 높이, 그 글자와 인라인 패딩, content의 패딩과 링크 사이 간격, 셰브론의 크기를 조절합니다. viewport의 너비는 척도에 없습니다. 메뉴 패널은 그 안에 담긴 레이아웃만큼 넓으며, 이는 다섯 단계 토큰이 아니라 제품의 구성에 속합니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. `value`는 어떤 패널이 열려 있는지를 나타내며, 이는 필드가 아니라 보기 상태입니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 내비게이션 구조는 JSX로 작성되어 빌드 시점에 알려집니다. 이 컴포넌트가 가져오는 데이터가 아니라 사이트 자체의 지도입니다. 아무것도 없는 내비게이션 랜드마크는 제품이 렌더링하지 말았어야 할 `nav`이며, 그 결정은 이 컴포넌트보다 위에서 내려집니다.
+- `loading-state` — 여기서는 아무것도 로드되지 않습니다. content 패널은 첫 렌더링부터 존재하는 자식이며 machine은 그것을 보이거나 숨길 뿐이므로, 패널이 닫힌 것이 아니라 대기 중인 구간이 없습니다.
+- `error-state` — Link를 따라가면 이동은 브라우저의 일이므로, 실패는 사용자가 이미 떠난 메뉴가 아니라 도착 페이지에서 일어납니다. 이 컴포넌트가 화면에 있는 동안 수행하는 작업 중 실패할 수 있는 것은 없습니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 랜드마크의 이름은 사용처가 `NavigationMenu.Root`에 준 `aria-label`이며, 이는 누락이 아니라 결정입니다. machine의 `translations.rootLabel` 기본값이 `undefined`이므로 영어 문자열이 전혀 실려 나가지 않고, 제품이 덮어쓸 수 없는 것도 없습니다. "Navigation" 같은 기본값을 두면 Synapse가 제품의 랜드마크에 이름을 붙이는 셈이 되고, 누락을 드러내 두는 대신 감추게 됩니다. 내비게이션 랜드마크가 둘인 페이지는 이 prop으로 둘을 구분해야 합니다. 각 content 패널은 자신의 trigger로, 각 링크는 자신의 텍스트로 이름을 얻습니다.
+
+### 포커스
+
+> 포커스는 처음부터 끝까지 실제 DOM 포커스이며, 여기에는 aria-activedescendant가 없습니다. trigger는 방향에 맞는 진입 키로 포커스를 자신의 content로 옮기고, content 자체의 키 처리가 안의 탭 가능한 요소들을 거친 뒤 포커스를 다시 밖으로 넘깁니다.
+
+### 알려진 빈틈
+
+> 공유 viewport로 들어가는 키보드 다리는 렌더링할 수 없습니다. `api.getTriggerProxyProps({ value })`와 `api.getViewportProxyProps({ value })`는 trigger에서 공유 viewport의 content로 포커스를 옮겨 주는, 항목마다 하나씩 있는 시각적으로 숨긴 요소입니다. 둘 다 anatomy 키가 없고 인자를 받는 반면, `rootOwnedGetters`는 getter를 인자 없이 호출해 정확히 하나의 요소를 렌더링합니다. 둘 다 `navigation-menu.tsx`에 렌더링하지 않는다고 선언되어 있습니다. 그 비용은 이렇습니다. 공유 viewport에서는 열린 trigger에서 앞으로 탭해도 그 trigger의 패널 안에 닿지 않습니다. 메뉴는 화살표 키와 포인터로 여전히 완전히 조작할 수 있으며, 각 패널을 자신의 Item 안에 렌더링하는 메뉴, 곧 흔한 레이아웃은 영향을 받지 않습니다. 프록시는 공유 viewport가 만드는 틈을 잇기 위해서만 존재하기 때문입니다. 기반 결함 `root-owned-getter-cannot-render-per-item`으로 `tools/vocabulary-check/src/exceptions.ts`에 기록되어 있으며, 여기서 우회하지 않고 중앙에서 바로잡습니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. trigger에서 content로 포커스를 옮기는 키는 방향에 따라 다릅니다. 왼쪽에서 오른쪽으로 쓰는 제품에서는 ArrowRight, 오른쪽에서 왼쪽으로 쓰는 제품에서는 ArrowLeft이며, 목록을 따라가는 화살표 키 이동도 `dir`에 맞춰 해석됩니다. viewport는 논리적 레이아웃을 따르는 trigger의 측정된 상자를 기준으로 위치가 정해집니다.
+- 컬렉션 윈도잉: 아니요. 컬렉션이 없습니다. 모든 항목, trigger, content 패널, 링크는 사용처가 작성하는 요소이며, machine은 DOM의 목록 요소를 질의해 trigger를 찾습니다. 그래서 List 바깥에 렌더링된 trigger는 machine이 볼 수 없는 trigger가 됩니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `site-navigation`, `mega-menu`, `hover-disclosure`, `current-page`, `floating-layer`, `axis-orientation`, `translatable-strings`.
+- 다른 이름: `navigation menu`, `nav menu`, `mega menu`, `main nav`, `header navigation`, `site menu`, `내비게이션 메뉴`, `내비 메뉴`, `메가 메뉴`, `주 내비게이션`, `헤더 메뉴`, `사이트 메뉴`.
+- 어휘 상태: `controlled`.

package/skills/components/number-input/SKILL.md

@@ -0,0 +1,177 @@
+---
+name: 'number-input'
+description: 'NumberInput — 스테퍼가 달린 숫자 필드로, provider의 로케일에 따라 서식화하고 파싱하므로 소수점과 자릿수 구분 기호가 사용자가 입력하는 것과 일치합니다. 다른 이름: number input, spinner, stepper, quantity field, numeric field, 숫자 입력, 숫자 필드, 스피너, 스테퍼, 수량 입력.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/number-input.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/number-input.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# NumberInput
+
+> 스테퍼가 달린 숫자 필드로, provider의 로케일에 따라 서식화하고 파싱하므로 소수점과 자릿수 구분 기호가 사용자가 입력하는 것과 일치합니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `NumberInput`
+- 분류: `form-controls`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### WCAG 2.2 SC 2.5.8 대상 크기(최소) (AA)
+
+- 대상 part: `incrementTrigger`, `decrementTrigger`
+- 충족하지 못하는 것: 두 스테퍼가 위아래로 쌓여 각각 컨트롤 높이의 절반이 되므로, `xl`을 제외한 모든 크기에서 높이가 24px보다 작습니다(약 12·14·16·20px). 둘 다 `tabIndex=-1`입니다.
+- 의도한 이유: SC 2.5.8의 동등 대안 예외에 기댑니다. 입력 자체가 대상 크기를 충족하고, 입력이나 화살표 키로 모든 값에 닿을 수 있습니다.
+- 사용 시 유의점: 스테퍼를 유일한 조작 수단으로 만들지 마세요(예: 입력을 `readOnly`로 두고 스테퍼만 쓰게 하는 것). 터치 비중이 높은 화면에서는 큰 크기를 쓰세요.
+
+## Do
+
+> 사용자가 입력하거나 조금씩 조정하는 숫자에 쓰세요. 수량, 가격, 기간, 임곗값이 그렇습니다. 스테퍼는 작은 조정을 쉽게 만들고, 서식화는 사용자가 구분 기호를 직접 넣지 않아도 긴 숫자를 읽기 쉽게 유지합니다.
+
+## Don't
+
+> 정확한 수치보다 값들 사이의 관계가 더 중요한, 좁고 한정된 범위에서 고르는 숫자에는 쓰지 마세요. 그것은 Slider이며, spinbutton은 가운데를 찾으려고 사용자에게 계산을 시킵니다. 코드, 전화번호, 연도에도 쓰지 마세요. 이들은 숫자처럼 보일 뿐인 숫자 문자열이며, 자릿수 구분 기호로 서식화하는 것은 명백히 잘못입니다. 값에 올리고 내릴 자연스러운 단위가 없는 곳에도 쓰지 마세요.
+
+## Anti-patterns
+
+> `locale` prop을 전달하는 것. 로케일은 방향과 똑같이 SynapseProvider에서 옵니다. 한 번 설정한 제품이 어떤 컴포넌트에 또 알려 줘야 하는지 기억할 필요가 없어야 하기 때문이며, 하나의 사실에 출처가 둘이면 필드가 한 로케일로 서식화하고 다른 로케일로 파싱하는 일이 생깁니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Slider` (`slider`)
+- `PinInput` (`pin-input`)
+- `Editable` (`editable`)
+
+## 가져오기
+
+```tsx
+import { NumberInput } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 8개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<NumberInput.Root>
+  <NumberInput.Label />
+  <NumberInput.Control>
+    <NumberInput.Input />
+    <NumberInput.IncrementTrigger />
+    <NumberInput.DecrementTrigger />
+  </NumberInput.Control>
+  <NumberInput.ValueText />
+  <NumberInput.Scrubber />
+</NumberInput.Root>
+```
+
+- `NumberInput.Root` — 최상위에 놓입니다
+- `NumberInput.Label` — `Root` 안에 놓입니다
+- `NumberInput.Input` — `Control` 안, 또는 `Root` 안에 놓입니다
+- `NumberInput.Control` — `Root` 안에 놓입니다
+- `NumberInput.ValueText` — `Root` 안에 놓입니다
+- `NumberInput.IncrementTrigger` — `Control` 안에 놓입니다
+- `NumberInput.DecrementTrigger` — `Control` 안에 놓입니다
+- `NumberInput.Scrubber` — `Root` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 26개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `string`, 선택. 제어되는 값이며 문자열입니다. 파싱된 숫자가 아니라 입력이 담고 있는 텍스트 그대로입니다.
+- `defaultValue` — `string`, 선택. 비제어 모드의 초기 값. `value`를 주면 무시됩니다.
+- `onValueChange` — `(details: NumberInputValueChangeDetails) => void`, 선택. 값을 바꾸는 모든 키 입력마다 호출됩니다.
+- `onValueCommit` — `(details: NumberInputValueChangeDetails) => void`, 선택. 값이 가라앉은 뒤 호출됩니다. 블러, Enter, 또는 길게 누르기가 끝나는 시점입니다.
+- `onValueInvalid` — `(details: { readonly value: string; }) => void`, 선택. `min`/`max` 바깥의 값이 입력됐을 때 호출됩니다.
+- `min` — `number`, 선택. 받아들이는 가장 낮은 값.
+- `max` — `number`, 선택. 받아들이는 가장 높은 값.
+- `step` — `number`, 선택. 화살표 키와 스테퍼의 단위. 기본값은 1입니다.
+- `largeStep` — `number`, 선택. PageUp/PageDown의 단위. 기본값은 열 스텝입니다.
+- `smallStep` — `number`, 선택. Shift+화살표의 단위. 기본값은 한 스텝의 10분의 1입니다.
+- `formatOptions` — `NumberFormatOptions`, 선택. 로케일이 정하는 것 너머로 숫자를 쓰는 방식입니다. 형태는 `Intl.NumberFormatOptions`와 같고, 주지 않으면 입력한 소수 자릿수를 모두 유지합니다.
+- `locale` — `string`, 선택. 이 필드에만 provider의 로케일을 덮어씁니다. 한 화면에 정말로 둘 이상의 로케일이 함께 나오는 제품을 위한 것입니다. 이를테면 다른 언어로 된 텍스트 옆에 통화를 그 시장의 서식대로 입력받는 경우입니다. 그 밖의 모든 경우에는 `SynapseProvider`에서 로케일을 한 번만 정해야 합니다.
+- `clampValueOnBlur` — `boolean`, 선택. 블러 시 범위를 벗어난 값을 `min`..`max` 안으로 되돌립니다. 기본값은 true입니다.
+- `allowOverflow` — `boolean`, 선택. 값이 잘리기 전까지는 `min`/`max`를 넘겨 입력하는 것을 허용합니다.
+- `allowMouseWheel` — `boolean`, 선택. 입력에 포커스가 있는 동안 스크롤 휠로 값을 올리고 내립니다. 기본값은 false입니다.
+- `spinOnPress` — `boolean`, 선택. 스테퍼를 누르고 있는 동안 스텝을 반복합니다. 기본값은 true입니다.
+- `inputMode` — `'text' | 'tel' | 'numeric' | 'decimal' | 'search' | 'none'`, 선택. 요청할 가상 키보드. 기본값은 `decimal`입니다.
+- `name` — `string`, 선택. 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다.
+- `form` — `string`, 선택. 폼 바깥에 렌더된 입력을 id로 그 폼에 연결합니다.
+- `disabled` — `boolean`, 선택. 비활성화된 NumberInput은 제출하지도, 반응하지도 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 NumberInput은 값을 제출하지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알립니다.
+- `required` — `boolean`, 선택. 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다.
+- `translations` — `TranslationOverrides`, 선택. 이 NumberInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 예.
+
+- `input[role=spinbutton]`으로 제출합니다.
+- 제출 값은 `value`에서 옵니다.
+- 항목은 사용처가 아무것도 설정하지 않았을 때 제출되는 값을 기록하지 않습니다.
+
+> 보이는 입력이 곧 폼 컨트롤입니다. `getInputProps()`가 `name`과 `form`을 지니므로 제출만을 위해 렌더링되는 것이 없고, 그런 요소를 보조 기술에서 숨겨야 한다는 규칙은 여기서 적용될 대상이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 컬렉션이 아니라 값 하나를 보유하므로, 비어 있을 수 있는 집합이 없습니다. 값이 없는 필드는 placeholder를 보여 주는 필드이며, 이는 컴포넌트의 part가 아니라 입력의 한 상태입니다.
+- `loading-state` — 아직 도착하지 않은 값은 비활성화된 NumberInput에 주변 페이지가 이미 쓰는 스켈레톤을 더해 표현하세요. 로딩 part를 두면 비활성 상태와 겹쳐, 하나의 조건을 표현하는 방법이 두 가지가 됩니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 보고되고 aria-invalid로 안내되며, min..max 범위 밖의 값이 입력되면 `onValueInvalid`가 호출됩니다. 범위를 설명하는 문장은 주변 필드에 속합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> htmlFor로 연결된 실제 `<label>`인 Label part에서 이름을 얻습니다. 스테퍼는 machine에 내장된 영어가 아니라 provider의 번역 가능한 문자열 집합에서 이름을 얻습니다.
+
+### 포커스
+
+> 입력이 유일한 탭 정지 지점입니다. 두 스테퍼는 machine 자체의 결정으로 `tabIndex={-1}`인데, 화살표 키가 이미 그 일을 하므로 필드마다 탭 정지 지점 두 개를 더해도 새로운 기능이 생기지 않기 때문입니다. 스테퍼는 위아래로 쌓여 있어 각각 컨트롤 높이의 절반이며, `xl`을 제외한 모든 크기에서 `target.minimum`보다 작습니다. 이는 WCAG 2.5.8의 동등 대안 예외에 기대는데, 입력 자체가 대상 크기를 충족하고 입력이나 화살표 키로 모든 값에 닿을 수 있기 때문입니다.
+
+### 로케일
+
+> 구분 기호는 provider의 로케일이 정하며, 표시뿐 아니라 파싱도 좌우합니다. 잘못된 로케일을 받은 필드는 그 로케일 사용자가 입력하는 키 입력을 조용히 거부합니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 구분 기호는 provider의 로케일이 정하며, 표시뿐 아니라 파싱도 좌우합니다. 잘못된 로케일을 받은 필드는 그 로케일 사용자가 입력하는 키 입력을 조용히 거부합니다. 한 로케일로 서식화하고 다른 로케일로 파싱한 값은 표시 차이가 아니라 필드가 받아들이기를 거부하는 숫자입니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `numeric-entry`, `increment-decrement`, `stepped-value`, `locale-formatting`, `locale-parsing`, `form-value`, `readonly-display`, `translatable-strings`.
+- 다른 이름: `number input`, `spinner`, `stepper`, `quantity field`, `numeric field`, `숫자 입력`, `숫자 필드`, `스피너`, `스테퍼`, `수량 입력`.
+- 어휘 상태: `controlled`.