[tkc310]

Requested by tkc310 · project thread

変更内容

bouzu（tkc310/bouzu#78・#82・#84）は公開に向けて style-src に 'unsafe-inline' を入れない CSP を掛けており、そこで見つかった問題を 8341-ui の側で直します。

なぜ: サーバーで描画した HTML の style 属性は、この CSP で止まります。Base UI は Checkbox・Radio・Switch の隣にネイティブ入力（aria-hidden）を描き、style 属性で見えなくしているため、止まると入力が見えてしまいます。Skeleton も width / height を必ず style 属性で出していたので、既定の大きさでも崩れます。

• テーマに hide-native-input を足し、Checkbox / Radio のラベル（choiceVariants）と Switch のラベルに付けた。display:none にはせず、フォームへ送る入力として残す
• Skeleton の既定の大きさ（幅いっぱい・1em）をクラスで持ち、width / height を指定しないときは style 属性を出さない。props の型と振る舞いは変えていない
• ルールブック 04 に「CSP の下で使う」を追加: 見た目に欠かせない値を style 属性に頼らない規約、Base UI が出す style の一覧、'unsafe-hashes' と値ごとのハッシュで許す方法、Zod 4 の JIT が new Function を試して違反が報告される件（Valibot など eval を使わない検証ライブラリを勧める）

Storybook プレビュー

なし（CSP の無い Storybook では見た目は変わりません）

完了の定義

• PR のタイトルが Conventional Commits の形式
• make check と make test が通る
• changeset を追加した（.changeset/csp-friendly.md、patch）
• ライト / ダークの両方で見た目を確認した（CSP の無い状態では変わらない）
• キーボードで操作でき、フォーカス表示が見える（変更なし）
• 新しい semantic カラーは足していない
• 値や方針を変えた場合、ADR を足した（利用側への手引きのみのため不要と判断。必要なら足します）

改善ループ

• docs/improvement/log.md に 1 行追記した
• 再発防止として追加したもの: Checkbox・Switch のテスト（隠すクラスがネイティブ入力の親に付いている）、Skeleton のテスト（既定では style 属性を出さない）、ルールブック 04 の規約

---

Generated by Claude Code