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
2026-11-13 17:57:44 +09:00
1 parent fe9c115cf9
commit 71d504407d
@@ -1,8 +1,9 @@
-import { useState, type ReactNode } from "react"
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react"
 import { DownloadIcon } from "lucide-react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Button, type ButtonAppearance } from "@hm-design/ui"
 import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { ToggleSections } from "./toggle-examples"

 // Story structure follows ui_viz (implementations/web/storybook/Button.stories.jsx):
 // one representative "Button" Story shows kinds, sizes and states on a single screen; the same sections also exist
@@ -231,52 +232,96 @@ function DestructiveBoard() {
 // Group label: the StateBoard H3 style (14/20/500, secondary). `data-sb-board` gives the block the common one-step section indent.
 const groupLabel = "m-0 text-sm font-medium text-muted-foreground"

-// Sizes / Variants (top, side by side): one row per group, label on a fixed 128px left column so every group title and first
-// button line up. At 640px and below the label moves above its buttons. Buttons keep the page-wide 8px gap, across and between
-// rows (same as the States matrices), and wrap only when too narrow.
-function GroupRows({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) {
+// 2026-11-13 (user request): one column per treatment, Sizes and States inside it. Each block is its H3 label (StateBoard H3
+// style), 8px, then the specimens; Sizes and States are 24px apart. The blocks stay on the section edge (no data-sb-board
+// indent) so the 420px Standard Solid matrix fits an equal third at the 1400px breakpoint without an inner scroll.
+function GroupBlock({ id, label, children }: { id: string; label: string; children: ReactNode }) {
  return (
-    <div data-sb-board="" className="grid gap-2 max-sm:gap-5">
-      {groups.map(({ id, label, children }) => (
-        <section key={id} data-overview-state={id} aria-label={label} className="flex min-w-0 items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
-          <h3 className={`${groupLabel} w-32 shrink-0 max-sm:w-auto`}>{label}</h3>
-          <div className="flex min-w-0 flex-wrap items-center gap-2">{children}</div>
-        </section>
-      ))}
-    </div>
-  )
-}
-
-// States (bottom): Brand | Standard Solid | Standard Outline columns, title on top, all tops aligned. The columns use the
-// whole width, shared in proportion to their matrices (about 301 / 420 / 338px, never narrower than the matrix); each matrix
-// keeps its 8px button gap and sits at the start of its column. 3 columns from a 1250px preview (the three need about 1106px
-// of content plus the page margins), 2 columns (Brand + Solid, then Outline) from 890px, 1 column below; a 1-column matrix
-// wider than the screen scrolls in its own box only (the page never scrolls sideways).
-function GroupColumns({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) {
-  return (
-    <div
-      data-sb-board=""
-      className="grid grid-cols-[minmax(0,1fr)] items-start gap-6 min-[890px]:grid-cols-[minmax(max-content,301fr)_minmax(max-content,420fr)] min-[1250px]:grid-cols-[minmax(max-content,301fr)_minmax(max-content,420fr)_minmax(max-content,338fr)]"
-    >
-      {groups.map(({ id, label, children }) => (
-        <section key={id} data-overview-state={id} aria-label={label} className="grid min-w-0 content-start gap-2">
-          <h3 className={groupLabel}>{label}</h3>
-          {children}
-        </section>
-      ))}
-    </div>
+    <section data-overview-state={id} aria-label={label} className="grid min-w-0 content-start gap-2">
+      <h3 className={groupLabel}>{label}</h3>
+      {children}
+    </section>
  )
 }

 // States: one matrix per treatment, rows = Default / Hover / Pressed / Disabled (standardStates, the same 4 rows for Brand;
-// the live Interact button stays on the verification "Brand States"), columns = that treatment's colors in the Variants order.
-// Columns follow their buttons (auto table layout). 4px cell padding gives the same 8px gap as Sizes / Variants between
-// buttons, rows, the state label and the color header; the outer edge keeps none (pl-0 / last:pr-0) so the three matrices
-// fit one row at 1440px. Buttons sit centered under their color and are never resized.
+// the live Interact button stays on the verification "Brand States"), columns = that treatment's colors in the roles order.
+// Columns follow their buttons (auto table layout). 4px cell padding gives the same 8px gap as Sizes between buttons, rows,
+// the state label and the color header; the outer edge keeps none (pl-0 / last:pr-0). Buttons sit centered under their color
+// and are never resized. Matrix widths: Brand 301px, Standard Solid 420px, Standard Outline 338px.
+// 2026-11-13 (user request, no inner scroll on narrow screens): when a matrix is wider than its column (the 420px Standard Solid
+// matrix in a 358px column at 390px), every treatment switches together to the stacked layout: one row per state, its label
+// above the buttons, which wrap with the same 8px gap. Each matrix measures its own table (the auto-layout width it needs) and
+// reports whether it fits; MatrixFitProvider stacks all of them while any does not, so the three treatments keep one layout.
+// Storybook presentation only: the buttons, their props and states are unchanged.
+// Stacked layout state names (2026-11-13, user request): one step below the H3 "States" label (14/20/500) so the two levels
+// read apart — 12/16/400, same secondary color. Only these names change; the common H2 / H3 styles are untouched.
+const stackedStateLabel = "text-xs font-normal text-muted-foreground"
+
+const MatrixFit = createContext<{ stacked: boolean; report: (id: string, overflow: boolean) => void }>({ stacked: false, report: () => {} })
+
+function MatrixFitProvider({ children }: { children: ReactNode }) {
+  const [overflowing, setOverflowing] = useState<ReadonlySet<string>>(() => new Set())
+  const report = useCallback((id: string, overflow: boolean) => {
+    setOverflowing((current) => {
+      if (current.has(id) === overflow) return current
+      const next = new Set(current)
+      if (overflow) next.add(id)
+      else next.delete(id)
+      return next
+    })
+  }, [])
+  const value = useMemo(() => ({ stacked: overflowing.size > 0, report }), [overflowing, report])
+  return <MatrixFit.Provider value={value}>{children}</MatrixFit.Provider>
+}
+
 function StateMatrix({ appearance, states }: { appearance: ButtonAppearance; states: readonly (readonly [string, Record<string, unknown>])[] }) {
  const colors = rolesFor(appearance)
+  const { stacked, report } = useContext(MatrixFit)
+  const frame = useRef<HTMLDivElement>(null)
+  // The table's own width, kept while the stacked layout is shown (no table to measure then).
+  const tableWidth = useRef(0)
+  const labelId = useId()
+  useLayoutEffect(() => {
+    const element = frame.current
+    if (!element) return
+    const check = () => {
+      const table = element.querySelector("table")
+      if (table) tableWidth.current = table.offsetWidth
+      report(appearance, tableWidth.current > element.clientWidth)
+    }
+    const observer = new ResizeObserver(check)
+    observer.observe(element)
+    check()
+    // The labels may get wider once the web font has loaded.
+    void document.fonts?.ready.then(check)
+    return () => {
+      observer.disconnect()
+      report(appearance, false)
+    }
+  }, [appearance, report])
+  if (stacked) {
+    return (
+      <div ref={frame} data-state-matrix="stacked" className="grid min-w-0 max-w-full gap-3">
+        {states.map(([state, props], index) => (
+          <div key={state} role="group" aria-labelledby={`${labelId}-${index}`} className="grid gap-1">
+            <span id={`${labelId}-${index}`} className={stackedStateLabel}>
+              {state}
+            </span>
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              {colors.map(([variant, color]) => (
+                <Button key={variant} variant={variant} appearance={appearance} {...props}>
+                  {color}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
  return (
-    <div className="min-w-0 max-w-full overflow-x-auto">
+    <div ref={frame} data-state-matrix="table" className="min-w-0 max-w-full overflow-x-auto">
      <table className="border-collapse">
        <thead>
          <tr>
@@ -311,8 +356,16 @@ function StateMatrix({ appearance, states }: { appearance: ButtonAppearance; sta
  )
 }

-// Representative Story: the common Story page (Sizes → Variants → States).
+// The Toggle Button section of the representative page, in the same stacked / matrix form as the state matrices.
+function ToggleButtonSection() {
+  const { stacked } = useContext(MatrixFit)
+  return <ToggleSections titlePrefix="Toggle Button" idPrefix="toggle-" flat stacked={stacked} />
+}
+
+// Representative Story: the common Story page, one section per treatment (Brand | Standard Solid | Standard Outline).
 // The former Overview button was the default Brand Medium button already shown under Sizes, so Overview is merged into Sizes.
+// 2026-11-13 (user request): the Variants section and the page-level Sizes / States titles are removed; each treatment section
+// (H2, common title → content 12px) holds its own Sizes and States (H3). The verification "Roles" Story keeps the role rows.
 // Named after the component, as in ui_viz. It is the only Button entry in the default sidebar, so Storybook shows Button as a single 1-depth item.
 export const All: Story = {
  name: "Button",
@@ -320,45 +373,37 @@ export const All: Story = {
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Button" />
-      {/* Sizes | Variants on one row from a 1080px preview (1280px screen with the 180px LNB), sharing the whole width in two
-          equal halves (never narrower than their rows). Narrower previews stack the two sections. */}
-      <StorySectionGrid className="grid-cols-1 items-start min-[1080px]:grid-cols-[minmax(max-content,1fr)_minmax(max-content,1fr)]">
-        <StorySection title="Sizes">
-          <GroupRows
-            groups={appearances.slice(0, 2).map(([appearance, label]) => ({
-              id: `sizes-${appearance}`,
-              label,
-              children: sizes.map(([size, sizeLabel]) => (
-                <Button key={size} appearance={appearance} size={size}>
-                  {sizeLabel}
-                </Button>
-              )),
-            }))}
-          />
-        </StorySection>
-        <StorySection title="Variants">
-          <GroupRows
-            groups={appearances.map(([appearance, label]) => ({
-              id: `roles-${appearance}`,
-              label,
-              children: rolesFor(appearance).map(([variant, color]) => (
-                <Button key={variant} variant={variant} appearance={appearance}>
-                  {color}
-                </Button>
-              )),
-            }))}
-          />
-        </StorySection>
-      </StorySectionGrid>
-      <StorySection title="States">
-        <GroupColumns
-          groups={appearances.map(([appearance, label]) => ({
-            id: `${appearance}-states`,
-            label,
-            children: <StateMatrix appearance={appearance} states={standardStates} />,
-          }))}
-        />
-      </StorySection>
+      {/* Equal-width columns from a 1400px preview (the 420px Standard Solid matrix fits a third: 3 × 420 + 2 × 24 plus the page
+          margins and the scrollbar); below that Brand → Standard Solid → Standard Outline in one column, 28px apart (the
+          common section gap of StorySectionGrid). */}
+      <MatrixFitProvider>
+        <StorySectionGrid className="grid-cols-1 items-start min-[1400px]:grid-cols-3">
+          {appearances.map(([appearance, label]) => (
+            <StorySection key={appearance} id={`${appearance}-group`} title={label}>
+              <div className="grid min-w-0 gap-6">
+                <GroupBlock id={`sizes-${appearance}`} label="Sizes">
+                  <div className="flex min-w-0 flex-wrap items-center gap-2">
+                    {sizes.map(([size, sizeLabel]) => (
+                      <Button key={size} appearance={appearance} size={size}>
+                        {sizeLabel}
+                      </Button>
+                    ))}
+                  </div>
+                </GroupBlock>
+                <GroupBlock id={`${appearance}-states`} label="States">
+                  <StateMatrix appearance={appearance} states={standardStates} />
+                </GroupBlock>
+              </div>
+            </StorySection>
+          ))}
+        </StorySectionGrid>
+        {/* 2026-11-13 (user request): Toggle Button joins the Button page ("버튼") after the treatment columns, from
+            ./toggle-examples unchanged; the Toggle Stories keep their IDs and direct URLs but are hidden from the sidebar.
+            `flat`: one "Toggle Button" H2 section, 36px below the columns above, with 3 equal group columns (Variants / States,
+            Groups, Sizes) from 1400px like the treatments, each row in the States matrix form (label left, 8px rhythm).
+            Inside MatrixFitProvider so its rows switch to the stacked form together with the matrices. */}
+        <ToggleButtonSection />
+      </MatrixFitProvider>
    </StoryPage>
  ),
 }
@@ -0,0 +1,82 @@
+import { useState, type ReactNode } from "react"
+import type { DateRange } from "react-day-picker"
+import { Calendar } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Calendar specimens (Storybook only). Used by the Calendar Stories (verification) and by the Date Picker representative
+// page, which shows Date Picker and Calendar under one sidebar item ("날짜 선택").
+// Each mode uses real, clickable calendars. `today` is pinned to 2026-10-02 so the Story looks the same on any day; this uses
+// react-day-picker's own `today` prop, not an HM state. Korean is the Calendar default locale.
+
+const today = new Date(2026, 9, 2)
+const month = new Date(2026, 9, 1)
+
+const box = (node: ReactNode) => <div className="rounded-md border bg-card w-fit">{node}</div>
+
+// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
+export function Single({ showValue = true }: { showValue?: boolean }) {
+  const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 15))
+  return (
+    <div className="grid gap-2">
+      {box(<Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={month} today={today} />)}
+      {showValue ? <span className="text-sm text-muted-foreground" data-testid="single">{`선택: ${date ? date.toLocaleDateString("ko-KR") : "없음"}`}</span> : null}
+    </div>
+  )
+}
+
+export function DisabledDates() {
+  const [date, setDate] = useState<Date | undefined>()
+  return box(
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      defaultMonth={month}
+      today={today}
+      disabled={[{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }]}
+    />
+  )
+}
+
+export function Range() {
+  const [range, setRange] = useState<DateRange | undefined>({ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) })
+  return box(<Calendar mode="range" selected={range} onSelect={setRange} defaultMonth={month} today={today} />)
+}
+
+function TwoMonths() {
+  return box(<Calendar mode="single" numberOfMonths={2} defaultMonth={month} today={today} />)
+}
+
+// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles and
+// specimen tops line up; the wide Two months specimen takes two tracks (the full row on narrow screens).
+const Grid = ({ children }: { children: ReactNode }) => (
+  <div className="sb-calendar-example-grid grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
+)
+const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => (
+  <div className={wide ? "sb-calendar-example-wide col-span-full min-w-0 min-[1000px]:col-span-2" : "min-w-0"}>
+    <StateBoard min={10000} states={[{ id, label, children }]} />
+  </div>
+)
+
+// The Calendar sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components.
+export function CalendarSections({ titlePrefix, idPrefix = "" }: { titlePrefix?: string; idPrefix?: string }) {
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  return (
+    <>
+      <StorySection title={title("Variants")}>
+        <Grid>
+          <Cell id={`${idPrefix}single`} label="Single"><Single showValue={false} /></Cell>
+          <Cell id={`${idPrefix}range`} label="Range"><Range /></Cell>
+          <Cell id={`${idPrefix}months`} label="Two months" wide><TwoMonths /></Cell>
+        </Grid>
+      </StorySection>
+      <StorySection title={title("States")}>
+        <Grid>
+          <Cell id={`${idPrefix}disabled`} label="Disabled dates"><DisabledDates /></Cell>
+        </Grid>
+      </StorySection>
+    </>
+  )
+}
@@ -1,88 +1,26 @@
-import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import type { DateRange } from "react-day-picker"
-import { Calendar } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader } from "@/components/story-page"
+import { CalendarSections, DisabledDates, Range, Single } from "./calendar-examples"

-// The representative "Calendar" Story shows each mode with real, clickable calendars; the same specimens also exist as Stories
-// tagged `verification` (hidden from the sidebar). `today` is pinned to 2026-10-02 so the Story looks the same on any day; this
-// uses react-day-picker's own `today` prop, not an HM state. Korean is the Calendar default locale.
-
-const today = new Date(2026, 9, 2)
-const month = new Date(2026, 9, 1)
-
-const box = (node: ReactNode) => <div className="rounded-md border bg-card w-fit">{node}</div>
-
-// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
-function Single({ showValue = true }: { showValue?: boolean }) {
-  const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 15))
-  return (
-    <div className="grid gap-2">
-      {box(<Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={month} today={today} />)}
-      {showValue ? <span className="text-sm text-muted-foreground" data-testid="single">{`선택: ${date ? date.toLocaleDateString("ko-KR") : "없음"}`}</span> : null}
-    </div>
-  )
-}
-
-function DisabledDates() {
-  const [date, setDate] = useState<Date | undefined>()
-  return box(
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      defaultMonth={month}
-      today={today}
-      disabled={[{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }]}
-    />
-  )
-}
-
-function Range() {
-  const [range, setRange] = useState<DateRange | undefined>({ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) })
-  return box(<Calendar mode="range" selected={range} onSelect={setRange} defaultMonth={month} today={today} />)
-}
-
-function TwoMonths() {
-  return box(<Calendar mode="single" numberOfMonths={2} defaultMonth={month} today={today} />)
-}
-
-// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
-// specimen tops line up; the wide Two months specimen takes two tracks (the full row on narrow screens).
-const Grid = ({ children }: { children: ReactNode }) => (
-  <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
-)
-const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => (
-  <div className={wide ? "col-span-full min-w-0 min-[1000px]:col-span-2" : "min-w-0"}>
-    <StateBoard min={10000} states={[{ id, label, children }]} />
-  </div>
-)
+// The Calendar specimens live in ./calendar-examples and are also shown on the Date Picker representative page ("날짜 선택"),
+// the single sidebar item for both. Every Story here keeps its ID and direct URL but is hidden from the sidebar
+// (tag `verification`).

 // No `component`: Calendar props are a union of selection modes, so Stories without args would not type-check.
 const meta = { title: "Components/Search & Date/Calendar", parameters: { layout: "padded" } } satisfies Meta
 export default meta
 type Story = StoryObj<typeof meta>

-// Representative Story: the common Story page; the sections group the same specimens.
+// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Date
+// Picker page shows the same sections.
 export const All: Story = {
+  tags: ["verification"],
  name: "Calendar",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Calendar" />
-      <StorySection title="Variants">
-        <Grid>
-          <Cell id="single" label="Single"><Single showValue={false} /></Cell>
-          <Cell id="range" label="Range"><Range /></Cell>
-          <Cell id="months" label="Two months" wide><TwoMonths /></Cell>
-        </Grid>
-      </StorySection>
-      <StorySection title="States">
-        <Grid>
-          <Cell id="disabled" label="Disabled dates"><DisabledDates /></Cell>
-        </Grid>
-      </StorySection>
+      <CalendarSections />
    </StoryPage>
  ),
 }
@@ -0,0 +1,107 @@
+import { useId, useState, type ReactNode } from "react"
+import { Checkbox, Label } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Checkbox specimens (Storybook only). Used by the Checkbox Stories (verification) and by the Selection Controls
+// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item.
+// Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only.
+// The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz.
+
+// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
+// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
+// text color; a Label next to a disabled Checkbox (`peer-disabled`) keeps the secondary color. State titles are untouched.
+export const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
+
+export function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
+  const id = useId()
+  return (
+    <div className="flex items-center gap-2">
+      {children(id)}
+      <Label htmlFor={id} className={optionLabel}>{label}</Label>
+    </div>
+  )
+}
+
+// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking
+// to fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's
+// auto-fill grid cannot leave an empty or stretched track.
+// `className` replaces the track (the Selection Controls page passes its shared 4-column grid).
+function StateGrid({ states, className }: { states: BoardState[]; className?: string }) {
+  return (
+    <div className={className ?? "grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))] min-[1000px]:grid-cols-3"}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+// The wrapping Long Label example (former Usage section of the representative page), also used by the hidden `LongLabel` Story.
+export function LongLabelExample() {
+  return (
+    <div className="max-w-[220px]">
+      <div className="flex items-start gap-2">
+        <Checkbox id="cb-long" className="mt-0.5" />
+        <Label htmlFor="cb-long" className={optionLabel}>A very long checkbox label that wraps onto multiple lines</Label>
+      </div>
+    </div>
+  )
+}
+
+// Starts indeterminate; a click makes it checked (Radix), so the Indeterminate example is also the interactive one.
+// Exported for the Selection Controls page's Variants section.
+export function Controlled() {
+  const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate")
+  return (
+    <Option label="Option">
+      {(id) => <Checkbox id={id} checked={checked} onCheckedChange={setChecked} />}
+    </Option>
+  )
+}
+
+// The Checkbox sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName`
+// gives every section of a shared page one column track (Selection Controls); without it the Checkbox page keeps its own.
+export function CheckboxSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) {
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  return (
+    <>
+      <StorySection title={title("States")}>
+        <StateGrid
+          className={gridClassName}
+          states={[
+            { id: `${idPrefix}unchecked`, label: "Unchecked", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
+            { id: `${idPrefix}checked`, label: "Checked", children: <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> },
+            { id: `${idPrefix}indeterminate`, label: "Indeterminate", children: <Controlled /> },
+            {
+              id: `${idPrefix}hover`,
+              label: "Hover",
+              // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts).
+              children: (
+                <div className="grid gap-3">
+                  <Option label="Unchecked">{(id) => <Checkbox id={id} data-sb-hover="" />}</Option>
+                  <Option label="Checked">{(id) => <Checkbox id={id} defaultChecked data-sb-hover="" />}</Option>
+                </div>
+              ),
+            },
+            { id: `${idPrefix}focus`, label: "Focus", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
+            {
+              id: `${idPrefix}disabled`,
+              label: "Disabled",
+              children: (
+                <div className="grid gap-3">
+                  <Option label="Unchecked">{(id) => <Checkbox id={id} disabled />}</Option>
+                  <Option label="Checked">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title={title("Validation")}>
+        <StateGrid className={gridClassName} states={[{ id: `${idPrefix}error`, label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
+      </StorySection>
+    </>
+  )
+}
@@ -1,61 +1,11 @@
-import { useId, useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { Checkbox, Label } from "@hm-design/ui"
-import { StateBoard, type BoardState } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { Checkbox } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader } from "@/components/story-page"
+import { CheckboxSections, LongLabelExample, Option } from "./checkbox-examples"

-// Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only.
-// The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz.
-
-// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
-// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
-// text color; a Label next to a disabled Checkbox (`peer-disabled`) keeps the secondary color. State titles are untouched.
-const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
-
-function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
-  const id = useId()
-  return (
-    <div className="flex items-center gap-2">
-      {children(id)}
-      <Label htmlFor={id} className={optionLabel}>{label}</Label>
-    </div>
-  )
-}
-
-// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking
-// to fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's
-// auto-fill grid cannot leave an empty or stretched track.
-function StateGrid({ states }: { states: BoardState[] }) {
-  return (
-    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))] min-[1000px]:grid-cols-3">
-      {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[state]} />
-      ))}
-    </div>
-  )
-}
-
-// The wrapping Long Label example (former Usage section of the representative page), also used by the hidden `LongLabel` Story.
-function LongLabelExample() {
-  return (
-    <div className="max-w-[220px]">
-      <div className="flex items-start gap-2">
-        <Checkbox id="cb-long" className="mt-0.5" />
-        <Label htmlFor="cb-long" className={optionLabel}>A very long checkbox label that wraps onto multiple lines</Label>
-      </div>
-    </div>
-  )
-}
-
-// Starts indeterminate; a click makes it checked (Radix), so the Indeterminate example is also the interactive one.
-function Controlled() {
-  const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate")
-  return (
-    <Option label="Option">
-      {(id) => <Checkbox id={id} checked={checked} onCheckedChange={setChecked} />}
-    </Option>
-  )
-}
+// Current HM Checkbox. The specimens live in ./checkbox-examples and are also shown on the Selection Controls representative
+// page ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here keeps its ID and
+// direct URL but is hidden from the sidebar (tag `verification`).

 const meta = {
  title: "Components/Form/Checkbox",
@@ -73,46 +23,16 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>

+// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection
+// Controls page shows the same sections.
 export const All: Story = {
+  tags: ["verification"],
  name: "Checkbox",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Checkbox" />
-      <StorySection title="States">
-        <StateGrid
-          states={[
-            { id: "unchecked", label: "Unchecked", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
-            { id: "checked", label: "Checked", children: <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> },
-            { id: "indeterminate", label: "Indeterminate", children: <Controlled /> },
-            {
-              id: "hover",
-              label: "Hover",
-              // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts).
-              children: (
-                <div className="grid gap-3">
-                  <Option label="Unchecked">{(id) => <Checkbox id={id} data-sb-hover="" />}</Option>
-                  <Option label="Checked">{(id) => <Checkbox id={id} defaultChecked data-sb-hover="" />}</Option>
-                </div>
-              ),
-            },
-            { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
-            {
-              id: "disabled",
-              label: "Disabled",
-              children: (
-                <div className="grid gap-3">
-                  <Option label="Unchecked">{(id) => <Checkbox id={id} disabled />}</Option>
-                  <Option label="Checked">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option>
-                </div>
-              ),
-            },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Validation">
-        <StateGrid states={[{ id: "error", label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
-      </StorySection>
+      <CheckboxSections />
    </StoryPage>
  ),
  play: async ({ canvasElement }) => {
@@ -1,7 +1,6 @@
 import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Combobox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type ComboboxOption } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

 // Combobox is a Popover + Command composition (search + single choice); Select stays for short lists without search.
@@ -106,17 +105,6 @@ function SelectComparison() {
  )
 }

-// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
-// fields line up; sections with fewer specimens leave the remaining tracks empty. A wide cell takes two tracks (the full row on narrow screens).
-const Grid = ({ children }: { children: ReactNode }) => (
-  <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
-)
-const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => (
-  <div className={wide ? "col-span-full min-w-0 min-[1000px]:col-span-2" : "min-w-0"}>
-    <StateBoard min={10000} states={[{ id, label, children }]} />
-  </div>
-)
-
 // Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px
 // within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name.
 const fieldColumns =
@@ -151,7 +139,7 @@ export const All: Story = {
      <StorySection title="Sizes">
        <FieldRow
          fields={[
-            { id: "empty", render: <Empty state="Default" /> },
+            { id: "empty", render: <Empty state="Large" /> },
            { id: "medium", render: <Medium state="Medium" /> },
          ]}
        />
@@ -165,10 +153,10 @@ export const All: Story = {
        />
      </StorySection>
      <StorySection title="Usage">
-        <Grid>
-          <Cell id="long" label="Long option"><LongLabel /></Cell>
-          <Cell id="select-comparison" label="Select / Combobox" wide><SelectComparison /></Cell>
-        </Grid>
+        <div className="sb-page-indent grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">
+          <div className="min-w-0" data-overview-state="long"><LongLabel /></div>
+          <div className="col-span-full min-w-0 min-[1000px]:col-span-2" data-overview-state="select-comparison"><SelectComparison /></div>
+        </div>
      </StorySection>
    </StoryPage>
  ),
@@ -0,0 +1,99 @@
+.sb-page.sb-date-picker {
+  --sb-page-section-gap: 24px;
+  --sb-date-picker-field-max: 358px;
+  /* 276px Calendar plus the existing 1px border on each side. */
+  --sb-date-picker-calendar-width: 278px;
+  --sb-date-picker-column-gap: 16px;
+}
+
+.sb-date-picker > .sb-page-inner {
+  container: date-picker-story / inline-size;
+}
+
+.sb-date-picker-fields {
+  display: grid;
+  grid-template-columns: minmax(0, var(--sb-date-picker-field-max));
+  align-items: start;
+  gap: var(--sb-date-picker-column-gap);
+}
+
+.sb-date-picker-fields--usage > * {
+  max-width: 320px;
+}
+
+.sb-date-picker .sb-date-picker-calendars {
+  column-gap: var(--sb-date-picker-column-gap);
+}
+
+.sb-date-picker-calendars .sb-calendar-example-grid {
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--sb-date-picker-column-gap);
+}
+
+.sb-date-picker-calendars .sb-calendar-example-grid > * {
+  overflow-x: auto;
+}
+
+.sb-date-picker-calendars .sb-calendar-example-wide {
+  grid-column: 1 / -1;
+  justify-self: start;
+  width: fit-content;
+  max-width: 100%;
+}
+
+/* Two field tracks fit after the Storybook indent. */
+@container date-picker-story (min-width: 512px) {
+  .sb-date-picker-fields {
+    grid-template-columns: repeat(2, minmax(0, var(--sb-date-picker-field-max)));
+  }
+}
+
+@container date-picker-story (min-width: 588px) {
+  .sb-date-picker-calendars .sb-calendar-example-grid:has(.sb-calendar-example-wide) {
+    grid-template-columns: repeat(2, var(--sb-date-picker-calendar-width));
+  }
+}
+
+/* Four calendar-width tracks + three 16px gaps + the 16px Storybook indent. */
+@container date-picker-story (min-width: 1176px) {
+  .sb-date-picker-fields,
+  .sb-date-picker .sb-date-picker-calendars {
+    grid-template-columns: repeat(4, minmax(var(--sb-date-picker-calendar-width), var(--sb-date-picker-field-max)));
+  }
+
+  /* Subgrids align the group headings and first specimen row without flattening either section. */
+  .sb-date-picker .sb-date-picker-calendars {
+    row-gap: 0;
+    padding-left: var(--sb-page-indent);
+  }
+
+  .sb-date-picker-calendars > .sb-page-section,
+  .sb-date-picker-calendars .sb-page-section-body,
+  .sb-date-picker-calendars .sb-calendar-example-grid {
+    display: grid;
+    grid-template: subgrid / subgrid;
+  }
+
+  .sb-date-picker-calendars > .sb-page-section:first-child {
+    grid-area: 1 / 1 / span 3 / span 2;
+  }
+
+  .sb-date-picker-calendars > .sb-page-section:last-child {
+    grid-area: 1 / 3 / span 2;
+  }
+
+  .sb-date-picker-calendars .sb-page-section-body {
+    grid-area: 2 / 1 / -1 / -1;
+  }
+
+  .sb-date-picker .sb-date-picker-calendars .sb-page-section-body > .sb-calendar-example-grid {
+    grid-area: 1 / 1 / -1 / -1;
+    grid-template-columns: subgrid;
+    padding-left: 0;
+    row-gap: 0;
+  }
+
+  .sb-date-picker-calendars .sb-calendar-example-wide {
+    margin-top: var(--sb-date-picker-column-gap);
+  }
+}
@@ -1,8 +1,9 @@
 import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { DatePicker } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { CalendarSections } from "./calendar-examples"
+import "./date-picker-story.css"

 // DatePicker is a Popover + Calendar composition packaged as a component (value handling, trigger text, close on select).
 // The representative Story shows real pickers; the same specimens also exist as Stories tagged `verification` (hidden from the
@@ -46,19 +47,14 @@ function Selected({ state }: { state?: string }) {
  )
 }

-function DefaultFormat() {
+function FormatExample({ id, triggerId, label, children }: { id: string; triggerId: string; label: string; children: ReactNode }) {
  return (
-    <Field label="기본 형식 · YYYY.MM.DD" id="dp-padded">
-      <DatePicker id="dp-padded" defaultValue={new Date(2026, 0, 9)} calendarProps={calendarProps} />
-    </Field>
-  )
-}
-
-function CustomFormat() {
-  return (
-    <Field label="Custom format override" id="dp-custom">
-      <DatePicker id="dp-custom" defaultValue={new Date(2026, 9, 6)} format={(date) => date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} />
-    </Field>
+    <section className="grid min-w-0 content-start gap-3" data-overview-state={id}>
+      <h3 className="text-sm font-medium text-muted-foreground">
+        <label id={`${triggerId}-label`} htmlFor={triggerId}>{label}</label>
+      </h3>
+      {children}
+    </section>
  )
 }

@@ -113,32 +109,14 @@ function Disabled({ state }: { state?: string }) {
  )
 }

-// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
-// fields line up; sections with fewer specimens leave the remaining tracks empty.
-const Grid = ({ children }: { children: ReactNode }) => (
-  <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
-)
-const Cell = ({ id, label, children }: { id: string; label: string; children: ReactNode }) => (
-  <div className="min-w-0">
-    <StateBoard min={10000} states={[{ id, label, children }]} />
-  </div>
-)
-
-// Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px
-// within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name.
-const fieldColumns =
-  "grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
-
 function FieldRow({ fields }: { fields: { id: string; render: ReactNode }[] }) {
  return (
-    <div className="sb-page-indent">
-      <div className={fieldColumns}>
-        {fields.map(({ id, render }) => (
-          <div key={id} className="min-w-0" data-overview-state={id}>
-            {render}
-          </div>
-        ))}
-      </div>
+    <div className="sb-page-indent sb-date-picker-fields">
+      {fields.map(({ id, render }) => (
+        <div key={id} className="min-w-0" data-overview-state={id}>
+          {render}
+        </div>
+      ))}
    </div>
  )
 }
@@ -148,16 +126,18 @@ export default meta
 type Story = StoryObj<typeof meta>

 // Representative Story: the common Story page; the sections group the same specimens.
+// 2026-11-13 (user request): it also shows the Calendar sections from ./calendar-examples (titles "Calendar · …"), so
+// "날짜 선택" is the one sidebar item for both; the Calendar Stories keep their IDs and direct URLs but are hidden from the sidebar.
 export const All: Story = {
  name: "Date Picker",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
-    <StoryPage>
+    <StoryPage className="sb-date-picker">
      <StoryPageHeader title="Date Picker" />
      <StorySection title="Sizes">
        <FieldRow
          fields={[
-            { id: "empty", render: <Empty state="Default" /> },
+            { id: "empty", render: <Empty state="Large" /> },
            { id: "medium", render: <Medium state="Medium" /> },
          ]}
        />
@@ -173,11 +153,18 @@ export const All: Story = {
        />
      </StorySection>
      <StorySection title="Usage">
-        <Grid>
-          <Cell id="format-default" label="Default format"><DefaultFormat /></Cell>
-          <Cell id="format-custom" label="Custom format"><CustomFormat /></Cell>
-        </Grid>
+        <div className="sb-page-indent sb-date-picker-fields sb-date-picker-fields--usage">
+          <FormatExample id="format-default" triggerId="dp-padded" label="Default format">
+            <DatePicker id="dp-padded" aria-labelledby="dp-padded-label" defaultValue={new Date(2026, 0, 9)} calendarProps={calendarProps} />
+          </FormatExample>
+          <FormatExample id="format-custom" triggerId="dp-custom" label="Custom format">
+            <DatePicker id="dp-custom" aria-labelledby="dp-custom-label" defaultValue={new Date(2026, 9, 6)} format={(date) => date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} />
+          </FormatExample>
+        </div>
      </StorySection>
+      <StorySectionGrid className="sb-date-picker-calendars">
+        <CalendarSections titlePrefix="Calendar" idPrefix="calendar-" />
+      </StorySectionGrid>
    </StoryPage>
  ),
 }
@@ -163,7 +163,9 @@ export const All: Story = {
        <FieldRow
          fields={[
            { id: "focus", label: "Focus", props: { size: "medium", placeholder } },
-            { id: "disabled", label: "Disabled", props: { disabled: true, defaultValue: "Unavailable project" } },
+            // 2026-11-13: Disabled is Medium like Focus and the Validation row (34px). Readonly keeps the component's own rule
+            // (packages/ui input.css: text only, always Large metrics whatever the size), so its size prop is not set.
+            { id: "disabled", label: "Disabled", props: { size: "medium", disabled: true, defaultValue: "Unavailable project" } },
            { id: "readonly", label: "Readonly", props: { readOnly: true, value: "Confirmed project" } },
          ]}
        />
@@ -0,0 +1,118 @@
+import { Label, RadioGroup, RadioGroupItem } from "@hm-design/ui"
+import type { CSSProperties } from "react"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Radio Group specimens (Storybook only). Used by the Radio Group Stories (verification) and by the Selection Controls
+// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item.
+// Current HM Radio Group. ui-viz has no Radio spec, so it was reference only.
+
+// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
+// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
+// text color; a Label next to a disabled item (`peer-disabled`) keeps the secondary color. State titles are untouched.
+const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
+
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to
+// fit below that (`min` is the narrowest column). Each specimen sits in its own single-column StateBoard (min larger than
+// any column), so StateBoard's auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind sees them.
+const specimenColumns = {
+  2: "min-[1000px]:grid-cols-2",
+  4: "min-[1000px]:grid-cols-4",
+} as const
+
+// `className` replaces the track (the Selection Controls page passes its shared 4-column grid); `spans` gives a specimen
+// cell more than one track there.
+function SpecimenGrid({ states, columns, min = 220, className, spans }: { states: BoardState[]; columns: keyof typeof specimenColumns; min?: number; className?: string; spans?: Record<string, string> }) {
+  return (
+    <div
+      className={className ?? `grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sb-col-min)),1fr))] ${specimenColumns[columns]}`}
+      style={className ? undefined : ({ "--sb-col-min": `${min}px` } as CSSProperties)}
+    >
+      {states.map((state) =>
+        spans?.[state.id] ? (
+          <div key={state.id} className={`min-w-0 ${spans[state.id]}`}>
+            <StateBoard min={10000} states={[state]} />
+          </div>
+        ) : (
+          <StateBoard key={state.id} min={10000} states={[state]} />
+        ),
+      )}
+    </div>
+  )
+}
+
+export function Group({
+  prefix,
+  defaultValue = "a",
+  disabled,
+  disabledItem,
+  invalid,
+  orientation,
+  hoverItem,
+  focusItem,
+}: {
+  prefix: string
+  defaultValue?: string
+  disabled?: boolean
+  disabledItem?: string
+  invalid?: boolean
+  orientation?: "horizontal" | "vertical"
+  // Pins :hover on one item with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts).
+  hoverItem?: string
+  // Pins :focus-visible (the focus ring) on one item with the Storybook-only data-sb-focus attribute (2026-11-13).
+  focusItem?: string
+}) {
+  return (
+    // The group name is a readable Korean name; `prefix` stays an internal id prefix only (screen readers no longer read it).
+    <RadioGroup defaultValue={defaultValue} disabled={disabled} orientation={orientation} aria-label="옵션 선택">
+      {["a", "b", "c"].map((v) => (
+        <div key={v} className="flex items-center gap-2">
+          <RadioGroupItem value={v} id={`${prefix}-${v}`} disabled={disabledItem === v} aria-invalid={invalid ? true : undefined} data-sb-hover={hoverItem === v ? "" : undefined} data-sb-focus={focusItem === v ? "" : undefined} />
+          <Label htmlFor={`${prefix}-${v}`} className={optionLabel}>Option {v.toUpperCase()}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  )
+}
+
+// The Radio Group sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName`
+// gives every section of a shared page one column track (Selection Controls); without it the Radio Group page keeps its own.
+// In the shared track the Horizontal group takes 2 tracks from 1000px and the whole row below that, so its 3 options stay on
+// one line (the horizontal group wraps, flex-wrap, when its cell is narrower than the row).
+export function RadioGroupSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) {
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  return (
+    <>
+      {/* Overview is merged into Variants: its Vertical example is the first Variants item. */}
+      <StorySection title={title("Variants")}>
+        <SpecimenGrid
+          className={gridClassName}
+          spans={gridClassName ? { [`${idPrefix}horizontal`]: "col-span-full min-[1000px]:col-span-2" } : undefined}
+          columns={2}
+          min={320}
+          states={[
+            { id: `${idPrefix}vertical`, label: "Vertical", children: <Group prefix="v" defaultValue="b" /> },
+            { id: `${idPrefix}horizontal`, label: "Horizontal", children: <Group prefix="h" orientation="horizontal" /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title={title("States")}>
+        <SpecimenGrid
+          className={gridClassName}
+          columns={4}
+          states={[
+            { id: `${idPrefix}hover`, label: "Hover", children: <Group prefix="hv" defaultValue="" hoverItem="a" /> },
+            { id: `${idPrefix}focus`, label: "Focus", children: <Group prefix="f" /> },
+            { id: `${idPrefix}disabled-item`, label: "Disabled · 항목", children: <Group prefix="di" disabledItem="b" /> },
+            { id: `${idPrefix}disabled-group`, label: "Disabled · 그룹", children: <Group prefix="dg" disabled /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title={title("Validation")}>
+        {/* Same 4-column track as States, so the Error example keeps the width of one States column. */}
+        <SpecimenGrid className={gridClassName} columns={4} states={[{ id: `${idPrefix}error`, label: "Error", children: <Group prefix="e" invalid /> }]} />
+      </StorySection>
+    </>
+  )
+}
@@ -1,66 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { Label, RadioGroup, RadioGroupItem } from "@hm-design/ui"
-import type { CSSProperties } from "react"
-import { StateBoard, type BoardState } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { RadioGroup } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader } from "@/components/story-page"
+import { Group, RadioGroupSections } from "./radio-group-examples"

-// Current HM Radio Group. ui-viz has no Radio spec, so it was reference only.
-
-// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
-// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
-// text color; a Label next to a disabled item (`peer-disabled`) keeps the secondary color. State titles are untouched.
-const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
-
-// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to
-// fit below that (`min` is the narrowest column). Each specimen sits in its own single-column StateBoard (min larger than
-// any column), so StateBoard's auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind sees them.
-const specimenColumns = {
-  2: "min-[1000px]:grid-cols-2",
-  4: "min-[1000px]:grid-cols-4",
-} as const
-
-function SpecimenGrid({ states, columns, min = 220 }: { states: BoardState[]; columns: keyof typeof specimenColumns; min?: number }) {
-  return (
-    <div
-      className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sb-col-min)),1fr))] ${specimenColumns[columns]}`}
-      style={{ "--sb-col-min": `${min}px` } as CSSProperties}
-    >
-      {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[state]} />
-      ))}
-    </div>
-  )
-}
-
-function Group({
-  prefix,
-  defaultValue = "a",
-  disabled,
-  disabledItem,
-  invalid,
-  orientation,
-  hoverItem,
-}: {
-  prefix: string
-  defaultValue?: string
-  disabled?: boolean
-  disabledItem?: string
-  invalid?: boolean
-  orientation?: "horizontal" | "vertical"
-  // Pins :hover on one item with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts).
-  hoverItem?: string
-}) {
-  return (
-    <RadioGroup defaultValue={defaultValue} disabled={disabled} orientation={orientation} aria-label={prefix}>
-      {["a", "b", "c"].map((v) => (
-        <div key={v} className="flex items-center gap-2">
-          <RadioGroupItem value={v} id={`${prefix}-${v}`} disabled={disabledItem === v} aria-invalid={invalid ? true : undefined} data-sb-hover={hoverItem === v ? "" : undefined} />
-          <Label htmlFor={`${prefix}-${v}`} className={optionLabel}>Option {v.toUpperCase()}</Label>
-        </div>
-      ))}
-    </RadioGroup>
-  )
-}
+// Current HM Radio Group. The specimens live in ./radio-group-examples and are also shown on the Selection Controls
+// representative page ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here
+// keeps its ID and direct URL but is hidden from the sidebar (tag `verification`).

 const meta = {
  title: "Components/Form/Radio Group",
@@ -78,38 +23,16 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>

+// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection
+// Controls page shows the same sections.
 export const All: Story = {
+  tags: ["verification"],
  name: "Radio Group",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Radio Group" />
-      {/* Overview is merged into Variants: its Vertical example is the first Variants item. */}
-      <StorySection title="Variants">
-        <SpecimenGrid
-          columns={2}
-          min={320}
-          states={[
-            { id: "vertical", label: "Vertical", children: <Group prefix="v" defaultValue="b" /> },
-            { id: "horizontal", label: "Horizontal", children: <Group prefix="h" orientation="horizontal" /> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="States">
-        <SpecimenGrid
-          columns={4}
-          states={[
-            { id: "hover", label: "Hover", children: <Group prefix="hv" defaultValue="" hoverItem="a" /> },
-            { id: "focus", label: "Focus", children: <Group prefix="f" /> },
-            { id: "disabled-item", label: "Disabled · 항목", children: <Group prefix="di" disabledItem="b" /> },
-            { id: "disabled-group", label: "Disabled · 그룹", children: <Group prefix="dg" disabled /> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Validation">
-        {/* Same 4-column track as States, so the Error example keeps the width of one States column. */}
-        <SpecimenGrid columns={4} states={[{ id: "error", label: "Error", children: <Group prefix="e" invalid /> }]} />
-      </StorySection>
+      <RadioGroupSections />
    </StoryPage>
  ),
  play: async ({ canvasElement }) => {
@@ -0,0 +1,23 @@
+.sb-selection-sections > .sb-page-section:first-child {
+  margin-top: 0;
+}
+
+@container (width >= 720px) {
+  .sb-selection-controls .sb-selection-sections {
+    display: grid;
+    grid-template-columns: max-content repeat(3, minmax(max-content, 1fr));
+    column-gap: 24px;
+  }
+
+  .sb-selection-sections > .sb-page-section,
+  .sb-selection-sections > .sb-page-section > .sb-page-section-body,
+  .sb-selection-sections .sb-selection-grid {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  .sb-selection-sections > .sb-page-section > .sb-page-section-header {
+    grid-column: 1 / -1;
+  }
+}
@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import type { CSSProperties, ReactNode } from "react"
+import { Checkbox, Switch } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { Controlled, Option } from "./checkbox-examples"
+import { Group } from "./radio-group-examples"
+import { Option as SwitchOption } from "./switch-examples"
+import "./selection-controls-story.css"
+
+// Selection Controls ("선택 컨트롤", 2026-11-13): one representative page for the form on/off and choice controls Checkbox,
+// Radio Group and Switch, which share the option Label, state and Disabled arrangement. Storybook presentation only: no new
+// component, prop or API; the specimens are the components' public API with the ./<name>-examples parts (Option, Group,
+// Controlled). The former Checkbox / Radio Group / Switch representative Stories keep their IDs and direct URLs but are
+// hidden from the sidebar (tag `verification`), as are their own verification Stories.
+// 2026-11-13 (user request, state comparison matrix): the six "<Component> · <Section>" sections are replaced by one state
+// matrix (rows Default / Hover / Focus / Disabled / Validation, columns Checkbox / Radio Group / Switch) and one Variants
+// section for what is not a common state (Checkbox Indeterminate, Radio Group Vertical / Horizontal; Switch has none).
+
+const meta = { title: "Components/Form/Selection Controls", parameters: { layout: "padded" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Labels follow the Button page matrix: H3 / row and column headers 14/20/500 secondary (StateBoard H3 style); the per-cell
+// state names of the stacked layout and the sub-specimen captions one step below, 12/16/400 secondary.
+const groupLabel = "m-0 text-sm font-medium text-muted-foreground"
+const caption = "text-xs font-normal text-muted-foreground"
+
+const states = [
+  ["default", "Default"],
+  ["hover", "Hover"],
+  ["focus", "Focus"],
+  ["disabled", "Disabled"],
+  ["validation", "Validation"],
+] as const
+type StateKey = (typeof states)[number][0]
+
+// Two specimens of one cell side by side (Unchecked / Checked, Off / On, 항목 / 그룹); they wrap only in the stacked layout.
+function Pair({ children }: { children: ReactNode }) {
+  return <div className="flex flex-wrap items-start gap-x-6 gap-y-3">{children}</div>
+}
+
+// A specimen with its own small caption (Radio Group Disabled 항목 / 그룹, the Variants).
+function Captioned({ id, label, children }: { id?: string; label: string; children: ReactNode }) {
+  return (
+    <div data-overview-state={id} role="group" aria-label={label} className="grid content-start gap-1">
+      <span className={caption} aria-hidden>
+        {label}
+      </span>
+      {children}
+    </div>
+  )
+}
+
+// Only states each component implements; Switch has no Validation state, so its cell shows "—".
+// Hover pins :hover with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts). Radio Group ids use the
+// "sc-" prefix so they never collide with another Group on the page.
+const columns: { id: string; label: string; cells: Partial<Record<StateKey, ReactNode>> }[] = [
+  {
+    id: "checkbox",
+    label: "Checkbox",
+    cells: {
+      default: (
+        <Pair>
+          <Option label="Unchecked">{(id) => <Checkbox id={id} />}</Option>
+          <Option label="Checked">{(id) => <Checkbox id={id} defaultChecked />}</Option>
+        </Pair>
+      ),
+      hover: (
+        <Pair>
+          <Option label="Unchecked">{(id) => <Checkbox id={id} data-sb-hover="" />}</Option>
+          <Option label="Checked">{(id) => <Checkbox id={id} defaultChecked data-sb-hover="" />}</Option>
+        </Pair>
+      ),
+      focus: <Option label="Option">{(id) => <Checkbox id={id} />}</Option>,
+      disabled: (
+        <Pair>
+          <Option label="Unchecked">{(id) => <Checkbox id={id} disabled />}</Option>
+          <Option label="Checked">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option>
+        </Pair>
+      ),
+      validation: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option>,
+    },
+  },
+  {
+    id: "radio-group",
+    label: "Radio Group",
+    cells: {
+      default: <Group prefix="sc-d" defaultValue="b" />,
+      hover: <Group prefix="sc-hv" defaultValue="" hoverItem="a" />,
+      // 2026-11-13: the ring is pinned on Option A (data-sb-focus); only the Checkbox specimen holds the page focus.
+      focus: <Group prefix="sc-f" focusItem="a" />,
+      disabled: (
+        <Pair>
+          <Captioned id="radio-group-disabled-item" label="항목">
+            <Group prefix="sc-di" disabledItem="b" />
+          </Captioned>
+          <Captioned id="radio-group-disabled-group" label="그룹">
+            <Group prefix="sc-dg" disabled />
+          </Captioned>
+        </Pair>
+      ),
+      // 2026-11-13 (user request): no option selected, so the Error row shows no green selected mark.
+      validation: <Group prefix="sc-e" defaultValue="" invalid />,
+    },
+  },
+  {
+    id: "switch",
+    label: "Switch",
+    cells: {
+      default: (
+        <Pair>
+          <SwitchOption label="Off">{(id) => <Switch id={id} />}</SwitchOption>
+          <SwitchOption label="On">{(id) => <Switch id={id} defaultChecked />}</SwitchOption>
+        </Pair>
+      ),
+      hover: (
+        <Pair>
+          <SwitchOption label="Off">{(id) => <Switch id={id} data-sb-hover="" />}</SwitchOption>
+          <SwitchOption label="On">{(id) => <Switch id={id} defaultChecked data-sb-hover="" />}</SwitchOption>
+        </Pair>
+      ),
+      focus: <SwitchOption label="Option">{(id) => <Switch id={id} data-sb-focus="" />}</SwitchOption>,
+      disabled: (
+        <Pair>
+          <SwitchOption label="Off">{(id) => <Switch id={id} disabled />}</SwitchOption>
+          <SwitchOption label="On">{(id) => <Switch id={id} disabled defaultChecked />}</SwitchOption>
+        </Pair>
+      ),
+    },
+  },
+]
+
+// One DOM for both layouts, rendered once in component order (Checkbox → Radio Group → Switch, each Default → Validation),
+// the stacked layout's reading order. In the matrix each component block becomes display: contents,
+// so its header and cells use the same tracks as Variants.
+const matrixPosition = "@min-[720px]:[grid-row:var(--sc-row)] @min-[720px]:[grid-column:var(--sc-col)]"
+const place = (row: number, col: number) => ({ "--sc-row": row, "--sc-col": col }) as CSSProperties
+
+function StateMatrix() {
+  return (
+    <div className="sb-selection-grid grid items-start gap-6">
+      {/* Row headers: the matrix only; in the stacked layout each cell names its own state. */}
+      {states.map(([key, label], r) => (
+        <div key={key} aria-hidden className={`hidden ${groupLabel} @min-[720px]:block ${matrixPosition}`} style={place(r + 2, 1)}>
+          {label}
+        </div>
+      ))}
+      {columns.map((column, c) => (
+        <section key={column.id} aria-label={column.label} className="grid min-w-0 content-start gap-6 @min-[720px]:contents">
+          <h3 className={`${groupLabel} ${matrixPosition}`} style={place(1, c + 2)}>
+            {column.label}
+          </h3>
+          {states.map(([key, label], r) => {
+            const content = column.cells[key]
+            if (!content) {
+              return (
+                <div key={key} className={`hidden @min-[720px]:block ${matrixPosition}`} style={place(r + 2, c + 2)}>
+                  <span aria-hidden className="text-sm text-muted-foreground">—</span>
+                  <span className="sr-only">{`${column.label} ${label}: 해당 상태 없음`}</span>
+                </div>
+              )
+            }
+            return (
+              <div
+                key={key}
+                data-overview-state={`${column.id}-${key}`}
+                role="group"
+                aria-label={`${column.label} ${label}${key === "validation" ? " · Error" : ""}`}
+                className={`grid min-w-0 content-start gap-1 ${matrixPosition}`}
+                style={place(r + 2, c + 2)}
+              >
+                <span aria-hidden className={`${caption} @min-[720px]:hidden`}>
+                  {label}
+                </span>
+                {content}
+              </div>
+            )
+          })}
+        </section>
+      ))}
+    </div>
+  )
+}
+
+function Variants() {
+  return (
+    <div className="sb-selection-grid grid items-start gap-6">
+      <section aria-label="Checkbox" className="grid min-w-0 content-start gap-2 @min-[720px]:col-start-2">
+        <h3 className={groupLabel}>Checkbox</h3>
+        <Captioned id="checkbox-indeterminate" label="Indeterminate">
+          <Controlled />
+        </Captioned>
+      </section>
+      <section aria-label="Radio Group" className="grid min-w-0 content-start gap-2 @min-[720px]:col-span-2 @min-[720px]:col-start-3">
+        <h3 className={groupLabel}>Radio Group</h3>
+        <Pair>
+          <Captioned id="radio-group-vertical" label="Vertical">
+            <Group prefix="sc-v" defaultValue="b" />
+          </Captioned>
+          <Captioned id="radio-group-horizontal" label="Horizontal">
+            <Group prefix="sc-h" orientation="horizontal" />
+          </Captioned>
+        </Pair>
+      </section>
+    </div>
+  )
+}
+
+// Named after the group, so Storybook shows it as a single 1-depth item ("선택 컨트롤").
+export const All: Story = {
+  name: "Selection Controls",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader title="Selection Controls" />
+      <div className="sb-selection-controls @container [&_[data-sb-focus]]:ring-3 [&_[data-sb-focus]]:ring-ring/50">
+        <div className="sb-selection-sections">
+          <StorySection id="states" title="Selection Controls">
+            <StateMatrix />
+          </StorySection>
+          <StorySection id="variants" title="Variants">
+            <Variants />
+          </StorySection>
+        </div>
+      </div>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // Only one element can hold focus, so the page focuses the Checkbox Focus specimen. The Radio Group and Switch Focus
+    // specimens pin the same ring utilities with data-sb-focus, including in the optimized Storybook build.
+    // preventScroll: the page opens at its top, not at the focused specimen.
+    canvasElement.querySelector<HTMLButtonElement>('[data-overview-state="checkbox-focus"] [role="checkbox"]')?.focus({ preventScroll: true })
+  },
+}
@@ -0,0 +1,57 @@
+.sb-slider-layout .sb-page-section:first-child {
+  margin-top: 0;
+}
+
+.sb-slider-layout .sb-page-section-body {
+  display: grid;
+  align-items: start;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
+  padding-inline-start: var(--sb-page-indent);
+}
+
+@media (min-width: 1000px) {
+  .sb-slider-layout {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-rows: max-content max-content 1fr;
+    column-gap: 24px;
+    padding-inline-start: var(--sb-page-indent);
+  }
+
+  .sb-slider-layout .sb-page-section-header {
+    margin-inline-start: calc(-1 * var(--sb-page-indent));
+  }
+
+  /* The vertical specimen spans the last two rows so the horizontal examples set the start of States. */
+  .sb-slider-layout #slider-variants {
+    display: grid;
+    grid-area: 1 / 1 / 4 / -1;
+    grid-template: subgrid / subgrid;
+  }
+
+  .sb-slider-layout #slider-variants > .sb-page-section-header {
+    grid-column: 1 / -1;
+  }
+
+  .sb-slider-layout #slider-variants > .sb-page-section-body {
+    grid-area: 2 / 1 / 4 / -1;
+    grid-template: subgrid / subgrid;
+    row-gap: 0;
+    padding-inline-start: 0;
+  }
+
+  .sb-slider-layout [data-overview-state="vertical"] {
+    grid-area: 1 / 4 / 3 / 5;
+  }
+
+  .sb-slider-layout #slider-states {
+    grid-area: 3 / 1 / 4 / 2;
+    align-self: start;
+  }
+
+  .sb-slider-layout #slider-states > .sb-page-section-body {
+    grid-template-columns: minmax(0, 1fr);
+    padding-inline-start: 0;
+  }
+}
@@ -1,39 +1,41 @@
 import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Slider } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import "./slider-story.css"

 // The representative Story shows each Slider mode with real, draggable controls; the same specimens also exist as Stories tagged
 // `verification` (hidden from the sidebar). The value label is the Story's composition (Slider has no built-in label).
 // Names (`aria-label`) are provided by the consumer.

-function Labeled({ label, children, valueText }: { label: string; children: ReactNode; valueText: string }) {
+function Labeled({ id, label, children, valueText }: { id?: string; label: string; children: ReactNode; valueText?: string }) {
+  const Example = id ? "section" : "div"
+  const Label = id ? "h3" : "span"
  return (
-    <div className="grid gap-3">
-      <div className="flex justify-between text-sm">
-        <span className="font-medium text-foreground">{label}</span>
-        <span className="text-muted-foreground" data-testid="value">{valueText}</span>
+    <Example className="grid min-w-0 gap-3" data-overview-state={id} aria-label={id ? label : undefined}>
+      <div className="flex justify-between gap-2 text-sm">
+        <Label className={id ? "font-medium text-muted-foreground" : "font-medium text-foreground"}>{label}</Label>
+        {valueText !== undefined && <span className="text-muted-foreground" data-testid="value">{valueText}</span>}
      </div>
      {children}
-    </div>
+    </Example>
  )
 }

-function Single() {
+function Single({ example = false }: { example?: boolean }) {
  const [value, setValue] = useState([40])
  return (
-    <Labeled label="볼륨" valueText={`${value[0]}`}>
+    <Labeled id={example ? "single" : undefined} label="볼륨" valueText={`${value[0]}`}>
      <Slider aria-label="볼륨" value={value} onValueChange={setValue} max={100} step={1} />
    </Labeled>
  )
 }

-function Range() {
+function Range({ example = false }: { example?: boolean }) {
  const [value, setValue] = useState([25, 75])
  return (
-    <Labeled label="범위" valueText={`${value[0]} – ${value[1]}`}>
-      <Slider aria-label="범위"value={value} onValueChange={setValue} max={100} step={1} minStepsBetweenThumbs={5} />
+    <Labeled id={example ? "range" : undefined} label="범위" valueText={`${value[0]} – ${value[1]}`}>
+      <Slider aria-label="범위" value={value} onValueChange={setValue} max={100} step={1} minStepsBetweenThumbs={5} />
    </Labeled>
  )
 }
@@ -41,7 +43,7 @@ function Range() {
 function Step() {
  const [value, setValue] = useState([50])
  return (
-    <Labeled label="단계 (step 25)" valueText={`${value[0]}`}>
+    <Labeled id="step" label="단계 (25)" valueText={`${value[0]}`}>
      <Slider aria-label="단계" value={value} onValueChange={setValue} max={100} step={25} />
    </Labeled>
  )
@@ -59,47 +61,31 @@ function Vertical() {
  )
 }

-const sections = [
-  { id: "single", label: "Single", node: <Single /> },
-  { id: "range", label: "Range", node: <Range /> },
-  { id: "step", label: "Step", node: <Step /> },
-  { id: "disabled", label: "Disabled", node: <Disabled /> },
-  { id: "vertical", label: "Vertical", node: <Vertical /> },
-]
-
 const meta = { title: "Components/Form/Slider", component: Slider, parameters: { layout: "padded" } } satisfies Meta<typeof Slider>
 export default meta
 type Story = StoryObj<typeof meta>

-// Representative-page layout (Storybook presentation only): 4 equal columns on PC (iframe width 1000px and up), shrinking to
-// fit below that (200px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than any
-// column), so StateBoard's auto-fill grid cannot leave an empty or stretched track. A section with fewer than 4 specimens
-// keeps the same column width and leaves the remaining tracks empty.
-function SpecimenGrid({ ids }: { ids: string[] }) {
-  return (
-    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] min-[1000px]:grid-cols-4">
-      {ids.map((id) => {
-        const s = sections.find((section) => section.id === id)!
-        return <StateBoard key={id} min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
-      })}
-    </div>
-  )
-}
-
-// Representative Story: the common Story page; the sections group the same specimens.
-// Overview is merged into Variants (Single is its first item). `Vertical` centers its Slider in its column.
 export const All: Story = {
  name: "Slider",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Slider" />
-      <StorySection title="Variants">
-        <SpecimenGrid ids={["single", "range", "step", "vertical"]} />
-      </StorySection>
-      <StorySection title="States">
-        <SpecimenGrid ids={["disabled"]} />
-      </StorySection>
+      <div className="sb-slider-layout">
+        <StorySection id="slider-variants" title="Variants">
+          <Single example />
+          <Range example />
+          <Step />
+          <Labeled id="vertical" label="세로 슬라이더">
+            <Vertical />
+          </Labeled>
+        </StorySection>
+        <StorySection id="slider-states" title="States">
+          <Labeled id="disabled" label="비활성">
+            <Disabled />
+          </Labeled>
+        </StorySection>
+      </div>
    </StoryPage>
  ),
 }
@@ -0,0 +1,76 @@
+import { useId, type ReactNode } from "react"
+import { Label, Switch } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Switch specimens (Storybook only). Used by the Switch Stories (verification) and by the Selection Controls
+// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item.
+
+// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
+// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
+// text color; a Label next to a disabled Switch (`peer-disabled`) keeps the secondary color. State titles are untouched.
+const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
+
+export function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
+  const id = useId()
+  return (
+    <div className="flex items-center gap-2">
+      {children(id)}
+      <Label htmlFor={id} className={optionLabel}>{label}</Label>
+    </div>
+  )
+}
+
+// Representative-page layout (Storybook presentation only): 5 equal columns on PC (iframe width 1000px and up), shrinking
+// to fit below that (150px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than
+// any column), so StateBoard's auto-fill grid cannot leave an empty or stretched track.
+// `className` replaces the track (the Selection Controls page passes its shared 4-column grid).
+function StateGrid({ states, className }: { states: BoardState[]; className?: string }) {
+  return (
+    <div className={className ?? "grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))] min-[1000px]:grid-cols-5"}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+// The Switch sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName`
+// gives every section of a shared page one column track (Selection Controls); without it the Switch page keeps its own.
+export function SwitchSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) {
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  return (
+    <StorySection title={title("States")}>
+      <StateGrid
+        className={gridClassName}
+        states={[
+          { id: `${idPrefix}off`, label: "Off", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+          { id: `${idPrefix}on`, label: "On", children: <Option label="Option">{(id) => <Switch id={id} defaultChecked />}</Option> },
+          {
+            id: `${idPrefix}hover`,
+            label: "Hover",
+            // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts).
+            children: (
+              <div className="grid gap-3">
+                <Option label="Off">{(id) => <Switch id={id} data-sb-hover="" />}</Option>
+                <Option label="On">{(id) => <Switch id={id} defaultChecked data-sb-hover="" />}</Option>
+              </div>
+            ),
+          },
+          { id: `${idPrefix}focus`, label: "Focus", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+          {
+            id: `${idPrefix}disabled`,
+            label: "Disabled",
+            children: (
+              <div className="grid gap-3">
+                <Option label="Off">{(id) => <Switch id={id} disabled />}</Option>
+                <Option label="On">{(id) => <Switch id={id} disabled defaultChecked />}</Option>
+              </div>
+            ),
+          },
+        ]}
+      />
+    </StorySection>
+  )
+}
@@ -1,36 +1,11 @@
-import { useId, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { Label, Switch } from "@hm-design/ui"
-import { StateBoard, type BoardState } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { Switch } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader } from "@/components/story-page"
+import { Option, SwitchSections } from "./switch-examples"

-// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility
-// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default
-// text color; a Label next to a disabled Switch (`peer-disabled`) keeps the secondary color. State titles are untouched.
-const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]"
-
-function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
-  const id = useId()
-  return (
-    <div className="flex items-center gap-2">
-      {children(id)}
-      <Label htmlFor={id} className={optionLabel}>{label}</Label>
-    </div>
-  )
-}
-
-// Representative-page layout (Storybook presentation only): 5 equal columns on PC (iframe width 1000px and up), shrinking
-// to fit below that (150px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than
-// any column), so StateBoard's auto-fill grid cannot leave an empty or stretched track.
-function StateGrid({ states }: { states: BoardState[] }) {
-  return (
-    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))] min-[1000px]:grid-cols-5">
-      {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[state]} />
-      ))}
-    </div>
-  )
-}
+// Current HM Switch. The specimens live in ./switch-examples and are also shown on the Selection Controls representative page
+// ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here keeps its ID and
+// direct URL but is hidden from the sidebar (tag `verification`).

 const meta = {
  title: "Components/Form/Switch",
@@ -48,42 +23,16 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>

+// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection
+// Controls page shows the same sections.
 export const All: Story = {
+  tags: ["verification"],
  name: "Switch",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Switch" />
-      <StorySection title="States">
-        <StateGrid
-          states={[
-            { id: "off", label: "Off", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
-            { id: "on", label: "On", children: <Option label="Option">{(id) => <Switch id={id} defaultChecked />}</Option> },
-            {
-              id: "hover",
-              label: "Hover",
-              // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts).
-              children: (
-                <div className="grid gap-3">
-                  <Option label="Off">{(id) => <Switch id={id} data-sb-hover="" />}</Option>
-                  <Option label="On">{(id) => <Switch id={id} defaultChecked data-sb-hover="" />}</Option>
-                </div>
-              ),
-            },
-            { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
-            {
-              id: "disabled",
-              label: "Disabled",
-              children: (
-                <div className="grid gap-3">
-                  <Option label="Off">{(id) => <Switch id={id} disabled />}</Option>
-                  <Option label="On">{(id) => <Switch id={id} disabled defaultChecked />}</Option>
-                </div>
-              ),
-            },
-          ]}
-        />
-      </StorySection>
+      <SwitchSections />
    </StoryPage>
  ),
  play: async ({ canvasElement }) => {
@@ -0,0 +1,194 @@
+import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
+import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection, StorySectionGrid } from "@/components/story-page"
+
+// Shared Toggle specimens (Storybook only). Used by the Toggle Stories (verification) and by the Button representative page,
+// which shows Button and Toggle Button under one sidebar item ("버튼").
+// Toggle is a persistent pressed-state control. The sections show each state with real, clickable toggles; the same
+// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`.
+// 2026-11-12: toggles side by side keep the Button Story's 8px gap (was 12px).
+
+export function OffOn() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle>Off</Toggle>
+      <Toggle defaultPressed>On</Toggle>
+      <Toggle variant="outline">Outline off</Toggle>
+      <Toggle variant="outline" defaultPressed>
+        Outline on
+      </Toggle>
+    </div>
+  )
+}
+
+export function WithIcon() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="굵게">
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="기울임" defaultPressed>
+        <ItalicIcon />
+      </Toggle>
+      <Toggle variant="outline">
+        <StarIcon />
+        즐겨찾기
+      </Toggle>
+    </div>
+  )
+}
+
+const toggleSizes = ["sm", "default", "lg"] as const
+
+function SizeRow({ size }: { size: (typeof toggleSizes)[number] }) {
+  return (
+    <div data-toggle-size={size} className="flex flex-wrap items-center gap-2">
+      {/* 2026-11-13: the text-only toggle shows sample text instead of the size prop value (the row label names the size). */}
+      <Toggle size={size} variant="outline" aria-label="즐겨찾기"><StarIcon /></Toggle>
+      <Toggle size={size} variant="outline"><StarIcon />즐겨찾기</Toggle>
+      <Toggle size={size} variant="outline">알림</Toggle>
+    </div>
+  )
+}
+
+function Sizes() {
+  return (
+    // 3 equal columns on PC (iframe width 1000px and up): sm / default / lg; fewer columns below that (240px minimum).
+    // Same common indent as the group boards of the page (.sb-page-indent).
+    <div className="sb-page-indent grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+      {toggleSizes.map((size) => <SizeRow key={size} size={size} />)}
+    </div>
+  )
+}
+
+export function Disabled() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle disabled>Off</Toggle>
+      <Toggle disabled defaultPressed>
+        On
+      </Toggle>
+    </div>
+  )
+}
+
+const block = (state: BoardState) => <StateBoard key={state.id} min={10000} states={[state]} />
+
+// Representative-page layout (Storybook presentation only). StateBoard's own auto-fill grid cannot give equal columns that
+// fill a cell, so each specimen sits in its own single-column StateBoard (min larger than any column) inside a grid.
+function SpecimenGrid({ states }: { states: BoardState[] }) {
+  return (
+    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+      {states.map(block)}
+    </div>
+  )
+}
+
+// The 단독 / 연결 그룹 specimens, shared by the Toggle page and the Button page. `short` (Button page, 2026-11-13 user
+// request): under its "Groups" H3 the labels drop "연결 그룹 · " so the left label column stays narrow; the Toggle page keeps them.
+const groupSpecimens = (idPrefix: string, short?: boolean): BoardState[] => [
+  // The flex wrapper keeps the Toggle at its own width; as a direct grid child of the board it stretched to the column.
+  { id: `${idPrefix}single-toggle`, label: "단독", children: <div className="flex"><Toggle variant="outline">알림</Toggle></div> },
+  { id: `${idPrefix}group-single`, label: short ? "단일 선택" : "연결 그룹 · 단일 선택", children: <ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup> },
+  { id: `${idPrefix}group-multiple`, label: short ? "다중 선택" : "연결 그룹 · 다중 선택", children: <ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup> },
+]
+
+// Button page (2026-11-13, user request): one "Toggle Button" H2 section with 3 equal columns — Variants / States, Groups,
+// Sizes — laid out like the Button States matrix above (button.stories.tsx StateMatrix). Each column is a Button group block
+// (GroupBlock: H3 14/20/500 secondary on the section edge, 8px to its rows). Each row is its label on the left, in the
+// matrix row-label style (14/20/500 secondary, one line), 8px, then the controls; rows are 8px apart and the controls of a
+// group start on one line (the label column takes the widest label). `stacked` (the Button matrices' stacked layout, shared
+// through the Button page's MatrixFit) switches every group with them to the stacked form: the label above (12/16/400
+// secondary, the stacked state name), 4px, then the controls; rows 12px apart. Storybook presentation only.
+const rowLabel = "text-sm font-medium text-muted-foreground whitespace-nowrap"
+const stackedLabel = "text-xs font-normal text-muted-foreground"
+
+function ButtonPageGroup({ id, label, items, stacked }: { id: string; label: string; items: BoardState[]; stacked?: boolean }) {
+  return (
+    <section data-overview-state={id} aria-label={label} className="grid min-w-0 content-start gap-2">
+      <h3 className="m-0 text-sm font-medium text-muted-foreground">{label}</h3>
+      <div data-toggle-rows={stacked ? "stacked" : "matrix"} className={stacked ? "grid min-w-0 gap-3" : "grid min-w-0 grid-cols-[max-content_minmax(0,1fr)] gap-2"}>
+        {items.map((item) => (
+          <div
+            key={item.id}
+            data-overview-state={item.id}
+            role="group"
+            aria-labelledby={`${item.id}-label`}
+            className={stacked ? "grid min-w-0 justify-items-start gap-1" : "col-span-2 grid min-w-0 grid-cols-subgrid items-center justify-items-start"}
+          >
+            <span id={`${item.id}-label`} className={stacked ? stackedLabel : rowLabel}>
+              {item.label}
+            </span>
+            {item.children}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// Same size names as the Button Sizes (Small / Medium / Large); `default` is the medium size.
+const sizeLabels = { sm: "Small", default: "Medium", lg: "Large" } as const
+
+// Same columns as the Button treatments above: 3 equal columns from a 1400px preview, one column below that.
+function ButtonPageToggleSection({ title, idPrefix, stacked }: { title: string; idPrefix: string; stacked?: boolean }) {
+  return (
+    // pt-2: 8px on top of the 28px section gap, so Toggle Button sits 36px below the Button columns.
+    <div className="pt-2">
+      <StorySection id={`${idPrefix}button`} title={title}>
+        <div className="grid grid-cols-1 items-start gap-6 min-[1400px]:grid-cols-3">
+          <ButtonPageGroup
+            id={`${idPrefix}variants-states`}
+            label="Variants / States"
+            stacked={stacked}
+            items={[
+              { id: `${idPrefix}offon`, label: "Off / On", children: <OffOn /> },
+              { id: `${idPrefix}disabled`, label: "Disabled", children: <Disabled /> },
+            ]}
+          />
+          <ButtonPageGroup id={`${idPrefix}groups`} label="Groups" stacked={stacked} items={groupSpecimens(idPrefix, true)} />
+          <ButtonPageGroup
+            id={`${idPrefix}sizes`}
+            label="Sizes"
+            stacked={stacked}
+            items={toggleSizes.map((size) => ({ id: `${idPrefix}size-${size}`, label: sizeLabels[size], children: <SizeRow size={size} /> }))}
+          />
+        </div>
+      </StorySection>
+    </div>
+  )
+}
+
+// The Toggle sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components.
+// On PC (iframe width 1000px and up) Variants and States share the whole width in 2 columns, in proportion to the width their
+// one-line row needs (324 / 234px incl. the 16px indent), never narrower than that row (max-content), so the 4 Variants toggles
+// stay on one line (2026-11-12; they wrapped in the former 3 equal columns at a 1100px preview). Below that the sections stack
+// and the toggle rows wrap naturally.
+// `flat` (Button page, 2026-11-13): one "Toggle Button" section (`titlePrefix`) in 3 equal columns, ButtonPageToggleSection;
+// `stacked` follows the Button matrices' stacked layout. The Toggle page (no `flat`) keeps the separate sections below.
+export function ToggleSections({ titlePrefix, idPrefix = "", flat, stacked }: { titlePrefix?: string; idPrefix?: string; flat?: boolean; stacked?: boolean }) {
+  if (flat) return <ButtonPageToggleSection title={titlePrefix ?? "Toggle"} idPrefix={idPrefix} stacked={stacked} />
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  return (
+    <>
+      {/* Each class stays a whole token next to spaces, so Tailwind's source scan still finds the arbitrary grid-cols value. */}
+      <StorySectionGrid className="grid-cols-1 min-[1000px]:grid-cols-[minmax(max-content,324fr)_minmax(max-content,234fr)]">
+        <StorySection title={title("Variants")}>
+          {block({ id: `${idPrefix}offon`, label: "Off / On", children: <OffOn /> })}
+        </StorySection>
+        <StorySection title={title("States")}>
+          {block({ id: `${idPrefix}disabled`, label: "Disabled", children: <Disabled /> })}
+        </StorySection>
+      </StorySectionGrid>
+      {/* With `titlePrefix` the 단독 · 연결 그룹 title reads "단독/연결 그룹" (no second "·" after the prefix). */}
+      <StorySection title={titlePrefix ? `${titlePrefix} · 단독/연결 그룹` : "단독 · 연결 그룹"}>
+        <SpecimenGrid states={groupSpecimens(idPrefix)} />
+      </StorySection>
+      <StorySection title={title("Sizes")}>
+        <Sizes />
+      </StorySection>
+    </>
+  )
+}
@@ -1,127 +1,27 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
-import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
-import { StateBoard, type BoardState } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { StarIcon } from "lucide-react"
+import { Toggle } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader } from "@/components/story-page"
+import { Disabled, OffOn, ToggleSections, WithIcon } from "./toggle-examples"

-// Toggle is a persistent pressed-state control. The representative Story shows each state with real, clickable toggles; the same
-// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`.
-// 2026-11-12: toggles side by side keep the Button Story's 8px gap (was 12px).
-
-function OffOn() {
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <Toggle>Off</Toggle>
-      <Toggle defaultPressed>On</Toggle>
-      <Toggle variant="outline">Outline off</Toggle>
-      <Toggle variant="outline" defaultPressed>
-        Outline on
-      </Toggle>
-    </div>
-  )
-}
-
-function WithIcon() {
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <Toggle aria-label="굵게">
-        <BoldIcon />
-      </Toggle>
-      <Toggle aria-label="기울임" defaultPressed>
-        <ItalicIcon />
-      </Toggle>
-      <Toggle variant="outline">
-        <StarIcon />
-        즐겨찾기
-      </Toggle>
-    </div>
-  )
-}
-
-function Sizes() {
-  return (
-    // 3 equal columns on PC (iframe width 1000px and up): sm / default / lg; fewer columns below that (240px minimum).
-    // Same common indent as the group boards of the page (.sb-page-indent).
-    <div className="grid items-start gap-6 sb-page-indent [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
-      {(["sm", "default", "lg"] as const).map((size) => (
-        <div key={size} data-toggle-size={size} className="flex flex-wrap items-center gap-2">
-          <Toggle size={size} variant="outline" aria-label={`${size} icon-only`}><StarIcon /></Toggle>
-          <Toggle size={size} variant="outline"><StarIcon />즐겨찾기</Toggle>
-          <Toggle size={size} variant="outline">{size}</Toggle>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function Disabled() {
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <Toggle disabled>Disabled off</Toggle>
-      <Toggle disabled defaultPressed>
-        Disabled on
-      </Toggle>
-    </div>
-  )
-}
-
-const sections = [
-  { id: "offon", label: "Off / On", node: <OffOn /> },
-  { id: "disabled", label: "Disabled", node: <Disabled /> },
-]
+// Toggle is a persistent pressed-state control. The specimens live in ./toggle-examples and are also shown on the Button
+// representative page ("버튼", Toggle Button section), the single sidebar item for both. Every Story here keeps its ID and
+// direct URL but is hidden from the sidebar (tag `verification`).

 const meta = { title: "Components/Form/Toggle", component: Toggle, parameters: { layout: "padded" } } satisfies Meta<typeof Toggle>
 export default meta
 type Story = StoryObj<typeof meta>

-// Representative-page layout (Storybook presentation only). StateBoard's own auto-fill grid cannot give equal columns that
-// fill a cell, so each specimen sits in its own single-column StateBoard (min larger than any column) inside a grid.
-const specimen = (id: string): BoardState => {
-  const s = sections.find((section) => section.id === id)!
-  return { id: s.id, label: s.label, children: s.node }
-}
-function SpecimenGrid({ states }: { states: BoardState[] }) {
-  return (
-    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
-      {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[state]} />
-      ))}
-    </div>
-  )
-}
-
-// Representative Story: the common Story page; the sections group the same specimens.
-// Overview is renamed Variants. On PC (iframe width 1000px and up) Variants and States share the whole width in 2 columns,
-// in proportion to the width their one-line row needs (324 / 234px incl. the 16px indent), never narrower than that row
-// (max-content), so the 4 Variants toggles stay on one line (2026-11-12; they wrapped in the former 3 equal columns at a
-// 1100px preview). Below that the sections stack and the toggle rows wrap naturally.
+// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Button
+// page shows the same sections.
 export const All: Story = {
+  tags: ["verification"],
  name: "Toggle",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Toggle" />
-      <StorySectionGrid className="grid-cols-1 min-[1000px]:grid-cols-[minmax(max-content,324fr)_minmax(max-content,234fr)]">
-        <StorySection title="Variants">
-          <StateBoard min={10000} states={[specimen("offon")]} />
-        </StorySection>
-        <StorySection title="States">
-          <StateBoard min={10000} states={[specimen("disabled")]} />
-        </StorySection>
-      </StorySectionGrid>
-      <StorySection title="단독 · 연결 그룹">
-        <SpecimenGrid
-          states={[
-            // The flex wrapper keeps the Toggle at its own width; as a direct grid child of the board it stretched to the column.
-            { id: "single-toggle", label: "단독", children: <div className="flex"><Toggle variant="outline">알림</Toggle></div> },
-            { id: "group-single", label: "연결 그룹 · 단일 선택", children: <ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup> },
-            { id: "group-multiple", label: "연결 그룹 · 다중 선택", children: <ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Sizes">
-        <Sizes />
-      </StorySection>
+      <ToggleSections />
    </StoryPage>
  ),
 }