kaze-design-system 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -0,0 +1,140 @@
+# Changelog
+
+All notable changes to this project are documented here.
+This project follows [Conventional Commits](https://www.conventionalcommits.org/) for semver bumps and [Semantic Versioning](https://semver.org/).
+
+## Conventions
+
+Commit prefix determines the next version bump on release:
+
+- `feat:` → **minor** bump (new feature, backward-compatible)
+- `fix:`, `perf:`, `refactor:`, `docs:`, `chore:`, `build:`, `ci:` → **patch** bump
+- `feat!:`, `fix!:`, `refactor!:` or a commit body containing `BREAKING CHANGE:` → **major** bump
+
+CHANGELOG entries and version bumps are generated automatically by `.github/workflows/publish.yml` on every push to `main` that touches library source files.
+
+### 0.x policy
+
+While the major version is 0, a **minor** release may include breaking changes (they are called out in the release notes with a migration note); a **patch** release never does. The public API will be frozen at 1.0.
+## [0.9.0] - 2026-10-29
+
+### Features
+
+- feat: accessibility, Japanese input and typography overhaul (phase 1 of the "best in Japan" plan) (#40)
+
+
+## [0.8.1] - 2026-10-29
+
+### Bug Fixes
+
+- fix: resolve all a11y lint warnings and stop charts jumping on first paint (#39)
+
+
+## [0.8.0] - 2026-10-29
+
+### Features
+
+- feat: use the new charts in the sample dashboards; LineChart startAtZero (#38)
+
+
+## [0.7.0] - 2026-10-28
+
+### Features
+
+- feat: add LineChart, ColumnChart, Heatmap, CategoryBar, ChartLegend and SegmentedControl (#37)
+
+### Bug Fixes
+
+- fix(site): link the docs and sample pages back to the GitHub repository (#36)
+
+
+## [0.6.1] - 2026-10-28
+
+### Other
+
+- chore: introduce biome for lint / format and clean up unused files (#35)
+
+
+## [0.6.0] - 2026-10-28
+
+### Bug Fixes
+
+- fix: セルフ点検で見つかった不具合・CI・ドキュメント・コンテンツの修正 (#32)
+
+### Other
+
+- ci: publish to npm via Trusted Publishing (OIDC) instead of NPM_TOKEN (#34)
+- ci: fix invalid publish workflow and allow manual releases (#33)
+- ci: add manual publish recovery workflow for tagged releases
+
+
+## [0.5.0] - 2026-07-17
+
+### Features
+
+- feat: add kaze-design-system/marketing subpath export (#30)
+- feat: introduce density tokens with data-density=compact support (#31)
+- feat: align status variant vocab, zero runtime deps, and overhaul demo content
+
+### Bug Fixes
+
+- fix(landing): wire GitHub buttons to the actual repo URL
+
+### Other
+
+- docs: present component catalog as Application UI / Marketing two-layer taxonomy (#29)
+- docs: add CONTRIBUTING.md, issue/PR templates, and bundle size tooling
+
+## [0.4.2] - 2026-04-12
+
+### Bug Fixes
+
+- fix(test): unbreak vitest unit + storybook browser test suites
+
+### Other
+
+- docs: drop Zinc-based from generate-llms.mjs boilerplate + add docs:stories npm script
+- chore(stories): add stub stories for remaining 26 compound components
+- ci: exclude *.stories.tsx and *.test.tsx from publish trigger
+
+## [0.4.1] - 2026-04-12
+
+### Other
+
+- chore: add Storybook stories for 16 previously-uncovered components
+- docs: rewrite Zinc-based intro copy for non-designer audience
+- docs: add sample page links + clearer overview to README
+
+## [0.4.0] - 2026-04-12
+
+### Features
+
+- feat: add Disclosure component and relax useLegendToggle types
+- feat(docs): auto-extract component Props from TypeScript sources
+
+### Other
+
+- ci: drive semver bumps from Conventional Commit prefixes
+- ci: only publish when library source changes + refresh README
+
+## [0.3.3] - 2026-04-12
+
+Baseline release (initial CHANGELOG). Prior releases are documented via git tags.
+
+### Features (v0.3.0)
+
+- Add StatusBadge component for data-status display (live / stale / missing / manual / loading) (#25)
+- Add HelpButton component — click-activated help popover with outside-click / ESC dismissal (#24)
+- Add `useLegendToggle` hook for interactive Recharts legends (#23)
+- Add `size` prop (`sm` / `md` / `lg`) to EmptyState with `role="status"` (#26)
+
+### Docs
+
+- Add `/llms.txt` and `/llms-full.txt` generated from ComponentPage.tsx + TypeScript Props interfaces for AI-assistant discoverability
+- Refresh ComponentsOverview and ComponentPage with new components
+- Refresh README (package name, component count, AI assistants section)
+
+### CI
+
+- `publish.yml` now filters by paths so docs/app/scripts changes never trigger empty npm publishes
+- Semver bump now driven by Conventional Commit prefixes, not fixed patch

package/README.md

@@ -8,7 +8,7 @@
 - **69 コンポーネント**: フォーム、テーブル、依存ゼロの SVG チャート（折れ線・縦棒・ヒートマップ等）、ダッシュボード UI、ランディングページ、マーケティングパーツまで
 - **日本語組版に最適化**: PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
 - **ライト / ダーク両対応**: `data-theme` 属性で切替、`prefers-color-scheme` 連動
-- **素の CSS + カスケードレイヤー**: `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
+- **素の CSS + カスケードレイヤー**: `@layer kaze.tokens, kaze.reset, kaze.components, kaze.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 ファイル配信
 
@@ -233,9 +233,10 @@ import { useFocusTrap, useLegendToggle } from "kaze-design-system/hooks";
 
 CSS カスタムプロパティベース:
 
-- カラー: `--color-*`（warm zinc パレット）
+- カラー: `--color-*`（warm zinc パレット）。文字色は `fg` / `fg-muted` / `fg-secondary` / `fg-tertiary` がすべて WCAG AA（4.5:1）を満たし、`fg-decorative` だけが装飾専用
+- フォーカス: `--color-focus`（既定は `fg`。全テーマで 3:1 以上の実線リング）
 - スペーシング: `--space-*`
-- タイポグラフィ: `--font-size-*`, `--font-weight-*`
+- タイポグラフィ: `--font-size-*`, `--font-weight-*`, `--font-sans`（本文、Noto Sans JP 主体）, `--font-display`（見出しと大きな数値、Montserrat + palt）, `--measure-ja`（日本語本文の行長 40em）
 - ボーダー: `--radius-*`
 - シャドウ: `--shadow-*`
 - 密度: `--density-*`（コントロール高さ・行パディング・UI フォントサイズ。下記「密度」参照）
@@ -246,6 +247,15 @@ JS から値を参照したい場合は `kaze-design-system/tokens` から impor
 import { space } from "kaze-design-system/tokens";
 ```
 
+## 日本語組版の既定値
+
+`reset.css` と `tokens.css` が、日本語の本文と UI に合わせた既定値を適用します。
+
+- 本文は Noto Sans JP 主体、行間 1.75、ルートのフォントサイズはブラウザ既定（ユーザーの拡大設定を尊重）
+- 禁則処理 `line-break: strict`、約物の詰め `text-spacing-trim: trim-start`、見出しの文節改行 `word-break: auto-phrase`（対応ブラウザのみ）
+- プロポーショナルかな（palt）と Montserrat は、見出し・Metric・Stats・料金などの表示用テキストにだけ適用
+- 数値は `tabular-nums`、日本語見出しの字間は 0（欧文数字のみ `--letter-spacing-tight`）
+
 ## テーマ（ライト / ダーク）
 
 `data-theme="light"` / `data-theme="dark"` で切り替え。
@@ -253,6 +263,32 @@ import { space } from "kaze-design-system/tokens";
 
 `data-palette="cool"` を付けると warm zinc から cool slate のパレットに切り替わります（ライト / ダークどちらとも併用可）。
 
+ダークモード利用者の初回描画がライトで一瞬光るのを防ぐには、`<head>` に `ThemeScript` を置きます。React が動く前に保存済みのテーマを `<html>` に適用します。
+
+```tsx
+import { ThemeProvider, ThemeScript } from "kaze-design-system/hooks";
+
+<html lang="ja" suppressHydrationWarning>
+  <head>
+    <ThemeScript defaultTheme="system" />
+  </head>
+  <body>
+    <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
+  </body>
+</html>
+```
+
+## Server Components から使う
+
+ルートの barrel（`kaze-design-system`）は `"use client"` 付きなので、そこから import したコンポーネントはすべてクライアント境界に入ります。state を持たない静的コンポーネント（Card、Badge、Heading、Table など 54 個）を Server Component のまま使いたい場合は、個別のサブパスから import してください。
+
+```tsx
+import { Card, CardHeader, CardTitle } from "kaze-design-system/components/Card";
+import { Badge } from "kaze-design-system/components/Badge";
+```
+
+state を持つコンポーネント（Dialog、Dropdown、Tabs など）は個別ファイルの先頭に `"use client"` が付いているので、同じ書き方で問題なく動きます。
+
 ## 密度（Density）
 
 `data-density="compact"` を祖先要素（`<html>` やパネル単位）に付けると、Input / Select / Table / List / Tabs / Dropdown / Sidebar などが詰まった表示になります。テーマ・パレットとは独立に組み合わせられます。
@@ -263,7 +299,13 @@ import { space } from "kaze-design-system/tokens";
 
 ## CSS のレイヤーについて
 
-`css/all`（`kaze.css`）は `@layer tokens, reset, components, utilities` でラップされています。`css/components` などを個別に読み込むとレイヤーは付きません。また、レイヤー外のスタイル（CSS Modules など）は常にレイヤー内のスタイルより優先されます。
+Kaze の CSS はすべて `kaze` 配下のカスケードレイヤー（`kaze.tokens` → `kaze.reset` → `kaze.components` → `kaze.utilities`）に入っています。`css/components` などを個別に読み込んでも、各ファイルが自分のレイヤーを宣言するので順序は保たれます。レイヤー外のスタイル（CSS Modules、あなたのアプリの CSS）は常に Kaze より優先されます。
+
+**Tailwind と併用する場合**は `kaze-design-system/css/core`（tokens + reset + components）を読み込み、`css/utilities` は読み込まないでください。`.flex` や `.hidden` のようなユーティリティ名が Tailwind と重なるためです。レイヤー名を `kaze.*` に分けているので、Tailwind の `components` / `utilities` レイヤーと混ざることはありません。
+
+```tsx
+import "kaze-design-system/css/core"; // Tailwind と併用
+```
 
 ## 開発