@neurocle/synapse-react 0.0.0-bootstrap → 0.0.0-stage

package/skills/components/pagination/SKILL.md

@@ -1,159 +0,0 @@
----
-name: 'pagination'
-description: 'Pagination — 페이지로 나뉜 목록을 오가는 컨트롤입니다. 처음, 이전, 번호가 매겨진 페이지 구간(구간이 잘리는 곳에는 말줄임표), 다음, 마지막으로 이루어집니다. 페이지 번호와 전체 수만 가질 뿐 데이터는 절대 갖지 않습니다. 페이지로 나뉘는 목록은 사용처의 것이며, 그 목록을 자르는 방법이 `api.slice(data)`입니다. 다른 이름: pagination, pager, page navigation, paging controls, page numbers, 페이지네이션, 페이지 번호, 페이지 이동.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/pagination.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/pagination.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Pagination
-
-> 페이지로 나뉜 목록을 오가는 컨트롤입니다. 처음, 이전, 번호가 매겨진 페이지 구간(구간이 잘리는 곳에는 말줄임표), 다음, 마지막으로 이루어집니다. 페이지 번호와 전체 수만 가질 뿐 데이터는 절대 갖지 않습니다. 페이지로 나뉘는 목록은 사용처의 것이며, 그 목록을 자르는 방법이 `api.slice(data)`입니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Pagination`
-- 분류: `collection-data-entry`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### 알려진 결함 — 링크 페이지네이션
-
-- 충족하지 못하는 것: `type="link"`이면 페이지 컨트롤이 `href`를 가진 `div`로 렌더링되어, 겉보기에는 멀쩡하지만 아무 곳으로도 이동하지 않습니다.
-- 의도한 이유: part의 요소를 `type="button"`만으로 도출하는 팩토리 규칙의 한계이며, 기반 계층에서 고칠 일입니다.
-- 사용 시 유의점: `type="link"`를 쓸 때는 반드시 `asChild`로 라우터의 링크 컴포넌트를 감싸세요.
-
-## Do
-
-> 제품이 길이를 알고 있고, 사용자가 자신의 위치를 말하고 다시 돌아올 수 있어야 하는 목록에 쓰세요. 검색 결과, 레코드 표, 아카이브가 그런 예입니다. 번호가 매겨진 페이지는 사용자가 앞으로 건너뛰거나, 어디에 있었는지 언급하거나, `type="link"`로 딥링크해야 할 때 제값을 합니다. 말줄임표는 컨트롤을 한 줄로 유지하기 위해 있는 것이므로, 페이지 구간이 줄바꿈되게 두지 말고 가진 너비에 맞춰 `siblingCount`와 `boundaryCount`를 조정하세요.
-
-## Don't
-
-> 전체 개수를 모르거나 계산하는 비용이 클 때는 쓰지 마세요. 페이지 수는 `count`에서 도출되므로 추측한 전체 수는 거짓 페이지 번호를 만들며, 끝이 없는 피드에는 무한 스크롤이나 "더 보기" 버튼이 맞습니다. 한 화면에 들어가는 작은 목록에도 쓰지 마세요. 네 줄을 페이지로 나누면 왕복 요청만 늘 뿐 얻는 것이 없습니다. 슬라이드쇼나 마법사를 넘기는 데에도 쓰지 마세요. Carousel은 어떤 슬라이드가 보이는지 이미 알고 Steps는 어떤 단계가 끝났는지 알지만, 페이지 번호는 "여럿 중 하나"라는 것만 말합니다. 범용 "다음/이전" 버튼 쌍으로도 쓰지 마세요. 문서를 넘기는 두 버튼을 "Pagination"이라는 이름의 `nav` 랜드마크로 감싸면 랜드마크가 엉뚱한 것을 알리게 됩니다.
-
-## Anti-patterns
-
-> `asChild` 없이 `type="link"`로 `Pagination.Item`을 렌더링하는 것. 타입 검사를 통과하고, 렌더링되고, 스타일도 올바르지만, 실제로는 `href`를 가진 `div`입니다. 포커스를 받을 수 없고, 키보드로 활성화할 수 없으며, 스크린 리더의 링크 목록에도 잡히지 않습니다. 이 실패는 스크린샷에서도 스냅숏 테스트에서도 드러나지 않기 때문에, 감사에서 발견되도록 내버려 두지 않고 컴포넌트 헤더에 기록해 둡니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Carousel` (`carousel`)
-- `Steps` (`steps`)
-- `Tabs` (`tabs`)
-- `Toc` (`toc`)
-
-## 가져오기
-
-```tsx
-import { Pagination } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 7개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Pagination.Root>
-  <Pagination.Item />
-  <Pagination.Ellipsis />
-  <Pagination.FirstTrigger />
-  <Pagination.PrevTrigger />
-  <Pagination.NextTrigger />
-  <Pagination.LastTrigger />
-</Pagination.Root>
-```
-
-- `Pagination.Root` — 최상위에 놓입니다
-- `Pagination.Item` — `Root` 안에 놓입니다
-- `Pagination.Ellipsis` — `Root` 안에 놓입니다
-- `Pagination.FirstTrigger` — `Root` 안에 놓입니다
-- `Pagination.PrevTrigger` — `Root` 안에 놓입니다
-- `Pagination.NextTrigger` — `Root` 안에 놓입니다
-- `Pagination.LastTrigger` — `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 14개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-### 필수
-
-- `count` — `number`, 필수. 전체 항목 수. 페이지 수는 이 값과 `pageSize`에서 도출됩니다.
-
-### 선택
-
-- `page` — `number`, 선택. 제어되는 현재 페이지. 1부터 세요.
-- `defaultPage` — `number`, 선택. 비제어 모드의 초기 페이지. `page`를 주면 무시됩니다.
-- `onPageChange` — `(details: PaginationPageChangeDetails) => void`, 선택. 제어 여부와 무관하게 페이지가 바뀔 때마다 호출됩니다.
-- `pageSize` — `number`, 선택. 제어되는 페이지당 항목 수.
-- `defaultPageSize` — `number`, 선택. 비제어 모드의 초기 페이지당 항목 수.
-- `onPageSizeChange` — `(details: PaginationPageSizeChangeDetails) => void`, 선택. 페이지 크기가 바뀔 때마다 호출됩니다.
-- `siblingCount` — `number`, 선택. 현재 페이지 양옆에 보여줄 페이지 수. 기본값은 1입니다.
-- `boundaryCount` — `number`, 선택. 현재 페이지가 아무리 멀리 있어도 양 끝에 항상 보여줄 페이지 수.
-- `type` — `PaginationType`, 선택. 페이지 컨트롤이 상태를 바꾸는 버튼인지, 다른 URL로 이동하는 링크인지 정합니다. 기본값은 `button`입니다. `link`라면 `getPageUrl`도 함께 줍니다.
-- `getPageUrl` — `(details: { readonly page: number; readonly pageSize: number; }) => string`, 선택. `type`이 `link`일 때 각 페이지의 URL.
-- `translations` — `TranslationOverrides`, 선택. 이 Pagination에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. 크기는 각 컨트롤의 최소 높이, 페이지 번호와 말줄임표의 글자, 네 개의 탐색 아이콘을 조절합니다. 페이지 버튼이 몇 개 나타나는지는 크기가 아니라 `siblingCount`와 `boundaryCount`가 정합니다. 범위를 얼마나 보여줄지는 제품이 레이아웃마다 내리는 밀도 결정이며, 이를 크기 토큰에 묶으면 작은 Pagination이 아무 말 없이 더 적은 페이지를 보여주게 됩니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다. 페이지는 URL이나 컴포넌트 상태에 담기는 탐색 상태입니다. `type="link"`를 주면 페이지 컨트롤이 실제 링크가 되고 브라우저가 페이지를 전달합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — `count`가 0이면 페이지가 하나가 되며, 아무것도 없는 목록의 페이지네이션은 누구에게도 보여서는 안 되는 컨트롤입니다. 빈 상태는 이 컴포넌트가 페이지를 나누는 목록, 곧 "결과 없음"을 말하는 표나 그리드의 몫입니다. 여기서 이를 중복하면 서로 어긋날 수 있는 두 곳에 같은 메시지가 놓입니다.
-- `loading-state` — 페이지 번호는 동기적으로 바뀝니다. 시간이 걸리는 것은 새 페이지를 위한 사용처의 데이터 요청이며, 이는 목록에서 일어나고 사용자도 이미 그곳을 보고 있습니다. 요청 중에 컨트롤을 비활성화할지는 제품이 자신의 래퍼에 `disabled`를 주어 정할 일이지, 이 컴포넌트가 만들어낼 상태가 아닙니다.
-- `error-state` — 여기에는 실패할 수 있는 것이 없습니다. 페이지를 설정하는 일은 `count`, `pageSize`, 현재 페이지에 대한 산술이며, machine은 범위를 벗어난 값을 거부하지 않고 범위 안으로 고정합니다. 새 페이지의 데이터 요청이 실패하면 실제로 실패한 주체인 목록이 이를 알립니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 랜드마크의 이름은 `pagination.root.label`에서, 네 개의 끝 컨트롤의 이름은 각자의 키에서 옵니다. 이 컴포넌트에서 가장 까다로운 이름은 페이지별 이름입니다. `itemLabel({ page, totalPages })`는 machine이 번호가 매겨진 버튼마다 호출하는 함수이므로, 키를 문자열로 풀어내는 `machineTranslations`로는 표현할 수 없고 그곳에 문자열을 넘기면 예외가 발생합니다. 그래서 이 이름은 `useMachineProps`에서 `pagination.item.label`을 기준으로 풀어내며, 모든 페이지 버튼의 이름을 포함한 여섯 개의 이름이 모두 제품이 바꿀 수 있는 문자열이 됩니다. 이 이음매는 팩토리가 언젠가 흡수해야 할 우회책이므로 여기에 기록해 둡니다.
-
-### 포커스
-
-> 포커스는 원래 자리에 머무릅니다. machine은 포커스를 어디로도 옮기지 않으며, 여기서는 그것이 옳습니다. "다음"을 눌렀는데 포커스가 튀어 버리면 다시 누르려던 키보드 사용자는 길을 잃습니다. 새로 불러온 목록으로 포커스를 옮기려는 제품은 데이터가 도착한 뒤 직접 옮겨야 합니다.
-
-### 알려진 빈틈
-
-> `type="link"`이면 machine은 각 컨트롤에 `type="button"` 대신 `href`를 내보내는데, 팩토리는 part의 요소를 `type="button"`만으로 도출합니다. 그래서 페이지 컨트롤이 `href`를 가진 `div`로 렌더링되어, 겉보기에는 멀쩡하지만 아무 곳으로도 이동하지 않습니다. 라우터의 자체 링크 컴포넌트와 함께 `asChild`를 쓰세요. 어차피 제품이 그 자리에 원하는 것은 그것입니다. 도출 규칙을 넓히는 일은 이 컴포넌트가 아니라 기반 계층의 작업이며, 기반 결함 `part-element-derived-from-button-type-only`로 `tools/vocabulary-check/src/exceptions.ts`에 기록되어 있습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 여섯 개의 접근 가능한 이름은 모두 provider의 번역 세트에서 오며, 번호가 매겨진 모든 버튼을 부르는 페이지별 레이블도 마찬가지입니다. 컨트롤은 논리적 인라인 방향으로 배치되므로 이전/다음의 순서는 왼쪽과 오른쪽에 고정되지 않고 텍스트 방향을 따릅니다.
-- 컬렉션 윈도잉: 아니요. 이 컴포넌트는 윈도잉할 데이터를 갖지 않습니다. `siblingCount`, `boundaryCount`, 현재 페이지로부터 어떤 페이지 버튼을 보여줄지 계산할 뿐이며, 이는 컬렉션의 일부만 렌더링하는 것과는 다른 일입니다. 바로 이 구분 때문에 Pagination은 컬렉션 컴포넌트가 아닙니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `paged-navigation`, `page-size`, `page-range-elision`, `current-page`, `translatable-strings`.
-- 다른 이름: `pagination`, `pager`, `page navigation`, `paging controls`, `page numbers`, `페이지네이션`, `페이지 번호`, `페이지 이동`.
-- 어휘 상태: `controlled`.

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

@@ -1,156 +0,0 @@
----
-name: 'password-input'
-description: 'PasswordInput — 상태에 따라 접근 가능한 이름이 바뀌는 표시 토글을 갖춘 비밀번호 필드로, 토글은 누르면 무엇이 일어나는지를 언제나 정확히 말합니다. 다른 이름: password, password field, secret, passphrase, show password, 비밀번호 입력, 비밀번호 필드, 패스워드 입력, 비밀번호 보기.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/password-input.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/password-input.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# PasswordInput
-
-> 상태에 따라 접근 가능한 이름이 바뀌는 표시 토글을 갖춘 비밀번호 필드로, 토글은 누르면 무엇이 일어나는지를 언제나 정확히 말합니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `PasswordInput`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### HTML 폼 제출 — 알려진 결함
-
-- 충족하지 못하는 것: `form` prop이 없어 id로 바깥 폼에 연결할 수 없고, 자신을 감싼 폼과 함께만 제출됩니다.
-- 의도한 이유: machine이 `form` prop을 선언하지 않으며, 아무 일도 하지 않는 prop을 덧붙이지 않습니다.
-- 사용 시 유의점: 비밀번호 입력은 제출할 `<form>` 안에 두세요.
-
-## Do
-
-> 사용자가 직접 입력하는 자격 증명을 담는 모든 필드에 쓰세요. 비밀번호, 패스프레이즈, 입력 중인 API 키가 그런 예입니다. 표시 토글이 있기 때문에 사용자는 길거나 생성된 비밀 값을 잘못 입력했는지 짐작하지 않고도 입력할 수 있습니다.
-
-## Don't
-
-> 메시지로 도착하는 일회용 코드에는 쓰지 마세요. 그것은 코드를 칸으로 나누고 플랫폼 자동 완성으로 받을 수 있는 PinInput의 몫입니다. 비밀이 아닌 값을 가리는 데에도 쓰지 마세요. 마스킹은 아무 이득 없이 필드를 확인하기 어렵게 만듭니다. 저장된 비밀 값을 보여주는 데에도 쓰지 마세요. 이것은 입력이며, 사용자가 바꿀 수 없는 값은 입력에 들어가서는 안 됩니다.
-
-## Anti-patterns
-
-> `autoComplete`를 적당해 보이는 값에 그대로 두는 것. 로그인 필드에는 `current-password`, 가입 필드에는 `new-password`가 맞으며, 이를 거꾸로 두면 비밀번호 관리자가 엉뚱한 자격 증명을 저장하겠다고 제안하게 됩니다. 이는 다듬기의 문제가 아니라 보안의 문제입니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `PinInput` (`pin-input`)
-- `Editable` (`editable`)
-- `NumberInput` (`number-input`)
-
-## 가져오기
-
-```tsx
-import { PasswordInput } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 6개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<PasswordInput.Root>
-  <PasswordInput.Label />
-  <PasswordInput.Control>
-    <PasswordInput.Input />
-    <PasswordInput.VisibilityTrigger>
-      <PasswordInput.Indicator />
-    </PasswordInput.VisibilityTrigger>
-  </PasswordInput.Control>
-</PasswordInput.Root>
-```
-
-- `PasswordInput.Root` — 최상위에 놓입니다
-- `PasswordInput.Input` — `Control` 안, 또는 `Root` 안에 놓입니다
-- `PasswordInput.Label` — `Root` 안에 놓입니다
-- `PasswordInput.Control` — `Root` 안에 놓입니다
-- `PasswordInput.Indicator` — `VisibilityTrigger` 안에 놓입니다
-- `PasswordInput.VisibilityTrigger` — `Control` 안, 또는 `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 13개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `open` — `boolean`, 선택. 제어되는 노출 상태. 글자가 보이는지 여부입니다.
-- `defaultOpen` — `boolean`, 선택. 비제어 모드의 초기 노출 상태. `open`을 주면 무시됩니다.
-- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 비밀번호가 드러나거나 가려질 때마다 호출됩니다.
-- `name` — `string`, 선택. 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다.
-- `autoComplete` — `PasswordAutoComplete`, 선택. 비밀번호 관리자가 제안해야 할 것. 기본값은 `current-password`입니다.
-- `ignorePasswordManagers` — `boolean`, 선택. 알려진 비밀번호 관리자들에게 이 필드를 건드리지 말라고 요청합니다.
-- `disabled` — `boolean`, 선택. 비활성화된 PasswordInput은 제출하지도, 반응하지도 않습니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 PasswordInput은 값을 제출하지만 바꿀 수는 없습니다.
-- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알립니다.
-- `required` — `boolean`, 선택. 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다.
-- `translations` — `TranslationOverrides`, 선택. 이 PasswordInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=password]`로 제출합니다.
-- 항목은 제출 값을 담는 prop을 기록하지 않습니다.
-- 항목은 사용처가 아무것도 설정하지 않았을 때 제출되는 값을 기록하지 않습니다.
-
-> 보이는 입력이 곧 폼 컨트롤이며 `name`을 가집니다. machine이 `form` prop을 선언하지 않으므로 이 컨트롤은 id로 폼에 연결될 수 없고, 자신을 감싼 폼과 함께만 제출됩니다. 타입 검사는 통과하지만 아무 일도 하지 않는 `form` prop이 더 나쁘기 때문에, 이를 덮어 감추지 않고 기록해 둡니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 컬렉션이 아니라 값 하나를 가지므로 비어 있을 수 있는 집합이 없습니다. 빈 비밀번호 필드는 placeholder를 보여주는 필드일 뿐이며, 이는 컴포넌트의 한 부분이 아니라 입력의 한 상태입니다.
-- `loading-state` — 비밀번호 필드에는 불러올 것이 없습니다. 값은 언제나 필드 앞에 있는 사람에게서 오며 네트워크에서 오지 않습니다. 아직 쓰면 안 되는 필드라면 비활성화된 필드로 두세요.
-- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 전달되고 aria-invalid로 알려집니다. 비밀번호가 지켜야 할 규칙은 필드에 대한 설명이므로 레이블을 렌더링하는 쪽이 가집니다. 이를 컨트롤 안에서 반복하면 요구 사항과 오류가 두 곳에 놓이게 됩니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 필드의 이름은 Label part에서 옵니다. trigger의 이름은 provider의 번역 가능한 세트에서 오며, 'Show password'나 'Hide password'처럼 상태에 따라 바뀝니다. 고정된 이름 하나로는 절반의 경우에 틀리기 때문입니다.
-
-### 포커스
-
-> 입력이 탭 정지 지점입니다. machine은 trigger를 탭 순서에서 빼 두어, 비밀번호 필드도 다른 모든 필드처럼 정지 지점이 하나가 되게 합니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `obscured-entry`, `reveal-toggle`, `form-value`, `readonly-display`, `translatable-strings`.
-- 다른 이름: `password`, `password field`, `secret`, `passphrase`, `show password`, `비밀번호 입력`, `비밀번호 필드`, `패스워드 입력`, `비밀번호 보기`.
-- 어휘 상태: `controlled`.

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

@@ -1,157 +0,0 @@
----
-name: 'pin-input'
-description: 'PinInput — 짧은 코드를 글자마다 한 칸씩 나누어 받는 입력으로, 붙여 넣으면 한꺼번에 채워지고 입력하는 대로 다음 칸으로 넘어가며 이름이 붙은 하나의 값으로 제출됩니다. 다른 이름: pin input, otp, verification code, one time code, 2fa code, 인증번호 입력, OTP 입력, PIN 입력, 인증 코드.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/pin-input.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/pin-input.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# PinInput
-
-> 짧은 코드를 글자마다 한 칸씩 나누어 받는 입력으로, 붙여 넣으면 한꺼번에 채워지고 입력하는 대로 다음 칸으로 넘어가며 이름이 붙은 하나의 값으로 제출됩니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `PinInput`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## Do
-
-> 다른 곳에서 도착해 옮겨 적는, 길이가 정해진 짧은 코드에 쓰세요. 2단계 인증 코드, 이메일 인증, 기기 페어링 번호가 그런 예입니다. 칸의 수가 사용자가 입력을 시작하기 전에 코드의 길이를 알려주며, `otp`를 주면 플랫폼이 메시지에서 코드를 바로 제안할 수 있습니다.
-
-## Don't
-
-> 비밀번호나 사용자가 직접 정한 비밀 값에는 쓰지 마세요. 그런 값은 길이가 정해져 있지 않으며, 표시 토글이 있는 필드는 PasswordInput입니다. 길거나 길이가 변하는 식별자에도 쓰지 마세요. 열한 칸에 나뉜 주문 번호는 필드 하나에 든 것보다 확인하기 어렵습니다. 크기를 갖는 숫자에도 쓰지 마세요. 코드는 숫자로 된 문자열이며, NumberInput처럼 자릿수 구분 기호로 서식을 입히는 것은 틀린 일입니다.
-
-## Anti-patterns
-
-> `count`와 다른 수의 Input part를 렌더링하는 것. machine은 완성 여부를 `count`만으로 판단하므로, 칸이 모자라면 코드가 영영 완성되지 않고 칸이 남으면 영영 채워지지 않는 칸이 생깁니다. 화면에서는 곧바로 보이므로 막지 않고 문서로 남기지만, 첫 칸만 렌더링하는 단위 테스트에서는 드러나지 않습니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `PasswordInput` (`password-input`)
-- `NumberInput` (`number-input`)
-- `Editable` (`editable`)
-
-## 가져오기
-
-```tsx
-import { PinInput } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<PinInput.Root>
-  <PinInput.Label />
-  <PinInput.Control>
-    <PinInput.Input />
-  </PinInput.Control>
-</PinInput.Root>
-```
-
-- `PinInput.Root` — 최상위에 놓입니다
-- `PinInput.Label` — `Root` 안에 놓입니다
-- `PinInput.Input` — `Control` 안, 또는 `Root` 안에 놓입니다
-- `PinInput.Control` — `Root` 안에 놓입니다
-
-### part가 렌더링하고 소유하는 요소
-
-- `hiddenInput`, `PinInput.Root`가 렌더링합니다 — 통로 역할을 합니다. aria-hidden이고 탭 순서에서 빠져 있으며, 합쳐진 값을 담아 여섯 칸짜리 코드가 여섯 개가 아니라 하나의 이름 아래 하나의 필드로 FormData에 들어가게 합니다. 실제 컨트롤은 보이는 칸들입니다. Root가 렌더링하며 일부러 part로 두지 않았습니다. 사용처가 이를 옮기거나 빠뜨릴 수 있으면, 보이는 것은 아무것도 깨지지 않은 채 제출이 깨지기 때문입니다.
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 25개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `count` — `number`, 선택. 코드 하나를 이루는 글자 수. 기본값은 4입니다.
-- `value` — `readonly string[]`, 선택. 제어되는 값이며, 칸마다 항목이 하나씩입니다.
-- `defaultValue` — `readonly string[]`, 선택. 비제어 모드의 초기 값. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<readonly string[]>) => void`, 선택. 값을 바꾸는 모든 키 입력마다 호출됩니다.
-- `onValueComplete` — `(details: PinInputCompleteDetails) => void`, 선택. 모든 칸이 채워졌을 때 호출됩니다. 실제로 손을 쓸 콜백은 이쪽입니다.
-- `onValueInvalid` — `(details: { readonly value: string; readonly index: number; }) => void`, 선택. `type`이나 `pattern`이 거부하는 글자가 입력됐을 때 호출됩니다.
-- `type` — `PinInputType`, 선택. 각 칸이 받아들이는 것. 기본값은 `alphanumeric`입니다.
-- `pattern` — `string`, 선택. `type`이 허용하는 것 너머로, 글자마다 맞아야 하는 정규식.
-- `sanitizeValue` — `(value: string) => string`, 선택. 붙여 넣은 값을 받아들이기 전에 고쳐 씁니다. 복사한 코드에서 공백을 걷어내는 식입니다.
-- `mask` — `boolean`, 선택. 글자를 점으로 렌더링합니다. 코드가 비밀일 때 씁니다.
-- `otp` — `boolean`, 선택. 칸들을 일회용 코드로 표시해, 플랫폼이 메시지에서 그것을 제안할 수 있게 합니다.
-- `placeholder` — `string`, 선택. 비어 있는 모든 칸에 보입니다.
-- `autoFocus` — `boolean`, 선택. 마운트될 때 첫 칸으로 포커스를 옮깁니다.
-- `blurOnComplete` — `boolean`, 선택. 코드가 완성되면 포커스를 거둡니다.
-- `autoSubmit` — `boolean`, 선택. 코드가 완성되면 그것을 감싼 폼을 제출합니다.
-- `selectOnFocus` — `boolean`, 선택. 칸이 포커스를 받을 때 그 안의 글자를 선택해, 입력하면 바로 대체되게 합니다.
-- `name` — `string`, 선택. 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다.
-- `form` — `string`, 선택. 폼 바깥에 렌더된 PinInput을 id로 그 폼에 연결합니다.
-- `disabled` — `boolean`, 선택. 비활성화된 PinInput은 제출하지도, 반응하지도 않습니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 PinInput은 값을 제출하지만 바꿀 수는 없습니다.
-- `invalid` — `boolean`, 선택. 모든 칸에 `aria-invalid`로 보조 기술에 알립니다.
-- `required` — `boolean`, 선택. 제약 검증. 폼이 제출되려면 코드가 있어야 합니다.
-- `translations` — `TranslationOverrides`, 선택. 이 PinInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=text]`로 제출합니다.
-- 제출 값은 `value`에서 옵니다.
-- 아무것도 설정하지 않으면 빈 문자열(`''`)을 제출합니다.
-
-> 숨겨진 통로 하나가 합쳐진 값을 `name` 아래에 담습니다. 보이는 칸들은 이름이 없고 스스로는 아무것도 제출하지 않습니다. `disabled`이면 제출되지 않으며, `required`는 코드가 있어야 함을 뜻합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 칸의 수는 무엇이든 입력되기 전에 `count`로 정해지므로 비어서 도착할 수 있는 집합이 없습니다. 손대지 않은 PinInput은 빈 칸이 모두 갖춰진 상태이며, 이는 부재가 아니라 기본 상태입니다.
-- `loading-state` — 값은 언제나 필드 앞에 있는 사람에게서 오며 네트워크에서 오지 않습니다. 아직 쓰면 안 되는 PinInput은 비활성화된 것으로 두세요. 정말 중요한 기다림인 완성된 코드의 검증은 사용처가 `onValueComplete`로 하는 일 안에서 일어납니다.
-- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 전달되고 모든 칸에 aria-invalid로 알려지며, 거부된 문자에는 `onValueInvalid`가 호출됩니다. 틀린 코드를 설명하는 메시지는 코드가 검사되어 거부되었음을 아는 주변 폼의 몫입니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 각 칸은 provider의 번역 가능한 세트에서 'Digit 1 of 6'처럼 위치로 이름을 받습니다. 이름이 똑같은 여섯 칸은 스크린 리더로 쓸 수 없기 때문입니다. machine은 0부터 세지만 사람은 그렇지 않으므로, 여기서 인덱스를 1부터 세도록 바꿉니다.
-
-### 포커스
-
-> 로빙 탭 인덱스를 씁니다. 그룹은 정지 지점 하나이며, 코드가 입력되는 대로 칸들이 포커스를 넘겨줍니다. `blurOnComplete`를 주면 코드가 완성되는 순간 포커스를 놓습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `one-time-code`, `segmented-input`, `form-value`, `readonly-display`, `translatable-strings`.
-- 다른 이름: `pin input`, `otp`, `verification code`, `one time code`, `2fa code`, `인증번호 입력`, `OTP 입력`, `PIN 입력`, `인증 코드`.
-- 어휘 상태: `controlled`.

package/skills/components/popover/SKILL.md

@@ -1,166 +0,0 @@
----
-name: 'popover'
-description: 'Popover — trigger로 여는 비모달 떠 있는 레이어로, 뒤쪽 페이지가 계속 동작하는 동안 사용자가 상호작용할 수 있는 콘텐츠를 담습니다. 다른 이름: popover, popup, flyout, overlay panel, bubble, 팝오버, 팝업, 말풍선 패널.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/popover.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/popover.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Popover
-
-> trigger로 여는 비모달 떠 있는 레이어로, 뒤쪽 페이지가 계속 동작하는 동안 사용자가 상호작용할 수 있는 콘텐츠를 담습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Popover`
-- 분류: `floating-and-overlay`
-- 수명 주기: `active`
-
-## Do
-
-> 대상에 고정되어 떠 있는 보조 콘텐츠로, 뒤쪽 페이지를 계속 쓸 수 있는 상태에서 사용자가 상호작용할 수 있어야 할 때 쓰세요. 필터 패널, 작은 폼, 동작 묶음이 그런 예입니다. 항상 보이게 두면 페이지를 복잡하게 만들지만, 작업을 가로막을 만큼 중요하지는 않은 콘텐츠일 때 이것을 고르세요. Arrow part는 위치만으로는 팝오버가 어느 trigger에서 열렸는지 알기 어려울 때만 넣으세요. 대개 팝오버는 trigger 바로 옆에 놓여 위치만으로 trigger와 이어지고, 그때 테두리와 그림자가 있는 표면에 화살표는 모서리 하나를 더할 뿐입니다.
-
-## Don't
-
-> 순수하게 설명만 하고 hover 시 나타나는 콘텐츠에는 쓰지 마세요. 그것은 Tooltip이며, 접근성 계약이 다르고 포커스 가능한 요소를 담아서는 안 됩니다. 사용자가 계속하기 전에 반드시 내려야 하는 결정에도 쓰지 마세요. Popover는 아무 곳이나 클릭하면 닫히므로, 반드시 끝내야 하는 작업은 Dialog의 몫입니다. 명령 목록에도 쓰지 마세요. 명령 목록에 필요한 로빙 포커스와 타입어헤드는 Menu가 갖고 있으며, 버튼으로 가득한 Popover는 그중 아무것도 알리지 않습니다.
-
-## Anti-patterns
-
-> 떠 있는 레이어의 위치를 레시피나 style prop에 넣는 것. 동작 계층은 Positioner에 위치, transform, z-index를 기록하고, 충돌 규칙은 사용처의 스타일이 이기게 합니다. 그래서 위치에 대한 두 번째 의견이 생기면 팝오버가 가끔씩만 엉뚱한 자리에 놓이게 됩니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Tooltip` (`tooltip`)
-- `Dialog` (`dialog`)
-- `Menu` (`menu`)
-- `HoverCard` (`hover-card`)
-- `Select` (`select`)
-
-## 가져오기
-
-```tsx
-import { Popover } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 11개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Popover.Root>
-  <Popover.Anchor />
-  <Popover.Trigger>
-    <Popover.Indicator />
-  </Popover.Trigger>
-  <Popover.Positioner>
-    <Popover.Content>
-      <Popover.Arrow>
-        <Popover.ArrowTip />
-      </Popover.Arrow>
-      <Popover.Title />
-      <Popover.Description />
-      <Popover.CloseTrigger />
-    </Popover.Content>
-  </Popover.Positioner>
-</Popover.Root>
-```
-
-- `Popover.Root`
-- `Popover.Arrow` — `Content` 안에 놓입니다
-- `Popover.ArrowTip` — `Arrow` 안에 놓입니다
-- `Popover.Anchor` — 최상위에 놓입니다
-- `Popover.Trigger` — 최상위에 놓입니다
-- `Popover.Indicator` — `Trigger` 안에 놓입니다
-- `Popover.Positioner` — 최상위에 놓입니다
-- `Popover.Content` — `Positioner` 안에 놓입니다
-- `Popover.Title` — `Content` 안에 놓입니다
-- `Popover.Description` — `Content` 안에 놓입니다
-- `Popover.CloseTrigger` — `Content` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 13개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `open` — `boolean`, 선택. 제어되는 열림 상태.
-- `defaultOpen` — `boolean`, 선택. 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다.
-- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 팝오버가 열리거나 닫힐 때마다 호출됩니다.
-- `positioning` — `PopoverPositioning`, 선택. 떠 있는 레이어가 놓이는 위치.
-- `modal` — `boolean`, 선택. 열려 있는 동안 포커스를 가두고 나머지 페이지를 불활성으로 만듭니다. 기본값은 false입니다.
-- `portalled` — `boolean`, 선택. 떠 있는 레이어를 포털에 렌더링합니다. 기본값은 true입니다.
-- `autoFocus` — `boolean`, 선택. 열릴 때 내용 안으로 포커스를 옮깁니다. 기본값은 true입니다.
-- `restoreFocus` — `boolean`, 선택. 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다.
-- `closeOnEscape` — `boolean`, 선택. Escape로 닫습니다. 기본값은 true입니다.
-- `closeOnInteractOutside` — `boolean`, 선택. 바깥에서 포인터가 눌리면 닫습니다. 기본값은 true입니다.
-- `translations` — `TranslationOverrides`, 선택. 이 Popover에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 보관하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 사용처의 콘텐츠를 렌더링할 뿐입니다. 컬렉션을 갖지 않으며, 보여줄 것이 아무것도 없는 상태도 존재하지 않습니다.
-- `loading-state` — 콘텐츠를 불러오는 중인 팝오버는 Content 안에 사용처의 로딩 콘텐츠를 보여줍니다. 로딩 part를 두면 이 컴포넌트가 소유하지 않은 것의 레이아웃을 컴포넌트가 정하게 됩니다.
-- `error-state` — 이 컴포넌트는 값을 갖지 않고 아무것도 가져오지 않으므로 실패할 수 있는 작업이 없습니다. 떠 있는 콘텐츠 안에서 일어난 실패는 그 콘텐츠가 페이지의 다른 곳에서 이미 쓰는 방식 그대로 알리세요.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Title part에서 옵니다. 닫기 trigger의 이름은 provider의 번역에서 오며 Popover마다 덮어쓸 수 있습니다. machine이 제공하는 aria-label은 제품이 바꿀 수 없는 문자열이 되기 때문입니다.
-
-### 포커스
-
-> 열리면 포커스가 콘텐츠 안으로 옮겨가고, 닫히면 trigger로 돌아갑니다. 둘 다 machine이 처리하며, 어떤 컴포넌트도 포커스 복원을 따로 구현하지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 배치는 논리적입니다. `start`와 `end`는 provider의 로케일에서 오는 텍스트 방향을 기준으로 풀립니다. 같은 `bottom-start`라도 아랍어 인터페이스와 영어 인터페이스에서는 서로 반대쪽에 놓입니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 구조 메모
-
-### positioner와 콘텐츠
-
-> Positioner는 동작 계층이 위치를 정하는 요소이고, Content는 제품이 스타일을 입히는 요소입니다. Positioner에 스타일을 입히면 레이어 자체의 transform 및 쌓임 맥락과 충돌합니다.
-
-### 요소를 렌더링하지 않는 루트
-
-> 팝오버 machine에는 `root` anatomy part가 없으므로 Popover.Root는 동작 상태를 공개할 뿐 아무것도 렌더링하지 않습니다. Trigger와 Positioner는 사용처의 트리에서 형제 관계이며, 그래서 trigger를 옮기지 않고도 떠 있는 레이어를 trigger에서 떨어진 곳으로 포털할 수 있습니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `floating-layer`, `non-modal-layer`, `contextual-panel`, `dismiss-on-outside-click`, `translatable-strings`.
-- 다른 이름: `popover`, `popup`, `flyout`, `overlay panel`, `bubble`, `팝오버`, `팝업`, `말풍선 패널`.
-- 어휘 상태: `controlled`.