style(storybook): group form, selection and date picker story pages

- Button page shows Toggle; new Selection Controls page compares Checkbox,
  Radio Group and Switch states (specimens moved to *-examples.tsx)
- Date Picker page includes Calendar; Combobox, Input and Slider layouts
  (Korean slider labels) tidied
- Absorbed representative Stories keep their IDs as verification Stories
- Component docs updated to the new representative pages

docs/components/button.md

@@ -11,7 +11,7 @@
 | 구현 상태 | HM 스타일 적용 완료 (`hm-*` class 없음) |
 | 기준일 | 2026-10-08 (Role × Appearance 계약·현재 Story 대조) |
 | 기반 | shadcn/ui Button (CVA, Radix `Slot`) |
-| 대표 Story | `Components/Form/Button` → `All` (이름 "Button") |
+| 대표 Story | `Components/Form/Button` → `All` (이름 "Button", 사이드바 `버튼`, Toggle Button 예제 포함) |
 | 보류 | Brand label Text Border 두께(EXPERIMENTAL, 미적용), Focus(ui_viz TBD) |
 
 ## 2. 적용 근거
@@ -150,7 +150,8 @@ CVA 구조, `data-slot`, `asChild`(Radix `Slot`), `className` 확장, focus-visi
 ## 11. Storybook
 
 - 대표 Story `All`("Button")이 기본 sidebar의 유일한 Button 항목이다 → 1뎁스.
-- `All`의 구역: Sizes → Variants → States(2026-11-09 Overview 제거; 단독 Overview 버튼은 Sizes의 Brand Medium과 같아 통합). 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Solid와 Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다. 2026-11-12 비교형 레이아웃: 상단은 Sizes | Variants 두 섹션이 좌우 반반(미리보기 1080px 이상, 미만은 세로)이며, 각 섹션은 그룹당 한 행(왼쪽 고정 폭 그룹명 + 가로 버튼 행, 640px 이하에서는 그룹명이 위)이다. 하단 States는 Brand | Standard Solid | Standard Outline 3열(미리보기 1250px 이상, 890px 이상은 2열, 미만은 1열)이고, 각 열은 행=상태(Brand·Standard 모두 Default/Hover/Pressed/Disabled 4개), 열=Variants와 같은 순서의 컬러인 매트릭스다. 실제 포인터 상태를 확인하는 Interact 버튼은 verification Story "Brand States"에만 있다. 열은 매트릭스 폭 비율로 전체 폭을 나눠 쓰고 매트릭스는 열 시작에 놓인다. 버튼 사이 간격은 Sizes·Variants·States 모두 가로·세로 8px로 같다. 1열에서 표가 화면보다 넓으면 표 영역 안에서만 가로 스크롤한다. 레이아웃만 바꿨고 버튼 스타일·상태 표현은 그대로다.
+- 2026-11-13 현재 `All`의 구역: Brand | Standard Solid | Standard Outline 세 섹션(H2, 공통 제목 → 콘텐츠 12px). 각 섹션 안에 Sizes(H3 → 8px → Small / Medium / Large)와 States(H3 → 8px → 행 Default/Hover/Pressed/Disabled × 해당 Treatment 컬러 매트릭스)가 24px 간격으로 온다. 페이지 단위 Sizes·Variants·States 제목은 없다(컬러 조합은 매트릭스 열과 verification `Roles`에서 확인). 미리보기 1400px 이상에서 같은 너비 3열, 미만은 Brand → Solid → Outline 1열(섹션 간격 28px)이다. 2026-11-13: 매트릭스가 자기 열보다 넓으면(390px에서 420px Standard Solid) 세 Treatment가 함께 상태별 세로 배치(상태 이름 12/16/400 보조색 → 4px → 버튼 줄, 버튼 간격 8px·줄바꿈, 상태 간 12px)로 바뀌어 표 내부·페이지 가로 스크롤이 없다. 버튼 크기·상태·색상과 props는 그대로다. 표 하단에는 독립 H2 "Toggle Button" 한 섹션(./toggle-examples, 기존 Toggle 대표 화면과 같은 예시)이 버튼 열과 36px 간격으로 오며, 그룹 H3 Variants / States(Off / On, Disabled) · Groups(단독, 단일 선택, 다중 선택 — 연결 그룹 예시, 이 페이지에서는 "연결 그룹 · " 접두어 생략) · Sizes(Small, Medium, Large — 2026-11-13 Default 라벨을 Button과 같은 Medium으로, 글자 토글은 prop 값 대신 예시 문구 "알림") 3개를 버튼과 같이 미리보기 1400px 이상에서 같은 너비 3열(Brand / Standard Solid / Standard Outline 열과 같은 위치), 미만은 1열(그룹 간 24px)로 놓는다(2026-11-13). 그룹 라벨은 버튼과 같은 규칙(들여쓰기 0, H3 → 8px)이고, 각 행은 States 매트릭스와 같은 형식(왼쪽 라벨 14/20/500 보조색 → 8px → 컨트롤, 행 간 8px, 그룹 안 컨트롤 시작선 정렬)이다. 버튼 매트릭스가 세로 배치로 바뀌면 Toggle 행도 함께 세로 배치(라벨 12/16/400 → 4px → 컨트롤, 행 간 12px)로 바뀐다. 버튼 스타일·상태 표현·매트릭스 구조는 그대로다. 아래 2026-11-12 설명은 이전 배치 기록이다.
+- `All`의 구역(2026-11-12 기록): Sizes → Variants → States(2026-11-09 Overview 제거; 단독 Overview 버튼은 Sizes의 Brand Medium과 같아 통합). 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Solid와 Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다. 2026-11-12 비교형 레이아웃: 상단은 Sizes | Variants 두 섹션이 좌우 반반(미리보기 1080px 이상, 미만은 세로)이며, 각 섹션은 그룹당 한 행(왼쪽 고정 폭 그룹명 + 가로 버튼 행, 640px 이하에서는 그룹명이 위)이다. 하단 States는 Brand | Standard Solid | Standard Outline 3열(미리보기 1250px 이상, 890px 이상은 2열, 미만은 1열)이고, 각 열은 행=상태(Brand·Standard 모두 Default/Hover/Pressed/Disabled 4개), 열=Variants와 같은 순서의 컬러인 매트릭스다. 실제 포인터 상태를 확인하는 Interact 버튼은 verification Story "Brand States"에만 있다. 열은 매트릭스 폭 비율로 전체 폭을 나눠 쓰고 매트릭스는 열 시작에 놓인다. 버튼 사이 간격은 Sizes·Variants·States 모두 가로·세로 8px로 같다. 1열에서 표가 화면보다 넓으면 표 영역 안에서만 가로 스크롤한다. 레이아웃만 바꿨고 버튼 스타일·상태 표현은 그대로다.
 - verification(`tags: ["verification"]`, 기본 sidebar 제외): `Roles`, `Sizes`, `States`("Brand States"), `StandardStates`, `LongLabel`, `KoreanLabels`, `IconTextNarrow`, `Destructive`, `Playground`(HM 전용), `Compatibility`(ghost/link, default/outline 별칭). Controls는 조합별 선택을 제한하지 않으므로 §6.1의 허용 조합을 직접 지킨다. Verification은 기술 점검용이며 운영 화면의 사용 위치·세트 규칙은 §5가 우선한다.
 - 대표 경로/ID: `Components/Form/Button → All` (`components-form-button--all`), `Components/Overlay/Dialog → All` (`components-overlay-dialog--all`), `Components/Overlay/Alert Dialog → All` (`components-overlay-alert-dialog--all`), `Patterns/Data/Filter Bar → Filter Bar` (`patterns-data-filter-bar--all`). 삭제 세트 점검 ID는 `components-form-button--destructive`(verification)다.
 - 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조.

docs/components/calendar.md

@@ -10,7 +10,7 @@
 | 구현 상태 | 구현 완료 (현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | shadcn/ui Calendar = **react-day-picker v10** |
-| 대표 Story | `Components/Search & Date/Calendar` → `All` (이름 "Calendar") |
+| 대표 Story | `Components/Search & Date/Date Picker` → `All`의 "Calendar · …" 섹션(사이드바 `날짜 선택`). 기존 `Components/Search & Date/Calendar` → `All`(`components-search-date-calendar--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거

docs/components/checkbox.md

@@ -11,7 +11,7 @@
 | 구현 상태 | 구현 완료 (현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | shadcn/ui Checkbox (Radix `Checkbox`) |
-| 대표 Story | `Components/Form/Checkbox` → `All` (이름 "Checkbox") |
+| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Checkbox 열(Default·Hover·Focus·Disabled·Validation)과 Variants의 Indeterminate(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Checkbox` → `All`(`components-form-checkbox--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거
@@ -100,7 +100,7 @@ Radix 구조·ARIA(`role=checkbox`, `aria-checked`)·키보드, `data-slot`, `cn
 
 ## 9. Storybook
 
-- 대표 Story `All`("Checkbox"): States `unchecked`, `checked`, `indeterminate`, `hover`, `focus`, `disabled`(PC 3열 × 2행)와 Validation `error`. Overview·Usage 구역은 2026-11-09에 없앴고 `long`(Long Label) 예시는 숨김 verification Story `LongLabel`로 옮겼다. 옵션 Label은 Story에서만 `--hm-label-text`를 `--foreground`로 덮어 기본 텍스트 색으로 보이며(공용 Label은 그대로, 비활성 Checkbox 옆 Label은 `peer-disabled`로 보조색 유지), 예시 제목은 보조색이다. Focus는 `play`로 실제 focus. `indeterminate`는 controlled 예시를 겸해 클릭하면 checked가 된다(Radix, 2026-10-22 별도 `interactive` 구역 통합). `hover`는 Unchecked·Checked를 Storybook 전용 `data-sb-hover`(`.storybook/pseudo-states.ts`)로 고정해 보여 준다. Checkbox API가 아니며 소비 코드에 붙이지 않는다.
+- 숨김 기존 `All`("Checkbox", URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): States `unchecked`, `checked`, `indeterminate`, `hover`, `focus`, `disabled`(PC 3열 × 2행)와 Validation `error`. Overview·Usage 구역은 2026-11-09에 없앴고 `long`(Long Label) 예시는 숨김 verification Story `LongLabel`로 옮겼다. 옵션 Label은 Story에서만 `--hm-label-text`를 `--foreground`로 덮어 기본 텍스트 색으로 보이며(공용 Label은 그대로, 비활성 Checkbox 옆 Label은 `peer-disabled`로 보조색 유지), 예시 제목은 보조색이다. Focus는 `play`로 실제 focus. `indeterminate`는 controlled 예시를 겸해 클릭하면 checked가 된다(Radix, 2026-10-22 별도 `interactive` 구역 통합). `hover`는 Unchecked·Checked를 Storybook 전용 `data-sb-hover`(`.storybook/pseudo-states.ts`)로 고정해 보여 준다. Checkbox API가 아니며 소비 코드에 붙이지 않는다.
 - verification: `Unchecked`, `Checked`, `Indeterminate`, `Disabled`, `Error`, `LongLabel`("Long Label"), `Playground`.
 
 ## 10. 사용자 확정 결정

docs/components/combobox.md

@@ -102,8 +102,8 @@ Popover: Portal, collision, Escape, 바깥 클릭 닫힘, trigger focus 복귀.
 
 ## 10. Storybook
 
-- 대표 Story `All`("Combobox"): Overview(Placeholder + search, Remix는 disabled option), Sizes(Medium, 같은 size의 Select / Combobox 비교), States(Selected(controlled), Disabled), Usage(Long option). Label은 Story 조합이다. 대표 화면은 선택값 표시(`value = …`)를 숨기며 숨김 `Controlled`는 유지한다.
-- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`)·States(`Selected`, `Disabled`)는 상태명을 콤보박스 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label(`프레임워크`, `선택됨 (controlled)`, `비활성`)을 없앴다. 접근성 이름은 Trigger의 `aria-label="프레임워크 (상태명)"`(보이는 상태명 포함, 팝업·목록 이름에도 쓰임). 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(Long option, Select / Combobox 비교)와 verification Story, Combobox·토큰·API는 변경 없다.
+- 대표 Story `All`("Combobox"): Sizes(Large·Medium), States(Selected(controlled), Disabled), Usage(Long option, 같은 size의 Select / Combobox 비교). Overview 구역은 없다. Label은 Story 조합이다. 대표 화면은 선택값 표시(`value = …`)를 숨기며 숨김 `Controlled`는 유지한다.
+- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`; 2026-11-13 기본 크기가 실제 large라 `Default` 라벨을 `Large`로 정정)·States(`Selected`, `Disabled`)는 상태명을 콤보박스 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label(`프레임워크`, `선택됨 (controlled)`, `비활성`)을 없앴다. 접근성 이름은 Trigger의 `aria-label="프레임워크 (상태명)"`(보이는 상태명 포함, 팝업·목록 이름에도 쓰임). 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(Long option, Select / Combobox 비교)와 verification Story, Combobox·토큰·API는 변경 없다.
 - verification: `Empty`, `Controlled`, `Long Option`.
 
 ## 11. 사용자 확정 결정 / 보류

docs/components/date-picker.md

@@ -12,7 +12,7 @@
 | 구현 상태 | 구현 완료 (single-date, 현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | `Popover`(public API) + `Calendar`(public API) 조합. shadcn 공식 Date Picker는 예시 조합이다 |
-| 대표 Story | `Components/Search & Date/Date Picker` → `All` (이름 "Date Picker") |
+| 대표 Story | `Components/Search & Date/Date Picker` → `All` (이름 "Date Picker", 사이드바 `날짜 선택`, Calendar 예제 포함) |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거
@@ -91,7 +91,7 @@ Popover: Portal, collision 처리, Escape, 바깥 클릭 닫힘, trigger focus
 ## 9. Storybook
 
 - 대표 Story `All`("Date Picker"): Empty, Selected(`2026.10.06`), 기본 형식(`2026.01.09`)/custom override, Controlled(대표 화면은 값 표시 숨김, 숨김 `Controlled`는 표시), Medium, Disabled dates(5일 이전·일요일), Disabled를 한 페이지에 둔다. Label은 Story 조합이며 `today`는 Calendar prop으로 2026-10-02에 고정.
-- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`)·States(`Selected`, `Controlled`, `Disabled dates`, `Disabled`)는 상태명을 날짜 선택 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label을 없앴다. 접근성 이름은 Trigger의 `aria-label="시작일|마감일|날짜 (상태명)"`(보이는 상태명 포함). `Disabled dates`의 규칙 문구 "5일 이전과 일요일은 선택 불가"는 Trigger 아래 도움말(12/18/400 secondary)로 옮기고 `aria-describedby`로 연결했다. 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(형식 2종)와 verification Story, DatePicker·토큰·API는 변경 없다. Storybook 사이드바 표시명은 `날짜 선택`(Story ID 변경 없음).
+- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`; 2026-11-13 기본 크기가 실제 large라 `Default` 라벨을 `Large`로 정정, Usage Default format의 Label에서 H3와 반복되던 "기본 형식 · " 제거)·States(`Selected`, `Controlled`, `Disabled dates`, `Disabled`)는 상태명을 날짜 선택 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label을 없앴다. 접근성 이름은 Trigger의 `aria-label="시작일|마감일|날짜 (상태명)"`(보이는 상태명 포함). `Disabled dates`의 규칙 문구 "5일 이전과 일요일은 선택 불가"는 Trigger 아래 도움말(12/18/400 secondary)로 옮기고 `aria-describedby`로 연결했다. 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(형식 2종)와 verification Story, DatePicker·토큰·API는 변경 없다. Storybook 사이드바 표시명은 `날짜 선택`(Story ID 변경 없음).
 - verification: `Empty`, `Selected`, `Controlled`.
 
 ## 10. 사용자 확정 결정

docs/components/input.md

@@ -86,6 +86,7 @@ native `<input>` 동작 전체(`type`, `file:` 스타일 class, `placeholder`),
 
 - 대표 Story `All`("Input"): Sizes(Small / Medium / Large 비교) → States(`focus`, `disabled`, `readonly`) → Validation(`error`, `error-message`). Focus는 `play` 함수로 실제 focus를 준다. 2026-10-22 Overview(`default`, size 생략 = Large)는 Sizes의 Large와 같아 대표 화면에서 뺐고, 크기별 수치 목록·설명은 숨김 `Sizes`("Compare Sizes")에 남겼다. size 생략 시 Large(§5)는 그대로다.
 - 2026-11-12 대표 화면 정리: States·Validation도 Sizes처럼 상태명(Focus / Disabled / Readonly / Error / Error Message)을 입력창 Label 자리에 한 번만 표시하고, 반복되던 `Project name` Label과 별도 그룹 제목은 없앴다. 입력 필드의 접근성 이름은 `aria-label="Project name (상태명)"`으로 유지한다(보이는 상태명 포함). 세 섹션은 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열)를 쓰며 Validation 2개는 States 앞 두 열과 정렬된다. Story 전시만 바뀌었고 Input 컴포넌트·토큰·API·verification Story는 변경 없다.
+- 2026-11-13: States의 Disabled를 Focus·Validation과 같은 Medium(34px)으로 맞췄다. Readonly는 컴포넌트 규칙(텍스트만, size와 무관하게 Large 수치)이라 42px 그대로다. Input 기본값·크기 정책은 변경 없음.
 - verification(`tags: ["verification"]`): `Default`, `Focus`, `Error`, `InvalidFocus`, `ErrorMessage`, `Required`, `Disabled`, `Readonly`, `Sizes`("Compare Sizes"), `Small`, `Medium`, `Large`, `Playground`(HM 전용).
 - Error Message·Required 표시는 Story 안의 조합 예시이며 Input 컴포넌트의 일부가 아니다.
 - sidebar는 `All` 하나만 보이는 1뎁스. 운영 규칙은 지침 §6.3, §7 참조.

docs/components/radio-group.md

@@ -9,7 +9,7 @@
 | 구현 상태 | 구현 완료 (현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | shadcn/ui Radio Group (Radix `RadioGroup`) |
-| 대표 Story | `Components/Form/Radio Group` → `All` (이름 "Radio Group") |
+| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Radio Group 열(Default·Hover·Focus·Disabled 항목/그룹·Validation)과 Variants의 Vertical·Horizontal(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Radio Group` → `All`(`components-form-radio-group--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) Focus 칸의 링은 Storybook 전용 `data-sb-focus`(`.storybook/pseudo-states.ts`, 2026-11-13)로 고정해 보여 주며 실제 Tab 포커스 동작은 같다. |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거
@@ -57,7 +57,7 @@ shadcn `size-4 border-input text-primary shadow-xs dark:` class 제거 → theme
 
 ## 9. Storybook
 
-대표 Story `All`: Variants(`vertical`, `horizontal`; 2026-11-09 Overview 제거로 Vertical이 Variants 첫 항목), States(`hover`, `focus`, `disabled-item`, `disabled-group`), Validation(`error`). Focus는 `play`로 실제 focus. `hover`는 첫 항목을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 RadioGroupItem API가 아니다. verification: `Vertical`, `Horizontal`, `Disabled`, `Error`.
+숨김 기존 `All`(URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): Variants(`vertical`, `horizontal`; 2026-11-09 Overview 제거로 Vertical이 Variants 첫 항목), States(`hover`, `focus`, `disabled-item`, `disabled-group`), Validation(`error`). Focus는 `play`로 실제 focus. `hover`는 첫 항목을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 RadioGroupItem API가 아니다. verification: `Vertical`, `Horizontal`, `Disabled`, `Error`.
 
 ## 10. 사용자 확정 결정
 

docs/components/switch.md

@@ -9,7 +9,7 @@
 | 구현 상태 | 구현 완료 (현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | shadcn/ui Switch (Radix `Switch`) |
-| 대표 Story | `Components/Form/Switch` → `All` (이름 "Switch") |
+| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Switch 열(Default·Hover·Focus·Disabled, Validation 없음)(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Switch` → `All`(`components-form-switch--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) Focus 칸의 링은 Storybook 전용 `data-sb-focus`(`.storybook/pseudo-states.ts`, 2026-11-13)로 고정해 보여 주며 실제 Tab 포커스 동작은 같다. |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거
@@ -56,7 +56,7 @@ shadcn의 `h-[1.15rem] w-8`, `border`, `shadow-xs`, `dark:` class 제거 → the
 
 ## 9. Storybook
 
-대표 Story `All`: States 한 구역에 `off`, `on`, `hover`, `focus`, `disabled`(2026-11-09 Overview 제거, PC 5열; 2026-10-22 `interactive` 구역 제거, 모든 예시가 실제 클릭으로 토글). `hover`는 Off·On을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 Switch API가 아니다. Focus는 `play`로 실제 focus. verification: `Off`, `On`, `Disabled`.
+숨김 기존 `All`(URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): States 한 구역에 `off`, `on`, `hover`, `focus`, `disabled`(2026-11-09 Overview 제거, PC 5열; 2026-10-22 `interactive` 구역 제거, 모든 예시가 실제 클릭으로 토글). `hover`는 Off·On을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 Switch API가 아니다. Focus는 `play`로 실제 focus. verification: `Off`, `On`, `Disabled`.
 
 ## 10. 사용자 확정 결정
 

docs/components/toggle.md

@@ -9,7 +9,7 @@
 | 구현 상태 | 구현 완료 (현재 HM 규격) |
 | 기준일 | 2026-10-02 |
 | 기반 | shadcn/ui Toggle (Radix `Toggle`) |
-| 대표 Story | `Components/Form/Toggle` → `All` (이름 "Toggle") |
+| 대표 Story | `Components/Form/Button` → `All`의 "Toggle Button" 섹션(H3 Variants / States · Groups · Sizes, 사이드바 `버튼`). 기존 `Components/Form/Toggle` → `All`(`components-form-toggle--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
 | 보류 | 아래 §11 |
 
 ## 2. 적용 근거
@@ -69,9 +69,9 @@ Radix 구조·`aria-pressed`·`data-state`·Enter/Space·controlled/uncontrolled
 
 ## 9. Storybook
 
-- 대표 Story `All`("Toggle"): Variants(Off/On, default·outline)와 States(Disabled off/on), 단독 · 연결 그룹(단독 Toggle, `spacing=0` ToggleGroup 단일·다중 선택), Sizes(2026-11-09 Overview를 Variants로 바꾸고 PC 3열 기준으로 재배치). 2026-10-22 Icon-only·icon + text 예시는 숨김 `IconOnly`로만 확인하고, Controlled(`pressed` 표시)·className 확장 예시는 대표 화면에서 제거했다. `pressed` / `onPressedChange`와 `className` 확장 API(§5)는 그대로다.
+- 대표 Story `All`("Toggle"): Variants(Off/On, default·outline)와 States(Disabled: Off/On — 2026-11-13 행 라벨과 반복되던 "Disabled" 글자 제거), 단독 · 연결 그룹(단독 Toggle, `spacing=0` ToggleGroup 단일·다중 선택), Sizes(2026-11-09 Overview를 Variants로 바꾸고 PC 3열 기준으로 재배치). 2026-10-22 Icon-only·icon + text 예시는 숨김 `IconOnly`로만 확인하고, Controlled(`pressed` 표시)·className 확장 예시는 대표 화면에서 제거했다. `pressed` / `onPressedChange`와 `className` 확장 API(§5)는 그대로다.
 - 2026-11-12 폼 요소 전시 통일: 나란히 놓인 토글 간격을 Button Story와 같은 8px로 맞췄다(Off/On·Disabled·Sizes·숨김 `IconOnly`, 기존 12px). `단독` 예시는 열 너비로 늘어나지 않고 Toggle 자체 너비를 유지한다. 상단 Variants·States는 기존 3열 중 두 칸 배치 대신 2열로 바꿔 전체 폭을 각 행의 한 줄 폭 비율(324:234, 최소 max-content)로 나눈다. 미리보기 폭 1000px 이상(브라우저 1280px + LNB 180px 포함)에서 Variants 4개가 한 줄로 유지되고, 그 미만은 1열로 쌓여 자연스럽게 줄바꿈한다. 이 때문에 States 시작 위치는 아래 `단독 · 연결 그룹` 3열과 맞추지 않는다. Toggle·토큰·API는 변경 없다.
-- verification: `States`, `Icon Only`, `Disabled`.
+- verification: `Toggle`(기존 `All`, 사이드바 숨김), `States`, `Icon Only`, `Disabled`, `Content Nodes`.
 
 ## 10. 사용자 확정 결정