Pro コンポーネントのトランジションをデザイントークンに同期

2026年05月22日 03:46 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2427

WebAwesome の CHANGELOG に、Pro コンポーネントである <wa-combobox> と <wa-toast-item> のトランジション同期が追記されました。#2423 で実施されたコンポーネントのデザイントークン統一作業が、Pro コンポーネントへも適用されたことを記録するものです。

背景

#2423 では、<wa-details> の --show-duration / --hide-duration がデザイントークンではなくリテラル値 200ms を使用していたことをきっかけに、ライブラリ全体の監査が行われました。ポップアップ系コンポーネントが 50ms・100ms・200ms などのアドホックな値を持ち、--wa-transition-* トークンと乖離していたため、モーションがデザインシステムから逸脱していた状態が明らかになりました。

その修正対象には、オープンソース側コンポーネントに加えて、Pro コンポーネントである <wa-combobox> と <wa-toast-item> も含まれていました。本 PR（#2427）は webawesome-pro#221 での変更を受け、CHANGELOG にその対象を正確に反映させるための追記です。

技術的な変更

変更内容は packages/webawesome/docs/docs/resources/changelog.md への2行の修正のみで、Pro コンポーネント2件が既存のリストに追加されています。

変更前:

- Synced default `--show-duration` and `--hide-duration` values in `<wa-dropdown>`, `<wa-popup>`, `<wa-popover>`, `<wa-select>`, `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, and `<wa-tree-item>` with `--wa-transition-fast` and `--wa-transition-normal` tokens
- Synced hardcoded transitions in `<wa-copy-button>` and `<wa-select>` with `--wa-transition-*` tokens

変更後:

- Synced default `--show-duration` and `--hide-duration` values in `<wa-dropdown>`, `<wa-popup>`, `<wa-popover>`, `<wa-select>`, `<wa-combobox>`, `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, `<wa-tree-item>`, and `<wa-toast-item>` with `--wa-transition-fast` and `--wa-transition-normal` tokens
- Synced hardcoded transitions in `<wa-copy-button>`, `<wa-select>`, `<wa-combobox>`, and `<wa-toast-item>` with `--wa-transition-*` tokens

追加された <wa-combobox> は --show-duration / --hide-duration のデフォルト値をトークンへ統一するとともにハードコードされたトランジションもトークンに置き換え、<wa-toast-item> も同様の対応を受けています。

設計判断

CHANGELOG を Pro / OSS 別リポジトリに分けず一元管理する方針 が取られています。Pro コンポーネントの実装変更は webawesome-pro#221 で行われ、その変更の記録は本リポジトリの CHANGELOG に反映されています。これにより、ユーザーは参照先を分散させることなく変更履歴を追うことができます。

また、コンポーネントリストへの追記という最小限の変更にとどめることで、既に CHANGELOG に記録されているオープンソース側の変更内容との一貫性を保っています。

まとめ

この変更は CHANGELOG への追記のみですが、<wa-combobox> と <wa-toast-item> がトランジショントークン統一の対象に含まれていることを公式に明示する重要な記録です。デザインシステムのモーション統一という取り組みが、Pro コンポーネントにも例外なく適用されたことを示しています。