`menu` 要素のリセットを Native Styles に追加

WebAwesome のネイティブスタイルに menu 要素のデフォルトリストスタイルをリセットするルールが導入され、既存の見た目を保ちつつ柔軟なカスタマイズが可能になりました。

背景

menu 要素は <ul> や <ol> と同様にリスト構造を表現できるセマンティックなタグですが、ブラウザは標準で list-style、margin、padding を付与します。この既定スタイルは他のコンポーネントと統一感のないレイアウトを引き起こすことがあり、スタイルの一貫性 が求められました。

この問題は以前のディスカッション #2436 でも指摘されており、menu をリストとして利用するケースで「リセットが足りない」ことが原因とされています。開発者は menu をカスタム UI に組み込む際に余計な上書きが必要になるのを避けたかったのです。

その結果、ネイティブスタイルに menu 用のリセットルールを追加することで、他要素と同様のベースラインを提供し、追加の CSS 記述を削減できるようになりました。

技術的な変更

packages/webawesome/src/styles/native.css に menu セレクタが新たに導入され、list-style: none;、margin: 0;、padding: 0; が設定されました。さらに子要素の li に対して margin: 0; が適用され、内部リスト項目の余白も統一されます。

+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  & > li {
+    margin: 0;
+  }
+}

この変更により、menu はブラウザのデフォルトリストスタイルを持たず、外部から任意のデザインを直接適用できるようになります。list-style が無効化されても、必要に応じてカスタムシンボルやインデントを独自に実装できる柔軟性が残ります。

同時に、packages/webawesome/docs/docs/utilities/native.md に menu の使用例とリセットの説明が追記され、ドキュメントと実装が整合しています。また changelog.md でも「Native Styles に menu 要素の list-style、margin、padding をリセットするルールを追加」と記載され、利用者に変更点が明示されています。

設計判断

menu のリセットは新規クラスや属性を導入せず、既存の CSS リセットパターンに統合する形で実装されました。これは 最小侵入性 を保ちつつ、全体のスタイル体系と整合させる設計選択です。

子要素 li の margin: 0; を明示的に設定した点は、menu 内部での余計なスペースが残らないようにするための細部調整です。これにより、menu が <ul> と同様にレイアウト上の予測可能性を提供しつつ、デフォルトの余白が排除されます。

このアプローチは、将来的に menu 用のカスタムスタイルを追加したい場合でも、ベースラインがクリアであるため拡張が容易になるという利点を持ちます。

まとめ

menu 要素のデフォルトリストスタイルをリセットするルールを Native Styles に組み込んだことで、既存の見た目を維持しつつ柔軟なデザインが可能になりました。実装は最小限の CSS 追加で済み、ドキュメントも併せて更新されたため、開発者は即座に新しい要素を安全に活用できます。