@cakejp/design-system 0.13.0 → 0.14.1

package/CHANGELOG.md

@@ -7,6 +7,46 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.14.1] - 2026-07-25
+
+### 🐛 Fixed
+
+- **AlertDialog の本文を 14px + Text-Medium-Emphasis に引き上げ**（**視覚変更あり**）: Description が `typo-body-sm`（12px）+ `muted-foreground`（= Text-Low-Emphasis、最薄の本文色）で、確認ダイアログの本文（「取り消せません」等の判断材料そのもの）が DS 内で最も弱い扱いになっていた。汎用 Dialog の説明文（12px + Medium）より薄いのも逆転していた。`typo-body-md`（14px / lh 24.5px）+ `Text-Medium-Emphasis` に変更し、汎用 Dialog より一段強くした。**影響**: AlertDialog を使う全画面で本文が一段大きく・濃くなる（PR #189）
+
+## [0.14.0] - 2026-07-25
+
+姉妹 DS（ksk-design-system v1.44.0）との相互棚卸しで見つかった 12 課題（#168〜#179 → PR #180）の統合と、そのレビュー・統合過程で見つかった修正を収録する回。**0.13.0 からは追加・改名（旧名 alias 維持）のみで、コード上の破壊的変更なし。** 視覚変更は 2 点（AlertDialog の幅・NumberInput sm の左右余白）。
+
+### ✨ Added
+
+- **`NumberInput` — `QuantitySelector` を機能名に改名し、汎用数値入力へ拡張**（旧名は deprecated alias で維持・**すぐの対応不要**）: `QuantitySelector` は「カート数量」という**用途名**だったため、管理画面の価格・在庫入力を探した側が同じ部品を見つけられず、意匠の違う数値ステッパーの二重実装が生まれかけた（PR #180 → #184 で統合）。意匠は従来どおり Figma DS「Adjust」準拠（`sm`=コンパクト型 / `md`=サークル型）のまま、機能名 `NumberInput` に改名し、汎用の数値入力に必要だった `step` / `formatOptions`（桁区切り・通貨表示。Intl の全角 `￥` は DS 規約の半角 `¥` に正規化）/ `defaultValue`（非制御。min/max にクランプ）/ `label`（読み上げラベル。既定「数量」— **価格・在庫に使うときは必ず指定**）/ `inputId`（`FormField` 接続）を追加した。`aria-label` が「数量」固定で価格・在庫の読み上げが誤っていた問題も解消。既定の `min=1` / `max=99` はカート数量向けのため、汎用用途では明示すること。`data-slot` は `quantity-selector` → `number-input` に変更（[#173](https://github.com/flashpark/cake-design-system/issues/173) / PR #184）。命名規約「**コンポーネント名は用途ではなく機能で付ける**」を `contracts/components.json` の `meta.naming` に、探し方のゲート（名前で出なければ機能で探す / 姉妹 DS の在庫は根拠にならない）を `CLAUDE.md` に明文化し、contracts 上のステッパーが 1 つだけであることをテストで固定した
+- **`SocialIcon`（foundations）を新設 — ブランドロゴ SVG の一元管理**: LINE / X / Facebook / Amazon / Google / Apple のロゴが `ShareButtons` と `SocialLoginButton` に**別々に手組み**されており drift リスクがあった（LINE は両方に存在）。`platform` × `tone`（`brand`=公式色 / `mono`=currentColor）の 1 部品に集約し、両コンポーネントを載せ替えた。**ブランド色の地（LINE の緑・Apple の黒）に載せるときは `tone="mono"` を指定する**（brand のままだと地と同色でアイコンが消える）。`size` は inline style で当たるため `Button` 内の `[&_svg]:size-4` に負けない。地色との同化・サブパス欠落・サイズ打ち消しは型でもビルドでも落ちないため、SSR 出力を固定するテストを新設した（[#174](https://github.com/flashpark/cake-design-system/issues/174)）
+- **`Combobox` / `MultiSelect`（primitives）を新設 — 選択肢が多い場面の受け皿**: `Combobox`=検索付き単一選択（`Popover` + `Command`）、`MultiSelect`=複数選択（選択済みは removable な `Chip` で表示）。いずれも制御コンポーネントで、`id` / `aria-invalid` / `aria-describedby` を trigger に透過して `FormField` / `FieldError` と接続できる。使い分け（少数候補は `Select` / `RadioGroup` / `CheckboxGroup`）を contracts に明記（[#175](https://github.com/flashpark/cake-design-system/issues/175)）
+- **`eslint/deprecated.js` を配布 — consumer 側で旧 export の残存を検出**: `contracts/components.json` の `deprecatedAliases`（`AdminLayout` / `WorkspaceLayout` / `EcPageShell` / `QuantitySelector`）をデータ源に、ESLint 9 flat config のプラグインとして `@cakejp/design-system/eslint/deprecated` を export。破壊的変更後の残骸チェックを CI・エディタで継続的に回せる（[#172](https://github.com/flashpark/cake-design-system/issues/172)）
+- **`tokens.json` に semantic トークンを全量収録（light 78 / dark 64）**: `Object-*` / `Hover-*` / `Active-*` / `Overlay-*` / `Focus-*` / `Third-Party-*` と **dark 値全体**が未収録で、AI ツール・Figma 連携から辿れなかった。`semantic.css` との双方向網羅を `__tests__/semantic-token-contract.test.ts` で固定（[#176](https://github.com/flashpark/cake-design-system/issues/176)）
+- **`rules.json` に `aiPatterns` セクションを新設**: `CLAUDE.md` が参照していた `aiPatterns` キーが実在せず、AI 特有の誤りパターン 7 件（AI1〜AI7）が `prohibited` に混在していた。独立セクションに分離し、MCP の `check_rule` が禁止パターンと AI パターンを区別して返すようにした（[#170](https://github.com/flashpark/cake-design-system/issues/170)）
+- **Storybook に hostile-context モード（Safe / Ink / Loud）を追加**: 全ストーリーを意図的に敵対的な親（濃色文字・派手な背景）でラップし、親の色を継承して壊れる context-independence 違反を目視で炙り出す。0.13.0 の #150（グレー地でカードが沈む）と同系統のバグの検出用（[#179](https://github.com/flashpark/cake-design-system/issues/179)。ksk 由来）
+- **`COMPONENT_LOOKUP.md` を npm 配布物に追加**: 全コンポーネントの import パス・variants・ストーリー名の一覧表。contracts の JSON をパースせず 1 枚で全量を掴める軽量な AI 参照導線（[#178](https://github.com/flashpark/cake-design-system/issues/178)）
+- **`scripts/codemod/template.mjs` を新設**: 次の破壊的変更用の codemod 雛形（RENAMES / PROP_RENAMES / WARNINGS を埋めるだけ・`--dry` 付き）。※ `npx cakejp-ds codemod` の dispatch は既存名決め打ちのままで、雛形から作った codemod は node 直接実行（[#182](https://github.com/flashpark/cake-design-system/issues/182) で対応予定）（[#177](https://github.com/flashpark/cake-design-system/issues/177)）
+
+### 🐛 Fixed
+
+- **AlertDialog の幅上限を 480px に下げ、画面端の余白を 40px に広げた**（**視覚変更あり**）: `default` サイズは shadcn 標準の `max-w-lg`（512px）を初期構築から引き継いだままで、テキスト確認（見出し+本文+ボタン2つ）では本文が横に間延びしていた。幅上限を **480px**（`sm`=320px は不変）、画面端の余白を左右 16px → **上下左右 40px** に変更。SP では端末幅 −80px に追従する（実測: 375px 幅で左右 40px）。余白はコンポーネントが持つので consumer 側で margin を足さないことを contracts に明記（PR #186）
+- **NumberInput `sm` のホバー円の余白を上下左右 4px に統一**（**視覚変更あり**）: コンテナ 36px に対しボタン 28px で上下の余白は 4px だが、左右だけ `px-2.5`（10px）でホバー時の円が左右に寄って見えていた。`px-1` で均等化（PR #185）
+- **MCP サーバーが contracts の古い手動コピーを読んでいたのを直読みに変更**: `mcp-server/data/*.json` は正典 `contracts/*.json` の手動コピー（自動同期なし）で、components **37/121**・rules **40/68** までドリフトしており、0.10.0 以降の追加部品が MCP 経由の AI から一切見えていなかった。`contracts/*.json` の直読みに変更し `data/` を削除（[#168](https://github.com/flashpark/cake-design-system/issues/168)）
+- **contracts の `meta.version` を実バージョンに同期し、`check-drift.sh` で機械検査**: `components.json` が `0.1.0` のまま 12 マイナー分ズレていた。全 contracts ファイルの `meta.version` と `package.json` の一致を `npm run check` で強制する（[#169](https://github.com/flashpark/cake-design-system/issues/169)）
+- **参照実装ページの生 `<input type="number">` 8 箇所を `NumberInput` に置換**: 正解形が無く手組みが横展開していた。`contracts/rules.json` に R56（生 number input 禁止）を追加し、`check-story-reuse.sh` の検査対象にも追加（[#173](https://github.com/flashpark/cake-design-system/issues/173)）
+
+### 🛠 Tooling
+
+- **コントラスト AA 自動検査（`scripts/check-contrast.mjs`）を `npm run check` に配線**: 主要な「文字色 × 背景色」ペアを WCAG 相対輝度式で計算し、既知の未達 4 ペア（`accent-primary` 4.06 / `success` 3.45 / `warning` 4.00 / 白文字×オレンジ地 4.06）は**理由と現状比の下限つき許容リスト**で回帰だけを止める。パレット調整は別 issue。※ 現状 light 専用（dark は [#181](https://github.com/flashpark/cake-design-system/issues/181)）（[#171](https://github.com/flashpark/cake-design-system/issues/171)）
+- **RHF 統合テストを拡張**: 新設 3 部品（NumberInput / Combobox / MultiSelect）の Controller 接続を、初期表示だけでなく **`reset()` 追従と実操作**まで固定（#151 と同型の退行の再発防止）
+
+### 📝 Docs
+
+- `MIGRATION.md` に `QuantitySelector` → `NumberInput` の移行ガイドを追加（すぐの対応は不要。`data-slot` を CSS フックにしている場合のみ要変更）
+- `CLAUDE.md` の「DS に無いと思ったときのゲート」を強化: 名前で出なければ**機能で探す**（`props` / `rules` / `features` / `COMPONENT_LOOKUP.md`）、`check-duplicates` は名前違いの二重実装を検出できない、姉妹 DS に同名部品があることは cake に無い根拠にならない
+
 ## [0.13.0] - 2026-07-23
 
 consumer（cake-api / cake-distributor / cake-prototypes）からのフィードバック対応。実装の誤用を誘発していた contracts の記述修正と、任意項目・他ブランド採用で足りなかった口の追加。

package/CLAUDE.md

@@ -54,9 +54,12 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 部品が DS に無いと思っても、**手元の台帳・TODO リストで「昇格候補」を管理してはいけない**。台帳は必ず drift する（実例: cake-api の昇格候補台帳が DS 0.10.0 で追加された ImageUploader / ResponsiveDialog / DataTable 等を反映せず、既に DS にある部品を「無い」と誤認してローカル実装を保持し続けた）。次の順で確認する:
 
 1. `contracts/components.json` を名前で検索する（正典はここ 1 箇所）。
-2. `npx cakejp-ds check-duplicates` を実行し、ローカルに DS 同名の実装が無いか機械検出する（`--strict` で検出時 exit 1、consumer CI に組み込める）。
-3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
-4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
+2. **名前で出なければ「何をする部品か」で探す。** DS には用途名の部品があり、同じ機能を別の文脈で探すと名前が一致しない（実例: カート数量の `QuantitySelector` が実体は汎用の数値ステッパーだったため、管理画面の価格入力を探した側が「無い」と判断して二重実装を作った）。`props` / `rules` / `features` の中身も含めて検索し、迷ったら `src/components/COMPONENT_LOOKUP.md` の一覧を通しで見る。
+3. `npx cakejp-ds check-duplicates` を実行し、ローカルに DS 同名の実装が無いか機械検出する（`--strict` で検出時 exit 1、consumer CI に組み込める）。**名前が違う二重実装はこれでは検出できない** — 2 を飛ばさないこと。
+4. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
+5. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
+
+**姉妹 DS（ksk 等）に同名の部品があることは、cake に無い根拠にならない。** 判断は必ず cake の contracts を見て行う。
 
 **意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出る。
 

package/MIGRATION.md

@@ -2,6 +2,51 @@
 
 @cakejp/design-system のバージョン間移行ガイド。
 
+破壊的変更では `scripts/codemod/template.mjs` から移行スクリプトを作り、
+適用後に `@cakejp/design-system/eslint/deprecated` を有効化して旧exportの残件を確認します。
+
+---
+
+## 次期リリース — `QuantitySelector` → `NumberInput`
+
+### 概要
+
+数値ステッパーの名前を**用途名から機能名へ**変更しました。意匠（Figma DS「Adjust」準拠の
+sm=コンパクト型 / md=サークル型）と既存 API は**変更ありません**。
+
+`QuantitySelector` は deprecated alias として引き続き動くため、**すぐの対応は不要**です。
+
+| 旧 | 新 |
+|---|---|
+| `QuantitySelector` | `NumberInput` |
+| `QuantitySelectorProps` | `NumberInputProps` |
+| `@cakejp/design-system` からの import パス | 変更なし |
+| `data-slot="quantity-selector"` | `data-slot="number-input"` |
+
+### なぜ改名したか
+
+「カート数量を選ぶもの」という用途名だったため、管理画面の価格・在庫入力を探した側が
+**同じ部品を見つけられず、意匠の違う数値入力を別に作ってしまった**（PR #180）。
+機能名に変えて 1 つに統合しています。今後、数値入力はカート数量・価格・在庫すべて
+`NumberInput` を使ってください。
+
+### 追加された機能
+
+汎用の数値入力に必要だったものを既存実装に足しています（いずれも任意 prop）。
+
+- `step` — 増減幅（既定 1）
+- `formatOptions` / `locale` — 桁区切り・通貨表示（編集中は素の数値）
+- `defaultValue` — 非制御での初期値
+- `label` — 読み上げラベル（既定「数量」。**価格・在庫に使うときは必ず指定**）
+- `inputId` — `FormField` / `FieldLabel` の `htmlFor` と接続
+
+### 注意点
+
+- 既定の `min=1` / `max=99` は**カート数量向け**のままです。価格・在庫など上限が違う
+  用途では `min` / `max` を必ず明示してください
+- `data-slot` を CSS フックにしていた場合は `number-input` に変更が必要です
+  （DS の内部スロットを consumer から上書きする運用は元々非推奨です）
+
 ---
 
 ## v0.2.x → v0.3.0

package/UPDATING.md

@@ -107,6 +107,19 @@ DS のリリースサイクル（[RELEASE.md](./RELEASE.md)）が前提:
 
 ## どうやってアップデートするか（手順）
 
+### 0. 非推奨APIの継続検出
+
+```js
+import cakeDeprecated from "@cakejp/design-system/eslint/deprecated"
+
+export default [{
+  plugins: { "cakejp-deprecated": cakeDeprecated },
+  rules: { "cakejp-deprecated/no-deprecated": "warn" },
+}]
+```
+
+このルールは `contracts/components.json` の `deprecatedAliases` から直接生成されます。
+
 ### 1. 新バージョンと変更内容を確認
 
 ```bash