`<wa-option>` と `<wa-dropdown-item>` の視覚同期と `current` ステート統一

この PR は、<wa-option> と <wa-dropdown-item> の見た目を統一し、キーボードハイライト時の current ステートを他のフォームコントロールと同様のテーマに合わせ、<wa-select> のリストボックスレイアウトも調整しました。結果として、オプションとメニュー項目が同一プリミティブとして認識され、ビジュアル一貫性が向上します。

背景

Issue #2413 に報告された通り、<wa-option> と <wa-dropdown-item> が異なるビジュアルを示していたため、同一 UI コンポーネント群としての統一感が欠如していました。特に、リスト内のオプションは角が直線的で背景遷移が遅く、ユーザーが現在位置を把握しづらい状況でした。

同時に、<wa-checkbox>、<wa-radio>、<wa-switch>、<wa-slider> といった フォームコントロールファミリー は current（キーボードハイライト）状態で --wa-form-control-activated-color を背景色に、対応するテキストカラーをカスタムプロパティで管理していましたが、<wa-option> はこの統一テーマを利用できていませんでした。

この課題を解決することで、コンポーネント間の視覚的一貫性を保ちつつ、アクセシビリティ向上と開発者体験の改善を狙います。

技術的な変更

PR では 5 つのファイル にわたるスタイルとプロパティの拡張が行われ、<wa-option> の外観と current ステートの挙動が <wa-dropdown-item> と揃えられました。

`<wa-option>` のスタイル調整

option.styles.ts に --current-text-color を定義し、background-color と color にそれぞれ --wa-form-control-activated-color と --current-text-color を使用するよう変更しました。また、角丸を var(--wa-border-radius-s) に、背景遷移を var(--wa-transition-fast) に統一しています。

@@ -2,6 +2,8 @@ import { css } from 'lit';

 export default css`
   :host {
+    --current-text-color: var(--wa-color-brand-on-loud);
@@ -12,8 +14,9 @@ export default css`
     padding: 0.5em 1em 0.5em 0.25em;
+    border-radius: var(--wa-border-radius-s);
     line-height: var(--wa-line-height-condensed);
-    transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
+    transition: var(--wa-transition-fast) background-color var(--wa-transition-easing);
@@ -30,8 +33,8 @@ export default css`

   :host(:state(current)),
   :host(:state(disabled):state(current)) {
-    background-color: var(--wa-color-brand-fill-loud);
-    color: var(--wa-color-brand-on-loud);
+    background-color: var(--wa-form-control-activated-color);
+    color: var(--current-text-color);
     opacity: 1;
   }

カスタムプロパティの公開

option.ts に --current-text-color の CSS プロパティドキュメントが追加され、利用者がテーマごとにテキスト色を上書きできるようになりました。

@@ -30,6 +30,8 @@ import styles from './option.styles.js';
 * @cssstate hover - Like `:hover` but works while dragging in Safari
+ *
+ * @cssproperty --current-text-color - The text color of the current (highlighted) option, paired with `--wa-form-control-activated-color`.

`<wa-select>` のリストボックスレイアウト

select.styles.ts ではリストボックスのパディングを統一の 0.25em に変更し、スロットされたオプションを フレックスカラム として gap: 0.125em で間隔を付与しました。これにより、丸みを帯びたオプションがリストボックス内にきれいに収まり、ホバー状態と current 状態が隣接しても視認性が保たれます。

@@ -256,8 +256,7 @@ export default css`
-    padding-block: 0.5em;
-    padding-inline: 0;
+    padding: 0.25em;
@@ -270,6 +269,13 @@ export default css`
     }
   }

+  /* Space options with half the listbox's padding */
+  .listbox slot:not([name]) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125em;
+  }
+
   slot:not([name])::slotted(small) {
     display: block;
     font-size: var(--wa-font-size-smaller);

テーマ固有の上書き

awesome.css では --current-text-color のデフォルトを --wa-color-surface-default に上書きし、活性化背景色がニュートラルに見えるよう調整しています。

@@ -577,6 +577,10 @@
       --checked-icon-color: var(--wa-color-surface-default);
     }

+    wa-option {
+      --current-text-color: var(--wa-color-surface-default);
+    }
+
     wa-switch {
       --height: 1.5em;

以上の変更により、<wa-option> は <wa-dropdown-item> と同一のビジュアルプリミティブとして機能し、current 状態のカラーリングが他のフォームコントロールと統一されました。

設計判断

同一プリミティブへの統合 を最優先とし、既存の :state(current) を拡張する方針が採られました。新たにコンポーネント固有のステートを増やすのではなく、カスタムプロパティで色調整を行うことで、テーマごとの上書きが容易になり、後方互換性が保たれます。

また、CSS カスタムプロパティ を用いたテキストカラーの抽象化は、テーマエンジン全体で一貫したデザイントークンを共有できるという利点を持ち、将来的なカラーパレット変更やアクセシビリティ調整を最小のコード変更で実現可能にします。

リストボックスのレイアウト変更は、パディングとフレックスギャップ というシンプルな手段で実装され、レイアウトロジックへの侵入を最小限に抑えつつ、視覚的な統一感を提供します。これにより、開発者は既存の API を変更せずに新しいビジュアルを利用でき、マイグレーションコストが低減します。

まとめ

本 PR は <wa-option> と <wa-dropdown-item> の外観を揃え、current ステートのテーマ統一と <wa-select> のリストボックスレイアウトを刷新したことで、Web Awesome のコンポーネント群全体に一貫したビジュアル言語を提供します。カスタムプロパティと既存ステートの拡張という設計選択により、互換性と拡張性を両立させた実装となっています。

背景