`<wa-button-group>` に要素が1つのときボーダー半径が失われるバグを修正

<wa-button-group> に子要素が1つだけ存在するとき、ボーダー半径がすべて消えて角丸のない四角形になるバグが修正されました。CSSセレクターに :not() 擬似クラスを加えるだけのシンプルな1行修正です。

背景

<wa-button-group> は複数のボタンを水平・垂直に並べ、グループの両端だけに角丸を残すUIコンポーネントです。グループ内では「先頭要素の右端を直角にする」「末尾要素の左端を直角にする」という処理で隣接する境界を揃えています。

#2367 で報告されたように、動的なUIの変更などで子要素が1つになるケースが生じます。このとき、その唯一の要素は :first-child と :last-child の両方に同時に一致するため、4隅すべての半径が 0 に上書きされてしまっていました。

技術的な変更

button-group.styles.ts のスロットセレクターに :not() 擬似クラスを追加し、先頭かつ末尾でもある要素（＝唯一の要素）への半径リセットを除外しました。

変更前:

:host([orientation='horizontal']) {
  ::slotted(:first-child) {
    --_button-start-end-radius: 0;
    --_button-end-end-radius: 0;
  }

  ::slotted(:last-child) {
    --_button-start-start-radius: 0;
    --_button-end-start-radius: 0;
  }
}

変更後:

:host([orientation='horizontal']) {
  ::slotted(:first-child:not(:last-child)) {
    --_button-start-end-radius: 0;
    --_button-end-end-radius: 0;
  }

  ::slotted(:last-child:not(:first-child)) {
    --_button-start-start-radius: 0;
    --_button-end-start-radius: 0;
  }
}

同様の修正が orientation='vertical' の4つのセレクターにも適用されており、合計4箇所のセレクターが変更されています。変更は純粋にCSS側の修正であり、コンポーネントのTypeScriptロジックには一切手が加わっていません。

設計判断

CSSの擬似クラスだけで問題を完結させるアプローチが採られました。子要素の数をJavaScriptでカウントして条件分岐するという選択肢もありますが、そのようなロジックは追加されていません。

CSS論理プロパティ（--_button-start-start-radius / --_button-start-end-radius / --_button-end-start-radius / --_button-end-end-radius）は書字方向（LTR/RTL）に依存しないインライン軸・ブロック軸ベースの命名になっており、垂直・水平どちらの orientation においても同一の変数セットを使い回せる設計です。今回の修正はその設計を壊さず、セレクターの精度を上げるだけで済んでいます。

まとめ

:first-child:not(:last-child) と :last-child:not(:first-child) という対称的なセレクター修正により、「唯一の子要素」が誤ったスタイルを受け取る問題を最小限の変更で解消しました。JavaScriptを使わずCSSセレクターの論理で完結させたことで、動的な要素数変化にも堅牢なスタイリングが実現されています。