Native ボタンを `<wa-button-group>` で利用できるようにした
<wa-button-group> がネイティブ <button> 要素をグルーピングできるようになり、Native Styles を有効にすれば一貫したビジュアルが得られます。今回の PR ではスタイル拡張、テスト追加、ドキュメント更新を行い、機能を公式にサポートしました。
背景
これまで native buttons を <wa-button-group> の子要素に入れても、ボーダー半径やマージンが統一されず、見た目が崩れるという問題がありました（#2510）。ボタンの外観をカスタマイズできる Native Styles ユーティリティは提供されていましたが、グルーピングロジックが適用されないため、同一ツールバー内で混在させるケースに対応できませんでした。
この課題を解決することで、Web コンポーネントに依存せず標準 HTML ボタンとデザインを統一でき、既存プロジェクトへの導入ハードルが下がります。特にデザインシステム全体で Native Styles を採用している環境では、統一感のある UI を手軽に実装できるようになります。
技術的な変更
ドキュメントとビジュアルテスト が拡充されました。packages/webawesome/docs/_includes/visual-tests/native.njk では WA ボタンとネイティブボタンを対比したテーブルが追加され、button-group.md に「Native Buttons」セクションが挿入され、使用例が記載されています。また、changelog.md に「Added support for grouping native <button> elements in <wa-button-group> when Native Styles are included」‑という項目が追記されました。
テスト が新たに 33 行追加され、button-group.test.ts に native buttons ブロックが導入されました。このテストはスロットされた <button> に対して、--_button-* カスタムプロパティが期待通り設定されているかを getComputedStyle で検証します。具体的には、真ん中のボタンは四隅とも半径が 0、最初と最後のボタンはそれぞれ前後の半径が削除されていることを確認しています。
スタイル の核心は packages/webawesome/src/styles/native.css の拡張です。ボタン要素の border-*‑radius プロパティが var(--_button-*-radius, var(--wa-form-control-border-radius)) で上書きされ、ボタングループが定義したカスタムプロパティを参照できるようになりました。加えて、隣接ボタン間の境界を重ねるために margin-inline-start と margin-block-start に --_button-horizontal-indent 系列を適用し、アウトラインバリアントでは負のインデントでオーバーラップを実現しています。
これらの変更は native.css に対する最小限の差分で済んでおり、既存の WA コンポーネントやテーマ設定に影響を与えません。<wa-button-group> の API は変わらず、Native Styles をインポートするだけで新機能が有効化されます。
設計判断
新機能は CSS カスタムプロパティ と Native Styles の組み合わせで実装されたため、コンポーネント側のロジック変更は不要でした。これにより、後方互換性 が保たれると同時に、開発者は追加の JavaScript コードを書かずに利用できます。PR 内の議論では新しい属性やラッパーコンポーネントの導入案も検討されましたが、スタイルレイヤーで解決する方針が採られました。
Native Styles が有効になることだけが前提条件となるため、プロジェクト全体で一貫したデザインシステムを構築しているケースでは自然に機能が統合されます。逆に Native Styles を使用しない環境では従来通りの挙動を維持でき、オプトイン方式のメリットが明確です。
まとめ
この PR は、<wa-button-group> がネイティブ <button> を正しくグルーピングできるように CSS 側を拡張し、テストとドキュメントで使用例と挙動を保証したものです。既存 API を変えずにデザインの一貫性と拡張性を向上させ、Native Styles を採用したプロジェクトへの導入ハードルを低減します。