@cakejp/design-system 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -7,6 +7,69 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased]
+
+## [0.17.0] - 2026-08-06
+
+アクセシビリティ（読み上げソフト対応）の burn-down と、利用側バンドル削減の回。**破壊的変更なし。** 公開 export 名・既定の見た目はどちらも変わらない。
+
+### ✨ Added
+
+- **フィールドのラベル関連付けを DS の仕組みとして実装**（a11y）: Radix ベースのコントロールは `<button>` / `<span role="slider">` として描画されるため `<Label htmlFor>` ではアクセシブルネームが付かない。`FormField` がラベル・説明・エラーに id を採番し、配下のコントロールへ context で渡す方式（`src/lib/field-labelling.ts`）に決定。`Select` / `Switch` / `Checkbox` / `Combobox` / `MultiSelect` / `Slider` は `aria-labelledby`、`Input` / `Textarea` は `id` ↔ `htmlFor` で自動的に関連付く。利用側の `aria-label` / `aria-labelledby` / `id` の明示指定が常に優先される（[#202](https://github.com/flashpark/cake-design-system/issues/202)）
+- **`AccordionTrigger` に `headingLevel` prop を追加**（a11y）: 見出しレベルを 2〜6 で指定できる。既定は radix と同じ 3 のままなので既存利用に影響しない。ナビゲーション用途で本文の h1 より前に置くときにページの見出し階層を壊さない（[#219](https://github.com/flashpark/cake-design-system/issues/219)）
+- **`Slider` に `thumbLabels` prop を追加**（a11y）: つまみごとの読み上げ名を指定できる。未指定でも `aria-label` を各つまみへ転送し、範囲指定（つまみ 2 つ以上）では「（下限）」「（上限）」を自動で補う
+- **`DataTableSelectCell` に `aria-label` prop を追加**（a11y）: 未指定時は `placeholder` を名前に使う
+
+### ⚡️ Performance
+
+- **利用側の初期バンドルを削減**: library build を `preserveModules` 出力へ変更し、`import { Button }` のような named export だけで未使用コンポーネントを落とせるようにした。アイコンは barrel 経由をやめ使用アイコンごとのサブパス import に置換。Tailwind の `@source` 入口は build 後に生成する manifest で維持するため **consumer 側の CSS 設定変更は不要**、公開 API の名前も不変。Button のみ import の実測で **JS 332.5 kB → 246.6 kB（gzip 101.0 kB → 75.5 kB）**（[PR #218](https://github.com/flashpark/cake-design-system/pull/218)）
+
+### 🐛 Fixed
+
+- **`CategoryScroll` が CSS Grid 直下で max-content 幅に縮む問題を修正**（**見た目が直る**）: ルートの `mx-auto` が grid アイテムの `justify-self: stretch` を無効化していた。`w-full` を併記して列幅いっぱいに広がるようにした（実測 536px → 867px）。block 文脈での中央寄せ・上限幅は従来どおり。利用側の回避ラッパーは撤去できる（[#207](https://github.com/flashpark/cake-design-system/issues/207)）
+- **`SideNav` / `MenuDrawer` の hover をモーショントークン参照に変更**（**見た目が変わる**）: 素の `transition-colors`（Tailwind 既定値）では `prefers-reduced-motion` のトークン制御が効かなかった。あわせて MenuDrawer の行は `mx-2` + `px-2` でハイライト下地を左右 8px 内側に入れ、元から指定されていた `rounded-lg` を可視化（文字の開始位置は 16px のまま不変）（[#201](https://github.com/flashpark/cake-design-system/issues/201)）
+- **`npx cakejp-ds codemod <NAME>` が `scripts/codemod/` を動的解決するようになった**: 従来はバージョン名の決め打ちで、雛形から作った codemod を呼べなかった。あわせて DIR 引数が codemod スクリプトへ渡っていなかった既存バグも修正（[#182](https://github.com/flashpark/cake-design-system/issues/182)）
+
+### ♿️ Accessibility
+
+- **axe の `button-name` / `label` / `aria-input-field-name` の除外を全廃**: 着手時点で 21 ストーリーが違反していたものをゼロにし、`.storybook/preview.ts` の既知違反ベースラインからラベル関連の 3 ルールを削除した。以後、同種の抜けは追加時点で検知される。a11y 検査は 120 ファイル / 608 件が全緑（[#202](https://github.com/flashpark/cake-design-system/issues/202)）
+
+### 🔧 Changed
+
+- **publish workflow を Trusted Publishing（OIDC）対応に**: `id-token: write` を追加し、publish ジョブの Node を 22 / npm を 11.5.1 以上へ。`NODE_AUTH_TOKEN` はフォールバックとして残しているため、npmjs.com 側の Trusted Publisher 登録が未了でも従来どおり publish できる。登録完了後にトークンを撤去する（[#132](https://github.com/flashpark/cake-design-system/issues/132)）
+
+### 📝 Docs
+
+- ラベル関連付けの方針を contracts（`components.json` の FormField / Slider、`rules.json` の A013）と `CLAUDE.md` に明記
+- `RELEASE.md` / `PUBLISHING.md` の認証まわりを実態に更新。誤りだった「token は少なくとも 1 年に 1 度 rotate」を、granular token の 90 日上限の記述へ修正
+
+### 🐛 Fixed（管理画面シェル / #195・#196）
+
+- **管理サイドナビのサブメニュー項目が 44px を割っていた問題を修正**（**見た目が変わる／a11y**）: PC のホバーポップアップ内の項目が `py-2.5`（10px×2）+ 行高 18px = **38px** で、WCAG 2.5.5 の最小ターゲット 44px を下回っていた。`min-h-11` で下限を固定（SP ドロワーのサブメニューは 44.5px で元から充足だが、同じく下限を明示）。ポップアップの項目が 1 行あたり 6px 高くなる（[#196](https://github.com/flashpark/cake-design-system/issues/196)）
+- **`AdminHeader` の水平 padding を本文の gutter に揃えた**（**見た目が変わる**）: ヘッダーが `px-3 @md:px-4`、`AdminShell` の `<main>` が `p-4 @md:p-6` で、ヘッダー内要素の左端とページ h1 の左端が PC で 8px（SP で 4px）ズレていた。ヘッダーを `px-4 @md:px-6` に揃え、左の面を一致させた（[#196](https://github.com/flashpark/cake-design-system/issues/196)）
+
+- **`AdminSideNav` の SP ドロワーヘッダー行から `border-bottom` を削除**（**見た目が変わる**）: サイドバーは 1 枚の静かなパネルとして読ませる。画面に見える線を①サイドバー右端の縦線②コンテンツヘッダー下の横線の 2 本に絞り、十字の交差を避けて T 字で突き当たるようにした。見出しと最初の項目の分離は既存の余白（閉じるボタン 40px + `py-3` で実高 64px）が担う（[#195](https://github.com/flashpark/cake-design-system/issues/195)）
+- **`Avatar` のイニシャル文字サイズを円径の 44% 目安に調整**（**見た目が変わる**）: 既定サイズ（32px 円）のフォールバックが 12px（37%）で字が円の中で泳いでいた。sm=10px / default=14px / lg=16px に整理し、`AvatarGroupCount` の件数表示も同じ比率に揃えた（[#195](https://github.com/flashpark/cake-design-system/issues/195)）
+
+### 📝 Docs
+
+- サイドバーの線と折りたたみトリガーのガイダンスを contracts に追記（[#195](https://github.com/flashpark/cake-design-system/issues/195)）: ①サイドバー内に横罫線を引かない（ヘッダー行・フッターとも。線は右端の縦線とコンテンツヘッダー下の横線の 2 本だけ）②折りたたみトリガーはサイドバー内ヘッダー行の右端に置き、コンテンツヘッダー左端に置かない③`AvatarFallback` のイニシャルは円径の 44% 前後にする
+- サイドナビ・シェルヘッダーのガイダンスを contracts に追記（[#196](https://github.com/flashpark/cake-design-system/issues/196)）: ①サイドバーのフッターにも `border-top` を引かない（1 枚のパネルとして読ませ、分離は余白が担う）②シェルヘッダーにページタイトルを複製しない（ページ名の正は本文の h1。置くものが無ければヘッダーバー自体を省いてよい）③ヘッダーの水平 padding は本文コンテナの gutter と揃える ④ナビ項目は 44px を確保する
+
+## [0.16.0] - 2026-07-31
+
+ダークモード・フォーカス可視性・カードレイアウトのバグ修正回（issue #208 / #209 / #210）。**破壊的変更なし。** 見た目の変化はすべて改善方向（真っ黒画面の解消・フォーカスが見えるようになる・はみ出しとズレが直る）。
+
+### 🐛 Fixed
+
+- **ルート要素に背景色トークンが無く、ダークモード設定のブラウザで画面が真っ黒になる問題を修正**: `html` に `var(--background)`（= `--Surface-Primary`）、`body` に `var(--foreground)` を preset の base 層で宣言。preset.css を import しただけで light/dark とも正しい地色になる。トークン参照のみでハードコード無し、`__tests__/root-background-css.test.ts` で契約を固定（[#208](https://github.com/flashpark/cake-design-system/issues/208)、PR #212）
+- **ProductCard が grid 列からはみ出す / タイトル行数で価格の縦位置がズレる問題を修正**（**見た目が直る**）: root の `min-w-[140px]` が grid の 1fr トラックを内側から押し広げて列はみ出しを起こしていた（480px コンテナ 4 列で 32px はみ出し → 0）。root を `min-w-0` にし、nowrap のメタ行にも `min-w-0` を伝播。商品名は `min-h-[2lh]` で常に 2 行分を確保し、同一行のカードの価格 y 座標が完全一致するようにした。回帰ストーリーと契約テストを追加（[#210](https://github.com/flashpark/cake-design-system/issues/210)、PR #211)
+- **interaction テストの開閉直後 `toBeVisible()` をアニメーション完了待ちに変更**: Dialog / Tabs / Accordion の 5 箇所が fade-in 中の opacity 0 でタイミング依存に失敗していたフレークを解消（PR #214）
+
+### 🐛 Fixed
+
+- **入力系のフォーカス表示を統一し、hover がフォーカスを上書きする問題を修正**（**見た目が直る／a11y**）: フォーカスリングの定義を `FOCUS_RING` / `FOCUS_RING_WITHIN` / `FOCUS_RING_INSET`（`src/lib/focus-ring.ts`、公開 export）に一本化し、Input / Textarea / Select / Checkbox / CheckboxCard / RadioGroup（tile・chip）/ Slider / Button / Chip / FileInput / SearchBar / NumberInput / CommandInput が同じ緑リング（`--Focus-High-Emphasis` の 3px）で揃うようにした。**フォーカスの可視状態が無かった** SearchBar の検索ボタンと NumberInput の増減ボタンにリングを追加。CheckboxCard / RadioGroup(tile) はフォーカスリングがオレンジで選択状態と紛らわしかったため緑へ統一。加えて Tailwind の variant 出力順で `focus-within` が `hover` に負ける問題を、SearchBar / FileInput で明示的に抑制した（フォーカス中はホバーの枠線が出ない）。契約は `__tests__/focus-visible-contract.test.tsx` で固定（[#209](https://github.com/flashpark/cake-design-system/issues/209)）
+
 ## [0.15.0] - 2026-07-30
 
 姉妹 DS（ksk-design-system）の直近改善（#267 / #280 / #282 / #271 / #268 / #278）を cake へ移植した回。**破壊的変更なし。** 見た目の変化は「flex 内で潰れていた固定サイズ要素が本来のサイズに戻る」「a11y 修正でスクロール領域にフォーカスリングが付く」の改善方向のみ。

package/CLAUDE.md

@@ -100,6 +100,7 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 - **価格表記**: `¥{数字,区切り}（税込）` — `円` `税込み` `(税込)` は禁止
 - **日付表記**: `M月D日（曜日）` — `YYYY/MM/DD` や英語表記禁止
 - **aria-label**: 日本語で記述 — 英語 aria-label 禁止
+- **Radix コントロールのラベル**: `Select` / `Switch` / `Checkbox` / `Combobox` / `Slider` などは `<button>` や `<span role="slider">` として描画されるため、**隣に `<Label htmlFor>` を置いても読み上げ名が付かない**。`FormField`（npm では `CakeFormField`）でラップすれば `aria-labelledby` が自動で付く。ラップしない単体利用のときだけ、コントロール自身に日本語の `aria-label` を書く
 - **input type="date"**: 使用禁止 — 実装済みの正解形 `DatePicker` / `DateTimePicker`（primitives）を使う（内部で Popover と Calendar を DS 意匠で組み済み）。特殊要件のときのみ Popover と Calendar を手組みする
 - **input type="file"**: 使用禁止 — 汎用の添付（PDF/CSV/画像混在）は `FileInput`（foundations）、プレビュー付きの画像管理（並び替え・複数サムネイル）は `ImageUploader`（primitives）を使う
 - **Button の「戻る・キャンセル・閉じる」**: `variant="secondary"` は誤り — **`variant="tertiary"`（グレー）を使う**。Cake DS の `secondary` は Material/Bootstrap/shadcn と違い**ブランドアクセント（薄オレンジ地+オレンジ文字）**。「主 CTA の隣＝2番目だから secondary」と序列で選ばず、役割（前進か後退か）で選ぶ。secondary は別方向の“前進”副 CTA 用（例: 主「購入する」/ 副「サンプルを見る」）

package/bin/init.js

@@ -11,7 +11,7 @@
 //   npx cakejp-ds init --force  # 既存ファイルを上書き
 //   npx cakejp-ds postinstall   # npm postinstall から呼ばれる silent モード
 
-import { copyFileSync, existsSync } from "node:fs"
+import { copyFileSync, existsSync, readdirSync } from "node:fs"
 import { dirname, join, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -22,13 +22,30 @@ const args = process.argv.slice(2)
 const cmd = args[0] || "init"
 const force = args.includes("--force")
 
+/**
+ * scripts/codemod/ に置かれた codemod 名の一覧。
+ * template.mjs（次の破壊的変更用の雛形）と check-migration.mjs（別コマンド）は除く。
+ * ここを一覧の唯一の出所にすることで、雛形から作った codemod が
+ * dispatch の書き換えなしに npx から呼べる（issue #182）。
+ */
+function listCodemods() {
+  const dir = join(pkgRoot, "scripts/codemod")
+  if (!existsSync(dir)) return []
+  return readdirSync(dir)
+    .filter((f) => f.endsWith(".mjs"))
+    .map((f) => f.replace(/\.mjs$/, ""))
+    .filter((name) => name !== "template" && name !== "check-migration")
+    .sort()
+}
+
 if (cmd === "help" || cmd === "--help" || cmd === "-h") {
   console.log(`@cakejp/design-system CLI
 
 使い方:
   npx cakejp-ds init                          AI ルールファイルを設置
   npx cakejp-ds init --force                  既存ファイルを上書き
-  npx cakejp-ds codemod v0.2-to-v0.3 [DIR]    旧 API を新 API に自動移行
+  npx cakejp-ds codemod <NAME> [DIR]          旧 API を新 API に自動移行
+                                              使える <NAME>: ${listCodemods().join(", ") || "（なし）"}
   npx cakejp-ds check-migration [DIR]         旧 API 利用箇所を検出
   npx cakejp-ds check-duplicates [DIR]        DS に既にある部品の二重実装を検出（--strict で検出時 exit 1）
                                               意図的に残すローカル実装は、対象 export の直前行に
@@ -41,12 +58,18 @@ if (cmd === "help" || cmd === "--help" || cmd === "-h") {
 // codemod / check-migration は別 script に委譲
 if (cmd === "codemod") {
   const subcmd = args[1]
-  if (subcmd !== "v0.2-to-v0.3") {
-    console.error(`未知の codemod: ${subcmd}`)
-    console.error(`使えるもの: v0.2-to-v0.3`)
+  const available = listCodemods()
+
+  // 一覧に含まれる名前だけを import する（"../" 等でパッケージ外を読ませない）
+  if (!available.includes(subcmd)) {
+    console.error(subcmd ? `未知の codemod: ${subcmd}` : "codemod 名を指定してください")
+    console.error(`使えるもの: ${available.join(", ") || "（なし）"}`)
     process.exit(1)
   }
-  await import(join(pkgRoot, "scripts/codemod/v0.2-to-v0.3.mjs"))
+
+  // process.argv の調整（codemod スクリプト側は process.argv.slice(2) を見る）
+  process.argv = [process.argv[0], process.argv[1], ...args.slice(2)]
+  await import(join(pkgRoot, "scripts/codemod", `${subcmd}.mjs`))
   process.exit(0)
 }
 

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.15.0",
+    "version": "0.17.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -18,7 +18,15 @@
   "foundations": [
     {
       "name": "Accordion",
-      "path": "src/components/foundations/accordion.tsx"
+      "path": "src/components/foundations/accordion.tsx",
+      "subcomponents": [
+        "AccordionItem",
+        "AccordionTrigger",
+        "AccordionContent"
+      ],
+      "rules": [
+        "AccordionTrigger の headingLevel（2〜6、既定 3）でページの見出し階層に合わせる。ナビゲーション用途（サイドバーのカテゴリ一覧等）で本文の h1 より前に置くときは、ページ構造に沿ったレベルを明示する（issue #219）"
+      ]
     },
     {
       "name": "Alert",
@@ -66,6 +74,9 @@
       "subcomponents": [
         "AvatarImage",
         "AvatarFallback"
+      ],
+      "rules": [
+        "AvatarFallback のイニシャルは円の直径の 44% 前後のフォントサイズにする（32px 円なら 14px）。12px だと 37% で字が円の中で泳ぎ、余白が勝って弱く見える"
       ]
     },
     {
@@ -435,7 +446,15 @@
     {
       "name": "Slider",
       "path": "src/components/foundations/slider.tsx",
-      "formBinding": "controller"
+      "formBinding": "controller",
+      "props": [
+        "thumbLabels?: string[]"
+      ],
+      "accessibility": [
+        "role=\"slider\" を持つのはつまみ側なので、名前はつまみに付ける。aria-label / aria-labelledby は Slider が各つまみへ転送する（issue #202）",
+        "つまみが 2 つ以上（範囲指定）で aria-label を使うと、読み上げで区別できるよう「（下限）」「（上限）」が自動で補われる。文言を自分で決めたいときは thumbLabels を使う",
+        "FormField 配下ならラベルの id を自動で aria-labelledby として受け取るので、単体利用のときだけ日本語の aria-label を書く"
+      ]
     },
     {
       "name": "SocialIcon",
@@ -528,7 +547,9 @@
       "rules": [
         "管理画面向けの上端固定ヘッダーの汎用枠。左に SP ハンバーガー＋brand、右に actions slot",
         "文言合成（『{shopName}管理』等）はしない。brand / actions を利用側が組み立てて渡す",
-        "onMenuClick 省略時はハンバーガー非表示"
+        "onMenuClick 省略時はハンバーガー非表示",
+        "ページタイトルをヘッダーに複製しない。ページ名の正は本文の h1（AdminShell の title）。ヘッダーにはブランド・パンくず（現在地の文脈）・グローバル操作を置き、置くものが無ければヘッダーバー自体を省いてよい",
+        "水平 padding は本文コンテナの gutter と揃える（px-4 @md:px-6 = AdminShell の main の p-4 @md:p-6）。ヘッダー内要素の左端と本文 h1 の左端を同じ面に乗せる。片方だけ変えると 8px 程度のズレでも違和感として検出される"
       ]
     },
     {
@@ -540,7 +561,11 @@
         "項目データ（メニュー定義・文言）は全て items prop で受ける。特定事業のメニューを部品側に焼き込まない（Cake.jp 既定は AdminShell が持つ）",
         "PC レールのラベルは max-w-12 + typo-label-xs + 中央揃えを本体が所有する。5文字超も語のまとまりで折り返せるため、consumer が data-slot セレクタで内部上書きしない",
         "SP ドロワー開閉は open / onOpenChange で制御する（内部 state を持たない）",
-        "icon は ReactNode か描画コンテキスト（active / placement）で出し分ける関数を渡す"
+        "icon は ReactNode か描画コンテキスト（active / placement）で出し分ける関数を渡す",
+        "サイドバーは 1 枚のパネルとして読ませる。ヘッダー行に border-bottom、フッター（ユーザーブロック・ヘルプ導線等）に border-top を引かない。内部を横線で区切ると分割されて見えるため、分離は余白で担う",
+        "画面に見える線は①サイドバー右端の縦線②コンテンツヘッダー下の横線の 2 本に絞る。サイドバー内で横線を引くと 2 本が十字に交差して見える（正しくは T 字で突き当たる）",
+        "折りたたみ（開閉）を持たせる場合、トリガーはサイドバー内ヘッダー行の右端に置く。コンテンツヘッダーの左端に置かない。動かす対象と操作する場所が離れると、そのボタンが何に属するか読めなくなる",
+        "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）"
       ]
     },
     {
@@ -563,7 +588,10 @@
     },
     {
       "name": "CategoryScroll",
-      "path": "src/components/primitives/category-scroll.tsx"
+      "path": "src/components/primitives/category-scroll.tsx",
+      "rules": [
+        "ルートは w-full 併記で CSS Grid 直下でも列幅いっぱいに広がる（mx-auto による max-content 縮み対策、issue #207）。grid 直下に置くための余分なラッパー div は不要"
+      ]
     },
     {
       "name": "CategoryShortcuts",
@@ -733,7 +761,12 @@
       "rules": [
         "Label+Input+エラーメッセージをセットで管理",
         "グリッド横並び時は descriptionPosition='below' で高さを揃える",
-        "npm 経由では CakeFormField として import する（foundations/form.tsx の FormField と名前が衝突するため別名で export）"
+        "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> に名前を与えない）"
+      ],
+      "accessibility": [
+        "利用側が aria-label / aria-labelledby / id を明示した場合は必ずそちらが優先される（二重命名を避ける）"
       ]
     },
     {
@@ -1133,6 +1166,8 @@
         "他ブランドで使う場合、ヘッダー左のブランド表示は brand（ReactNode。既定=『{shopName}管理』の文字列）で差し替える。SP ドロワー上部の見出しは sidebarHeader（ReactNode。既定=shopName）で差し替える",
         "戻る導線（onBack）はパンくずの上に置く。onBack を渡すとシェルが main 内・パンくずより上に戻るボタンを描画する（backLabel で文言変更・既定『戻る』）。子コンテンツ内に戻るリンクを手書きしない",
         "タイトル直下の上位アクション（AI商品作成・PDF出力等）は h1 と同じ左端に左寄せする。右端フロートにしない",
+        "ページ名の正は main 内の h1（title prop）。同じページ名を AdminHeader 側に複製しない（ヘッダーはブランド・パンくず・グローバル操作の場）",
+        "ヘッダーの水平 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は据え置き"
@@ -1226,7 +1261,9 @@
         "rating"
       ],
       "rules": [
-        "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物で代替不可"
+        "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行の商品名でも下に続く価格の縦位置が一覧内で揃う"
       ]
     },
     {

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.15.0",
+    "version": "0.17.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
@@ -54,7 +54,13 @@
       "rules": [
         "管理画面のシェルは AdminShell を使い、手組みしない",
         "管理画面の表は DataTable を使う（生の table 禁止）",
-        "ページ直下のセクション間は space-y-6 相当（管理画面の縦リズム）"
+        "ページ直下のセクション間は space-y-6 相当（管理画面の縦リズム）",
+      "サイドバーは 1 枚のパネルとして読ませる。ヘッダー行に border-bottom、フッター（ユーザーブロック等）に border-top を引かない。分離は余白が担う",
+      "管理画面に引く線は①サイドバー右端の縦線②コンテンツヘッダー下の横線の 2 本だけにする。サイドバー内にも横線を引くと 2 本が十字に交差して見える（正しくは T 字で突き当たる）",
+      "サイドバーの折りたたみトリガーはサイドバー内ヘッダー行の右端に置く。コンテンツヘッダーの左端に置かない",
+      "シェルヘッダーにページタイトルを複製しない。ページ名の正は本文の h1。ヘッダーにはパンくず（現在地の文脈）やグローバル操作を置き、置くものが無ければヘッダーバー自体を省いてよい",
+      "シェルヘッダーの水平 padding は本文コンテナの gutter と揃える（px-4 @md:px-6）。ヘッダー内要素の左端と本文 h1 の左端を同じ面に乗せる",
+      "ナビ項目は項目高 44px（WCAG 2.5.5）を確保する。ホバーで開くサブメニュー項目も同じ 44px を満たす"
       ]
     },
     "funnel": {

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.15.0",
+    "version": "0.17.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [
@@ -637,7 +637,15 @@
       },
       {
         "id": "A005",
-        "rule": "フォーカスリング必須: focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
+        "rule": "フォーカスリング必須: focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50（DS の FOCUS_RING 定数。入力系・操作系はすべてこれを使い、独自の ring 幅・色を作らない）"
+      },
+      {
+        "id": "A011",
+        "rule": "ラッパーが枠を描く合成入力（SearchBar / FileInput 等）は FOCUS_RING_WITHIN（focus-within 版）を使う。overflow-hidden の内側は FOCUS_RING_INSET を使う"
+      },
+      {
+        "id": "A012",
+        "rule": "フォーカス中は hover の見た目を優先しない。Tailwind の variant 順は focus-within → hover → focus-visible なので、focus-within を使う要素では同じプロパティの hover を hover:not-focus-within:* で抑制する（focus-visible は hover に自動で勝つ）"
       },
       {
         "id": "A006",
@@ -647,6 +655,10 @@
         "id": "A007",
         "rule": "全フォーム入力に <Label> または aria-label を紐付ける"
       },
+      {
+        "id": "A013",
+        "rule": "Radix ベースのコントロール（Select / Switch / Checkbox / Combobox / Slider 等）は <button> や <span role=\"slider\"> として描画されるため、<Label htmlFor> や外側の <label> ラップでは名前が付かない。FormField でラップして aria-labelledby を自動付与させるか、単体利用なら日本語の aria-label をコントロール自身に書く（issue #202）"
+      },
       {
         "id": "A008",
         "rule": "フォームエラーは aria-describedby でエラーメッセージを紐付ける"

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.15.0",
+    "version": "0.17.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/ec/_mypage-menu-data.js

@@ -0,0 +1,166 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import o from "iconsax-reactjs/dist/esm/Notification.js";
+import i from "iconsax-reactjs/dist/esm/Box.js";
+import r from "iconsax-reactjs/dist/esm/Calendar.js";
+import a from "iconsax-reactjs/dist/esm/Clock.js";
+import t from "iconsax-reactjs/dist/esm/Bookmark.js";
+import s from "iconsax-reactjs/dist/esm/Shop.js";
+import m from "iconsax-reactjs/dist/esm/Monitor.js";
+import p from "iconsax-reactjs/dist/esm/Star1.js";
+import l from "iconsax-reactjs/dist/esm/Edit2.js";
+import n from "iconsax-reactjs/dist/esm/Ticket2.js";
+import y from "iconsax-reactjs/dist/esm/Gift.js";
+import k from "iconsax-reactjs/dist/esm/People.js";
+import c from "iconsax-reactjs/dist/esm/Setting2.js";
+import f from "iconsax-reactjs/dist/esm/Sms.js";
+import g from "iconsax-reactjs/dist/esm/Card.js";
+import b from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import d from "iconsax-reactjs/dist/esm/Logout.js";
+const T = [
+  {
+    items: [
+      {
+        icon: /* @__PURE__ */ e(o, { size: 16 }),
+        label: "お知らせ",
+        href: "/mypage/",
+        key: "news",
+        storyId: "pages-cake-✅-お知らせ--notification-list"
+      },
+      {
+        icon: /* @__PURE__ */ e(i, { size: 16 }),
+        label: "注文履歴",
+        href: "/mypage/order_list/",
+        key: "orders",
+        storyId: "pages-cake-マイページ--order-list"
+      },
+      {
+        icon: /* @__PURE__ */ e(r, { size: 16 }),
+        label: "記念日登録",
+        href: "/mypage/anniversary/",
+        key: "anniversary",
+        storyId: "pages-cake-記念日管理--anniversary-list"
+      },
+      {
+        icon: /* @__PURE__ */ e(a, { size: 16 }),
+        label: "閲覧履歴",
+        href: "/mypage/item_view_history/",
+        key: "history",
+        storyId: "pages-cake-マイページ--view-history"
+      }
+    ]
+  },
+  {
+    groupLabel: "ブックマーク",
+    items: [
+      {
+        icon: /* @__PURE__ */ e(t, { size: 16 }),
+        label: "商品",
+        href: "/mypage/bookmark/item_list/",
+        key: "bookmark-item",
+        storyId: "pages-cake-ブックマーク--with-items"
+      },
+      {
+        icon: /* @__PURE__ */ e(s, { size: 16 }),
+        label: "お店",
+        href: "/mypage/bookmark/shop_list/",
+        key: "bookmark-shop",
+        storyId: "pages-cake-ブックマーク--shop-bookmark"
+      },
+      {
+        icon: /* @__PURE__ */ e(m, { size: 16 }),
+        label: "エンタメ",
+        href: "/mypage/bookmark/entertainment_list/",
+        key: "bookmark-entertainment",
+        storyId: "pages-cake-ブックマーク--entertainment-bookmark"
+      }
+    ]
+  },
+  {
+    groupLabel: "口コミ",
+    items: [
+      {
+        icon: /* @__PURE__ */ e(p, { size: 16 }),
+        label: "投稿した口コミ",
+        href: "/mypage/review_list/",
+        key: "reviews",
+        storyId: "pages-cake-マイページ--review-list"
+      },
+      {
+        icon: /* @__PURE__ */ e(l, { size: 16 }),
+        label: "投稿できる口コミ",
+        href: "/mypage/review_post_list/",
+        key: "review-post",
+        storyId: "pages-cake-口コミ投稿--reviewable-products"
+      }
+    ]
+  },
+  {
+    groupLabel: "ポイント・キャンペーン",
+    items: [
+      {
+        icon: /* @__PURE__ */ e(n, { size: 16 }),
+        label: "クーポン",
+        href: "/mypage/coupon_list/",
+        key: "coupons",
+        storyId: "pages-cake-マイページ--coupon-list"
+      },
+      {
+        icon: /* @__PURE__ */ e(y, { size: 16 }),
+        label: "ギフトカード・ポイント",
+        href: "/mypage/point/",
+        key: "point",
+        storyId: "pages-cake-マイページ--point"
+      },
+      {
+        icon: /* @__PURE__ */ e(k, { size: 16 }),
+        label: "友達紹介",
+        href: "/mypage/introduce/",
+        key: "introduce",
+        storyId: "pages-cake-マイページ--introduce"
+      }
+    ]
+  },
+  {
+    groupLabel: "会員情報",
+    items: [
+      {
+        icon: /* @__PURE__ */ e(c, { size: 16 }),
+        label: "会員情報の設定・変更",
+        href: "/mypage/profile/",
+        key: "profile",
+        storyId: "pages-cake-マイページ--profile"
+      },
+      {
+        icon: /* @__PURE__ */ e(f, { size: 16 }),
+        label: "メールマガジン設定",
+        href: "/mypage/mailmagazine/",
+        key: "mailmagazine",
+        storyId: "pages-cake-マイページ--mail-magazine"
+      },
+      {
+        icon: /* @__PURE__ */ e(g, { size: 16 }),
+        label: "クレジットカード情報",
+        href: "/mypage/payment_info/",
+        key: "payment",
+        storyId: "pages-cake-マイページ--payment-info"
+      },
+      {
+        icon: /* @__PURE__ */ e(b, { size: 16 }),
+        label: "お問い合わせ",
+        href: "/inquiry/",
+        key: "inquiry",
+        storyId: "pages-cake-マイページ--inquiry"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { size: 16 }),
+        label: "ログアウト",
+        href: "/users/logout/",
+        key: "logout"
+      }
+    ]
+  }
+];
+export {
+  T as mypageMenuGroups
+};