`--wa-accordion-divider-color` カスタムプロパティの削除とスタイルカスタマイズ方法の整理

<wa-accordion-item> から不適切にスコープされた --wa-accordion-divider-color を除去し、区切り線の色はホスト要素のセレクタで直接上書きできるようになりました。機能的な振る舞いは変わらず、CSS API がシンプルになります。

背景

--wa-accordion-divider-color はアコーディオン項目間の区切り線の色を指定するために導入されましたが、スコープが <wa-accordion-item> に固定され、実際の利用ケースは極めて限定的でした。コンポーネント内部でのみ参照され、外部からの汎用的なカスタマイズが困難だったため、開発者は wa-accordion-item:not(:first-child) という host selector を用いて直接スタイルを上書きする必要がありました。PR #2491 はこのスコープの不整合を解消し、不要なカスタムプロパティを削除することを目的としています。

技術的な変更

スタイル定義からの除去

packages/webawesome/src/components/accordion-item/accordion-item.styles.ts では、border-top に対するフォールバックとして var(--wa-accordion-divider-color, var(--wa-color-surface-border)) が使用されていました。これを固定のサーフェスボーダー色に置き換え、--wa-accordion-divider-color の参照を除去しました。

:host(:not(:first-child)) {
-  border-top: var(--wa-panel-border-width) var(--wa-panel-border-style)
-    var(--wa-accordion-divider-color, var(--wa-color-surface-border));
+  border-top: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
}

この変更により、デフォルトの border-top カラーが直接適用され、プロパティの有無に関係なく見た目は変わりません。

JSDoc からの削除

コンポーネントクラス packages/webawesome/src/components/accordion-item/accordion-item.ts の JSDoc でも --wa-accordion-divider-color に関する記述が削除されました。

- * @cssproperty [--wa-accordion-divider-color=var(--wa-color-surface-border)] - The color of the divider between accordion items.

公開 API からこのプロパティが消えることで、ドキュメントと実装の整合性が保たれます。

カスタマイズ方法の変更点

プロパティがなくなった代わりに、利用者は以下のように host selector を用いて任意の色や幅を上書きできます。

wa-accordion-item:not(:first-child) {
  border-top-color: var(--custom-divider-color);
  border-top-width: 2px;
}

この手法はスコープをコンポーネント全体に広げ、従来と同等の見た目調整が可能です。

設計判断

カスタムプロパティの削除 は、公開 CSS API を最小化し、スコープの一貫性を保つための選択です。プロパティ自体が限定的にしか使用されていなかったことから、リネームや拡張ではなく除去が最もシンプルかつ安全なアプローチと判断されました。

また、border-top のデフォルト値は既に var(--wa-color-surface-border) と同等であるため、機能的な振る舞いに差異は生じません。したがって、削除は後方互換性を保ちつつコードベースをクリーンに保つ効果があります。

まとめ

--wa-accordion-divider-color の削除は、スコープが不適切で使用頻度が低いという実情に即したリファクタリングです。挙動は変わらず、スタイルカスタマイズは host selector に委ねられるため、API の肥大化が防がれ、開発者体験が向上します。