@cakejp/design-system 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -7,7 +7,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
-## [0.3.0] - 2026-05-04 (Unreleased)
+## [0.6.0] - 2026-06-11
+
+### ✨ Added
+
+- **ListItem**: インタラクティブ（`href` / `onClick`）な行に hover 背景（`Surface-Tertiary`）と focus-visible リング（`Focus-High-Emphasis`）を追加。`onClick` のみの場合は `role="button"` ＋ Enter / Space キー操作にも対応。表示専用行（href/onClick なし）は変化なし (#21)
+
+### 🐛 Fixed
+
+- **border（全コンポーネント）**: 色指定のない `border` を持つ 16 コンポーネントに border 色を明示し、Tailwind v4 のグローバル base reset 非依存に。消費側がリセットを取り込まないと罫線が要素の文字色へ化ける問題を防止。回帰防止 lint（`scripts/check-border-color.mjs`）と「`dist/index.css` import 必須」の明記を追加 (#20)
+- **文脈非依存性（text / icon / bg）**: 消費側の文字色・背景を継承して崩れる箇所を全コンポーネント監査で修正（敵対的検証で実害 12 / 誤検出 19 を仕分け）。Storybook に継承漏れを目視検出する「Hostile ctx」トグルを追加 (#23)
+- **ListItem**: href（リンク）行で `onClick` / `aria-*` / `data-*` が内側要素に残り、キーボード操作時に発火しない問題を修正。props と focus を anchor に集約 (#24)
+
+### 🛡 Internal
+
+- **lint**: `check-border-color` が CVA 定義内の border も走査するよう拡張（色なし border の回帰防止を強化） (#24)
+- **Storybook**: 「Hostile ctx」検出ツールが Radix Portal（Dialog/Popover 等）の継承漏れも検出できるよう body へのスタイル適用に対応 (#24)
+
+---
+
+## [0.5.0] - 2026-06-08
+
+### 🚨 Breaking Changes
+
+- **SectionHeader**: デフォルトの横余白 `px-4` を撤廃。従来の見た目を維持するには親要素側で `px-4` を付与してください (#14)
+
+### ✨ Added
+
+- **FormField**: `descriptionPosition` prop を追加（`"above"` | `"below"`）。グリッド横並び配置で description の有無による入力要素の縦位置ズレを `"below"` で回避可能 (#16)
+
+### 🐛 Fixed
+
+- **Input / Textarea**: ホバー時に緑ボーダー（`Focus-High-Emphasis`）を表示するように統一。Select / Checkbox と同じフィードバックに揃えた (#16)
+- **Select / Checkbox / SearchBar**: ホバー/フォーカス時のボーダー色をオレンジ（`Brand-Cake-Orange`）から緑（`Focus-High-Emphasis`）に修正。フォーム要素全体でフォーカス色を統一 (#15)
+- ボーダー色の `transition` に `border-color` を追加し、ホバー時のアニメーションをスムーズ化 (#16)
+
+### 🛡 Internal
+
+- SSR 後方互換テスト（17ケース）と tokens.json↔semantic.css 同期テストを追加 (#12)
+- GitHub Actions CI を追加（PR + push:main で品質ゲート + テスト自動実行） (#12)
+- lint-scratch: `<a href>` ルールに `lint-scratch-allow` コメント除外を追加 (#12)
+- check-responsive: `grep` + `pipefail` によるサイレント失敗を修正 (#12)
+- Codex 設定（`.codex/`）とプロジェクトスキル（`.agents/skills/`）を追加 (#13)
+- Chip の States ストーリーに状態説明 JSDoc を追加 (#10)
+
+---
+
+## [0.3.0] - 2026-05-04
 
 ### 🚨 Breaking Changes
 

package/CLAUDE.md

@@ -1,35 +1,32 @@
-# Cake.jp Design System — 設計ルールブック
+# Cake.jp Design System — 利用ガイド
+
+> **このファイルは `@cakejp/design-system` を利用するプロジェクト向けです。**
+> DS リポジトリ自体の開発には **CLAUDE_DEV.md** を参照してください。
 
 ## 目的
 
 Cake.jp のフロントエンドとデザインシステムを正式に接続する。
-PdM や社長が AI（Claude 等）で HTML モックを作る際、このリポジトリを参照して高精度なモックを生成できるようにする。
-デザイナー・フロントエンドがいなくても、モック → バックエンド開発へそのまま移行できる品質を目指す。
+PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッケージを参照して高精度なモックを生成できるようにする。
 
 ---
 
-## 重要: コードを書く前に必ず読むこと
+## コードを書く前に必ず読むこと
 
-**コードを1行でも書く前に、以下のファイルを必ず読み込むこと。**
+**コードを1行でも書く前に、以下のファイルを読み込むこと。**
+パスは `node_modules/@cakejp/design-system/` 配下、または DS リポジトリ直下。
 
 | ファイル | 内容 | いつ読むか |
 |---------|------|----------|
 | **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・ライティングルール | **コード生成前に必ず** |
-| **contracts/components.json** | 全103コンポーネントの定義（variants・rules・accessibility） | コンポーネント作成・修正時 |
+| **contracts/components.json** | 全コンポーネントの定義（variants・rules・accessibility） | コンポーネント利用・画面作成時 |
 | **tokens.json** | カラー・タイポグラフィ・スペーシング・影・角丸 | トークン値を参照する時 |
-| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規コンポーネント作成時 |
-
-> ※ Codex を使う場合は **AGENTS.md** を参照すること（明示的なファイル読み込み手順を記載）。
+| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規画面作成時 |
 
 ---
 
-## ❌ スクラッチコード禁止ルール（強制）
-
-> 「読みます」ではなく「書く前にブロックする」ゲートとして運用すること。
+## スクラッチコード禁止ルール
 
-### 書く前ゲート（以下のパターンを書こうとしたら必ずDSを確認すること）
-
-下記のいずれかを CSS または JSX に追加しようとした場合、**書く手を止めて** `contracts/components.json` と Storybook で同等パターンを探すこと:
+下記のいずれかを CSS または JSX に追加しようとした場合、**書く手を止めて** `contracts/components.json` で同等パターンを探すこと:
 
 | 追加しようとしているもの | DSで確認すること |
 |------------------------|----------------|
@@ -39,128 +36,24 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このリポ
 | カスタムボーダー半径（`border-radius: ...px`） | `tokens.json` の `radius.*` を使う |
 | カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` を使う |
 | 新しい `<div>` ラッパーでレイアウト構造を作る | Card, Section, Stack 等のコンポーネントに置き換えられないか確認 |
+| 生の `<button>` `<input>` `<select>` `<textarea>` `<table>` | DS の Button / Input / Select / Textarea / DataTable を使う |
 
 **確認手順:**
 1. `contracts/components.json` で該当コンポーネントを検索
-2. Storybook（`npm run storybook`）で実際の見た目を確認
-3. DSに存在しない場合のみ、カスタム実装を許可（その場合はコメントで理由を記載）
-
-### 書いた後ゲート（強制）
-
-`.tsx` `.css` `.module.css` を**1ファイルでも編集したら必ず実行**:
-
-```bash
-bash scripts/lint-scratch.sh
-```
-
-エラーが出た場合: **そのエラーを修正するまで次のタスクに進んではならない。**
-
-> lint-scratch.sh が通っていないコードは未完成扱い。
-
----
-
-## ドキュメント構成
-
-| ファイル | 内容 |
-|---------|------|
-| **CLAUDE.md**（本ファイル） | 概要・技術スタック・コマンド（Claude Code用） |
-| **AGENTS.md** | 同上（Codex用。セッション開始時の読み込み指示・編集後コマンドを明記） |
-| **contracts/components.json** | 全103コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
-| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・タイポグラフィ定義 |
-| **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
-| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト（Cake.jp固有） |
-
----
-
-## デザインリソース
-
-| リソース | URL |
-|---------|-----|
-| Figma Design System | https://www.figma.com/design/ExHuJOWJChJtk0qiskqEsI/Cake.jp-Design-System?node-id=18168-44099 |
+2. DSに存在しない場合のみ、カスタム実装を許可（その場合はコメントで理由を記載）
 
 ---
 
 ## 技術スタック
 
 - React 19 + TypeScript
-- Vite（ビルド）
 - Tailwind CSS v4（`@import "tailwindcss"` 構文。`@tailwind base` は v3 記法で使用禁止）
 - shadcn/ui（Radix UI ベース、Cake.jp テーマ適用済み）
-- Storybook（`@storybook/react-vite`）
 - CVA（class-variance-authority）でバリアント管理
 - Lucide React + iconsax-react（アイコン）
 
 ---
 
-## ディレクトリ構成
-
-```
-src/
-├── components/
-│   ├── foundations/ # shadcn ベース汎用 UI（46個・全事業共通）
-│   ├── primitives/  # 業界汎用パターン（35個・jobboard等他事業でも再利用可）
-│   ├── ec/          # Cake.jp / EC 事業特化（23個・商品・配送・クーポン等）
-│   └── pages/       # ページ単位のストーリー
-├── prototypes/      # /mock スキルで生成されたプロトタイプ
-├── lib/
-│   └── utils.ts     # cn() ユーティリティ
-└── index.css        # カラートークン定義 + Tailwind 設定
-```
-
-### 3層構造の依存ルール
-
-```
-ec/         ← Cake.jp 特化（最上位）
-  ↓
-primitives/ ← 業界汎用パターン
-  ↓
-foundations/ ← shadcn ベース（最下位）
-```
-
-- `foundations/` は他層に依存しない
-- `primitives/` は `foundations/` のみ参照可
-- `ec/` は `foundations/` と `primitives/` を参照可
-- **逆方向の依存は禁止**（primitives から ec を import する等）
-
----
-
-## コマンド
-
-```bash
-# 開発サーバー（Storybook）
-npm run storybook
-
-# プロトタイプビューアー
-npm run dev
-# → http://localhost:5173/prototypes
-
-# ビルド
-npm run build-storybook
-
-# パッケージビルド（npm install 時に自動実行）
-npm run build:lib
-
-# 型チェック
-npx tsc --noEmit
-
-# リント
-npm run lint
-
-# スクラッチ検出（実装後に必ず実行）
-bash scripts/lint-scratch.sh
-
-# コンポーネント再利用チェック
-bash scripts/check-story-reuse.sh
-
-# ドリフト検出（コンポーネント追加後に実行）
-bash scripts/check-drift.sh
-
-# 全チェック一括実行
-npm run check
-```
-
----
-
 ## カラートークン早見表
 
 | 用途 | トークン |
@@ -177,12 +70,13 @@ npm run check
 
 ---
 
-## コンポーネント追加時のチェックリスト
+## AI 生成コードの典型的な誤り
 
-新しいコンポーネントを追加したら、以下を必ず更新:
+`contracts/rules.json` の `aiPatterns` セクションで詳細を確認すること。主な注意点:
 
-- [ ] `src/index.tsx` にエクスポートを追加
-- [ ] `contracts/components.json` にコンポーネント定義を追加
-- [ ] `contracts/components.json` の `meta.counts` を更新
-- [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
-- [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成
+- **価格表記**: `¥{数字,区切り}（税込）` — `円` `税込み` `(税込)` は禁止
+- **日付表記**: `M月D日（曜日）` — `YYYY/MM/DD` や英語表記禁止
+- **aria-label**: 日本語で記述 — 英語 aria-label 禁止
+- **input type="date"**: 使用禁止 — Popover と Calendar を組み合わせる
+- **Tag に onClick**: 禁止 — 押せるものは Chip を使う
+- **SectionHeader 手書き**: 禁止 — `SectionHeader` コンポーネントを使う

package/README.md

@@ -19,6 +19,11 @@ import "@cakejp/design-system/dist/index.css"
 <Button>カートに入れる</Button>
 ```
 
+> **`dist/index.css` の import は必須。**
+> このCSSにはカラートークン定義に加え、Tailwind v4 のベースレイヤー（`* { border-color: var(--border) }` 等）が含まれます。
+> import しないと、Tailwind v4 の border-color 既定が `currentColor` のままになり、コンポーネントの罫線や枠線がその要素の文字色に化けます（例: テーブルの行罫線が黒くなる）。
+> 自前の Tailwind 設定にマージしたい場合は `@cakejp/design-system/preset`（base レイヤー込み）を参照してください。
+
 ## 構造
 
 3-tier アーキテクチャ:

package/bin/init.js

@@ -3,7 +3,7 @@
 // @cakejp/design-system init
 // Consumer プロジェクトに AI (Claude / Codex) 向けルールファイルを設置する。
 // AI エージェントは node_modules 配下のファイルを自動で読まないため、
-// プロジェクトルートに AGENTS.md / CLAUDE.md（node_modules 内の DS ルールを
+// プロジェクトルートに AGENTS.md / CLAUDE.md（node_modules 内の DS 利用ガイドを
 // 参照する薄いポインタ）を置く必要がある。
 //
 // Usage:
@@ -128,7 +128,7 @@ if (created > 0) {
   console.log(`
 次のステップ:
   1. AI (Claude Code / Codex) を再起動してルールを読み込ませる
-  2. UI を作る前に必ず node_modules/@cakejp/design-system/{AGENTS.md,CLAUDE.md,contracts/*,tokens.json} を AI に読ませる
+  2. UI を作る前に必ず node_modules/@cakejp/design-system/{CLAUDE.md,contracts/*,tokens.json} を AI に読ませる
   3. スクラッチコード（ハードコードカラー・余白・角丸等）を書かない運用を徹底する
 `)
 }

package/contracts/components.json

@@ -424,8 +424,12 @@
     {
       "name": "FormField",
       "path": "src/components/primitives/form-field.tsx",
+      "variants": {
+        "descriptionPosition": ["above", "below"]
+      },
       "rules": [
-        "Label+Input+エラーメッセージをセットで管理"
+        "Label+Input+エラーメッセージをセットで管理",
+        "グリッド横並び時は descriptionPosition='below' で高さを揃える"
       ]
     },
     {

package/contracts/rules.json

@@ -407,6 +407,23 @@
       "message": "AI生成パターン: 左端カラーストライプ禁止（Alert含む）",
       "fix": "border rounded-lg で全周ボーダー"
     },
+    {
+      "id": "B1",
+      "severity": "error",
+      "category": "component",
+      "scope": "designSystemInternal",
+      "appliesTo": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "pattern": "border 幅ユーティリティ（border / border-b / border-l 等）に色クラスが同居していない",
+      "message": "DSコンポーネントで色指定のない border を使わない。Tailwind v4 の border-color 既定は currentColor。消費アプリが preset.css のグローバル base リセット（* { @apply border-border }）を取り込まない場合、罫線が要素の文字色に化ける（例: テーブル行に text-[var(--Text-High-Emphasis)] を付けると罫線が黒 #1C1A1A になる）。コンポーネントはグローバルリセットに依存せず自前で border 色を持つこと。",
+      "fix": "同じ className 内に border-[var(--Border-Medium-Emphasis)] 等を明示する（透明が意図なら border-transparent）。検査: npm run lint:border（scripts/check-border-color.mjs）"
+    },
+    {
+      "id": "AI5",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "message": "文脈非依存違反: text色/背景/アイコン色を明示せず親の継承や Tailwind v4 既定（border/ring/outline=currentColor）に委ねる。消費側が濃色テキストや色付き背景を敷くと文字・アイコン・枠が化ける。サーフェス（カード/オーバーレイ等）が bg 未指定だと親背景が透ける。",
+      "fix": "テキスト要素に text-[var(--Text-*)]、サーフェスに bg-[var(--Surface-*)] を明示。Content/オーバーレイ系ラッパは text-popover-foreground 等で子を隔離する。Storybook ツールバーの『Hostile ctx』を loud にして漏れ（マゼンタ化・背景透け）を目視確認する。"
+    },
     {
       "id": "AI3",
       "severity": "warning",