kaze-design-system 0.4.2 → 0.6.0

package/README.md

@@ -5,14 +5,14 @@
 
 **Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 63 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
 
-- 🎨 **63 コンポーネント** — フォーム、テーブル、チャート、ダッシュボード UI、ランディングページ、マーケティングパーツまで
-- 🌏 **日本語組版に最適化** — PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
-- 🌓 **ライト / ダーク両対応** — `data-theme` 属性で切替、`prefers-color-scheme` 連動
-- 🎯 **素の CSS + カスケードレイヤー** — `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
-- 📦 **ESM only + Tree-shakeable** — React 19 + TypeScript、peer deps は `react`, `react-dom`, `lucide-react` のみ
-- 🤖 **AI フレンドリー** — [`/llms.txt`](https://kaze-design-system.vercel.app/llms.txt) で全コンポーネント API を 1 ファイル配信
+- **63 コンポーネント**: フォーム、テーブル、チャート、ダッシュボード UI、ランディングページ、マーケティングパーツまで
+- **日本語組版に最適化**: PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
+- **ライト / ダーク両対応**: `data-theme` 属性で切替、`prefers-color-scheme` 連動
+- **素の CSS + カスケードレイヤー**: `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
+- **ESM only + Tree-shakeable**: React 18 / 19 + TypeScript、peer deps は `react`, `react-dom`（`lucide-react` は任意）のみ
+- **AI フレンドリー**: [`/llms.txt`](https://kaze-design-system.vercel.app/llms.txt) で全コンポーネント API を 1 ファイル配信
 
-## 🚀 Links
+## Links
 
 | | |
 |---|---|
@@ -22,32 +22,32 @@
 | **npm パッケージ** | https://www.npmjs.com/package/kaze-design-system |
 | **GitHub** | https://github.com/yuki930/kaze-design-system |
 
-## 🖼 Live Examples
+## Live Examples
 
 実際のアプリケーション/ページ単位のサンプル実装。Vercel にデプロイされています:
 
 ### ダッシュボード / 管理画面
-- [**分析ダッシュボード**](https://kaze-design-system.vercel.app/dashboard) — メトリック、チャート、テーブル組み合わせ
-- [**Analytics**](https://kaze-design-system.vercel.app/analytics) — KPI 一覧、BarList、Tracker
-- [**SaaS Stats**](https://kaze-design-system.vercel.app/saas-stats) — SaaS 系ダッシュボード
-- [**EC ダッシュボード**](https://kaze-design-system.vercel.app/ec-dashboard) — EC 管理画面
-- [**設定画面**](https://kaze-design-system.vercel.app/settings) — フォーム・FormField 活用例
+- [**分析ダッシュボード**](https://kaze-design-system.vercel.app/dashboard): メトリック、チャート、テーブル組み合わせ
+- [**Analytics**](https://kaze-design-system.vercel.app/analytics): KPI 一覧、BarList、Tracker
+- [**SaaS Stats**](https://kaze-design-system.vercel.app/saas-stats): SaaS 系ダッシュボード
+- [**EC ダッシュボード**](https://kaze-design-system.vercel.app/ec-dashboard): EC 管理画面
+- [**設定画面**](https://kaze-design-system.vercel.app/settings): フォーム・FormField 活用例
 
 ### ランディング・マーケティング
-- [**LP (SaaS)**](https://kaze-design-system.vercel.app/lp) — Hero, Features, Pricing, Testimonial, FAQ, CTA
-- [**LP 2**](https://kaze-design-system.vercel.app/lp2) — 異なる雰囲気の LP
-- [**Pricing**](https://kaze-design-system.vercel.app/pricing) — 料金プラン
-- [**Blog**](https://kaze-design-system.vercel.app/blog) — 記事一覧・記事詳細
-- [**Jobs**](https://kaze-design-system.vercel.app/jobs) — 求人ページ
+- [**LP (SaaS)**](https://kaze-design-system.vercel.app/lp): Hero, Features, Pricing, Testimonial, FAQ, CTA
+- [**LP 2**](https://kaze-design-system.vercel.app/lp2): 異なる雰囲気の LP
+- [**Pricing**](https://kaze-design-system.vercel.app/pricing): 料金プラン
+- [**Blog**](https://kaze-design-system.vercel.app/blog): 記事一覧・記事詳細
+- [**Jobs**](https://kaze-design-system.vercel.app/jobs): 求人ページ
 
 ### アプリケーション
-- [**Login**](https://kaze-design-system.vercel.app/login) — 認証画面
-- [**Todo**](https://kaze-design-system.vercel.app/todo) — シンプルな Todo アプリ
-- [**Shopping**](https://kaze-design-system.vercel.app/shopping) — EC 商品一覧
-- [**Article**](https://kaze-design-system.vercel.app/article) — 記事ページ
-- [**Help**](https://kaze-design-system.vercel.app/help) — ヘルプセンター
+- [**Login**](https://kaze-design-system.vercel.app/login): 認証画面
+- [**Todo**](https://kaze-design-system.vercel.app/todo): シンプルな Todo アプリ
+- [**Shopping**](https://kaze-design-system.vercel.app/shopping): EC 商品一覧
+- [**Article**](https://kaze-design-system.vercel.app/article): 記事ページ
+- [**Help**](https://kaze-design-system.vercel.app/help): ヘルプセンター
 
-> **ESM only** — このパッケージは ES Modules のみを提供します。
+> **ESM only**: このパッケージは ES Modules のみを提供します。
 > `"type": "module"` が設定された環境、または ESM 対応バンドラー（Vite, Next.js, webpack 5+）で使用してください。
 
 ## For AI assistants (Claude / Cursor / ChatGPT)
@@ -57,7 +57,7 @@ AI コーディングアシスタントは以下のファイルからライブ
 - **Short index**: https://kaze-design-system.vercel.app/llms.txt
 - **Full API reference**: https://kaze-design-system.vercel.app/llms-full.txt
 
-`llms-full.txt` には 62 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
+`llms-full.txt` には 63 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
 
 ## インストール
 
@@ -65,7 +65,7 @@ AI コーディングアシスタントは以下のファイルからライブ
 npm install kaze-design-system
 ```
 
-Peer dependencies: `react@^19`, `react-dom@^19`, `lucide-react`
+Peer dependencies: `react@^18 || ^19`, `react-dom@^18 || ^19`。`lucide-react` は任意（`Icon` に lucide のアイコンを渡す場合やサンプルコードで使用。コンポーネント本体は lucide なしで動きます）
 
 ## CSS の読み込み
 
@@ -117,8 +117,26 @@ function App() {
 }
 ```
 
+## レイヤー構成
+
+kaze は1パッケージ・3レイヤーで構成されています。
+
+- **Foundation**: デザイントークン（カラー・タイポグラフィ・スペーシング）と CSS。両レイヤー共通の土台
+- **Application UI**: 管理画面・アプリ向けの52コンポーネント。`kaze-design-system` から import
+- **Marketing**: LP・キャンペーンページ向けの11コンポーネント。`kaze-design-system/marketing` から import
+
+```tsx
+// Application UI
+import { Table, Sidebar, CommandPalette } from "kaze-design-system";
+
+// Marketing（ルートからの import も引き続き使えます）
+import { Hero, PricingGrid, CTABanner } from "kaze-design-system/marketing";
+```
+
 ## コンポーネント一覧（63 コンポーネント）
 
+### Application UI（52）
+
 | カテゴリ | コンポーネント |
 |---|---|
 | **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField, FilterPill |
@@ -129,6 +147,11 @@ function App() {
 | **オーバーレイ** | Dialog, Tooltip, HelpButton, Dropdown, CommandPalette |
 | **レイアウト** | AppLayout, Divider, Grid, Search, Logo, Icon, Heading, Text |
 | **リスト** | List, DescriptionList, Timeline |
+
+### Marketing（11）
+
+| カテゴリ | コンポーネント |
+|---|---|
 | **マーケティング** | Navbar, Hero, Section, SplitSection, FeatureGrid, Stats, Pricing, Testimonial, FAQ, CTABanner, LPFooter |
 
 詳細は [kaze-design-system.vercel.app/docs/components](https://kaze-design-system.vercel.app/docs/components) を参照してください。
@@ -136,13 +159,30 @@ function App() {
 ## Hooks
 
 ```tsx
-import { ThemeProvider, useTheme, useFocusTrap } from "kaze-design-system";
-import { useLegendToggle } from "kaze-design-system/hooks";
+import { ThemeProvider, useTheme } from "kaze-design-system";
+import { useFocusTrap, useLegendToggle } from "kaze-design-system/hooks";
 ```
 
-- `useTheme` — ライト/ダークの切り替え
-- `useFocusTrap` — モーダル向けフォーカストラップ
-- `useLegendToggle` — Recharts の凡例クリックで系列 show/hide を切り替え
+- `useTheme`: ライト/ダークの切り替え
+- `useFocusTrap`: モーダル向けフォーカストラップ
+- `useLegendToggle`: Recharts の凡例クリックで系列 show/hide を切り替え
+
+## バンドルサイズ
+
+63 コンポーネント全部込みで **JS 38 kB gzip + CSS 23 kB gzip ≒ 61 kB gz**。ただし、個別 import すれば使った分だけが bundle に入ります。
+
+| 区分 | 生サイズ | gzip |
+|---|---:|---:|
+| JS: 全コンポーネント合計 (tree-shake 対象) | 110 kB | **38 kB** |
+| JS: 最大 (CommandPalette) | 6.4 kB | 1.9 kB |
+| JS: 中央値 (StatusBadge) | 896 B | 476 B |
+| JS: 最小 (Textarea) | 481 B | 280 B |
+| CSS: `tokens.css` | 20.1 kB | 4.9 kB |
+| CSS: `components.css` | 101 kB | 13.6 kB |
+| CSS: `utilities.css` | 18.9 kB | 3.4 kB |
+| CSS: `reset.css` | 3.7 kB | 1.1 kB |
+
+`npm run size` でローカルで最新のサイズを計測できます。React / lucide-react 等の peer dependencies は含まれていません。
 
 ## デザイントークン
 
@@ -153,12 +193,33 @@ CSS カスタムプロパティベース:
 - タイポグラフィ: `--font-size-*`, `--font-weight-*`
 - ボーダー: `--radius-*`
 - シャドウ: `--shadow-*`
+- 密度: `--density-*`（コントロール高さ・行パディング・UI フォントサイズ。下記「密度」参照）
+
+JS から値を参照したい場合は `kaze-design-system/tokens` から import できます。
+
+```ts
+import { space } from "kaze-design-system/tokens";
+```
 
 ## テーマ（ライト / ダーク）
 
 `data-theme="light"` / `data-theme="dark"` で切り替え。
 `ThemeProvider` で自動管理。`prefers-color-scheme` による OS 設定連動にも対応。
 
+`data-palette="cool"` を付けると warm zinc から cool slate のパレットに切り替わります（ライト / ダークどちらとも併用可）。
+
+## 密度（Density）
+
+`data-density="compact"` を祖先要素（`<html>` やパネル単位）に付けると、Input / Select / Table / List / Tabs / Dropdown / Sidebar などが詰まった表示になります。テーマ・パレットとは独立に組み合わせられます。
+
+```html
+<html data-theme="dark" data-density="compact">
+```
+
+## CSS のレイヤーについて
+
+`css/all`（`kaze.css`）は `@layer tokens, reset, components, utilities` でラップされています。`css/components` などを個別に読み込むとレイヤーは付きません。また、レイヤー外のスタイル（CSS Modules など）は常にレイヤー内のスタイルより優先されます。
+
 ## 開発
 
 ```bash
@@ -168,11 +229,13 @@ npm run build:lib     # ライブラリビルド（dist/ に出力）
 npm run docs:llms     # llms.txt / llms-full.txt を再生成
 npm run storybook     # Storybook 起動
 npm run typecheck     # TypeScript 型チェック
+npm run test          # ユニットテスト（jsdom）
+npm run test:storybook # Storybook ブラウザテスト（Playwright）
 ```
 
 ### リリース
 
-main への push 時に GitHub Actions が自動で `npm version patch` → build → `npm publish` を実行します。ライブラリ本体（`src/components/**`, `src/hooks/**`, CSS ファイル等）への変更がある場合のみトリガーされます。
+main への push 時に GitHub Actions が Conventional Commits からバージョン（patch / minor / major）を判定し、build → `npm publish` → release コミットとタグの push を実行します。ライブラリ本体（`src/components/**`, `src/hooks/**`, CSS ファイル、`package.json` 等）への変更がある場合のみトリガーされます。詳しくは [CONTRIBUTING.md](./CONTRIBUTING.md) を参照してください。
 
 ## コントリビュート
 

package/components.css

@@ -65,9 +65,9 @@
 }
 
 .btn--md {
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-4);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
 }
 
 .btn--lg {
@@ -290,9 +290,9 @@
 .input {
   display: flex;
   width: 100%;
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-3);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
   border-radius: var(--radius-field);
@@ -322,10 +322,10 @@
 .select {
   display: flex;
   width: 100%;
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-3);
   padding-right: var(--space-8);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
   border-radius: var(--radius-field);
@@ -348,6 +348,11 @@
 [data-theme="dark"] .select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+}
 
 /* ── Textarea ────────────────────────────────────────────── */
 .textarea {
@@ -355,7 +360,7 @@
   width: 100%;
   min-height: 5rem;
   padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   line-height: var(--line-height-relaxed);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
@@ -453,10 +458,20 @@
 [data-theme="dark"] .checkbox__input:checked {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .checkbox__input:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  }
+}
 
 [data-theme="dark"] .checkbox__input:indeterminate {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .checkbox__input:indeterminate {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
+  }
+}
 
 /* ── Radio ───────────────────────────────────────────────── */
 .radio {
@@ -611,7 +626,8 @@
 
 .table {
   width: 100%;
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
+  line-height: var(--density-line-height-ui);
 }
 
 .table th {
@@ -621,12 +637,12 @@
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wider);
   color: var(--color-fg-tertiary);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--density-row-py) var(--density-row-px);
   border-bottom: 1px solid var(--color-border);
 }
 
 .table td {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--density-row-py) var(--density-row-px);
   border-bottom: 1px solid var(--color-border-subtle);
   color: var(--color-fg);
   vertical-align: middle;
@@ -685,6 +701,11 @@
 [data-theme="dark"] .avatar img {
   filter: brightness(0.85) contrast(1.1);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .avatar img {
+    filter: brightness(0.85) contrast(1.1);
+  }
+}
 
 /* ── Tabs ────────────────────────────────────────────────── */
 .tabs {
@@ -697,8 +718,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  padding: var(--density-tab-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   font-weight: var(--font-weight-normal);
   color: var(--color-fg-tertiary);
   cursor: pointer;
@@ -750,9 +771,9 @@
 .nav-item {
   display: flex;
   align-items: center;
-  gap: var(--space-2-5);
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  gap: var(--density-nav-gap);
+  padding: var(--density-nav-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   font-weight: var(--font-weight-medium);
   color: var(--color-fg-tertiary);
   border-radius: var(--radius-md);
@@ -1398,12 +1419,7 @@
 .feature-card__icon {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--radius-lg);
-  background: var(--color-bg-tertiary);
-  color: var(--color-fg);
+  color: var(--color-fg-secondary);
   margin-bottom: var(--space-4);
 }
 
@@ -2266,14 +2282,19 @@
 
 /* ── Prose: mark ───────────────────────────────────────────── */
 .prose mark {
-  background: var(--color-amber-100);
+  background: var(--amber-100);
   color: inherit;
   padding: var(--space-0-5) var(--space-1);
   border-radius: var(--radius-sm);
 }
 
 [data-theme="dark"] .prose mark {
-  background: var(--color-amber-900);
+  background: var(--amber-900);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .prose mark {
+    background: var(--amber-900);
+  }
 }
 
 /* ── Prose: kbd ────────────────────────────────────────────── */
@@ -2593,8 +2614,9 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3) 0;
-  font-size: var(--font-size-sm);
+  padding: var(--density-row-py) 0;
+  font-size: var(--density-font-size-ui);
+  line-height: var(--density-line-height-ui);
   color: var(--color-fg);
 }
 
@@ -2634,7 +2656,7 @@
 .list-item--interactive {
   cursor: pointer;
   border-radius: var(--radius-md);
-  padding: var(--space-3) var(--space-3);
+  padding: var(--density-row-py) var(--space-3);
   transition: background var(--duration-fast) var(--ease-default);
 }
 
@@ -3204,6 +3226,13 @@
   line-height: var(--line-height-relaxed);
 }
 
+.alert--default {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+.alert--default .alert__icon { color: var(--color-fg-secondary); }
+
 .alert--info {
   background: var(--color-info-light);
   border-color: var(--color-info);
@@ -3552,6 +3581,7 @@
   align-items: center;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
+  height: var(--density-control-height);
   background: var(--color-surface);
   transition: border-color var(--duration-normal) var(--ease-default),
               box-shadow var(--duration-normal) var(--ease-default);
@@ -3576,11 +3606,12 @@
   min-width: 0;
   border: none;
   background: transparent;
+  height: 100%;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   font-variant-numeric: tabular-nums;
   color: var(--color-fg);
-  padding: var(--space-2) var(--space-2);
+  padding: 0 var(--space-2);
   text-align: right;
   outline: none;
 }
@@ -3607,7 +3638,7 @@
   align-items: center;
   justify-content: center;
   width: 32px;
-  height: 36px;
+  height: 100%;
   border: none;
   background: var(--color-bg-secondary);
   color: var(--color-fg-secondary);
@@ -3880,6 +3911,14 @@
   color: var(--color-warning);
 }
 
+.toast--info {
+  border-left: 3px solid var(--color-info);
+}
+
+.toast--info .toast__icon {
+  color: var(--color-info);
+}
+
 /* ── Dropdown ───────────────────────────────────────────── */
 
 .dropdown__menu {
@@ -3902,8 +3941,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--space-1-5) var(--space-3);
-  font-size: var(--font-size-sm);
+  padding: var(--density-dropdown-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   border-radius: var(--radius-md);
   cursor: pointer;
   color: var(--color-fg);
@@ -4016,8 +4055,8 @@
 .help-button:hover,
 .help-button[aria-expanded="true"] {
   color: var(--color-fg);
-  border-color: var(--color-border-strong, var(--color-fg-tertiary));
-  background: var(--color-bg-subtle, var(--color-bg));
+  border-color: var(--color-border-strong);
+  background: var(--color-surface-hover);
 }
 
 .help-button:focus-visible {
@@ -4118,7 +4157,7 @@
 }
 
 .disclosure__trigger:hover:not(:disabled) {
-  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
+  background: var(--color-surface-hover);
 }
 
 .disclosure__trigger:focus-visible {

package/dist/components/Disclosure/Disclosure.js

@@ -1,14 +1,28 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useId, useMemo } from "react";
-import { ChevronRight, Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+const iconSvgProps = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: "disclosure__icon-svg",
+  "aria-hidden": true
+};
 function renderIcon(icon) {
   if (icon === "chevron" || icon == null) {
-    return /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "disclosure__icon-svg" });
+    return /* @__PURE__ */ jsx("svg", { ...iconSvgProps, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
   }
   if (icon === "plus") {
-    return /* @__PURE__ */ jsx(Plus, { size: 16, className: "disclosure__icon-svg" });
+    return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, children: [
+      /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+    ] });
   }
   return icon;
 }

package/dist/components/Dropdown/Dropdown.js

@@ -33,9 +33,6 @@ const Dropdown = forwardRef(
       },
       [isControlled, onOpenChange]
     );
-    const registerItem = useCallback(() => {
-      return itemCountRef.current++;
-    }, []);
     const resetItems = useCallback(() => {
       itemCountRef.current = 0;
     }, []);
@@ -48,8 +45,6 @@ const Dropdown = forwardRef(
           triggerRef,
           highlightedIndex,
           setHighlightedIndex,
-          itemCount: itemCountRef.current,
-          registerItem,
           resetItems
         },
         children: /* @__PURE__ */ jsx("div", { ref, style: { display: "contents" }, children })

package/dist/components/Toast/Toast.js

@@ -92,6 +92,25 @@ function ToastItem(props) {
                 /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
               ]
             }
+          ),
+          data.variant === "info" && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+              ]
+            }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "toast__content", children: [

package/dist/marketing.js

@@ -0,0 +1,33 @@
+"use client";
+import { CTABanner } from "./components/CTABanner/CTABanner.js";
+import { FAQ, FAQItem } from "./components/FAQ/FAQ.js";
+import { FeatureCard, FeatureGrid } from "./components/FeatureGrid/FeatureGrid.js";
+import { Hero } from "./components/Hero/Hero.js";
+import { LPFooter } from "./components/LPFooter/LPFooter.js";
+import { Navbar, NavbarLink, NavbarLinks } from "./components/Navbar/Navbar.js";
+import { PricingCard, PricingGrid } from "./components/Pricing/Pricing.js";
+import { Section, SectionHeader } from "./components/Section/Section.js";
+import { SplitSection } from "./components/SplitSection/SplitSection.js";
+import { StatItem, Stats } from "./components/Stats/Stats.js";
+import { TestimonialCard, TestimonialGrid } from "./components/Testimonial/Testimonial.js";
+export {
+  CTABanner,
+  FAQ,
+  FAQItem,
+  FeatureCard,
+  FeatureGrid,
+  Hero,
+  LPFooter,
+  Navbar,
+  NavbarLink,
+  NavbarLinks,
+  PricingCard,
+  PricingGrid,
+  Section,
+  SectionHeader,
+  SplitSection,
+  StatItem,
+  Stats,
+  TestimonialCard,
+  TestimonialGrid
+};

package/dist/tokens.js

@@ -78,9 +78,21 @@ const radius = {
   "2xl": "var(--radius-2xl)",
   full: "var(--radius-full)"
 };
+const density = {
+  controlHeight: "var(--density-control-height)",
+  rowPy: "var(--density-row-py)",
+  rowPx: "var(--density-row-px)",
+  fontSizeUi: "var(--density-font-size-ui)",
+  lineHeightUi: "var(--density-line-height-ui)",
+  navPy: "var(--density-nav-py)",
+  navGap: "var(--density-nav-gap)",
+  dropdownPy: "var(--density-dropdown-py)",
+  tabPy: "var(--density-tab-py)"
+};
 export {
   chart,
   color,
+  density,
   radius,
   space
 };

package/dist/types/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type HTMLAttributes } from "react";
-export type AlertVariant = "info" | "positive" | "warning" | "negative";
+export type AlertVariant = "default" | "positive" | "negative" | "warning" | "info";
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     variant?: AlertVariant;
     icon?: ReactNode;

package/dist/types/components/Badge/Badge.d.ts

@@ -3,7 +3,7 @@ export type BadgeVariant = "default" | "positive" | "negative" | "warning" | "in
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     dot?: boolean;
-    /** Solid (inverted) style — filled background with white text */
+    /** Solid (inverted) style: filled background with white text */
     solid?: boolean;
     /** When true, adds role="status" for live-region announcements */
     live?: boolean;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type RefObject } from "react";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     open: boolean;
     onClose: () => void;
-    /** @deprecated useFocusTrap handles focus restoration automatically. Kept for backward compat — ignored. */
+    /** @deprecated useFocusTrap handles focus restoration automatically. Kept for backward compat: ignored. */
     returnFocusRef?: RefObject<HTMLElement | null>;
 }
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "react";
-import { space } from "@/tokens/tokens";
+import { space } from "../../tokens/tokens";
 export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6;
 type SpaceToken = keyof typeof space;
 export type GridGap = "xs" | "sm" | "md" | "lg" | "xl" | SpaceToken | number | (string & {});
@@ -10,11 +10,11 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     columnsMd?: GridColumns;
     /** Column count at ≤640px */
     columnsSm?: GridColumns;
-    /** Gap between items — semantic token ("sm", "md", etc.), space token (e.g. 4), or any CSS value */
+    /** Gap between items: semantic token ("sm", "md", etc.), space token (e.g. 4), or any CSS value */
     gap?: GridGap;
-    /** Gap at ≤1024px — falls back to gap */
+    /** Gap at ≤1024px: falls back to gap */
     gapMd?: GridGap;
-    /** Gap at ≤640px — falls back to gapMd, then gap */
+    /** Gap at ≤640px: falls back to gapMd, then gap */
     gapSm?: GridGap;
 }
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Hero/Hero.d.ts

@@ -3,9 +3,9 @@ export interface HeroProps extends HTMLAttributes<HTMLElement> {
     badge?: string;
     title: string;
     subtitle?: string;
-    /** Background color — any CSS value, e.g. "var(--blue-500)" */
+    /** Background color: any CSS value, e.g. "var(--blue-500)" */
     bg?: string;
-    /** Background image — URL or CSS gradient, e.g. "url(...)" or "linear-gradient(...)" */
+    /** Background image: URL or CSS gradient, e.g. "url(...)" or "linear-gradient(...)" */
     bgImage?: string;
     /** Dark overlay opacity (0–1). true = 0.5. Useful for readability on images. */
     overlay?: boolean | number;

package/dist/types/components/Icon/Icon.d.ts

@@ -1,12 +1,17 @@
-import { type HTMLAttributes } from "react";
-import type { LucideIcon } from "lucide-react";
+import { type ComponentType, type HTMLAttributes } from "react";
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Any icon component accepting `size` / `strokeWidth` (e.g. a lucide-react icon).
+ *  Typed structurally so the published types don't require lucide-react. */
+export type IconComponent = ComponentType<{
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-    /** A lucide-react icon component */
-    icon: LucideIcon;
+    /** An icon component such as a lucide-react icon */
+    icon: IconComponent;
     /** Size of the icon */
     size?: IconSize;
-    /** Accessible label — if omitted, the icon is decorative (aria-hidden) */
+    /** Accessible label. If omitted, the icon is decorative (aria-hidden) */
     label?: string;
 }
 export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/Icon/index.d.ts

@@ -1,2 +1,2 @@
 export { Icon } from "./Icon";
-export type { IconProps, IconSize } from "./Icon";
+export type { IconComponent, IconProps, IconSize } from "./Icon";

package/dist/types/components/NumberField/NumberField.d.ts

@@ -23,7 +23,7 @@ export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElem
     error?: boolean;
     /** Error message */
     errorMessage?: string;
-    /** Prefix text (e.g. "¥") — auto-set by currency */
+    /** Prefix text (e.g. "¥"): auto-set by currency */
     prefix?: string;
     /** Suffix text (e.g. "%", "件") */
     suffix?: string;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -26,7 +26,7 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps &
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
     id?: string;
-    /** Tab の value — aria-controls / id の自動生成に使用 */
+    /** Tab の value。aria-controls / id の自動生成に使用 */
     value?: string;
 }
 export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export type ToastVariant = "default" | "positive" | "negative" | "warning";
+export type ToastVariant = "default" | "positive" | "negative" | "warning" | "info";
 export interface ToastData {
     id: string;
     title: string;

package/dist/types/components/index.d.ts

@@ -57,7 +57,7 @@ export type { DropdownProps, DropdownTriggerProps, DropdownMenuProps, DropdownIt
 export { CommandPalette } from "./CommandPalette";
 export type { CommandPaletteProps, Command } from "./CommandPalette";
 export { Icon } from "./Icon";
-export type { IconProps, IconSize } from "./Icon";
+export type { IconComponent, IconProps, IconSize } from "./Icon";
 export { Heading } from "./Heading";
 export type { HeadingProps, HeadingLevel } from "./Heading";
 export { Text } from "./Text";

package/dist/types/components/marketing.d.ts

@@ -0,0 +1,22 @@
+export { Navbar, NavbarLinks, NavbarLink } from "./Navbar";
+export type { NavbarProps, NavbarLinksProps, NavbarLinkProps } from "./Navbar";
+export { Hero } from "./Hero";
+export type { HeroProps } from "./Hero";
+export { Section, SectionHeader } from "./Section";
+export type { SectionProps, SectionHeaderProps, SectionSize, SectionBackground } from "./Section";
+export { SplitSection } from "./SplitSection";
+export type { SplitSectionProps } from "./SplitSection";
+export { FeatureGrid, FeatureCard } from "./FeatureGrid";
+export type { FeatureGridProps, FeatureCardProps, FeatureGridColumns } from "./FeatureGrid";
+export { Stats, StatItem } from "./Stats";
+export type { StatsProps, StatItemProps } from "./Stats";
+export { PricingGrid, PricingCard } from "./Pricing";
+export type { PricingGridProps, PricingCardProps } from "./Pricing";
+export { TestimonialGrid, TestimonialCard } from "./Testimonial";
+export type { TestimonialGridProps, TestimonialCardProps } from "./Testimonial";
+export { FAQ, FAQItem } from "./FAQ";
+export type { FAQProps, FAQItemProps } from "./FAQ";
+export { CTABanner } from "./CTABanner";
+export type { CTABannerProps } from "./CTABanner";
+export { LPFooter } from "./LPFooter";
+export type { LPFooterProps, FooterColumn } from "./LPFooter";

package/dist/types/tokens/tokens.d.ts

@@ -82,5 +82,18 @@ export declare const radius: {
     readonly "2xl": "var(--radius-2xl)";
     readonly full: "var(--radius-full)";
 };
+/** Switched by `data-density="compact"` on an ancestor. */
+export declare const density: {
+    readonly controlHeight: "var(--density-control-height)";
+    readonly rowPy: "var(--density-row-py)";
+    readonly rowPx: "var(--density-row-px)";
+    readonly fontSizeUi: "var(--density-font-size-ui)";
+    readonly lineHeightUi: "var(--density-line-height-ui)";
+    readonly navPy: "var(--density-nav-py)";
+    readonly navGap: "var(--density-nav-gap)";
+    readonly dropdownPy: "var(--density-dropdown-py)";
+    readonly tabPy: "var(--density-tab-py)";
+};
 export type Theme = "light" | "dark";
 export type Palette = "warm" | "cool";
+export type Density = "default" | "compact";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/yuki930/kaze-design-system/issues"
   },
-  "description": "Minimal React design system for dashboards and Japanese UI — quiet neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
+  "description": "Minimal React design system for dashboards, landing pages and Japanese UI: warm neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
   "keywords": [
     "design-system",
     "react",
@@ -32,6 +32,10 @@
       "types": "./dist/types/components/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./marketing": {
+      "types": "./dist/types/components/marketing.d.ts",
+      "import": "./dist/marketing.js"
+    },
     "./hooks": {
       "types": "./dist/types/hooks/index.d.ts",
       "import": "./dist/hooks.js"
@@ -40,6 +44,7 @@
       "types": "./dist/types/tokens/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
+    "./package.json": "./package.json",
     "./css/tokens": "./tokens.css",
     "./css/reset": "./reset.css",
     "./css/components": "./components.css",
@@ -54,6 +59,9 @@
     "utilities.css",
     "kaze.css"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "sideEffects": [
     "*.css"
   ],
@@ -63,7 +71,10 @@
     "build": "next build",
     "docs:llms": "node scripts/generate-llms.mjs",
     "docs:stories": "node scripts/generate-stories.mjs",
-    "test": "vitest run",
+    "size": "npm run build:lib && node scripts/measure-size.mjs",
+    "test": "vitest run --project unit",
+    "test:storybook": "vitest run --project storybook",
+    "test:all": "vitest run",
     "test:watch": "vitest",
     "start": "next start",
     "build:lib": "rm -rf dist && vite build --config vite.config.lib.ts && tsc -p tsconfig.build.json",
@@ -71,12 +82,6 @@
     "build-storybook": "storybook build",
     "typecheck": "tsc --noEmit"
   },
-  "dependencies": {
-    "lucide-react": "^0.575.0",
-    "next": "^16.1.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
   "peerDependencies": {
     "lucide-react": "^0.575.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -104,7 +109,11 @@
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "jsdom": "^28.1.0",
+    "lucide-react": "^0.575.0",
+    "next": "^16.1.6",
     "playwright": "^1.58.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^10.2.10",
     "typescript": "^5.9.3",

package/tokens.css

@@ -296,6 +296,22 @@
   --topbar-height: 3.5rem;
   --content-max-width: 1280px;
 
+  /* ── Density (component sizing — orthogonal to color theme) ──
+     Two-stage system: normal values here, [data-density="compact"]
+     overrides below. Attach the attribute to :root or any container;
+     custom properties inherit down the subtree either way.
+     Every normal value below equals the literal it replaces, so the
+     default appearance does not change when this section is added. */
+  --density-control-height:  2.25rem;              /* Input / Select / Button (default size) */
+  --density-row-py:          var(--space-3);       /* Table cell / List-item vertical padding */
+  --density-row-px:          var(--space-4);       /* Table cell horizontal padding */
+  --density-font-size-ui:    var(--font-size-sm);  /* Table / List / Tabs / Dropdown / Sidebar / controls */
+  --density-line-height-ui:  var(--line-height-normal); /* Table / List row line-height */
+  --density-nav-py:          var(--space-2);       /* Sidebar nav-item vertical padding */
+  --density-nav-gap:         var(--space-2-5);     /* Sidebar nav-item icon gap */
+  --density-dropdown-py:     var(--space-1-5);     /* Dropdown item vertical padding */
+  --density-tab-py:          var(--space-2);       /* Tabs vertical padding */
+
   /* ── Fluid Typography (inspired by Pico CSS) ─────────── */
   /* Root font-size scales fluidly between 640px and 1280px viewport */
   /* Components using rem will scale proportionally */
@@ -310,6 +326,24 @@
   /* 2xl: 1536px — 超ワイド */
 }
 
+/* ── Density: compact ──────────────────────────────────────────
+   Tightens control height, row padding, UI font-size and line-height
+   by roughly one step. Works wherever the attribute is applied —
+   :root for a whole app, or a single container (e.g. a dense table
+   panel) — since custom properties inherit to descendants either way.
+   Orthogonal to [data-theme] / [data-palette]: combine freely. ──── */
+[data-density="compact"] {
+  --density-control-height:  2rem;
+  --density-row-py:          var(--space-2);
+  --density-row-px:          var(--space-3);
+  --density-font-size-ui:    var(--font-size-xs);
+  --density-line-height-ui:  var(--line-height-snug);
+  --density-nav-py:          var(--space-1-5);
+  --density-nav-gap:         var(--space-2);
+  --density-dropdown-py:     var(--space-1);
+  --density-tab-py:          var(--space-1-5);
+}
+
 /* ── Dark Theme ────────────────────────────────────────────── */
 [data-theme="dark"] {
   --color-bg:            var(--zinc-950);
@@ -446,8 +480,10 @@
 /* ── Dark Theme Fallback (JS-disabled) ────────────────────── */
 /* When JS is unavailable, respect OS dark mode preference.
    If JS sets data-theme="light", this will NOT apply (thanks to :not()).
-   If JS sets data-theme="dark", the [data-theme="dark"] block above
-   takes precedence due to higher specificity. */
+   If JS sets data-theme="dark", this block applies too (same values as
+   [data-theme="dark"]; :root:not(...) is the higher specificity).
+   The cool palette needs its own fallback below, otherwise this block
+   (0,2,0, later in source) overrides [data-palette="cool"][data-theme="dark"]. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --color-bg:            var(--zinc-950);
@@ -515,3 +551,37 @@
     --ring-color:  rgba(168, 162, 158, 0.3);
   }
 }
+
+/* Cool palette × OS dark fallback (specificity 0,3,0 beats the zinc fallback) */
+@media (prefers-color-scheme: dark) {
+  :root[data-palette="cool"]:not([data-theme="light"]) {
+    --color-bg:            var(--slate-950);
+    --color-bg-secondary:  var(--slate-900);
+    --color-bg-tertiary:   var(--slate-800);
+    --color-bg-inverse:    #ffffff;
+
+    --color-fg:            var(--slate-50);
+    --color-fg-secondary:  var(--slate-400);
+    --color-fg-tertiary:   var(--slate-400);
+    --color-fg-inverse:    var(--slate-950);
+    --color-fg-muted:      var(--slate-400);
+
+    --color-border:        var(--slate-800);
+    --color-border-strong: var(--slate-700);
+    --color-border-subtle: var(--slate-900);
+
+    --color-surface:       var(--slate-900);
+    --color-surface-hover: var(--slate-800);
+    --color-surface-active: var(--slate-700);
+
+    --color-primary:       #ffffff;
+    --color-primary-fg:    var(--slate-950);
+    --color-primary-hover: var(--slate-200);
+
+    --color-secondary:     var(--slate-800);
+    --color-secondary-fg:  var(--slate-100);
+    --color-secondary-hover: var(--slate-700);
+
+    --ring-color:  rgba(204, 202, 216, 0.3);
+  }
+}

package/utilities.css

@@ -404,6 +404,11 @@
 [data-theme="dark"] .theme-photo {
   filter: brightness(0.8) contrast(1.1);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .theme-photo {
+    filter: brightness(0.8) contrast(1.1);
+  }
+}
 
 /* ============================================================
    Responsive Utilities