@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/skills/components/button/SKILL.md

@@ -0,0 +1,122 @@
+---
+name: 'button'
+description: 'Button — 눌러서 동작 하나를 실행하는 기본 컨트롤입니다. 네이티브 `<button>`을 렌더링하며, 모양(`variant`)과 성격(`tone`)으로 한 화면 안의 주된 동작과 되돌릴 수 없는 동작을 구별합니다. 다른 이름: button, action button, icon button, submit button, CTA, 버튼, 아이콘 버튼, 제출 버튼, 액션 버튼.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/button.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/button.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Button
+
+> 눌러서 동작 하나를 실행하는 기본 컨트롤입니다. 네이티브 `<button>`을 렌더링하며, 모양(`variant`)과 성격(`tone`)으로 한 화면 안의 주된 동작과 되돌릴 수 없는 동작을 구별합니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Button`
+- 분류: `form-controls`
+- 수명 주기: `active`
+
+## Do
+
+> 사용자가 눌러서 동작 하나를 바로 실행하게 할 때 쓰세요 — 저장, 제출, 대화상자 열기, 삭제처럼. 한 화면의 주된 동작 하나만 `variant="solid"`로 두고 나머지는 `outline`이나 `ghost`로 물러나게 해서, 어느 버튼이 다음 단계인지 모양만 보고 알 수 있게 하세요. 아이콘만 있는 버튼은 자식으로 svg 하나와 `aria-label`을 주면 크기 척도의 컨트롤 치수를 가진 정사각형이 됩니다. IconButton을 따로 두지 않는 것은 의도된 결정입니다.
+
+## Don't
+
+> 켜져 있거나 꺼져 있는 모드를 전환하는 데 쓰지 마세요 — 눌린 상태를 aria-pressed로 알리는 것은 Toggle입니다. 다른 페이지로 이동하는 데 `<button>`을 쓰지 마세요. 이동은 링크여야 하므로 `asChild`로 `<a>`를 렌더링해 버튼 모양만 입히세요. `tone="danger"`는 되돌릴 수 없는 동작에만 쓰며, 그 동작은 보통 `alertdialog` 역할의 Dialog로 한 번 더 확인받습니다. 동작 여러 개를 버튼으로 줄지어 늘어놓는 대신 한 trigger 뒤에 모아야 한다면 Menu를 쓰세요.
+
+## Anti-patterns
+
+> 비활성화한 이유를 버튼에 붙은 툴팁으로만 설명하는 것. 비활성화된 Button은 탭 순서에서 빠지므로 키보드 사용자는 그 버튼에 도달해 이유를 읽을 수 없습니다 — 이유는 버튼 바깥의 보이는 텍스트로 두세요. 한 화면에 `solid` 버튼을 여러 개 두는 것도 같은 부류의 실수입니다. 모두가 주된 동작이면 어느 것도 주된 동작이 아닙니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Toggle` (`toggle`)
+- `Menu` (`menu`)
+- `Dialog` (`dialog`)
+
+## 가져오기
+
+```tsx
+import { Button } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Button.Root />
+```
+
+- `Button.Root` — 최상위에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 4개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `variant` — `ButtonVariant`, 선택. 채움의 모양. 한 화면의 주된 동작 하나만 `solid`로 두고 나머지는 `outline`이나 `ghost`로 물러나게 합니다. `soft`는 상태 색으로 물든 알림 안의 동작처럼, 주변 표면의 톤을 따라가는 버튼에 씁니다. 기본값은 `solid`입니다.
+- `tone` — `ButtonTone`, 선택. 동작의 성격. `danger`는 되돌릴 수 없는 동작에만 쓰고, `success`, `info`, `warning`은 같은 상태를 알리는 맥락 안의 동작에 씁니다. 기본값은 `primary`입니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `disabled` — `boolean`, 선택. 비활성화된 Button은 반응하지 않습니다. `asChild`로 링크를 렌더하면 탭 순서에서 빠지고 활성화가 막힙니다.
+
+## Variants
+
+- `variant` — `solid`, `outline`, `ghost`, `soft`. 기본값은 `solid`.
+- `tone` — `primary`, `neutral`, `danger`, `success`, `info`, `warning`. 기본값은 `primary`.
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 기본 `type`이 `button`이라 스스로 폼을 제출하지 않고, 보관하는 값도 없습니다. 사용처가 `type="submit"`을 주면 폼의 제출자가 되며, 그때 준 `name`과 `value`는 이 버튼으로 제출했을 때만 FormData에 들어갑니다. 값을 가진 컨트롤로서 참여하는 것이 아니라 제출을 일으키는 쪽으로만 참여합니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — Button은 값도 컬렉션도 갖지 않으므로 비어 있을 수 있는 것이 없습니다. 레이블이 없는 버튼은 빈 상태가 아니라 접근 가능한 이름이 빠진 결함입니다.
+- `loading-state` — 진행 중인 동작은 사용처가 `disabled`와 `aria-busy`, 그리고 스피너 같은 자식을 조합해 표현합니다. Button이 로딩 상태를 따로 가지면 누를 수 없음을 나타내는 두 번째 방식이 생기고, 둘 중 하나만 갱신되는 순간부터 두 방식이 어긋납니다.
+- `error-state` — Button은 검증할 값이 없고 `invalid` prop도 없습니다. 실패하는 것은 버튼이 촉발한 동작이며, 그 실패는 동작의 결과가 나타나는 곳 — 폼 필드나 인라인 알림 — 에서 알립니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 버튼의 텍스트 콘텐츠입니다. 아이콘만 있는 버튼은 svg가 이름을 주지 않으므로 `aria-label`이 반드시 있어야 하며, 정사각형 모양도 `aria-label`과 svg 하나뿐인 자식이 함께 있을 때만 적용됩니다. 이름이 없는 아이콘 버튼은 모양부터 어긋나 보입니다.
+
+### 포커스
+
+> root가 유일하게 포커스 가능한 요소이며 탭 순서에 들어갑니다. `disabled`이면 네이티브 `disabled`와 함께 aria-disabled="true", data-disabled, tabIndex=-1을 받고 클릭이 삼켜지므로, `asChild`로 렌더링한 링크도 탭 순서에서 빠지고 활성화되지 않습니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `trigger-action`, `toolbar-control`.
+- 다른 이름: `button`, `action button`, `icon button`, `submit button`, `CTA`, `버튼`, `아이콘 버튼`, `제출 버튼`, `액션 버튼`.
+- 어휘 상태: `controlled`.

package/skills/components/card/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: 'card'
+description: 'Card — 제목, 설명, 본문, 동작을 하나의 올라온 표면에 묶어 목록이나 격자의 한 단위로 보여 주는 컨테이너입니다. 제목의 제목 수준은 강제하지 않으며 사용처가 `asChild`로 알맞은 제목 요소를 고릅니다. 다른 이름: card, panel, tile, box, container, 카드, 패널, 타일.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/card.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/card.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Card
+
+> 제목, 설명, 본문, 동작을 하나의 올라온 표면에 묶어 목록이나 격자의 한 단위로 보여 주는 컨테이너입니다. 제목의 제목 수준은 강제하지 않으며 사용처가 `asChild`로 알맞은 제목 요소를 고릅니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Card`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 하나의 대상(모델, 데이터셋, 실험 결과)을 제목, 요약, 동작과 함께 한 덩어리로 보여 줄 때 쓰세요. 같은 모양의 카드를 목록이나 격자로 나란히 놓아 비교하게 하세요.
+
+## Don't
+
+> 페이지의 구획을 나누려고 모든 영역을 카드로 감싸지 마세요 — 구획은 제목과 간격, 필요하면 Separator로 나누세요. 펼치고 접는 영역은 Collapsible이나 Accordion이고, 떠 있는 내용은 Popover나 Dialog입니다.
+
+## Anti-patterns
+
+> 카드 전체를 `onClick`이 달린 `<div>`로 만드는 것. 키보드로 도달할 수 없고 이름도 없습니다. 누를 수 있는 카드는 제목의 링크 하나로 이동하게 하세요. 카드 안에 카드를 겹치는 것도 같은 부류입니다 — 표면이 두 겹이 되어 무엇이 한 단위인지 흐려집니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Separator` (`separator`)
+- `Collapsible` (`collapsible`)
+- `Dialog` (`dialog`)
+
+## 가져오기
+
+```tsx
+import { Card } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 6개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Card.Root>
+  <Card.Header>
+    <Card.Title />
+    <Card.Description />
+  </Card.Header>
+  <Card.Body />
+  <Card.Footer />
+</Card.Root>
+```
+
+- `Card.Root` — 최상위에 놓입니다
+- `Card.Header` — `Root` 안에 놓입니다
+- `Card.Title` — `Header` 안, 또는 `Root` 안에 놓입니다
+- `Card.Description` — `Header` 안, 또는 `Root` 안에 놓입니다
+- `Card.Body` — `Root` 안에 놓입니다
+- `Card.Footer` — `Root` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `id` — `string`, 선택. 카드 전체의 식별자. 서버와 클라이언트에서 같습니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 폼 안에 놓여도 내용을 보여 주는 요소일 뿐입니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `size-axis` — 카드의 크기는 담긴 내용과 놓인 격자가 정합니다. 여백과 제목 크기를 xs부터 xl까지 바꾸는 척도는 카드가 아니라 안쪽 컨트롤의 몫입니다.
+- `empty-state` — 카드는 사용처가 넣은 내용을 담는 틀이라 스스로 비어 있을 수 없습니다. 목록이 비었다는 사실은 카드가 아니라 EmptyState로 알립니다.
+- `loading-state` — 카드는 아무것도 불러오지 않습니다. 내용을 불러오는 동안은 안쪽을 Skeleton으로 채웁니다.
+- `error-state` — 카드 자신은 실패할 동작이 없습니다. 내용의 오류는 안쪽에 Alert로 알립니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 이름이 따로 없습니다. 의미가 필요하면 사용처가 `<article aria-labelledby>`로 제목을 이름으로 잇습니다.
+
+### 포커스
+
+> 카드 자체는 포커스를 받지 않습니다. 카드 전체를 누를 수 있게 하려면 제목 안의 링크 하나만 포커스를 받게 하고 영역을 넓히며, 카드를 버튼으로 만들지 마세요.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `content-card`, `grouped-content`.
+- 다른 이름: `card`, `panel`, `tile`, `box`, `container`, `카드`, `패널`, `타일`.
+- 어휘 상태: `controlled`.

package/skills/components/carousel/SKILL.md

@@ -0,0 +1,176 @@
+---
+name: 'carousel'
+description: 'Carousel — 스냅 지점을 가진 스크롤러로, 버튼, 인디케이터 점, 드래그, 그리고 선택적으로 타이머가 구동합니다. 슬라이드는 사용처의 children이며, 컴포넌트는 개수와 페이지를 보관하고 스냅 지점이 놓일 위치를 결정하는 CSS 사용자 정의 속성을 기록합니다. 다른 이름: carousel, slider, slideshow, gallery, image slider, swiper, 캐러셀, 슬라이더, 슬라이드쇼, 이미지 슬라이더.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/carousel.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/carousel.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Carousel
+
+> 스냅 지점을 가진 스크롤러로, 버튼, 인디케이터 점, 드래그, 그리고 선택적으로 타이머가 구동합니다. 슬라이드는 사용처의 children이며, 컴포넌트는 개수와 페이지를 보관하고 스냅 지점이 놓일 위치를 결정하는 CSS 사용자 정의 속성을 기록합니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Carousel`
+- 분류: `collection-data-entry`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### 국제화 — 번역할 수 없는 문자열
+
+- 대상 part: `progressText`
+- 충족하지 못하는 것: 진행 텍스트가 `3 / 8` 형태로 고정되며 번역 키가 없습니다.
+- 의도한 이유: 단어가 없는 보이는 텍스트이므로, 아무도 요청하지 않은 키를 만들지 않고 그대로 둡니다.
+- 사용 시 유의점: 로케일마다 다른 표기(예: "8개 중 3번째")가 필요하면 진행 텍스트 part를 쓰지 않고 제품이 직접 렌더링하세요.
+
+## Do
+
+> 사용자가 비교하기보다 훑어보는, 같은 종류의 대등한 콘텐츠 — 상품 사진, 순환하는 고객 후기, 뷰포트보다 넓은 카드 선반. 항목들이 동등하고 한꺼번에 모두 보는 것이 목적이 아닐 때 제 몫을 합니다. 페이지가 둘 이상이면 언제나 인디케이터 점을 렌더링하세요. 점은 얼마나 많은지와 사용자가 어디에 있는지를 말해주는 유일한 part이며, 점이 없는 캐러셀은 자신의 범위를 숨깁니다. `slidesPerPage`와 `slidesPerMove: "auto"`를 함께 쓰면 제품이 흔히 원하는 선반 동작을 얻습니다.
+
+## Don't
+
+> 반드시 읽혀야 하는 콘텐츠에는 쓰지 마세요 — 중요한 메시지를 순환하는 배너는 사용자가 다 읽기 전에 넘어가 버리고, 기다리거나 점을 찾아 헤매는 것 말고는 되돌아갈 방법이 없어 놓치게 됩니다. 긴 목록을 페이지로 나누는 데 쓰지 마세요. 모든 슬라이드가 마운트되고 컬렉션도 윈도잉도 없으므로 항목 백 개는 살아 있는 요소 백 개이며, 이럴 때는 Pagination이나 가상화된 목록이 맞는 도구입니다. 단계별 흐름으로 쓰지 마세요 — Steps는 어떤 단계가 끝났고 어떤 단계가 현재인지 알지만, 캐러셀은 "Slide 3 of 8"이라고만 말합니다. 그리고 사용자가 조치해야 하는 것에는 자동 재생을 켜지 마세요. machine이 hover, 포커스, 동작 줄이기 설정에서 일시 정지하여 문제를 완화하지만, 그렇다고 움직이는 콘텐츠가 결정을 놓아둘 좋은 자리가 되지는 않습니다.
+
+## Anti-patterns
+
+> 슬라이드 사이 간격을 `spacing` prop 대신 레시피나 래퍼의 CSS로 설정하는 것. machine은 `--slide-spacing`으로부터 `--slide-item-size`를 계산하므로, 간격을 다른 곳에서 스타일링하면 스냅 지점이 슬라이드가 더 이상 갖지 않은 너비를 기준으로 계산된 채 남습니다. 그러면 캐러셀은 매 페이지마다 몇 픽셀씩 어긋나게 멈추고, 페이지가 많을수록 더 멀리 벗어납니다. 이번 묶음에서 공개 인터페이스에 리터럴 CSS 길이를 두는 것이 토큰 규율의 실패가 아니라 올바른 답인 유일한 컴포넌트이며 — 이는 색상이나 모서리가 아니라 길이이므로, 테마로 바꿀 수 있는 무언가가 새어 나가는 것도 아닙니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Pagination` (`pagination`)
+- `Marquee` (`marquee`)
+- `Tabs` (`tabs`)
+- `ScrollArea` (`scroll-area`)
+- `Steps` (`steps`)
+
+## 가져오기
+
+```tsx
+import { Carousel } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Carousel.Root>
+  <Carousel.ItemGroup>
+    <Carousel.Item />
+  </Carousel.ItemGroup>
+  <Carousel.Control>
+    <Carousel.NextTrigger />
+    <Carousel.PrevTrigger />
+    <Carousel.AutoplayTrigger />
+    <Carousel.ProgressText />
+  </Carousel.Control>
+  <Carousel.IndicatorGroup>
+    <Carousel.Indicator />
+  </Carousel.IndicatorGroup>
+</Carousel.Root>
+```
+
+- `Carousel.Root` — 최상위에 놓입니다
+- `Carousel.ItemGroup` — `Root` 안에 놓입니다
+- `Carousel.Item` — `ItemGroup` 안에 놓입니다
+- `Carousel.Control` — `Root` 안에 놓입니다
+- `Carousel.NextTrigger` — `Control` 안에 놓입니다
+- `Carousel.PrevTrigger` — `Control` 안에 놓입니다
+- `Carousel.IndicatorGroup` — `Root` 안에 놓입니다
+- `Carousel.Indicator` — `IndicatorGroup` 안에 놓입니다
+- `Carousel.AutoplayTrigger` — `Control` 안에 놓입니다
+- `Carousel.ProgressText` — `Control` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 20개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+### 필수
+
+- `slideCount` — `number`, 필수. 슬라이드가 몇 개인지. 컴포넌트는 슬라이드를 쥐지 않고 이 개수를 쥡니다.
+
+### 선택
+
+- `page` — `number`, 선택. 제어되는 현재 페이지이며, 0부터 세요.
+- `defaultPage` — `number`, 선택. 비제어 초기 페이지. `page`가 주어지면 무시됩니다.
+- `onPageChange` — `(details: CarouselPageChangeDetails) => void`, 선택. 제어 여부와 무관하게 페이지가 바뀔 때마다 알림을 받습니다.
+- `slidesPerPage` — `number`, 선택. 한 번에 보이는 슬라이드 수. 기본값은 1입니다.
+- `slidesPerMove` — `number | 'auto'`, 선택. 한 단계에 움직이는 슬라이드 수이며, `'auto'`는 한 페이지를 통째로 움직입니다.
+- `spacing` — `string`, 선택. 슬라이드 사이의 간격이며, CSS 길이입니다. 토큰이 아니라 길이인 이유는 machine이 이 값으로 스냅 지점을 계산하기 때문입니다. 제품 자신의 여백 척도에서 값을 가져와 넘기면 됩니다.
+- `padding` — `string`, 선택. 첫 슬라이드 앞과 마지막 슬라이드 뒤의 여백이며, CSS 길이입니다.
+- `orientation` — `Orientation`, 선택. 슬라이드가 스크롤되는 축. 기본값은 `horizontal`입니다.
+- `loop` — `boolean`, 선택. 양 끝을 넘어가면 반대편으로 이어집니다.
+- `autoplay` — `boolean | { readonly delay: number; }`, 선택. 자동으로 넘깁니다. 숫자를 주면 밀리초 단위의 지연 시간이 됩니다.
+- `onAutoplayStatusChange` — `(details: CarouselAutoplayStatusDetails) => void`, 선택. 원인이 무엇이든 자동 넘김이 시작되거나 멈출 때 알림을 받습니다.
+- `allowMouseDrag` — `boolean`, 선택. 터치에서 이미 되는 것처럼 마우스로도 드래그할 수 있게 합니다.
+- `onDragStatusChange` — `(details: CarouselDragStatusDetails) => void`, 선택. 드래그가 시작되거나 끝날 때 알림을 받습니다.
+- `inViewThreshold` — `number | number[]`, 선택. 슬라이드가 보이는 것으로 치려면 얼마만큼 노출되어야 하는지.
+- `snapType` — `CarouselSnapType`, 선택. 스크롤러가 얼마나 단단히 자리 잡는지. 기본값은 `mandatory`입니다.
+- `autoSize` — `boolean`, 선택. 각 슬라이드의 크기를 페이지가 아니라 자기 콘텐츠에 맞춥니다.
+- `translations` — `TranslationOverrides`, 선택. 이 Carousel에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size는 세 개의 trigger 버튼과 진행 텍스트 — 슬라이드를 둘러싼 크롬 — 의 크기를 조절합니다. 슬라이드에는 의도적으로 손대지 않습니다. 슬라이드의 간격과 끝 여백은 `spacing`과 `padding` prop인데, machine이 이를 `--slide-spacing`과 스냅 지점의 위치를 결정하는 `--slide-item-size` 계산에 기록하기 때문입니다. 레시피가 자체 간격을 선언하면 간격과 스냅 지점이 서로 다른 곳에 놓여, 캐러셀이 매 페이지마다 몇 픽셀씩 어긋나게 멈춥니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 페이지는 어떤 슬라이드가 화면에 있는지를 나타내는 뷰 상태이며, 이를 영속해야 하는 제품은 `page`와 `onPageChange`로 직접 보관합니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — `slideCount`가 0이면 넘길 것이 없다는 뜻이며, 아무것도 없는 캐러셀은 모든 컨트롤이 아무 일도 하지 않는 틀일 뿐입니다. 사진이 없는 항목에 갤러리를 렌더링하지 않기로 하는 것과 같은 방식으로, 제품이 이를 렌더링하지 않기로 결정합니다.
+- `loading-state` — 슬라이드는 이 컴포넌트가 렌더링될 때 이미 존재하는 children입니다. 흔히 로드되는 것은 슬라이드 안의 이미지이며, 스켈레톤은 스크롤러 전체 위가 아니라 그곳에 있어야 합니다. 루트의 로딩 상태는 컨트롤과 사용자가 추적하고 있는 위치를 지워버립니다.
+- `error-state` — 스냅 지점으로의 스크롤은 실패할 수 없고, 여기에는 거부될 요청도 없습니다. 이미지 로드에 실패한 슬라이드는 그 실패를 슬라이드 안에서 보여주며, 실패한 요소도 사용자가 보고 있는 요소도 바로 그 슬라이드입니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 두 단계 버튼과 자동 재생 버튼은 provider의 번역 세트에서 이름을 얻습니다. 점별·슬라이드별 이름 — `indicator(index)`와 `item(index, count)` — 은 machine이 호출하는 함수이므로 `machineTranslations`로 표현할 수 없고, 거기에 문자열을 넘기면 예외가 발생합니다. 그래서 대신 `useMachineProps`에서 `carousel.indicator.label`과 `carousel.item.label`에 맞춰 해석합니다. machine은 슬라이드 번호를 0부터 세지만 사람은 그렇지 않으므로, `+ 1`은 machine이 아니라 번역이 담당합니다.
+
+### 포커스
+
+> 페이지가 바뀌어도 machine은 포커스를 어디로도 옮기지 않습니다 — 눌린 컨트롤이 포커스를 유지하며, 덕분에 사용자가 다음 버튼을 반복해서 누를 수 있습니다. Synapse는 포인터가 캐러셀 위에 있거나 포커스가 그 안에 있는 동안 실행 중인 자동 재생을 일시 정지하고, 둘 다 떠나면 다시 시작합니다(사용자가 자동 재생 trigger로 멈춘 회전은 멈춘 채로 둡니다). prefers-reduced-motion에서는 자동 재생을 강제로 끄고, machine의 부드러운 페이지 스크롤을 즉시 이동으로 바꿉니다.
+
+### 알려진 빈틈
+
+> `progressText({ page, totalPages })`는 `3 / 8`로 렌더링됩니다. 이는 접근 가능한 이름이 아니라 보이는 텍스트이고, 단어를 담고 있지 않으며, 번역 세트에 키도 없으므로 아무도 요청하지 않은 키를 만들어 주는 대신 그대로 둡니다. 루트와 슬라이드의 역할 설명은 동작 prop을 보정하여 번역합니다(`carousel.root.roleDescription`, `carousel.item.roleDescription`). 어떤 machine 번역도 aria-roledescription에 닿지 않기 때문입니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 스크롤러는 논리적 인라인 방향으로 동작하고 인디케이터 그룹의 화살표 키는 `dir`에 맞춰 해석되므로, ArrowRight는 왼쪽에서 오른쪽으로 쓰는 제품에서는 앞으로, 오른쪽에서 왼쪽으로 쓰는 제품에서는 뒤로 이동합니다. 네 개의 고정된 컨트롤 이름은 provider의 번역에서 오며, 슬라이드별·점별 이름은 슬라이드의 1부터 시작하는 번호로 provider에 맞춰 형식화됩니다.
+- 컬렉션 윈도잉: 아니요. 모든 슬라이드가 렌더링됩니다. machine은 어떤 슬라이드가 보이는지만 결정하고 나머지에는 aria-hidden을 표시합니다. 컬렉션 인터페이스가 없으므로 슬라이드가 백 개인 캐러셀은 마운트된 요소 백 개이며 — 이는 나중에 메울 윈도잉 공백이 아니라 다른 패턴을 택해야 할 이유입니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `slideshow`, `snap-scrolling`, `autoplay-rotation`, `slide-indicators`, `drag-to-scroll`, `slides-per-page`, `reduced-motion`, `axis-orientation`, `translatable-strings`.
+- 다른 이름: `carousel`, `slider`, `slideshow`, `gallery`, `image slider`, `swiper`, `캐러셀`, `슬라이더`, `슬라이드쇼`, `이미지 슬라이더`.
+- 어휘 상태: `controlled`.

package/skills/components/cascade-select/SKILL.md

@@ -0,0 +1,206 @@
+---
+name: 'cascade-select'
+description: 'CascadeSelect — 트리의 각 단계마다 하나씩 연결된 열로 이루어진 패널을 여는 trigger. 선택을 한 단계씩 좁혀 가며, 최상위부터 내려오는 전체 경로로 제출됩니다. 다른 이름: cascader, cascade select, multi-level select, drill-down picker, 캐스케이더, 계층 선택, 다단계 셀렉트, 연쇄 선택.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/cascade-select.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/cascade-select.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# CascadeSelect
+
+> 트리의 각 단계마다 하나씩 연결된 열로 이루어진 패널을 여는 trigger. 선택을 한 단계씩 좁혀 가며, 최상위부터 내려오는 전체 경로로 제출됩니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `CascadeSelect`
+- 분류: `collection-data-entry`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 2개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### WCAG 2.2 SC 1.4.11 비텍스트 대비 (AA)
+
+- 대상 part: `item`
+- 충족하지 못하는 것: CascadeSelect의 강조된 항목은 `secondary.default` 배경만으로 표시되며, overlay 배경 대비 1.16:1(밝은 테마), 1.46:1(어두운 테마)로 3:1에 못 미칩니다. 포인터와 키보드 모두 링을 그리지 않습니다.
+- 의도한 이유: 모든 강조 행에 링을 그리면 시스템의 다른 어떤 hover보다 무겁게 보였습니다. 포커스는 목록에 머물고 강조된 항목은 `aria-activedescendant`로 보조 기술에 전달되며, 선택된 항목은 파란 글자와 체크 표시로 따로 구분됩니다. `contrast-pairs.json`에 `highlight` 용도로 기록되어 있습니다.
+- 사용 시 유의점: 저시력 사용자에게 강조 위치가 잘 보이지 않을 수 있습니다. 접근성 감사 대상 제품이라면 이 예외를 감사 문서에 포함하세요. 항목을 직접 그릴 때는 선택 상태의 글자색과 체크 표시를 지워 강조와 선택을 같은 모양으로 만들지 마세요.
+
+### Synapse 목록 강조 일관성
+
+- 대상 part: `item`
+- 충족하지 못하는 것: `highlightTrigger="click"`을 넘기면 포인터가 강조를 옮기지 않아 가지 항목은 가리켜도 반응이 없는데, 잎 항목은 가리키면 강조 배경이 그려집니다. 같은 목록 안에서 hover 반응이 섞입니다.
+- 의도한 이유: 기본값 `hover`에서 Zag는 잎 항목을 가리킬 때 강조를 부모 경로에 두므로, 잎의 hover는 CSS로 따로 그립니다. 이 규칙은 `click` 모드에서도 적용되며 두 모드를 구분할 속성이 machine에 없습니다.
+- 사용 시 유의점: 가능하면 기본값 `hover`를 쓰세요. `click`이 꼭 필요하면 hover 반응이 가지와 잎에서 다르게 보인다는 점을 감안하고 스타일을 덧씌우세요.
+
+## Do
+
+> 진정으로 계층적이고 한꺼번에 보여주기에는 너무 큰 집합에서의 선택 — 대륙 안의 국가 안의 지역, 부서 안의 카테고리, 파일 트리 안의 노드 — 처럼 사용자가 한 단계씩 좁혀 가고 답이 마지막 조각이 아니라 전체 경로인 경우. 보고하는 값이 경로이고 알리는 개수가 가지별이므로, 제품이 이미 단계를 따로 모델링하고 있는 데이터에 잘 맞습니다.
+
+## Don't
+
+> 아무리 길어도 평평한 옵션 집합에는 쓰지 마세요. 그것은 Select이며, 단계가 없는 데이터에 단계를 덧씌우면 그냥 나열할 수 있었던 항목에 닿기 위해 사용자가 열을 열어야 합니다. 사용자가 여러 가지를 나란히 펼쳐 둔 채 계층 전체를 탐색하거나 재구성하려 할 때는 쓰지 마세요 — 그것은 단일 경로가 아니라 구조를 보여주는 TreeView입니다. 사용자가 원하는 것을 알고 있어 직접 입력하는 편을 선호할 때는 쓰지 마세요. 잎 레이블에 대한 Combobox는 한 번의 동작으로 답에 도달하며, 이것을 대체하기보다 곁에 함께 제공할 수 있습니다.
+
+## Anti-patterns
+
+> 열에서 알리는 개수를 렌더링한 행으로부터 도출하는 것. 가지의 aria-setsize는 형제의 수이고 항목의 id는 값 경로에서 도출되므로, 한 번도 DOM에 들어간 적 없는 노드도 안정적인 id와 올바른 알림 위치를 가집니다 — 그리고 하이라이트된 노드는 자기 열의 윈도 밖에 있을 때마다 잘린 채로라도 렌더링되어야 하며, 그렇지 않으면 aria-activedescendant가 아무것도 가리키지 않습니다. 마찬가지로, 데이터가 중첩된 형태로 도착한다는 이유로 이것을 택하지 마세요. 페이로드의 중첩은 사용자가 탐색하고 싶어 하는 단계가 아닙니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Select` (`select`)
+- `TreeView` (`tree-view`)
+- `Combobox` (`combobox`)
+- `Menu` (`menu`)
+- `Listbox` (`listbox`)
+
+## 가져오기
+
+```tsx
+import { CascadeSelect } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 13개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<CascadeSelect.Root>
+  <CascadeSelect.Label />
+  <CascadeSelect.Control>
+    <CascadeSelect.Trigger>
+      <CascadeSelect.Indicator />
+      <CascadeSelect.ValueText />
+    </CascadeSelect.Trigger>
+    <CascadeSelect.ClearTrigger />
+  </CascadeSelect.Control>
+  <CascadeSelect.Positioner>
+    <CascadeSelect.Content>
+      <CascadeSelect.List>
+        <CascadeSelect.Item>
+          <CascadeSelect.ItemText />
+          <CascadeSelect.ItemIndicator />
+        </CascadeSelect.Item>
+      </CascadeSelect.List>
+    </CascadeSelect.Content>
+  </CascadeSelect.Positioner>
+</CascadeSelect.Root>
+```
+
+- `CascadeSelect.Root` — 최상위에 놓입니다
+- `CascadeSelect.Label` — `Root` 안에 놓입니다
+- `CascadeSelect.Control` — `Root` 안에 놓입니다
+- `CascadeSelect.Trigger` — `Control` 안에 놓입니다
+- `CascadeSelect.Indicator` — `Trigger` 안에 놓입니다
+- `CascadeSelect.ValueText` — `Trigger` 안에 놓입니다
+- `CascadeSelect.ClearTrigger` — `Control` 안에 놓입니다
+- `CascadeSelect.Positioner` — `Root` 안에 놓입니다
+- `CascadeSelect.Content` — `Positioner` 안에 놓입니다
+- `CascadeSelect.List` — `Content` 안에 놓입니다
+- `CascadeSelect.Item` — `List` 안에 놓입니다
+- `CascadeSelect.ItemText` — `Item` 안에 놓입니다
+- `CascadeSelect.ItemIndicator` — `Item` 안에 놓입니다
+
+### part가 렌더링하고 소유하는 요소
+
+- `hiddenInput`, `CascadeSelect.Root`가 렌더링합니다 — 폼과 함께 제출되고 초기화되는 숨겨진 네이티브 input이며, Label의 htmlFor가 가리키는 요소입니다. 의도적으로 part가 아닙니다. anatomy 키가 없는 part는 이 Registry의 part 검사를 통과하지 못하며, 사용처가 폼과 레이블 연결 둘 다 의존하는 요소를 옮기거나 빠뜨릴 수 있게 되기 때문입니다.
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 26개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+### 필수
+
+- `collection` — `SynapseTreeCollection<TNode>`, 필수. `createTreeCollection`으로 만든 트리 전체. 윈도잉은 이것을 바꾸지 않습니다.
+
+### 선택
+
+- `value` — `readonly (readonly string[])[]`, 선택. 제어되는 선택이며, 선택된 노드마다 값 경로 하나입니다. 단일 선택 CascadeSelect라도 경로의 배열입니다. Select의 `value`가 값의 배열인 것과 같은 이유로, `multiple`에 따라 타입이 달라지는 prop에는 어떤 사용처도 타입을 붙일 수 없습니다.
+- `defaultValue` — `readonly (readonly string[])[]`, 선택. 비제어 초기 선택. `value`가 주어지면 무시됩니다.
+- `onValueChange` — `(details: CascadeSelectValueChangeDetails) => void`, 선택. 제어 여부와 무관하게 선택이 바뀔 때마다 알림을 받습니다.
+- `highlightedValue` — `readonly string[]`, 선택. 제어되는 하이라이트 경로 — 열린 열들이 따라가고, 보조 기술이 안내하는 대상입니다.
+- `defaultHighlightedValue` — `readonly string[]`, 선택. 비제어 초기 하이라이트 경로.
+- `onHighlightChange` — `(details: CascadeSelectHighlightChangeDetails) => void`, 선택. 하이라이트가 움직일 때 알림을 받으며, 한 번도 렌더된 적 없는 노드로 옮겨갈 때도 받습니다.
+- `open` — `boolean`, 선택. 제어되는 패널의 열림 상태.
+- `defaultOpen` — `boolean`, 선택. 비제어 초기 열림 상태.
+- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 패널이 열리거나 닫힐 때마다 알림을 받습니다.
+- `multiple` — `boolean`, 선택. 둘 이상의 경로를 선택할 수 있게 합니다.
+- `allowParentSelection` — `boolean`, 선택. 잎뿐 아니라 가지도 선택할 수 있게 합니다.
+- `closeOnSelect` — `boolean`, 선택. 선택하면 패널을 닫습니다. 기본값은 true입니다.
+- `highlightTrigger` — `CascadeSelectHighlightTrigger`, 선택. 아이템을 가리켜야 그 열이 열리는지, 클릭해야 열리는지. 기본값은 `hover`로, 다른 목록처럼 포인터가 강조를 옮깁니다.
+- `loopFocus` — `boolean`, 선택. 키보드 이동이 열의 양 끝을 넘어가면 반대편으로 이어집니다.
+- `formatValue` — `(selected: readonly (readonly TNode[])[]) => string`, 선택. 선택이 trigger에서 어떻게 읽히는지를 정합니다. 기본 동작은 각 경로의 레이블을 이어 붙이는 것입니다. "Asia / India / Haryana"가 아니라 "Haryana"를 원하거나, 여러 개가 선택되면 개수를 보이고 싶은 제품이 이 prop을 줍니다 — 컨트롤 안의 유일한 문구이며, 문구는 제품의 몫입니다.
+- `positioning` — `CascadeSelectPositioning`, 선택. 패널이 놓이는 위치.
+- `name` — `string`, 선택. 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다.
+- `form` — `string`, 선택. 폼 바깥에 렌더된 CascadeSelect를 id로 폼과 연결합니다.
+- `disabled` — `boolean`, 선택. 비활성화된 CascadeSelect는 제출되지 않고 반응하지도 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 CascadeSelect는 값을 제출하지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알려집니다.
+- `required` — `boolean`, 선택. 제약 검증: 폼이 제출되려면 무언가가 선택되어 있어야 합니다.
+- `translations` — `TranslationOverrides`, 선택. 이 CascadeSelect에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 예.
+
+- `input`으로 제출합니다.
+- 제출 값은 `value`에서 옵니다.
+- 항목은 사용처가 아무것도 설정하지 않았을 때 제출되는 값을 기록하지 않습니다.
+
+> 값은 값 경로의 목록이며, 숨겨진 input은 machine이 이를 해시로 인코딩한 값을 담습니다. 두 가지가 같은 이름을 가질 수 있는 트리에서 잎 자신의 값만으로는 노드를 식별할 수 없기 때문입니다. `disabled`이면 제출되지 않습니다. Label은 htmlFor로 이 input과 연결되며, 그래서 `name`이 주어지든 아니든 이 요소가 렌더링됩니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 트리는 통째로 컴포넌트에 전달되고 컴포넌트는 이를 좁히지 않으므로, 제공할 것이 없는 CascadeSelect는 제품이 렌더링하기 전에 이미 아는 사실입니다. Combobox에 empty part가 필요한 것은 필터링 때문에 '일치 항목 없음'이 상호작용 도중에 도달하는 정상 상태가 되기 때문입니다. 여기서 '지역이 없습니다'를 말할 정직한 자리는 컴포넌트가 자기 일정대로 여는 패널 안이 아니라 컨트롤을 대신하는 자리입니다.
+- `loading-state` — CascadeSelect는 요청을 수행하지 않습니다. 사용처가 트리를 가져와 전달하므로, 진행 중인 요청은 이 컨트롤이 아니라 사용처 화면의 상태이며, 클릭해야만 열리는 패널 안의 스피너는 그것이 중요한 시간 내내 보이지 않을 것입니다. 지연 로드되는 가지는 대신 createTreeCollection의 nodeToChildrenCount가 처리하며, 이는 자식이 도착하기 전에도 알려지는 형제 개수를 정확하게 유지합니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며 `invalid`로 보고되고 aria-invalid로 알려집니다. 트리를 로드하는 데 실패한 것은 가져오기를 수행한 사용처의 몫이며, 이를 패널 안에서 보고하면 사용자는 실패로 비어버린 바로 그 컨트롤을 연 뒤에야 메시지를 보게 됩니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> aria-labelledby를 통해 Label part에서 가져옵니다. machine은 translations prop을 받지 않고 clear trigger의 영어 aria-label을 하드코딩하므로, 컴포넌트가 요소에 닿기 전에 이를 provider의 `cascadeSelect.clearTrigger.label`로 보정합니다.
+
+### 포커스
+
+> 포커스는 하나의 탭 정지 지점인 패널 안으로 옮겨가고, 활성 노드는 aria-activedescendant로 가리킵니다. 어떤 열도 자체 포커스를 받지 않으며, 덕분에 열린 열마다 탭 정지 지점이 생기는 대신 하나의 화살표 키 세트가 모든 단계를 조작합니다.
+
+### 알려 주는 위치
+
+> aria-posinset과 aria-setsize는 노드의 형제 — 노드가 속한 가지 — 를 나타내며, 결코 컬렉션 전체나 렌더링된 윈도를 나타내지 않습니다. 트리는 'item 2 of 3, level 3'처럼 읽히기 때문입니다. aria-level은 깊이이며, 루트의 직계 자식을 1로 셉니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 패널의 배치는 논리적이므로 `bottom-start`는 텍스트 방향을 따르고 열은 읽는 방향으로 펼쳐집니다. 제품이 제공하는 레이블은 해당 로케일의 것이며, 제품은 `formatValue`로 자기 언어가 경로를 잇는 방식대로 경로를 이어 붙입니다.
+- 컬렉션 윈도잉: 예. 각 열은 자기 가지를 자기 스크롤러에 맞춰 윈도잉하므로, 자식이 십만 개인 가지도 뷰포트 한 화면 분량만 렌더링합니다. 알려지는 개수는 렌더링된 조각이 아니라 트리 컬렉션의 형제 개수이며, 하이라이트된 노드는 범위 밖에 있어도 자기 열에 고정되므로, machine이 DOM이 아니라 값 경로로부터 도출하는 aria-activedescendant가 언제나 실제 요소를 가리킵니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `choose-from-hierarchy`, `progressive-narrowing`, `single-select`, `multi-select`, `form-value`, `floating-layer`, `windowed-collection`, `readonly-display`.
+- 다른 이름: `cascader`, `cascade select`, `multi-level select`, `drill-down picker`, `캐스케이더`, `계층 선택`, `다단계 셀렉트`, `연쇄 선택`.
+- 어휘 상태: `controlled`.