`wa-radio-group` のラベル縦位置ズレを CSS 1 行削除で修正

wa-radio-group コンポーネントのラベルが他のフォームコントロールと比べて約 3px 上にずれる問題を、スタイル定義の 4 行削除のみで解消しました。

背景

wa-radio-group のラベルが、wa-input などの他フォームコントロールのラベルと縦方向に揃わないバグが報告されていました。Issue #2334 によると、Chrome・Firefox の両ブラウザで約 3px の上方向へのズレが確認されており、OS を問わず再現する問題でした。

視覚的なグリッド整合性はフォーム UI の品質に直結するため、わずかなズレでも複数コントロールを並べたレイアウトでは目立ちます。

技術的な変更

原因は radio-group.styles.ts の :host セレクタに記述された display: block の上書きでした。

変更前:

import { css } from 'lit';

export default css`
  :host {
    display: block;
  }

  .form-control {
    position: relative;
    border: none;

変更後:

import { css } from 'lit';

export default css`
  .form-control {
    position: relative;
    border: none;

Web Components では :host のデフォルト表示が inline であるため、display: block を明示することは一般的な慣例です。しかし wa-radio-group の場合、この上書きがフォームコントロール共通スタイルの display デフォルト値を意図せず変更し、ラベルの縦方向の基準位置をずらす副作用を生じさせていました。共通スタイルに任せることで、他コントロールと同一の表示コンテキストが確保されます。

設計判断

コンポーネント固有スタイルの最小化 という判断が読み取れます。

修正は追加ではなく削除です。:host { display: block; } を除去することで、フォームコントロール共通のスタイル基盤に処理を委ねる方針が選択されています。コンポーネント固有のスタイルが共通基盤の挙動を上書きしてしまうと、こうしたズレが生じやすくなります。個別コンポーネントのスタイルは共通基盤の動作に干渉する最小限に留めるという設計原則の実践といえます。

まとめ

4 行のスタイル削除という最小限の変更で、フォーム UI のラベル整合性が回復されました。「コンポーネント固有の上書きが共通基盤の動作を壊す」という Web Components スタイリングの典型的な落とし穴であり、同様のパターンが他コンポーネントに潜んでいないか確認する価値があります。