@cakejp/design-system 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.15.0] - 2026-07-30
+
+姉妹 DS（ksk-design-system）の直近改善（#267 / #280 / #282 / #271 / #268 / #278）を cake へ移植した回。**破壊的変更なし。** 見た目の変化は「flex 内で潰れていた固定サイズ要素が本来のサイズに戻る」「a11y 修正でスクロール領域にフォーカスリングが付く」の改善方向のみ。
+
+### ✨ Added
+
+- **モーション / z-index トークンを新設**（**視覚変化なし・等値置換**): `--Motion-Duration-Fast/Base/Slow/Slower`（150/200/300/500ms）+ `--Motion-Easing-Standard`、`prefers-reduced-motion` の一括減速を `src/styles/motion.css` に新設。z-index は `--Z-Local-1..4` / `--Z-Sticky`(30) / `--Z-Nav`(40) / `--Z-Floating`〜`--Z-SkipLink`(50) の 12 段に序列化し、コンポーネント内の生 `duration-*` 29 箇所・`z-*` 25 箇所をトークン参照に置換。値は契約テストで固定（ksk #278 移植、PR #203）
+- **axe-core による a11y 機械検証と Storybook play テストを CI に追加**: `npm run test:a11y`（120 ファイル / 519 テスト、約31秒）と `npm run test:interaction`（Accordion / Dialog / Tabs / NumberInput の操作回帰）を新設し CI に組込。初回実行で見つかった実バグ 7 件を同時修正 — Progress の読み上げ名欠落、NotificationBadge の role 欠落、ProductOption の不正な `aria-required` 注入、CategoryScroll / CategoryShortcuts / MenuDrawer の画像 alt 重複、ScrollArea / ProductCarousel / ImageCarousel のキーボード到達性（`tabIndex` + フォーカスリング付与）。方針判断が要る `button-name` 50 件は理由付き baseline として除外し #202 に切り出し（ksk #271 / #268 移植、PR #199）
+
+### 🐛 Fixed
+
+- **flex row 内で固定サイズ要素が潰れる問題を横断修正**（**見た目が直る**）: `flex-shrink: 1` 既定により、狭い flex row 内で Chip タイル（48px タッチターゲット）が 42px 以下に潰れる等の崩れが起きていた。Chip タイル・Chip 削除ボタン・NumberInput（±ボタン / 数値幅）・カルーセル 3 種のドット・footer SNS リンク・kebab-menu・admin ヘッダー / サイドナビのアイコンボタン・pagination / breadcrumb の省略記号・Spinner・review-summary のゲージ行・product-option の数量表示など **20 箇所に `shrink-0` を付与**し、ドット列 3 箇所に `flex-wrap` を追加。狭い row での不潰れを契約テストで固定（ksk #282 移植、PR #198）
+- **`cn()` が `typo-*` 同士の上書きを解決できない問題を修正**: 素の `twMerge` は独自ユーティリティ `typo-*` を認識せず、`cn("typo-label-sm", "typo-label-md")` が両方残って CSS 宣言順で意図しない方が勝つことがあった。`extendTailwindMerge` で全 16 プリセットを単一 classGroup（後勝ち）として登録。DS 内部の見た目は不変だが、**consumer が `className="typo-*"` で DS 既定を上書きしていた箇所は、これまで負けていた指定が正しく効くようになる**（ksk #267 移植、PR #197）
+- **Header が中幅で navItems を折り畳めずはみ出す問題を修正**: PC 表示（`@md` 以上）でロゴ・アクションと競合したとき、入り切らないナビ項目を自動で `DropdownMenu`（既定ラベル「その他」、`navOverflowLabel` で変更可）へ退避するようにした。`ResizeObserver` で幅変化に追従し、退避項目はキーボード操作可能な menuitem として提供。PC 行への切替幅を選べる `navBreakpoint`（`md` 既定 / `lg`）も追加（[#200](https://github.com/flashpark/cake-design-system/issues/200)、PR #206）
+- 参照実装ストーリー 2 ファイルの未使用 import を削除（lint エラー解消）
+
+### 🔧 Changed
+
+- **コントラスト AA 自動検査を dark テーマにも拡張**（`scripts/check-contrast.mjs`）: これまで light 専用だった検査を、light と同じペア一覧で dark にも適用した。dark の `color.semanticDark` は primitive 参照しか持たないため、`src/styles/primitive.css` / `semantic.css` の CSS 変数から値を解決し、半透過のサーフェス・文字色（`#000000E5` / `#FFFFFFCC` 等）はテーマの素地に合成してから比を計算する。dark 側の結果は 8 ペア中 7 ペアが AA 達成、未達は白文字 × オレンジ地（4.06、light と同一の既知許容）のみ。**色は変更していない**（[#181](https://github.com/flashpark/cake-design-system/issues/181)、PR #204）
+
 ## [0.14.1] - 2026-07-25
 
 ### 🐛 Fixed

package/CLAUDE.md

@@ -21,7 +21,7 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 | **contracts/components.json** | 全コンポーネントの定義（variants・rules・accessibility） | コンポーネント利用・画面作成時 |
 | **contracts/screen-patterns.json** | 画面パターン判断基準（CRUD・編集/作成/削除UIの選択） | 管理画面・編集/作成/削除UIを作る時 |
 | **contracts/composition.json** | ページ骨格・余白リズム・視覚階層の組み方 | レイアウト・画面構成を組む時 |
-| **tokens.json** | カラー・タイポグラフィ・スペーシング・影・角丸 | トークン値を参照する時 |
+| **tokens.json** | カラー・タイポグラフィ・スペーシング・影・角丸・モーション・重なり順 | トークン値を参照する時 |
 | **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規画面作成時 |
 | **src/components/pages/** | フルページ参照実装（EC 19画面・管理 30画面、Storybook CSF 形式）。**npm 非同梱 — DS リポジトリ（private）を clone して参照** | 既存画面の改修・Next.js 移行で画面を実装する時。使い方は同ディレクトリの README.md |
 
@@ -37,6 +37,8 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 | カスタムカラー（`rgba(...)` / `#xxxxxx` / ハードコード） | `tokens.json` のトークン名を使う。存在しないトークンは使わない。例外: サードパーティブランドロゴの SVG `fill=`/`stroke=` 内のみ HEX 直書き可（出典コメント必須） |
 | カスタムシャドウ（`box-shadow: ...`） | `shadow-xs/sm/md/lg`（preset.css が DS 値に再定義済み）または用途別 `shadow-menu/tooltip/dialog/modal/overlay`。`shadow-xl/2xl` 禁止。オーバーレイの `md/lg` は正規仕様 |
 | カスタムボーダー半径（`border-radius: ...px` / `rounded-[Npx]`） | `rounded-xs/sm/md/lg/xl/2xl/full` のみ（= `tokens.json` の `radius.*`、`--radius`=10px 基準で 2/6/8/10/14/18px）。`rounded-3xl` 以上・任意値は禁止 |
+| アニメーションの時間・カーブ直書き（`duration-200` / `0.3s` / `cubic-bezier(...)`） | モーショントークン（`tokens.json` の `motion.*`）を `duration-[var(--Motion-Duration-Base)]` / `ease-[var(--Motion-Easing-Standard)]` の形で使う。Fast150 / Base200 / Slow300 / Slower500ms。トークン参照なら `prefers-reduced-motion` で自動停止する |
+| z-index の直書き（`z-50` / `z-[3]`） | 重なり順トークン（`tokens.json` の `zIndex.*`）を `z-[var(--Z-Modal)]` の形で使う。段は Local-1..4 / Sticky / Nav / Floating / Overlay / Modal / Popover / Tooltip / SkipLink。`z-0` / `z-10` の局所的な重なりは対象外 |
 | コンテナ比率の任意値（`px-[22.25%]` 等） | 4px グリッドは px 値のみ対象。%・fr・vw は理由コメント付きで許可 |
 | カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` を使う |
 | 新しい `<div>` ラッパーでレイアウト構造を作る | Card, Section, Stack 等のコンポーネントに置き換えられないか確認 |

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.14.1",
+    "version": "0.15.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -220,7 +220,10 @@
     },
     {
       "name": "Drawer",
-      "path": "src/components/foundations/drawer.tsx"
+      "path": "src/components/foundations/drawer.tsx",
+      "rules": [
+        "SP 専用のボトムシート（スワイプで閉じるクイックビュー等）。PC 幅でも全幅ボトムシートのまま開き間延びするため、PC を含む画面ではResponsiveDialog（768px 以上で中央 Dialog に自動切替）を使う"
+      ]
     },
     {
       "name": "DropdownMenu",
@@ -762,7 +765,10 @@
         "variant=\"logo\" の PC 行（@[768px]+）では searchSlot で navItems と actions の間に常設検索を inline 配置できる（flex-1 max-w-[400px] で伸縮）。navItems 無し＋searchSlot だけでも PC 行を描画する",
         "SP 行に searchSlot は出さない。SP の常設検索は従来どおり bottomSlot で運用する",
         "bottomSlot はヘッダー下段の全幅スロット（ProductDetailBar 等）。PC 常設検索の置き場に使わない（PC 二段ヘッダーになる）",
-        "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）"
+        "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）",
+        "navItems は幅に入り切らない項目を自動で「その他」ドロップダウンへ退避する（#200）。consumer 側で項目数を手で slice して減らさない。ラベルを増やしても中幅でロゴ・actions と衝突しない",
+        "navBreakpoint でインラインナビ行の開始コンテナ幅を選べる: md（既定 = @[768px]+）/ lg（@[1024px]+）。ロゴが多段で横幅を食うケースは lg にして中幅での同居自体を避ける",
+        "「その他」のラベルは navOverflowLabel で差し替えられる（既定 その他）。ハンバーガーを自前で組まない"
       ]
     },
     {

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.14.1",
+    "version": "0.15.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 は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.14.1",
+    "version": "0.15.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [
@@ -609,7 +609,9 @@
       "severity": "error",
       "category": "component",
       "pattern": "<Input[^>]+type=[\"']number[\"']",
-      "excludes": ["components/primitives/number-input.tsx"],
+      "excludes": [
+        "components/primitives/number-input.tsx"
+      ],
       "message": "Input type='number' を直接使わない",
       "fix": "数値入力はカート数量・価格・在庫すべて <NumberInput /> を使う（size=\"sm\" コンパクト型 / size=\"md\" サークル型）"
     }
@@ -790,6 +792,106 @@
         }
       ],
       "utility": "見た目が44px未満の小型操作部品をSPで使う場合は className=\"tap-target\" を付け、透明な疑似要素で実効操作領域を44×44px以上にする。隣接ターゲットと重なる密度では使わず親のgapを広げる"
+    },
+    "motion": {
+      "rule": "duration / easing は src/styles/motion.css の semantic トークンのみ参照する。生の ms 値・cubic-bezier の直書きは禁止（prefers-reduced-motion の一括制御から漏れる）。",
+      "allowed": [
+        {
+          "token": "var(--Motion-Duration-Fast)",
+          "value": "150ms",
+          "use": "マイクロ（hover の色変化・fade・下線）"
+        },
+        {
+          "token": "var(--Motion-Duration-Base)",
+          "value": "200ms",
+          "use": "標準。入場・退場・レイアウト変化の既定"
+        },
+        {
+          "token": "var(--Motion-Duration-Slow)",
+          "value": "300ms",
+          "use": "面積の大きい要素（画像ズーム・アコーディオン・カルーセル）"
+        },
+        {
+          "token": "var(--Motion-Duration-Slower)",
+          "value": "500ms",
+          "use": "ゆっくり見せたい退場（Sheet の閉じ）"
+        },
+        {
+          "token": "var(--Motion-Easing-Standard)",
+          "value": "cubic-bezier(0, 0, 0.58, 1)",
+          "use": "既定。CSS の ease-out キーワードと同一曲線"
+        }
+      ],
+      "usage": "Tailwind では duration-[var(--Motion-Duration-Base)] / ease-[var(--Motion-Easing-Standard)]。素の CSS では var() を直接参照する。",
+      "note": "Tailwind の ease-out / ease-in-out クラス（別曲線）を使っている既存箇所は体感が変わるため Standard に寄せていない。曲線を何本に整理するかは視覚が変わる設計判断として別途扱う。"
+    },
+    "zIndex": {
+      "rule": "Portal に載る要素・固定配置される面の重なりは --Z-* トークンで表す。素の z-50 一律だと勝敗が Portal のマウント順（＝開いた順）で決まる。z-0 / z-10 のコンポーネント内部の重なりは対象外。",
+      "order": "Local-1 < Local-2 < Local-3 < Local-4 < Sticky < Nav <= Floating <= Overlay <= Modal <= Popover <= Tooltip <= SkipLink",
+      "allowed": [
+        {
+          "token": "var(--Z-Local-1)",
+          "value": "1",
+          "use": "カード内部の最下層（画像のクリック面・帯）"
+        },
+        {
+          "token": "var(--Z-Local-2)",
+          "value": "2",
+          "use": "カード内部のバッジ・タグ・ショップアイコン"
+        },
+        {
+          "token": "var(--Z-Local-3)",
+          "value": "3",
+          "use": "カード内部の情報行"
+        },
+        {
+          "token": "var(--Z-Local-4)",
+          "value": "4",
+          "use": "カード内部の操作ボタン（カート追加等）"
+        },
+        {
+          "token": "var(--Z-Sticky)",
+          "value": "30",
+          "use": "スクロール追従（SectionNav / OrderSummary / AdminSideNav のレール）"
+        },
+        {
+          "token": "var(--Z-Nav)",
+          "value": "40",
+          "use": "シェルが敷く固定ヘッダ / 固定アクションバー（Header / AdminHeader / StickyActionBar）"
+        },
+        {
+          "token": "var(--Z-Floating)",
+          "value": "50",
+          "use": "ナビの上に浮く固定操作面（BottomTabBar）"
+        },
+        {
+          "token": "var(--Z-Overlay)",
+          "value": "50",
+          "use": "Dialog / Sheet / Drawer / AlertDialog の scrim"
+        },
+        {
+          "token": "var(--Z-Modal)",
+          "value": "50",
+          "use": "Dialog / Sheet / Drawer / AlertDialog 本体"
+        },
+        {
+          "token": "var(--Z-Popover)",
+          "value": "50",
+          "use": "Select / Popover / DropdownMenu / ContextMenu / Menubar / HoverCard / NavigationMenu"
+        },
+        {
+          "token": "var(--Z-Tooltip)",
+          "value": "50",
+          "use": "Tooltip"
+        },
+        {
+          "token": "var(--Z-SkipLink)",
+          "value": "50",
+          "use": "SkipLink（何にも隠されてはいけない）"
+        }
+      ],
+      "usage": "Tailwind では z-[var(--Z-Modal)]。",
+      "note": "Floating 以降が全て 50 なのは既存実装値をそのまま保存した結果（トークン導入は視覚変化ゼロの等値置換）。段差を付けると重なり順が実際に変わる＝視覚変化なので、値の見直しは別 issue。名前で段が分かれているので、そのときは 1 箇所の数値変更で段ごと持ち上げられる。"
     }
   },
   "writing": {

package/contracts/screen-patterns.json

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