デフォルトトランジションをトークンに統一し、アコーディオンとタイム入力のモーションを調整

このPRは、<wa-accordion-item> と <wa-time-input> など複数コンポーネントのデフォルト CSS カスタムプロパティを、ハードコーディングされたミリ秒値から --wa-transition-* トークン へ置き換えています。デザインシステムのトークンと実装が乖離していた部分を解消し、モーションの一貫性と保守性を向上させます。

背景

コンポーネント群はこれまで 200ms、100ms といったリテラル値や ease キーワードを直接使用しており、デザインシステムで定義された --wa-transition-* トークンから逸脱していました。PR #2423 で既存コンポーネントのトークン化が行われたものの、v3.8.0 で追加された <wa-accordion>, <wa-accordion-item>, <wa-known-date>, <wa-time-input> のうち二つはハードコードが残っていました。これにより、実際のアニメーション速度が設計とずれ、開発者が独自に上書きしなければならない状況が生じていました。

技術的な変更

`<wa-accordion-item>` のスタイル更新

packages/webawesome/src/components/accordion-item/accordion-item.styles.ts で、--show-duration と --hide-duration を 200ms から var(--wa-transition-normal) に、--easing を ease から var(--wa-transition-easing) に置き換えました。

:host {
  --show-duration: var(--wa-transition-normal);
  --hide-duration: var(--wa-transition-normal);
  --easing: var(--wa-transition-easing);
}

同ファイルの TypeScript 実装 (accordion-item.ts) でも JSDoc コメントが新しいトークン表記に更新され、デフォルト値の説明が一致するように修正されています。

* @cssproperty [--show-duration=var(--wa-transition-normal)] - The duration of the expand animation.
* @cssproperty [--hide-duration=var(--wa-transition-normal)] - The duration of the collapse animation.
* @cssproperty [--easing=var(--wa-transition-easing)] - The easing of the expand/collapse animation.

`<wa-time-input>` のスタイル更新

packages/webawesome/src/components/time-input/time-input.styles.ts では、--show-duration と --hide-duration を 100ms から var(--wa-transition-fast) に変更し、アニメーションの ease キーワードも var(--wa-transition-easing) に置き換えました。

:host {
  --show-duration: var(--wa-transition-fast);
  --hide-duration: var(--wa-transition-fast);
}
.time-input-popup::part(popup).show {
  animation: wa-time-input-show var(--show-duration) var(--wa-transition-easing);
}
.time-input-popup::part(popup).hide {
  animation: wa-time-input-hide var(--hide-duration) var(--wa-transition-easing);
}

time-input.ts のプロパティコメントも同様にトークン表記へ更新されています。

* @cssproperty [--show-duration=var(--wa-transition-fast)] - The duration of the show animation.
* @cssproperty [--hide-duration=var(--wa-transition-fast)] - The duration of the hide animation.

変更対象コンポーネントの一覧

<wa-accordion-item>（パネルパターン）
<wa-time-input>（ポップアップパターン）

これらはデフォルトのモーションパラメータが --wa-transition-normal または --wa-transition-fast に統一された唯一の対象です。その他の新規コンポーネントは既にトークンを使用しており、本PR では変更がありません。

設計判断

デフォルト値を新規プロパティとして追加するのではなく、既存の --show-duration, --hide-duration, --easing をトークン参照へ置換する方針が採られました。これは、既存のカスタマイズ手段（上書き用カスタムプロパティ）を保持しつつ、デザインシステムと実装の乖離を解消する最小限の変更です。トークンは一元管理された値であるため、将来的なデザイン変更があってもコンポーネント側のコード修正は不要になります。

まとめ

このPR は、ハードコードされたモーションパラメータを --wa-transition-* トークン に統一し、デザインシステムと実装の整合性を回復させました。デフォルトのアニメーション速度が約50 ms 速くなることで、ユーザー体感が向上すると同時に、開発者は既存のカスタムプロパティで自由に上書き可能なままです。

背景

技術的な変更

<wa-accordion-item> のスタイル更新

<wa-time-input> のスタイル更新

変更対象コンポーネントの一覧

設計判断

まとめ

`<wa-accordion-item>` のスタイル更新

`<wa-time-input>` のスタイル更新