@cakejp/design-system 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [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/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.15.0",
+    "version": "0.16.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -1226,7 +1226,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.16.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.15.0",
+    "version": "0.16.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",

package/contracts/screen-patterns.json

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