@cakejp/design-system 0.20.1 → 0.21.0

package/contracts/components.json

@@ -1,17 +1,17 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.20.1",
+    "version": "0.21.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
     "exportNaming": "name は原則そのまま @cakejp/design-system から import できる export 名。例外は機械可読に印を付ける — exported:false=name は実装ファイル/グループ名で import できない（実 export は subcomponents 側。例: CheckboxCard → CheckboxCardGroup / CheckboxCardItem）、exportedAs=別名で export される（例: FormField → CakeFormField）、deprecatedAliases=互換のため残す旧 export 名（新規利用禁止）。この対応は __tests__/contracts-export-integrity.test.ts が src/index.ts と突き合わせて固定し、bin/check-duplicates.mjs の照合対象もこの規約に従う。",
     "formBinding": "react-hook-form との繋ぎ方。formBinding:\"register\"=ネイティブ form control に props/ref を透過するので {...register(\"name\")} を直接 spread できる（Input / Textarea）。formBinding:\"controller\"=Radix ベースで ref が <button> 等に着地する、または値が Date/File など非文字列のため Controller の field.value / field.onChange に繋ぐ。formBinding:\"layout\"=値を持たないレイアウト部品でバインド対象ではない（Field / Form / FormField / ProductOption）。formBinding:\"none\"=値は扱うが単一フィールドのバインド対象ではない自己完結フォーム・複合ウィジェット（DataTable / SearchBar / ReviewForm）。この切り分けは __tests__/react-hook-form-integration.test.tsx が実挙動で固定する（issue #151 / #152）。",
     "counts": {
-      "foundations": 51,
-      "primitives": 51,
+      "foundations": 52,
+      "primitives": 52,
       "ec": 24,
-      "total": 126,
+      "total": 128,
       "note": "counts は各ティアの実装ファイル数（scripts/check-drift.sh が src/components/<tier>/*.tsx と突き合わせる）。subcomponents / deprecatedAliases は含まない。"
     }
   },
@@ -58,7 +58,8 @@
       ],
       "rules": [
         "破壊的操作の確認に使用。削除ボタン押下後に必ず挟む",
-        "幅上限は default=480px / sm=320px。SP では画面端から上下左右 40px の余白を保つ（コンポーネントが持つので consumer 側で margin を足さない）"
+        "幅上限は default=480px / sm=320px。SP では画面端から上下左右 40px の余白を保つ（コンポーネントが持つので consumer 側で margin を足さない）",
+        "AlertDialogContent の size（default / sm）は DialogContent の size（sm / md / lg / xl）とは別物。値も意味も異なる（AlertDialog は確認文面向けの 2 段で、広い段は無い）。広い幅が要る入力・表示は AlertDialog ではなく Dialog / ResponsiveDialog にする"
       ]
     },
     {
@@ -95,6 +96,10 @@
         "BreadcrumbLink",
         "BreadcrumbPage",
         "BreadcrumbSeparator"
+      ],
+      "rules": [
+        "BreadcrumbLink は linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。asChild と併用した場合は asChild が優先され、子要素がそのまま描かれる（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -104,6 +109,7 @@
         "default",
         "secondary",
         "tertiary",
+        "outline",
         "destructive",
         "ghost",
         "link",
@@ -124,8 +130,17 @@
         "icon-lg",
         "icon-xl"
       ],
+      "props": [
+        "loading?: boolean（既定 false。未指定 / false の出力は従来と同一）",
+        "loadingLabel?: ReactNode（既定「処理中」。loading 中に読み上げ名へ足す文言。画面には出さない。null / 空文字で出さない）"
+      ],
       "accessibility": [
-        "aria-label必須（アイコンのみの場合）"
+        "aria-label必須（アイコンのみの場合）",
+        "loading 中は aria-busy='true' + aria-disabled='true'。native の disabled は付けないのでフォーカスを保つ（disabled にするとフォーカスが body へ落ち、処理後にキーボード・SR 利用者が操作位置を見失う）",
+        "loading 中のスピナーは aria-hidden。処理中であることは読み上げ名に loadingLabel を含めて伝える（aria-busy を読まない読み上げソフトがあるため）: 中身がラベルなら sr-only の文言を足し（例「保存 処理中」）、aria-label 指定時は aria-label に連結し（loadingLabel が文字列のときだけ）、aria-labelledby 指定時は文言の要素の id を参照に足す。同じ aria-labelledby を複数のボタンで共有して loading にする場合は各ボタンに id を付ける（付けないと文言の要素の id が重複する。開発時は console.warn で知らせる）",
+        "loading のスピナーは prefers-reduced-motion で回転を止める（motion-reduce:animate-none）",
+        "forced-colors（Windows のハイコントラスト）でも loading 中はラベルを消してスピナーだけを出す（loading のときだけ forced-color-adjust: none にし、強制時と同じ見え方を自前で指定する: 文字・枠 ButtonText、背景は塗りの variant が ButtonFace・ghost / link / ghost-inverse が透明・overlay が Canvas の 80% で影なし）",
+        "枠のない variant のフォーカスは、緑の枠が出ずリング（FOCUS_RING）だけが手がかりになる。リングの色は高コントラストのときだけ不透明な --Focus-Ring-Control（3:1 以上）に切り替わる（既定は従来の 50% 透過）"
       ],
       "rules": [
         "<button>を直接使わない。必ずButtonコンポーネントを使う",
@@ -134,14 +149,25 @@
         "⚠️ variant='secondary' はブランドアクセント意匠（Surface-Accent-Primary-Light地+Brand-Cake-Orange文字）。Material/Bootstrap/shadcn の secondary（グレー・控えめ）とは別物なので、他DSの感覚で選ばない",
         "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」等の後退・中立アクションは variant='tertiary'（Surface-Tertiary地+Text-High-Emphasis文字のニュートラルなグレー）を使う。主CTAの隣に置く2番目のボタンでも、役割が後退なら secondary ではなく tertiary",
         "variant='secondary' を使うのは、主CTAと別方向の“前進”を促す副CTAのとき（例: 主='購入する' に対し 副='サンプルを見る'）",
-        "variant='overlay'は画像・メディアの上に載せる操作ボタン専用（半透過白のSurface-Overlay-Light下地+shadow-md+backdrop-blur-sm）。ImageCarousel矢印と同系の意匠。size='icon'+className='rounded-full'で円形にできる"
+        "variant='outline' は白地（Surface-Primary）+ 1px の黒系の枠（Border-High-Emphasis）+ Text-High-Emphasis 文字で、ブランド色を使わない準主役の前進アクション。「一覧を見る」のような移動ボタン、一覧・カードで1件ごとに繰り返す操作（商品カードの「カートに追加」等）、ブックマーク等の保存トグルのボタン本体の代わりに使う。hover / active は ghost と同じ薄い下地（Hover-Text-Button / Active-Text-Button）。ブランド色を使ってよい場所は contracts/composition.json の brandColorUsage（正本）",
+        "variant='link' は補助リンク（「もっと見る」「利用規約を見る」等）の意匠で、ブランド色を使わない。Text-Medium-Emphasis + 常時下線（hover で Text-High-Emphasis）。disabled は Text-Disable",
+        "variant='overlay'は画像・メディアの上に載せる操作ボタン専用（半透過白のSurface-Overlay-Light下地+shadow-md+backdrop-blur-sm）。ImageCarousel矢印と同系の意匠。size='icon'+className='rounded-full'で円形にできる",
+        "非同期処理中のボタンは disabled + Spinner を自作せず loading を使う。ラベルを透明にしてスピナーを重ねるので幅は変わらない。click 系（クリック・Enter / Space・フォームの送信と暗黙送信）は止まり、onClick / onClickCapture も親やボタン内の要素の onClick も呼ばれない",
+        "loading 中の色は variant のまま（disabled のグレー塗りにはしない）。押せないことは aria-disabled、処理中であることはスピナーと読み上げ名（loadingLabel）で伝える",
+        "loading が止めるのは click 系だけ。onPointerDown / onMouseDown / onKeyDown は loading 中も呼ばれるので、pointerdown で開く部品（DropdownMenuTrigger asChild 等）の起点にするときは利用側で loading 中は開かないようにする",
+        "loading は Client Component の状態から渡す（クリック抑止に関数を使うため、Server Component で loading={true} を静的に描くと直列化できず落ちる）。loading 未指定の Button / buttonVariants は従来どおり Server Component から使える",
+        "asChild と loading を併用するとスピナーも読み上げの文言も出ない（見た目は変わらない）。aria-busy・aria-disabled・tabIndex=-1・クリック抑止だけを子へ渡す。リンクの意味を保つため href は外さない"
       ]
     },
     {
       "name": "Calendar",
       "path": "src/components/foundations/calendar.tsx",
       "rules": [
-        "<input type='date'>を使わない。PopoverとCalendarを組み合わせる"
+        "<input type='date'>を使わない。PopoverとCalendarを組み合わせる",
+        "年月ドロップダウン（captionLayout=dropdown）は透明な select を枠で包んでリングを描く。forced-colors（Windows のハイコントラスト）ではリング（box-shadow）が消えるため、枠にフォーカス時の輪郭線（outline）を出す。通常表示は変わらない"
+      ],
+      "accessibility": [
+        "月・年のドロップダウンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--input))] の形で書く"
       ]
     },
     {
@@ -173,7 +199,8 @@
       "path": "src/components/foundations/checkbox.tsx",
       "formBinding": "controller",
       "accessibility": [
-        "必ずLabelと紐付ける"
+        "必ずLabelと紐付ける",
+        "高コントラスト（OS の「コントラストを上げる」/ data-contrast=\"more\"）のとき、未選択の枠は --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書き、独自の色を足さない（既定の見た目は変わらない）"
       ]
     },
     {
@@ -184,6 +211,11 @@
       "subcomponents": [
         "CheckboxCardGroup",
         "CheckboxCardItem"
+      ],
+      "accessibility": [
+        "アクセシブルネームはラベル（children + badge）だけを aria-labelledby で指す。description と、選択中だけ見える expandedContent は aria-describedby に分ける（選択の前後で名前が変わらない）",
+        "ラベルの無いカードは description が名前になるため、description を aria-describedby に重ねない。aria-label / aria-labelledby を明示した場合はそちらが名前になる",
+        "高コントラスト（OS の「コントラストを上げる」/ data-contrast=\"more\"）のとき、未選択の枠は --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書き、独自の色を足さない（既定の見た目は変わらない）"
       ]
     },
     {
@@ -192,6 +224,10 @@
       "formBinding": "controller",
       "subcomponents": [
         "CheckboxGroupItem"
+      ],
+      "accessibility": [
+        "CheckboxGroupItem のフォーカス意匠は DS 共通の FOCUS_RING（rules.json A005）",
+        "高コントラスト（OS の「コントラストを上げる」/ data-contrast=\"more\"）のとき、未選択の枠は --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書き、独自の色を足さない（既定の見た目は変わらない）"
       ]
     },
     {
@@ -204,11 +240,49 @@
     },
     {
       "name": "Command",
-      "path": "src/components/foundations/command.tsx"
+      "path": "src/components/foundations/command.tsx",
+      "rules": [
+        "forced-colors（Windows のハイコントラスト）では選択中の項目（data-selected）を Highlight の地 + HighlightText で塗り、検索欄は枠（command-input-wrapper。input ではなく枠。input は枠より高く Command 本体の overflow-hidden に切り取られる）にフォーカス時の内側の輪郭線（outline）を出す。通常表示は変わらない"
+      ]
+    },
+    {
+      "name": "ConfirmDialog",
+      "path": "src/components/foundations/confirm-dialog.tsx",
+      "exported": false,
+      "subcomponents": [
+        "ConfirmDialogProvider",
+        "useConfirm"
+      ],
+      "props": [
+        "useConfirm(): (options) => Promise<boolean>",
+        "options.title: ReactNode（必須。ダイアログの読み上げ名）",
+        "options.description?: ReactNode（判断材料。省略すると Radix が開発時に console.warn を出すので原則渡す）",
+        "options.confirmLabel?: ReactNode（既定「確認」。「削除する」等の動詞を推奨）",
+        "options.cancelLabel?: ReactNode（既定「キャンセル」）",
+        "options.tone?: default | destructive（確定ボタンの Button variant。既定 default）"
+      ],
+      "accessibility": [
+        "AlertDialog 基盤（role=alertdialog）。開くとキャンセルにフォーカスが入り、Esc はキャンセル（false）。背景クリックでは閉じない",
+        "閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（Trigger を持たないため）。閉じるアニメーション中に次の confirm() が来ても、最後に閉じたときは元の呼び出し元へ戻る。呼び出し時にフォーカスが body で、表示中・閉じかけの確認も無いときは戻さない（以前の無関係な要素へ飛ばさない）",
+        "メニュー項目（DropdownMenuItem 等）から呼ぶと項目はメニューと一緒に消えるので、閉じた後はそのメニューを開いたトリガー（メニューの aria-labelledby が指す要素）へ戻す"
+      ],
+      "rules": [
+        "window.confirm() を使わない。アプリのルートに <ConfirmDialogProvider> を 1 つ置き、const confirm = useConfirm(); if (await confirm({ title, description })) { ... } で確認する",
+        "削除など取り消せない操作は tone='destructive' と動詞の confirmLabel（例: '削除する'）を渡す。キャンセルは AlertDialogCancel 既定の tertiary のまま（secondary にしない）",
+        "同時に複数呼ばれたら待ち行列で 1 件ずつ表示する。Provider が unmount されたとき（<Activity> で隠したときを含む）の未解決と、unmount 後の呼び出しは false で resolve し、表示も閉じる",
+        "useConfirm を ConfirmDialogProvider の外で使うと例外を投げる（設定漏れを「常にキャンセル」として黙って通さないため）",
+        "確定ボタンを押した時点で true に resolve して閉じる。処理完了までダイアログ内で待たせたい場合は AlertDialog を直接組み、確定ボタンに Button の loading を使う",
+        "\"use client\" モジュール。Next.js App Router では Server Component の layout にそのまま置ける（ConfirmDialogProvider 自体が client 境界）。useConfirm は Client Component から呼ぶ"
+      ]
     },
     {
       "name": "ContextMenu",
-      "path": "src/components/foundations/context-menu.tsx"
+      "path": "src/components/foundations/context-menu.tsx",
+      "rules": [
+        "中身の最大幅は Radix の available-width（画面内に使える幅）まで。長い項目や className で渡した広い幅でも、幅 390px の画面で右へはみ出さない（収まる幅・既定幅には効かない）",
+        "画面の右端・下端の近くで開くと、左へ反転・上へずらして画面内に収まる。Content に position: fixed（className=\"fixed\" 等）を足さない。足すと Radix の配置用ラッパーが 0×0 になり、反転・ずらしが効かなくなる",
+        "forced-colors（Windows のハイコントラスト）では薄い地（focus:bg-accent）が Canvas に置き換わって選択位置が見えないため、フォーカス中の項目を Highlight の地 + HighlightText で塗る（中のアイコン・ショートカットも HighlightText。destructive も同じ）。項目は outline-none（outline-hidden は forced-colors で全項目に常時 2px の輪郭線を出す）。通常表示は変わらない"
+      ]
     },
     {
       "name": "DataTable",
@@ -238,7 +312,10 @@
       "rules": [
         "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応",
         "ActionCellのメニュー操作は行のonClickへ伝播しない（本体でstopPropagation済み）。行クリック選択との併用時も利用側ガードは不要",
-        "見出し文字を出さない列（選択・操作・並び替えハンドル）は DataTableHead の srLabel で読み上げ用ラベルを付ける。空の <th> は列の意味が支援技術に伝わらない（axe: empty-table-header）"
+        "見出し文字を出さない列（選択・操作・並び替えハンドル）は DataTableHead の srLabel で読み上げ用ラベルを付ける。空の <th> は列の意味が支援技術に伝わらない（axe: empty-table-header）",
+        "DataTableLinkCell は linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。external:true のリンクは framework のリンク部品へ通す意味が無いため常に素の <a target=_blank> にフォールバックする（#236）",
+        "DataTableLinkCell は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）",
+        "DataTableInputCell は forced-colors（Windows のハイコントラスト）では inset の影が消えるため、入力欄にフォーカスがあるときセル全体に内側の輪郭線（outline）を出す。通常表示は変わらない"
       ],
       "accessibility": [
         "DataTableCheckboxCell は Space またはセルのクリックで選択を一度だけ通知し、行の onClick へ伝播しない。Enter は Checkbox の標準仕様に従い選択を変えない。indeterminate からの操作は true を通知する",
@@ -258,8 +335,20 @@
         "DialogFooter",
         "DialogClose"
       ],
+      "sizes": [
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "props": [
+        "DialogContent: size?: sm | md | lg | xl（未指定は従来の幅 sm:max-w-lg）",
+        "DialogContent: showCloseButton?: boolean"
+      ],
       "rules": [
-        "div.fixed.inset-0で自作しない。ESC・Tab・背景スクロールを自動処理"
+        "div.fixed.inset-0で自作しない。ESC・Tab・背景スクロールを自動処理",
+        "幅は DialogContent の size で選ぶ（sm 400px / md 512px / lg 640px / xl 800px。sm 以上の画面で効く）。SP は段に関係なく画面端から 16px を残して収まる。size 未指定は従来の幅（sm:max-w-lg）のままで、preset が --container-lg を 960px に再定義しているため実幅は 960px（512px ではない）。幅を決めたい画面は size を明示する。段に無い幅のために className で max-w を直書きしない（どうしても要るときだけ sm:max-w-[…] で上書き。size より className が勝つ）。名前付きの max-w-md / max-w-lg / max-w-xl は preset が --container-* を再定義して Tailwind 既定と別の値になるので使わない（px の任意値で書く）",
+        "DialogContent の size（sm / md / lg / xl）は AlertDialogContent の size（default / sm）とは別物。値も意味も異なる"
       ]
     },
     {
@@ -271,7 +360,11 @@
     },
     {
       "name": "DropdownMenu",
-      "path": "src/components/foundations/dropdown-menu.tsx"
+      "path": "src/components/foundations/dropdown-menu.tsx",
+      "rules": [
+        "中身の最大幅は Radix の available-width（画面内に使える幅）まで。長い項目や className で渡した広い幅でも、幅 390px の画面で右へはみ出さない（収まる幅・既定幅には効かない）",
+        "forced-colors（Windows のハイコントラスト）では薄い地（focus:bg-accent）が Canvas に置き換わって選択位置が見えないため、フォーカス中の項目を Highlight の地 + HighlightText で塗る（中のアイコン・ショートカットも HighlightText。destructive も同じ）。項目は outline-none（outline-hidden は forced-colors で全項目に常時 2px の輪郭線を出す）。通常表示は変わらない"
+      ]
     },
     {
       "name": "Field",
@@ -328,7 +421,10 @@
     },
     {
       "name": "HoverCard",
-      "path": "src/components/foundations/hover-card.tsx"
+      "path": "src/components/foundations/hover-card.tsx",
+      "rules": [
+        "中身の最大幅は Radix の available-width（画面内に使える幅）まで。長い項目や className で渡した広い幅でも、幅 390px の画面で右へはみ出さない（収まる幅・既定幅には効かない）"
+      ]
     },
     {
       "name": "IconBadge",
@@ -369,7 +465,11 @@
     },
     {
       "name": "Menubar",
-      "path": "src/components/foundations/menubar.tsx"
+      "path": "src/components/foundations/menubar.tsx",
+      "rules": [
+        "中身の最大幅は Radix の available-width（画面内に使える幅）まで。長い項目や className で渡した広い幅でも、幅 390px の画面で右へはみ出さない（収まる幅・既定幅には効かない）",
+        "forced-colors（Windows のハイコントラスト）では薄い地（focus:bg-accent）が Canvas に置き換わって選択位置が見えないため、フォーカス中の項目を Highlight の地 + HighlightText で塗る（中のアイコン・ショートカットも HighlightText。destructive も同じ）。項目は outline-none（outline-hidden は forced-colors で全項目に常時 2px の輪郭線を出す）。通常表示は変わらない"
+      ]
     },
     {
       "name": "NavigationMenu",
@@ -380,7 +480,9 @@
       "path": "src/components/foundations/pagination.tsx",
       "rules": [
         "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
-        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+        "PaginationPrevious / PaginationNext も linkComponent を受ける（PaginationLink へ転送される）。矢印だけの SP でも名前が消えないよう aria-label（前のページへ / 次のページへ）は linkComponent 経由でも付く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）",
+        "ページ番号（size=\"icon\"）は 3 桁以下なら SP 36px / PC 40px の正方形（従来どおり）。4 桁以上は文字幅に合わせて横に広がり、5 桁でもはみ出さない（幅はフォント次第）"
       ]
     },
     {
@@ -390,11 +492,17 @@
         "PopoverTrigger",
         "PopoverContent",
         "PopoverAnchor"
+      ],
+      "rules": [
+        "中身の最大幅は Radix の available-width（画面内に使える幅）まで。長い項目や className で渡した広い幅でも、幅 390px の画面で右へはみ出さない（収まる幅・既定幅には効かない）"
       ]
     },
     {
       "name": "Progress",
-      "path": "src/components/foundations/progress.tsx"
+      "path": "src/components/foundations/progress.tsx",
+      "accessibility": [
+        "forced-colors（Windows のハイコントラスト）では進んだ部分を Highlight、全体の範囲を CanvasText の輪郭線（outline。レイアウトに影響しない）で示す。通常表示は変わらない"
+      ]
     },
     {
       "name": "RadioGroup",
@@ -408,7 +516,8 @@
         "chip"
       ],
       "accessibility": [
-        "各RadioGroupItemにラベルテキスト必須。ラベルは children として RadioGroupItem の内側に書く（<RadioGroupItem value='x'>ラベル</RadioGroupItem>）。RadioGroupItem が内部で <label> 相当の関連付けまで行うため、外側に <Label htmlFor> を併置してはいけない（ラベル重複になる）"
+        "各RadioGroupItemにラベルテキスト必須。ラベルは children として RadioGroupItem の内側に書く（<RadioGroupItem value='x'>ラベル</RadioGroupItem>）。RadioGroupItem が内部で <label> 相当の関連付けまで行うため、外側に <Label htmlFor> を併置してはいけない（ラベル重複になる）",
+        "variant=\"chip\" の選択中は、forced-colors（Windows のハイコントラスト）では Highlight の地 + HighlightText で示す（Chip の selected と同じ）。通常表示は変わらない"
       ],
       "props": [
         "children: ラベル本文（必須。tile/chip 共通）",
@@ -419,14 +528,19 @@
         "variant='tile'（既定）=ラジオ丸+ラベル+補足説明+展開コンテンツのタイル型",
         "⚠️ タイルの枠（border/角丸/余白/選択状態の意匠）は RadioGroupItem 自身が描画する。consumer 側で <div className='border rounded-lg ...'> 等で囲むと枠が二重になる。囲まずにそのまま並べる",
         "ラベルは children で渡す。<RadioGroupItem/> と <Label htmlFor> を兄弟に並べる書き方は誤り（枠の二重化＋ラベル重複を招く）",
-        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariantsを再利用して選択状態をaccent意匠（静止=薄オレンジ/hover=ベタ塗り）で示す。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持"
+        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariants（filled）を再利用し、選択状態は入力部品のオン状態としてブランド色の薄い地（Chipのaccent意匠と同じトークン: 静止=薄オレンジ/hover=ベタ塗り）で示す。Chip の selected（グレー地 + 黒系の枠）とは別の見た目。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持",
+        "tile の未選択の枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ]
     },
     {
       "name": "ResponsiveDialog",
       "path": "src/components/foundations/responsive-dialog.tsx",
+      "props": [
+        "ResponsiveDialogContent: size?: sm | md | lg | xl（未指定は従来の幅。PC の Dialog の幅の段で DialogContent の size と同じ）"
+      ],
       "rules": [
-        "デスクトップ=Dialog、モバイル=Sheetを自動切替"
+        "デスクトップ=Dialog、モバイル=Drawer（下部のボトムシート）を自動切替",
+        "PC の Dialog の幅は ResponsiveDialogContent の size で選ぶ（sm 400px / md 512px / lg 640px / xl 800px。未指定は従来の幅）。SP の Drawer は全幅のボトムシートなので size は無視される（Drawer には渡らない）"
       ]
     },
     {
@@ -439,7 +553,9 @@
       "formBinding": "controller",
       "rules": [
         "<select>HTMLネイティブを使わない",
-        "SelectTrigger の高さは size='default'=44px（h-11）で Input / DatePicker trigger / Button default と揃う。size='sm'=36px。高さは素のクラスで当てているため className='h-12' 等で上書きできる（data 属性セレクタではない）"
+        "SelectTrigger の高さは size='default'=44px（h-11）で Input / DatePicker trigger / Button default と揃う。size='sm'=36px。高さは素のクラスで当てているため className='h-12' 等で上書きできる（data 属性セレクタではない）",
+        "position=\"popper\" のときだけ、一覧の最大幅を Radix の available-width（画面内に使える幅）までにする。長い選択肢があっても幅 390px の画面で右へはみ出さない。既定の item-aligned は Radix が画面内に寄せる",
+        "forced-colors（Windows のハイコントラスト）では薄い地（focus:bg-accent）が Canvas に置き換わって選択位置が見えないため、フォーカス中の項目（SelectItem）を Highlight の地 + HighlightText で塗る（項目の文字・選択済みのチェックも HighlightText）。項目は outline-none（outline-hidden は forced-colors で全項目に常時 2px の輪郭線を出す）。通常表示は変わらない"
       ]
     },
     {
@@ -458,11 +574,20 @@
         "SheetFooter",
         "SheetClose"
       ],
+      "sizes": [
+        "sm",
+        "md",
+        "lg"
+      ],
       "props": [
         "SheetContent: side?: top | right | bottom | left",
+        "SheetContent: size?: sm | md | lg（既定 sm。side が left / right のときだけ効く）",
         "SheetContent: showCloseButton?: boolean",
         "SheetContent: autoFocus?: boolean"
       ],
+      "rules": [
+        "幅は SheetContent の size で選ぶ（sm 384px 既定 / md 576px / lg 768px。side が left / right のときだけ効き、top / bottom は全幅なので無視される）。sm 以上の画面で効き、SP は段に関係なく画面の 3/4 幅。段に無い幅のために className で max-w を直書きしない（どうしても要るときだけ sm:max-w-[…] で上書き。size より className が勝つ）"
+      ],
       "accessibility": [
         "SheetTitle は必須（ダイアログの読み上げ名）",
         "フォーカスは既定で自動移動する（開く=Sheet の中へ / 閉じる=トリガーへ戻る）。WCAG 2.4.3。autoFocus={false} は止める必要がある特別な場合だけ使う（issue #233）"
@@ -473,6 +598,9 @@
       "path": "src/components/foundations/skeleton.tsx",
       "rules": [
         "アニメーションはpulseのみ許可"
+      ],
+      "accessibility": [
+        "動きを減らす設定（prefers-reduced-motion: reduce）では明滅（pulse）を止め、面だけを残す。読み込み中であることは包んでいる領域の aria-busy や Spinner の文言で伝える"
       ]
     },
     {
@@ -499,7 +627,11 @@
       "accessibility": [
         "role=\"slider\" を持つのはつまみ側なので、名前はつまみに付ける。aria-label / aria-labelledby は Slider が各つまみへ転送する（issue #202）",
         "つまみが 2 つ以上（範囲指定）で aria-label を使うと、読み上げで区別できるよう「（下限）」「（上限）」が自動で補われる。文言を自分で決めたいときは thumbLabels を使う",
-        "FormField 配下ならラベルの id を自動で aria-labelledby として受け取るので、単体利用のときだけ日本語の aria-label を書く"
+        "FormField 配下ならラベルの id を自動で aria-labelledby として受け取るので、単体利用のときだけ日本語の aria-label を書く",
+        "範囲スライダーの Home / End はフォーカス中のつまみを、そのつまみが動ける範囲の端（隣のつまみ ± minStepsBetweenThumbs × step、無ければ min / max）へ動かす（WAI-ARIA APG Multi-Thumb Slider）。つまみが 1 つのときは Radix の既定のまま",
+        "つまみの数は value / defaultValue の配列の長さ。どちらも無いときは Radix の既定値 [min] に合わせて 1 つ",
+        "forced-colors（Windows のハイコントラスト）では選択範囲を Highlight、レールを CanvasText の輪郭線（outline）で示す。通常表示は変わらない",
+        "溝は高コントラストのとき --Surface-Control-Track（3:1 以上）に切り替わる。溝の色は bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] の形で書く。高コントラスト時の溝と選択範囲（オレンジ）は明るさが近く、区別は色相が中心。値はつまみの位置で伝わる（つまみは 3:1 を満たす）"
       ]
     },
     {
@@ -519,14 +651,18 @@
     },
     {
       "name": "Spinner",
-      "path": "src/components/foundations/spinner.tsx"
+      "path": "src/components/foundations/spinner.tsx",
+      "accessibility": [
+        "role=\"status\" と「読み込み中」の文言を持つ。動きを減らす設定（prefers-reduced-motion: reduce）では回転を止め、上辺だけ色付きの欠けた輪のまま処理中を示す"
+      ]
     },
     {
       "name": "Switch",
       "path": "src/components/foundations/switch.tsx",
       "formBinding": "controller",
       "accessibility": [
-        "Label必須"
+        "Label必須",
+        "フォーカスをリングだけで示す。色は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使い、ring-[var(--Focus-High-Emphasis)]/50 を直書きしない。高コントラストのときだけ不透明なリング（--Focus-Ring-Control・3:1 以上）に切り替わる"
       ]
     },
     {
@@ -551,7 +687,17 @@
       ],
       "rules": [
         "サイドバー等の狭い場所に segment を置くときは TabsList size=\"sm\" を使う。既定は 1 項目 100px の最小幅を持ち、3 つ並べると 266px 幅ではみ出す（issue #235）",
-        "underbar のトリガーは左右 8px の padding を持つ。className=\"px-2\" を利用側で足さない"
+        "underbar のトリガーは左右 8px の padding を持つ。className=\"px-2\" を利用側で足さない",
+        "orientation=\"vertical\" は設定画面・ヘルプなど、タブが多い・ラベルが長い・パネルが縦に長い PC 幅の画面で使う。幅 390px 前後ではタブの列とパネルが半分ずつになり窮屈なので、横向き（既定）か SectionNav / SubNav を選ぶ",
+        "縦並びは data-orientation で DS 側が組むため、利用側で TabsList に flex-col や h-auto を重ねて書かない",
+        "TabsContent（Radix は tabindex=0 を付けるので、キーボードでフォーカスできるパネル）は、キーボードでフォーカスしたとき（focus-visible）だけ DS 共通の FOCUS_RING（緑のリング。forced-colors では輪郭線）を出す。静止時・マウスのクリックでは何も出ない",
+        "TabsTrigger のフォーカスの輪郭線は内側に描く（outline-offset が負）。外側に描くと TabsList の overflow-x-auto に全辺切り取られてフォーカス位置が見えない。静止時の見た目は変わらない"
+      ],
+      "props": {
+        "orientation": "\"horizontal\" | \"vertical\"（既定 \"horizontal\"）— Tabs（Root）に渡す。\"vertical\" では TabsList を左に縦並び（列の幅は Tabs の半分まで、長いラベルはタブの中で折り返す）、TabsContent は右の残り幅を取る。underbar は右端の線、segment は地の色で選択中を示す。矢印キーは上下で移動する。横向きの見た目は変わらない"
+      },
+      "accessibility": [
+        "forced-colors（Windows のハイコントラスト）では選択中のタブを OS の選択色で示す（segment は Highlight の地 + HighlightText、underbar / scrollable は Highlight の線。非選択の線は Canvas で消す）。通常表示は変わらない"
       ]
     },
     {
@@ -572,19 +718,31 @@
       "rules": [
         "トースト内にアクションリンクを入れない。左ボーダーではなく背景色全体で状態を表現",
         "アプリのルートに <Toaster /> を1つ置き、表示は toast()（sonner の再 export）で呼ぶ"
+      ],
+      "accessibility": [
+        "loading トーストの回転アイコンは、動きを減らす設定（prefers-reduced-motion: reduce）では止まる"
       ]
     },
     {
       "name": "Toggle",
       "path": "src/components/foundations/toggle.tsx",
-      "formBinding": "controller"
+      "formBinding": "controller",
+      "accessibility": [
+        "forced-colors（Windows のハイコントラスト）では押されているとき（data-state=on）を Highlight の地 + HighlightText で示す（default / outline 共通、ToggleGroup と同じ）。通常表示は変わらない",
+        "outline の枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--input))] の形で書く"
+      ]
     },
     {
       "name": "ToggleGroup",
       "path": "src/components/foundations/toggle-group.tsx",
       "formBinding": "controller",
       "rules": [
-        "水平パディングはコンポーネント内に入れない。親が管理する"
+        "水平パディングはコンポーネント内に入れない。親が管理する",
+        "ToggleGroupItem のフォーカスは内側に描く（ring-inset / forced-colors は FORCED_COLORS_FOCUS_INSET）。ToggleGroup 本体が overflow-x-auto なので、外側のリングは左右で切り取られる。静止時の見た目は変わらない"
+      ],
+      "accessibility": [
+        "forced-colors（Windows のハイコントラスト）では押されている項目（data-state=on）を Highlight の地 + HighlightText で示す（default / outline 共通）。通常表示は変わらない",
+        "outline の未選択の枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Low-Emphasis))] の形で書く"
       ]
     },
     {
@@ -622,18 +780,26 @@
         "折りたたみ（開閉）を持たせる場合、トリガーはサイドバー内ヘッダー行の右端に置く。コンテンツヘッダーの左端に置かない。動かす対象と操作する場所が離れると、そのボタンが何に属するか読めなくなる",
         "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）",
         "PC のサブメニューは DropdownMenu の Portal / collision handling を使い、side=right / align=start / collisionPadding=8 で viewport 内に収める。絶対配置の flyout を手組みしない",
-        "PC のサブメニューは hover とクリックに加え、Enter / Space / ArrowDown で開き Escape で閉じてトリガーへフォーカスを戻す。hover 起動時はメニューへフォーカスを移さず、トリガーと Portal 間は短い close delay で橋渡しする"
+        "PC のサブメニューは hover とクリックに加え、Enter / Space / ArrowDown で開き Escape で閉じてトリガーへフォーカスを戻す。hover 起動時はメニューへフォーカスを移さず、トリガーと Portal 間は短い close delay で橋渡しする",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。PC レールの項目・サブメニューのポップアップ・SP ドロワーの項目とサブ項目のすべてに効く。ポップアップ内のリンクは Radix の asChild 越しに描かれるため、ref と任意の属性を <a> まで転送する実装を渡す（next/link は転送する）。aria-current=page は linkComponent 経由でも付く（#236）。SP ドロワー内のリンク（項目・サブ項目）を押すと onOpenChange(false) が呼ばれる（クライアント遷移ではページが再読み込みされず、ドロワーが開いたまま新しいページに重なるのを防ぐ）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
       ]
     },
     {
       "name": "BannerCarousel",
-      "path": "src/components/primitives/banner-carousel.tsx"
+      "path": "src/components/primitives/banner-carousel.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。「もっと見る」（moreHref）と各バナー（items[].href）のリンクに効く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
     },
     {
       "name": "BottomTabBar",
       "path": "src/components/primitives/bottom-tab-bar.tsx",
       "rules": [
-        "モバイル専用。safe-area-inset-bottom対応必須"
+        "モバイル専用。safe-area-inset-bottom対応必須",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href を持つ項目だけが対象で、href の無い項目は従来どおり <button>。項目の onClick は href の有無によらず呼ばれる（href 付きは遷移を止めない）。aria-current=page は linkComponent 経由でも付く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -647,12 +813,18 @@
       "name": "CategoryScroll",
       "path": "src/components/primitives/category-scroll.tsx",
       "rules": [
-        "ルートは w-full 併記で CSS Grid 直下でも列幅いっぱいに広がる（mx-auto による max-content 縮み対策、issue #207）。grid 直下に置くための余分なラッパー div は不要"
+        "ルートは w-full 併記で CSS Grid 直下でも列幅いっぱいに広がる（mx-auto による max-content 縮み対策、issue #207）。grid 直下に置くための余分なラッパー div は不要",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。「もっと見る」（moreHref）と各カテゴリ（items[].href）のリンクに効く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
       "name": "CategoryShortcuts",
-      "path": "src/components/primitives/category-shortcuts.tsx"
+      "path": "src/components/primitives/category-shortcuts.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href を持つ項目だけが対象で、href の無い項目は従来どおり <button>。項目の onClick は href の有無によらず呼ばれる（href 付きは遷移を止めない）（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
     },
     {
       "name": "ChatComposer",
@@ -680,7 +852,8 @@
         "IME変換中のEnterでは送信しない（日本語入力の誤送信防止）",
         "添付は内蔵のFileInputで選択し、選択済みはChipのremovableで表示・削除する",
         "送信中はisSubmittingを立てる（送信ボタン無効化で二重送信を防ぐ）",
-        "<form>を内包しないため、フォーム内に置いても入れ子にならない"
+        "<form>を内包しないため、フォーム内に置いても入れ子にならない",
+        "フォーカス表示は枠（ラッパー）が FOCUS_RING_WITHIN で描く。forced-colors（Windows のハイコントラスト）では枠に輪郭線（outline）を出し、中の Textarea の輪郭線は二重にならないよう消す。通常表示は変わらない"
       ]
     },
     {
@@ -696,7 +869,19 @@
       ],
       "rules": [
         "フィルター・ステータスタブに使う。ToggleGroup+Badge手書き禁止",
-        "Tagと違い押せる・削除できる"
+        "Tagと違い押せる・削除できる",
+        "selected の見た目はブランド色を使わず、Surface-Tertiary 地 + Text-High-Emphasis 文字 + 内側 1px の黒系の枠（Border-High-Emphasis。inset-ring で描くので未選択→選択でサイズは変わらない）。chipVariants の variant='selected' に対応し、selected prop が自動で選ぶ。variant='accent'（薄いブランド色地）は明示指定の互換のために残してあるが、選択中の表示には使わない（contracts/composition.json の brandColorUsage）。count バッジの選択中は Surface-Primary 地 + Text-High-Emphasis",
+        "removable の削除ボタンは data-slot=\"chip-remove\"（本体は data-slot=\"chip-trigger\"）。読み上げ名は removeLabel（既定「削除」）。削除可能な Chip が複数並ぶ場面では「{ラベル}を削除」のように対象が分かる名前を渡す",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href 指定時のリンク（removable のときは本体のリンク）に効く。href 付きでも onClick と aria-* / data-* などは <a> に渡る（遷移は止めない）。type / disabled / form* / name / value など button 専用の属性は渡さない（#236）",
+        "removable を指定するときは、削除ボタンに onClick を付けるため React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。removable でなければ Server Component のまま使える（#264）"
+      ],
+      "props": [
+        "removable?: boolean",
+        "onRemove?: () => void",
+        "removeLabel?: string"
+      ],
+      "accessibility": [
+        "forced-colors（Windows のハイコントラスト）では選択中（selected）を Highlight の地 + HighlightText で示す（button / リンク / removable 共通）。通常表示は変わらない"
       ]
     },
     {
@@ -749,7 +934,12 @@
         "検索が必要な単一選択に使う。少数候補はSelectまたはRadioGroupを使う",
         "Popover + Command の検索・キーボード操作を内包する",
         "制御コンポーネント。value と onValueChange を必ず渡す（非制御では選択が反映されない）",
-        "FormField と繋ぐときは id を FieldLabel の htmlFor と揃え、エラーは aria-invalid / aria-describedby で FieldError に接続する"
+        "FormField の children に置けば id / aria-labelledby / aria-describedby / aria-invalid を自動で受け取る（FormField の error で aria-invalid=true）。FormField を使わないときは id / aria-invalid / aria-describedby を明示して FieldError に接続する"
+      ],
+      "accessibility": [
+        "aria-invalid のときトリガーに赤 1px（Border-Caution）の内側リング（inset-ring）を出す。トリガーは枠幅 0 の Button tertiary なので border では描かない（高さは変わらない）。キーボードフォーカス時は外側のフォーカスリングと同時に表示される",
+        "forced-colors（Windows のハイコントラスト）では box-shadow が消えるため、aria-invalid のときだけ CanvasText の輪郭線（outline。レイアウトに影響しない）で境界を出す。通常表示は変わらない",
+        "トリガーは枠を持たない。高コントラストのときだけ内側へ 1px の輪郭（HIGH_CONTRAST_OUTLINE・--Border-Control）が出て 3:1 以上になる（エラー時は輪郭を透明にし、赤の内側リングをそのまま見せる）。トリガーに border を足して直さない"
       ]
     },
     {
@@ -761,7 +951,8 @@
       ],
       "rules": [
         "ページ最大幅と左右paddingの唯一の担い手。これを使う親(Section等)は自身で左右paddingを持たない（二重がけ防止）",
-        "縦余白・背景色は持たない（Sectionの責務）"
+        "縦余白・背景色は持たない（Sectionの責務）",
+        "gutter の幅を CSS 変数 --Container-Gutter で子孫に渡す（default: SP 16px / md 以上 24px、tight: 12px / 16px、none: 0）。ScrollRow と ContentCarousel・ImageCarousel の peek がこれを読んで、Container の外へはみ出しつつ端の余白を gutter にそろえる。consumer が自前で横スクロール行を組むときも -mx-4 px-4 を直書きせずこの変数を使う"
       ]
     },
     {
@@ -778,7 +969,13 @@
         "ReactNode スライド対応（slides: ReactNode[]）。テキスト主体のヒーローバナー用",
         "itemsPerView=2|3|4 で PC の複数カード表示に対応。SP は1枚表示を維持し、EC 商品以外の求人・記事カード等にも使う",
         "画像だけのバナーは ImageCarousel を使う",
-        "矢印・ドットの意匠は ImageCarousel と同一"
+        "矢印・ドットの意匠は ImageCarousel と同一",
+        "peek（SP で隣をのぞかせる）は Container の直下（左右の余白を足さない親の中）に置く。Container の gutter 分だけ外へはみ出して Container の外縁（SP では画面端）までスクロールし、1 枚目の左端は見出しとそろう。外側に -mx-4 等を足さない（二重にはみ出し、ページが横に伸びる）。Card など余白を持つ親の中に peek で置かない。Container の外（全幅）に置いたときの端の余白は 16px",
+        "peek の端の余白は scroll-padding も同じ幅なので、スワイプ・ドット・自動再生で移動した後も端に貼り付かず、最後のスライドの右にも余白が残る（issue #320）"
+      ],
+      "accessibility": [
+        "autoPlay は、動きを減らす設定（prefers-reduced-motion: reduce）のときは自動再生しない。矢印・ドットでの移動もスムーズスクロールせず瞬時に切り替える。停止ボタンは持たない",
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
       ]
     },
     {
@@ -793,7 +990,19 @@
         "trigger の選択値は M月D日（曜日）表記、カレンダーは日本語ロケール",
         "選択範囲は min/max、個別不可日は disabledDates で指定する",
         "DateTimePicker は JST 前提で Date をそのまま扱う（TZ 変換しない）",
-        "FormField の children に置き、id を htmlFor と揃えて label/エラーと接続する"
+        "FormField の children に置くだけで trigger が id（label の htmlFor と一致）・aria-labelledby（FormField のラベル + 表示中の日付 / placeholder）・aria-describedby（説明・エラー）・aria-invalid（error 時 true）を受け取る。id の手書きは不要（明示した id / aria-invalid が優先、aria-describedby は連結）"
+      ],
+      "props": [
+        "id?: string",
+        "aria-invalid?: boolean",
+        "aria-describedby?: string"
+      ],
+      "accessibility": [
+        "aria-invalid のとき trigger の枠は Input / Select と同じ Border-Caution",
+        "clearable の × で値を消すと、× が消える前にフォーカスを trigger へ戻す（body に落ちない）",
+        "読み上げ名は FormField 配下で「ラベル + 表示中の日付 / placeholder」（例「お届け希望日 8月1日（土）」）。FormField の外では従来どおり表示中の日付 / placeholder（aria-label）",
+        "DateTimePicker の時・分 Select は FormField 配下で名前が「ラベル + 時 / 分」になり、id を別に採番する。FormField の外では id を付けない",
+        "DateTimePicker の時・分 Select にも aria-invalid / aria-describedby が届く"
       ]
     },
     {
@@ -858,11 +1067,13 @@
         "Label+Input+エラーメッセージをセットで管理",
         "グリッド横並び時は descriptionPosition='below' で高さを揃える",
         "npm 経由では CakeFormField として import する（foundations/form.tsx の FormField と名前が衝突するため別名で export）",
-        "ラベルの id を配下のコントロールへ自動で渡す。Select / Switch / Checkbox（Radix の <button> トリガー）は aria-labelledby、Input / Textarea は id ↔ htmlFor で関連付く。description / error があれば aria-describedby も付く（issue #202）",
-        "そのため Radix ベースの入力を使うときは FormField でラップするのが既定。ラップしない単体利用では日本語の aria-label を利用側で書く（<label htmlFor> は <button> に名前を与えない）"
+        "ラベルの id を配下のコントロールへ自動で渡す。Select / Switch / Checkbox（Radix の <button> トリガー）は aria-labelledby、Input / Textarea は id ↔ htmlFor で関連付く。DatePicker / DateTimePicker は aria-labelledby で「ラベル + 表示中の値」、NumberInput は label 未指定なら FormField のラベルが名前になる。description / error があれば aria-describedby も付き、error があれば aria-invalid=\"true\" も付く（Input / Textarea / Select / Combobox / MultiSelect / DatePicker / DateTimePicker / NumberInput / Switch / label なしの Checkbox。issue #202・KSK #640）",
+        "Radix ベースの単一入力を使うときは FormField の aria-labelledby を使う。1つのFormFieldに複数選択肢を置く場合は各コントロールを native label に関連付けるか、日本語の aria-label / aria-labelledby を明示する。明示ARIAは自動のフィールド名より優先し、description / error は aria-describedby で関連付く"
       ],
       "accessibility": [
-        "利用側が aria-label / aria-labelledby / id を明示した場合は必ずそちらが優先される（二重命名を避ける）"
+        "利用側が aria-label / aria-labelledby / id を明示した場合は必ずそちらが優先される（二重命名を避ける）",
+        "aria-describedby は連結する: FormField の説明・エラーの id と利用側が渡した aria-describedby を空白区切りでつなぐ（重複 id は除く）。利用側が指定してもエラー文が読み上げから落ちない",
+        "aria-invalid は利用側の明示値（aria-invalid={false} を含む）が優先。明示が無いときだけ FormField の error の有無で決まり、error が無ければ属性自体を付けない"
       ]
     },
     {
@@ -900,7 +1111,12 @@
         "「その他」のラベルは navOverflowLabel で差し替えられる（既定 その他）。ハンバーガーを自前で組まない",
         "HeaderAction の showLabel=true でアイコン＋可視ラベルのピル型（h-10・枠線）になる。「ログイン」等アイコンだけでは伝わらない導線に使い、consumer 側でアイコンにテキストを差し込まない（#245）",
         "searchBreakpoint で searchSlot の器を出し始めるコンテナ幅を選ぶ（md=768 / lg=960 の切替段のみ。xl=1280 は上限段でレイアウト切替に使わない）。狭い帯で検索を出さないときは consumer の CSS で中身を隠さずこの prop を使う。中身だけ隠しても器が flex-1 の幅を確保し、インラインナビを潰す（#243）",
-        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する（Container と同じ段: page / wide / fluid）。背景・border・sticky は全幅のまま中身だけ中央寄せされ、ロゴ・ナビの左端が本文と揃う。consumer 側で className に max-w を当てると背景と線まで中央幅になり両脇が抜けるので使わない（issue #234）"
+        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する（Container と同じ段: page / wide / fluid）。背景・border・sticky は全幅のまま中身だけ中央寄せされ、ロゴ・ナビの左端が本文と揃う。consumer 側で className に max-w を当てると背景と線まで中央幅になり両脇が抜けるので使わない（issue #234）",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。navItems の href（「その他」メニュー内のリンクを含む）と actions の href に効く。logo は ReactNode をそのまま描くだけで Header は <a> を足さないため対象外（ロゴをリンクにするなら logo に <Link> を含めて渡す）。通常表示のナビ項目の現在地（isActive）には aria-current=page が付く（「その他」メニュー内のリンクと同じ）。href 付きの項目でも onClick は呼ばれる（遷移は止めない）（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
+      ],
+      "accessibility": [
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
       ]
     },
     {
@@ -910,7 +1126,19 @@
         "scroll-snap",
         "dots",
         "arrows",
-        "autoPlay"
+        "autoPlay",
+        "peek"
+      ],
+      "rules": [
+        "peek（SP で隣をのぞかせる）は ContentCarousel と同じ。Container の直下に置くと gutter 分だけ外へはみ出して Container の外縁（SP では画面端）までスクロールし、1 枚目の左端は見出しとそろう。外側に -mx-4 等を足さない。Card など余白を持つ親の中に peek で置かない。Container の外（全幅）に置いたときの端の余白は 16px。scroll-padding も同じ幅なので、移動後・最後のスライドでも端の余白が残る（issue #320）",
+        "peek と centeredSlides を併用すると、タブレット（コンテナ幅 768〜959px）では centeredSlides の表示（Container からはみ出さず中央に 1 枚）になる",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。images[].href のリンクに効く（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
+      ],
+      "accessibility": [
+        "autoPlay は、動きを減らす設定（prefers-reduced-motion: reduce）のときは自動再生しない。矢印・ドットでの移動もスムーズスクロールせず瞬時に切り替える。停止ボタンは持たない",
+        "フォーカスをリングだけで示す。色は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使い、ring-[var(--Focus-High-Emphasis)]/50 を直書きしない。高コントラストのときだけ不透明なリング（--Focus-Ring-Control・3:1 以上）に切り替わる",
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
       ]
     },
     {
@@ -973,7 +1201,9 @@
       ],
       "accessibility": [
         "hover がない端末では削除ボタンを常時表示し、44pxの操作域を確保する。PCでもキーボードフォーカス時に削除操作を表示する",
-        "追加・削除ボタンはフォームの送信を起こさない"
+        "追加・削除ボタンはフォームの送信を起こさない",
+        "追加ボタンのフォーカスは FOCUS_RING_INSET。高コントラストのときだけ不透明なリング（--Focus-Ring-Control）に切り替わる",
+        "破線の追加ボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ],
       "rules": [
         "複数枚の画像を並べて管理するグリッド。ファイル選択の口は持たず、追加はonAddでconsumerが実装する",
@@ -989,7 +1219,15 @@
     },
     {
       "name": "ListItem",
-      "path": "src/components/primitives/list-item.tsx"
+      "path": "src/components/primitives/list-item.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href 指定時の <a> だけが対象。onClick・aria-*・フォーカスリングは linkComponent 経由でも <a> に付く（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）",
+        "フォーカスのリング・輪郭線は行の内側に描く（ring-inset / forced-colors は内向きの輪郭線）。overflow-hidden の角丸グループ（カード内に並べた行）に入れても左右が切り取られない。href あり（リンク）はフォーカスを受ける <a> が不透明な行 div に覆われるため、<a> は group/list-item + outline-none にして、リング・輪郭線は行 div に group-focus-visible/list-item: で描く（<a> に inset で付けると行の地の下に隠れて見えない）。静止時の見た目は変わらない"
+      ],
+      "accessibility": [
+        "フォーカスをリングだけで示す。色は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使い、ring-[var(--Focus-High-Emphasis)]/50 を直書きしない。高コントラストのときだけ不透明なリング（--Focus-Ring-Control・3:1 以上）に切り替わる"
+      ]
     },
     {
       "name": "MenuDrawer",
@@ -1015,7 +1253,14 @@
         "3件以上を複数選択させる、または候補が多い場合に使う。少数候補はCheckboxGroupを使う",
         "選択済みは削除可能なChipで表示する",
         "制御コンポーネント。value と onValueChange を必ず渡す（非制御では選択が反映されない）",
-        "FormField と繋ぐときは id を FieldLabel の htmlFor と揃え、エラーは aria-invalid / aria-describedby で FieldError に接続する"
+        "FormField の children に置けば id / aria-labelledby / aria-describedby / aria-invalid を自動で受け取る（FormField の error で aria-invalid=true）。FormField を使わないときは id / aria-invalid / aria-describedby を明示して FieldError に接続する"
+      ],
+      "accessibility": [
+        "aria-invalid のときトリガーに赤 1px（Border-Caution）の内側リング（inset-ring）を出す。トリガーは枠幅 0 の Button tertiary なので border では描かない（高さは変わらない）。キーボードフォーカス時は外側のフォーカスリングと同時に表示される",
+        "選択済み Chip を削除すると、フォーカスは次の Chip の削除ボタン → 無ければ直前の Chip → Chip が残らなければトリガーへ移る（body に落ちない）",
+        "forced-colors（Windows のハイコントラスト）では box-shadow が消えるため、aria-invalid のときだけ CanvasText の輪郭線（outline。レイアウトに影響しない）で境界を出す。通常表示は変わらない",
+        "選択済み Chip の削除ボタンの名前は「{項目のラベル}を削除」（Chip の removeLabel に渡す）",
+        "トリガーは枠を持たない。高コントラストのときだけ内側へ 1px の輪郭（HIGH_CONTRAST_OUTLINE・--Border-Control）が出て 3:1 以上になる（エラー時は輪郭を透明にし、赤の内側リングをそのまま見せる）。トリガーに border を足して直さない"
       ]
     },
     {
@@ -1031,6 +1276,10 @@
       "layouts": [
         "vertical",
         "horizontal"
+      ],
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href を持つ通知だけが対象で、href の無い通知は従来どおり <div>（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -1095,7 +1344,8 @@
         "onDelete?: () => void",
         "formatOptions?: Intl.NumberFormatOptions",
         "locale?: string",
-        "inputId?: string"
+        "inputId?: string",
+        "label?: string"
       ],
       "rules": [
         "DSの数値入力はすべてこれを使う。生の input type=\"number\" は使わない（カート数量・価格・在庫・ポイント等すべて）",
@@ -1103,7 +1353,32 @@
         "カート数量では min=1 が標準（0 にしない — 削除は showTrash + onDelete で行う）",
         "既定は min=1 / max=99 とカート数量向け。価格・在庫など汎用の数値入力では min / max / step を必ず明示する",
         "桁区切り・通貨表示は formatOptions を渡す（編集中は素の数値になる）。JPY の全角￥は半角¥に正規化される",
-        "旧名 QuantitySelector は用途名だったため機能名に改名した。旧名は deprecated alias として残るが新規利用は不可"
+        "旧名 QuantitySelector は用途名だったため機能名に改名した。旧名は deprecated alias として残るが新規利用は不可",
+        "FormField の children に置くと、入力欄が id（label の htmlFor と一致）・aria-describedby（説明・エラー）・エラー状態（FormField の error。見た目の赤枠と aria-invalid）を受け取る。label を指定しなければ名前も FormField のラベルになる（入力欄・グループ = ラベル、増減ボタン =「ラベル 減らす / 増やす」）。明示した inputId / label / error が優先。FormField の外の DOM は変わらない",
+        "高コントラストのとき、md は枠が --Border-Control（3:1 以上）に、sm は地の色を変えずに内側へ 1px の輪郭（HIGH_CONTRAST_OUTLINE）を足す。既定の見た目は変わらない"
+      ],
+      "accessibility": [
+        "error のとき入力欄に aria-invalid=\"true\" を付ける（見た目の赤枠と同時）",
+        "上限・下限に達した増減ボタンは native の disabled ではなく aria-disabled=\"true\"。押した直後にフォーカスを失って body に落ちないため。部品全体の disabled は native の disabled（Tab 順から外す）"
+      ]
+    },
+    {
+      "name": "ScrollRow",
+      "path": "src/components/primitives/scroll-row.tsx",
+      "props": [
+        "bleed?: boolean（既定 true）",
+        "snap?: boolean"
+      ],
+      "rules": [
+        "カード・絵柄・タグ等を横 1 列に並べて横スクロールさせる行。overflow-x-auto の行を画面ごとに手組みしない（issue #320）",
+        "Container の直下（左右の余白を足さない親の中）に置く。--Container-Gutter を読んで gutter 分だけ外へはみ出し（SP では画面端まで、PC でも gutter の中まで）、同じ幅の端の余白と scroll-padding を付けるので、1 枚目の左端が見出しとそろい、スナップ後・最後の要素の右にも余白が残る。外側に -mx-4 等を足さない",
+        "Card など余白を持つ親の中、または Container の className で左右の余白を変えた中では bleed={false}（変数は Container の子孫すべてに届くため、そのままだと gutter 分はみ出す）。端の余白をやめたいときも className=\"px-0\" ではなく bleed={false}。Container の外に置いたときは、はみ出し・余白とも 0",
+        "子要素は縮まない（shrink-0）。幅は子要素側で決める。snap 時の snap-start も含め子の class より優先される。間隔は 12px（gap-3）",
+        "上下に 4px の余白（py-1）を持ち、同じだけ負のマージン（-my-1）で打ち消す。横スクロールの行は上下のはみ出しも切り取るため、子のフォーカスリングが切れないようにする",
+        "カテゴリ（丸いアイコン＋名前）の列は CategoryScroll、自動再生・ドット付きのバナーは ContentCarousel を使う"
+      ],
+      "accessibility": [
+        "中にリンクやボタンが無い（キーボードで届かない）行は、tabIndex={0}・role=\"region\"・aria-label を渡してスクロール領域にフォーカスできるようにする（axe: scrollable-region-focusable）"
       ]
     },
     {
@@ -1121,7 +1396,9 @@
         "JS 無効環境・クローラでも動かす必要がある画面（SEO 重視の記事メディア等）は action を指定する。<form method=\"get\" action> として描画され、Enter も検索ボタンも素のフォーム送信になる（issue #237）",
         "action 指定時のクエリキーは name（既定 q）",
         "Input + Button で <form method=get> を手組みしない",
-        "searchHref は window.location を書き換える JS 前提の導線。action と併用しない（action が優先）"
+        "searchHref は window.location を書き換える JS 前提の導線。action と併用しない（action が優先）",
+        "枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わり、検索ボタンのリングは FOCUS_RING_INSET が不透明な --Focus-Ring-Control に切り替える",
+        "検索ボタンは親の枠（border 1px）の内側いっぱいの高さ（h-full）。親が overflow-hidden なので、枠と同じ高さにすると上下 1px が切り取られ、内側のフォーカスのリング・輪郭線も 1px 切れる。切れていた分は元から見えないので静止時の見た目は変わらない"
       ]
     },
     {
@@ -1161,9 +1438,15 @@
       ],
       "rules": [
         "タイトル+もっと見るボタンをCardTitle+Button手書き禁止。SectionHeaderを使う",
+        "「もっと見る」は補助リンクなのでブランド色を使わず、Text-Medium-Emphasis + 常時下線（hover で Text-High-Emphasis。Button の link variant と同じ意匠）で描く。自前で accent 色の「もっと見る」を組まない（brandColorUsage）",
         "中央寄せ大見出し（ランディング/ガイド系）は align=\"center\" を使う。eyebrow プロップに Badge 等を載せられる。手書きの中央寄せ見出し禁止",
         "3xl（28px）は通常ページの主見出しにも使う。4xl/5xlはLP・マーケティング系ヒーロー専用で、size=\"3xl\" に desktopSize=\"4xl\" または desktopSize=\"5xl\" を加えてPC時だけ拡大する",
-        "align=\"start\" では subtitle はタイトル行の下に全幅で置かれ、右側 action の下の空きも使って折り返す。moreHref 併用時にリンクになるのはタイトル行だけで、subtitle はリンクの外（issue #232）"
+        "align=\"start\" では subtitle はタイトル行の下に全幅で置かれ、右側 action の下の空きも使って折り返す。moreHref 併用時にリンクになるのはタイトル行だけで、subtitle はリンクの外（issue #232）",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。moreHref を指定したときのタイトル行のリンクと「もっと見る」リンクの両方に効く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ],
+      "accessibility": [
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
       ]
     },
     {
@@ -1205,7 +1488,9 @@
       "category": "navigation",
       "rules": [
         "ページ間遷移（別 URL へのナビゲーション）に使う。チェブロン付きで「別ページへ移動する」アフォーダンスを持つ",
-        "ページ内アンカー移動（href=\"#...\"）に流用しない → SectionNav を使う（見た目と挙動の不一致を防ぐ）"
+        "ページ内アンカー移動（href=\"#...\"）に流用しない → SectionNav を使う（見た目と挙動の不一致を防ぐ）",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）。項目の onClick（storyId 指定時の遷移の差し替え）と aria-current=page は linkComponent 経由でも保たれる（#236）",
+        "この部品は全項目の <a> に onClick（storyId 指定時の遷移の差し替え）を付けるため、React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする（#264）"
       ]
     },
     {
@@ -1236,6 +1521,9 @@
       "rules": [
         "ToggleGroup+Badge手書き禁止。Chip count propを使う",
         "activeIndex は初期値だけでなく、マウント後の外部変更にも表示が追従する"
+      ],
+      "accessibility": [
+        "選択中のタブは Chip の selected と同じく、forced-colors（Windows のハイコントラスト）では Highlight の地で示す"
       ]
     },
     {
@@ -1262,8 +1550,23 @@
     {
       "name": "Tag",
       "path": "src/components/primitives/tag.tsx",
+      "variants": [
+        "default",
+        "image",
+        "caution",
+        "sale",
+        "warning",
+        "info",
+        "info-fill",
+        "success",
+        "accent",
+        "timesale",
+        "berry",
+        "coupon"
+      ],
       "rules": [
-        "表示専用。onClickを付けない（押せるものはChip）"
+        "表示専用。onClickを付けない（押せるものはChip）",
+        "ProductCardの画像上に置く配送タグはvariant=\"image\"を使い、画像の明暗に依存しない不透明背景にする"
       ]
     },
     {
@@ -1326,12 +1629,18 @@
         "ヘッダーの水平 padding（px-4 @md:px-6）は main の gutter（p-4 @md:p-6）と同値。片方だけ変えるとヘッダー内要素と h1 の左端がズレるので、変えるときは両方揃える",
         "既定値は props で差し替え可能で、骨格（Header + SideNav + Main）自体は他事業（ジョブボードの管理画面等）でも再利用できる",
         "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化",
-        "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き"
+        "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。サイドナビ（AdminSideNav）の項目・サブメニューとパンくずのリンクに効く（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
       ]
     },
     {
       "name": "AnniversaryCard",
-      "path": "src/components/ec/anniversary-card.tsx"
+      "path": "src/components/ec/anniversary-card.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。editHref 指定時の編集リンク（Button asChild 越しに描かれる）に効く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
     },
     {
       "name": "CakeLogo",
@@ -1356,11 +1665,18 @@
       "layouts": [
         "vertical",
         "horizontal"
+      ],
+      "accessibility": [
+        "獲得中（status=\"acquiring\"）の回転アイコンは、動きを減らす設定（prefers-reduced-motion: reduce）では止まる"
       ]
     },
     {
       "name": "DeliveryCalendar",
-      "path": "src/components/ec/delivery-calendar.tsx"
+      "path": "src/components/ec/delivery-calendar.tsx",
+      "accessibility": [
+        "日付は button で、選んだ日は aria-pressed=\"true\"（ほかの日は false）として読み上げにも伝わる",
+        "forced-colors（Windows のハイコントラスト）では選んだ日を Highlight の地 + HighlightText（日付と ○△× も）で示す。通常表示は変わらない"
+      ]
     },
     {
       "name": "MypageShell",
@@ -1381,7 +1697,9 @@
         "既定値は props で差し替え可能（menuGroups / breadcrumbs / bottomNavItems / headerActions）で、骨格（ヘッダー＋2カラム＋BottomTabBar）自体は他事業（ジョブボードのマイページ等）でも再利用できる",
         "breadcrumbs 省略時は「ホーム > {ユーザー}さまのマイページ > {title}」を自動生成する",
         "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない",
-        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。PC ヘッダー（navItems / headerActions の href）・サイドメニュー・パンくず・SP の BottomTabBar の href に効く（#236）",
+        "この部品は内部で Client Component の Header へ linkComponent を渡すため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）。内部の SideNav が全項目にイベントハンドラを付けるため、linkComponent の有無によらず Server Component からは描けない"
       ]
     },
     {
@@ -1423,13 +1741,26 @@
         "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物で代替不可",
         "カード幅は列（親グリッド/flex）が決める。カード自身は min-w-0 で、固定の min-width を持たない。自前のカードを組む場合もテキスト列は grid-template-columns: minmax(0, 1fr) にし、auto にしない（nowrapのメタ行のmin-content幅が列を押し広げ、サムネイルが列からはみ出す）",
         "商品名は line-clamp-2 + min-h-[2lh] で常に2行分の高さを確保する。1行の商品名でも下に続く価格の縦位置が一覧内で揃う",
-        "hoverEffect でホバー時の画像演出を選ぶ: zoom / fade（拡大せず明るく・暗テーマ対応のため brightness を使う）/ none。未指定時の既定は orientation ごと（vertical=zoom / horizontal=none）で従来の見た目を維持し、明示指定すれば horizontal でも効く。consumer 側の CSS で scale を打ち消さない。Tailwind v4 の scale-* は transform ではなく scale プロパティのため打ち消しは壊れやすい（#244）"
+        "showCartButton のカートボタンは Button の outline 相当（白地 + 黒系の 1px 枠 + Text-High-Emphasis 文字。buttonVariants の outline / sm を高さ h-9 で使う）。一覧で1件ごとに繰り返す操作にブランド色のベタ塗りを使わないため（以前は Brand-Cake-Orange のベタ塗り）。ブランド色の主 CTA はページ側に1つだけ置く（brandColorUsage）",
+        "hoverEffect でホバー時の画像演出を選ぶ: zoom / fade（拡大せず明るく・暗テーマ対応のため brightness を使う）/ none。未指定時の既定は orientation ごと（vertical=zoom / horizontal=none）で従来の見た目を維持し、明示指定すれば horizontal でも効く。consumer 側の CSS で scale を打ち消さない。Tailwind v4 の scale-* は transform ではなく scale プロパティのため打ち消しは壊れやすい（#244）",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。商品リンク（href・カード全体）とショップ名リンク（shopHref）の両方に効く。onCardClick・ショップ名の stopPropagation は linkComponent 経由でも保たれる（#236）",
+        "shopHref（ショップ名リンクの stopPropagation）または showCartButton（カートボタンの onClick）を指定するときは、内部でイベントハンドラを付けるため React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。どちらも使わなければ Server Component のまま使える（#264）"
       ],
-      "variants": {}
+      "variants": {},
+      "accessibility": [
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
+      ]
     },
     {
       "name": "ProductCarousel",
-      "path": "src/components/ec/product-carousel.tsx"
+      "path": "src/components/ec/product-carousel.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。セクション画像リンク・「もっと見る」・各商品カード（商品とショップ名）に効く。products[].linkComponent を渡した商品はそちらを優先する（#236）",
+        "showCartButton を指定するか、商品に shopHref を指定するときは、内部の ProductCard がイベントハンドラを付けるため React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。どちらも使わなければ Server Component のまま使える（#264）"
+      ],
+      "accessibility": [
+        "フォーカスをリングだけで示す。色は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使い、ring-[var(--Focus-High-Emphasis)]/50 を直書きしない。高コントラストのときだけ不透明なリング（--Focus-Ring-Control・3:1 以上）に切り替わる"
+      ]
     },
     {
       "name": "ProductCTA",
@@ -1445,12 +1776,18 @@
       "name": "ProductDetailBar",
       "path": "src/components/ec/product-detail-bar.tsx",
       "rules": [
-        "スティッキーヘッダー。タブ+評価表示"
+        "スティッキーヘッダー。タブ+評価表示",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。タブのリンクに効く。タブの href は通常ページ内アンカー（#detail-slider 等）で、その用途では指定不要。別ページへ遷移するタブがあるときに使う（#236）",
+        "この部品は全タブの <a> に onClick（onTabClick 用）を付けるため、React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする（#264）"
       ]
     },
     {
       "name": "ProductDetailSidebar",
-      "path": "src/components/ec/product-detail-sidebar.tsx"
+      "path": "src/components/ec/product-detail-sidebar.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。ショップ名（shopHref）とブランド（brandHref）のリンクに効く（#236）",
+        "sizeOptions を指定するときは、サイズの選択肢（Chip）に onClick を付けるため React Server Components では Server Component から描けない（実行時に Event handlers cannot be passed to Client Component props で落ちる。linkComponent の有無によらない）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。sizeOptions を使わなければ Server Component のまま使える（#264）"
+      ]
     },
     {
       "name": "ProductListItem",
@@ -1459,7 +1796,12 @@
       "rules": [
         "カート/注文履歴/レビュー variant を持つ商品リスト行",
         "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物",
-        "subtotal/subtotalLabel（既定\"小計\"）はcart variant専用。数量セレクタ行の右側（収まらなければ下に折り返し）に¥{カンマ区切り}で表示。BtoB/法人ECのロット購入等、商品ごとの単価×数量の内訳を明示したい場合に使う"
+        "subtotal/subtotalLabel（既定\"小計\"）はcart variant専用。数量セレクタ行の右側（収まらなければ下に折り返し）に¥{カンマ区切り}で表示。BtoB/法人ECのロット購入等、商品ごとの単価×数量の内訳を明示したい場合に使う",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。商品画像・商品名（href）とショップ名（shopHref）のリンクに効く（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ],
+      "accessibility": [
+        "丸いボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く（既定の見た目は変わらない）"
       ]
     },
     {
@@ -1480,6 +1822,10 @@
         "image",
         "candle",
         "letter"
+      ],
+      "accessibility": [
+        "フォーカスをリングだけで示す。色は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使い、ring-[var(--Focus-High-Emphasis)]/50 を直書きしない。高コントラストのときだけ不透明なリング（--Focus-Ring-Control・3:1 以上）に切り替わる",
+        "破線の追加ボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ]
     },
     {
@@ -1491,6 +1837,9 @@
       "features": [
         "sparkle-icon",
         "review-count"
+      ],
+      "rules": [
+        "表示用の評価（星アイコンと数値）はブランド色を使わず Text-High-Emphasis（黒系）で描く。件数は Text-Low-Emphasis。入力用の星（ReviewForm の選択済み）はブランド色のまま（brandColorUsage）"
       ]
     },
     {
@@ -1517,6 +1866,10 @@
         "rating",
         "text",
         "image-upload"
+      ],
+      "accessibility": [
+        "入力用の星（未選択）は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。色は text-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く",
+        "破線の追加ボタンの枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ]
     },
     {
@@ -1537,6 +1890,10 @@
         "rating",
         "delivery-date",
         "bookmark"
+      ],
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。href 指定時のカード全体リンク（default）とカード本体（compact）に効く。href が無い compact は従来どおり <div>（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {