fix: Radio の選択ドットが label の padding で位置ずれしないようにする

[ryoshin0830]

概要

Radio のルート（label）に padding を当てると、選択ドットだけが輪から外れて左にずれる問題を修正します。

Closes #18

原因と修正方針

輪（::before）は flex フロー配置なので padding に押されて動くのに対し、ドット（::after）は position: absolute; left: calc(...) の固定座標で、基準が padding を含まないため取り残されていました。

::after を廃止し、輪（::before）自身の background に radial-gradient でドットを描く方式に変更します。ドットは常に輪の中心に描画されるため padding に影響されません。DOM 構造の変更はなく CSS のみです。

選択時のアニメーションは transform: scale(0→1) の代わりに background-size: 0→サイズ（アニメーション可能プロパティ）で、従来と同等の「中心から広がる」動きを維持しています。

Before / After

状態	Before	After
label に padding: 12px 16px	選択ドットが輪の左外にずれる	ドットが輪の中心に描かれる
padding なし（通常）	従来どおり	変化なし

確認（Storybook）

• padding 注入時: ドットが輪の中心に描画されること
• 通常時: 選択切り替え・「中心から広がる」アニメーション・disabled 表示が従来どおり
• キーボード操作: 矢印キーでの選択移動と data-focus-visible のフォーカスリング（::before の outline）が機能すること
• npm run lint / npm run build … PASS

関連

• Radio/Checkbox のクリック領域について理想を考えて実現する #15 の枠付きパターン（label 自体をカード見た目にする）には label への padding が必須で、本修正と Checkbox が className を受け取れない（固定 className に上書きされる） #16 が揃うとラップ要素なしでカード化できるようになります

[Copilot]

Pull request overview

Radio コンポーネントで、ルート（label）に padding を付けた際に「選択ドット（内側の●）だけが輪（◯）からずれてしまう」問題を、DOM 構造を変えずに CSS のみで解消するPRです。

Changes:

• 選択ドットの描画を ::after の絶対配置オーバーレイから、::before（輪）自身の background-image（radial-gradient）による描画へ変更
• 選択アニメーションを transform: scale から background-size のトランジションに置き換え

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.