[tkc310]

変更内容

追加した部品（yorozuya から移植）

yorozuya の共通部品のうち 8341-ui に無かった 5 つを、Panda CSS + Ark UI から Base UI + semantic トークン + tv() に作り直しました（Field・Input は既存の FormField・TextField に相当するため対象外）。

部品	中身	yorozuya からの調整
Switch	Base UI の Switch。size md / sm、description	色を semantic トークンに。オンはつまみにチェックを出す（色だけに頼らない）。ラベルの行で 44px のタップ領域
Dialog	Base UI の Dialog。title 必須、description・footer・trigger・closeLabel	placement="side" は modal="trap-focus" + disablePointerDismissal で裏の画面を操作可能に。背面 bg-overlay・shadow-3・rounded-xl・最大幅 max-w-prose
Spinner	role="status"、size sm / md / lg、delay	文言を aria-label ではなくライブリージョンの中の文字で持つ（既定は視覚的に隠し、showLabel で表示）
Skeleton	aria-hidden の箱、width / height / radius	色を bg-muted、角丸を radius トークンに。動きを減らす設定で止まる
Truncate	Base UI の Tooltip で全文を表示	省略されたときだけツールチップを有効にし、Tab でフォーカスして全文を確かめられるようにした

• Switch のつまみとトラックの組み合わせを contrast.rules.json に追加（198/198 件が基準を満たす）
• ルールブック（01 原則の対応・02 キーボード操作・04 部品の選び方）、DESIGN.md（部品一覧は make design-md で生成、仕様は手書き）、README、バックログ、改善ログを更新
• registry.json は generate-registry.ts で生成

Checkbox のチェック位置の修正

Checkbox.Indicator（span）が本文の行の高さ（16px × 1.7 ≒ 27px）を引き継いだ行ボックスになり、align-middle の SVG がベースライン基準で置かれて、チェックと横線が枠の中心から下にずれていました。Indicator を flex items-center justify-center にして行ボックスを作らないようにしています。

Storybook プレビュー

未作成（作業環境から npm レジストリに接続できず、ローカルで Storybook をビルドできなかったため）。make storybook-preview で追加をお願いします。主に確認したいストーリー: Components/Form › Switches・Checkboxes、Components/Dialog、Spinner、Skeleton、Truncate

完了の定義

• PR のタイトルが Conventional Commits の形式
• make check と make test が通る（CI の check・test が成功。手元では依存を入れられず、Node 単体で動く検査だけ実行）
• changeset を追加した（部品の追加と Checkbox の修正。どちらも patch）
• ライト / ダークの両方で見た目を確認した — 未確認（上記の理由）
• キーボードで操作でき、フォーカス表示が見える（Switch の Space、Dialog の Esc とフォーカスの戻り、Truncate の Tab を単体テストと play 関数で検査）
• 新しい semantic カラーは足していない。Switch で生まれる組み合わせを contrast.rules.json に追加した
• 値や方針は変えていない（ADR 不要）

改善ループ

• docs/improvement/log.md に 2 行追記した
• 再発防止として追加したもの: Checkbox のアイコン配置の単体テスト、Switch のコントラスト規則、各部品の単体テストと play 関数

https://claude.ai/code/session_014vSbu2VCfYegcFB1uxU9DF

---

Generated by Claude Code