`<wa-copy-button>` のツールチップ依存を廃止し、stable へ昇格

<wa-copy-button> コンポーネントがツールチップ依存を取り除いた組み込みフィードバックポップアップへと刷新され、experimental から stable に昇格しました。この変更により、デフォルトトリガーとカスタムトリガーの両方で一貫したフィードバックが機能するようになっています。

背景

従来の実装では、コピー操作のフィードバック表示を <wa-tooltip> コンポーネントに直接依存していたため、カスタムトリガーではフィードバックが機能しないという根本的な制約がありました。

PR の説明によれば、「ツールチップ版はカスタムトリガーと連動しておらず、連動させることもできなかった」とあります。カスタムトリガーのサポートは直前の変更で追加された機能であり、その設計と整合するフィードバック機構が求められていました。

この制約を解消するため、ツールチップコンポーネントへの依存を切り離し、ツールチップのデザイントークンを流用しながらも独立したアニメーションを持つ専用のフィードバックポップアップとして再実装されています。

技術的な変更

copy-button.ts の内部構造が大きく再設計され、カスタムトリガーへのツールチップ紐付けロジックと、専用の CSS パーツが追加されました。

@query('wa-tooltip') による直接参照は廃止され、@query('wa-tooltip[part="feedback"]') という shadowTooltip プロパティに置き換えられています。また、@query('slot:not([name])') による defaultSlot の参照が追加され、カスタムトリガーの検出（hasCustomTrigger ステート）や liveAnnouncement によるアクセシビリティ対応が導入されています。内部的には INTERNAL_TOOLTIP_SLOT と ASSIGNED_ID_PROP の2つの定数が追加され、カスタムトリガーへの ID 自動付与と内部スロット管理を担います。

CSS パーツの公開インターフェースも変更されています：

• 削除: tooltip__base、tooltip__base__popup、tooltip__base__arrow、tooltip__body
• 追加: feedback（内部 <wa-tooltip> 要素全体を指すパート）

スタイル面では copy-button.styles.ts においてボタンサイズの指定が padding: 0.5em から height: calc(var(--wa-form-control-height) * 0.8) + aspect-ratio: 1 に変更され、フォームコントロールの高さトークンを基準とした正方形のボタンサイズに統一されました。また success-icon と error-icon スロットへのカラー指定がスタイルシートから削除されており、アイコンの色付けは別の手段（フィードバックポップアップ内）に移管されています。

テストファイル copy-button.test.ts では、以前は button-name ルールの axe アクセシビリティ違反を回避するため ignoredRules = ['button-name'] としていた箇所が空配列に戻されており、アクセシビリティ上の問題が解消されたことが示されています。新たに追加されたテストでは、カスタムトリガーへの ID 自動付与・既存 ID の保持・ツールチップの full デフォルト値などが検証されています。

ドキュメントのカスタムトリガー説明も更新されており、変更前後のメッセージが対照的です：

変更前:

When using a custom trigger, the default tooltip and icon feedback won't be shown.

変更後:

Custom triggers automatically receive the same tooltip and copy feedback as the default trigger — no extra wiring required.

設計判断

<wa-tooltip> との依存関係を維持しつつ、その制御を内部に閉じ込めるアーキテクチャが採用されました。

フィードバック表示にはツールチップのデザイントークンが流用されており、視覚的な一貫性は保たれています。一方でアニメーションは独自実装とされており、PR の説明でも「ツールチップのスタイルはトークンを共有するが、実際のツールチップコンポーネントのスタイルは共有しない。アニメーションは独自のものだ」と明言されています。これにより、ツールチップコンポーネントの変更がコピーボタンのフィードバック挙動に波及するリスクを抑えています。

カスタムトリガーへのフィードバック自動適用にあたっては、without-tooltip 属性によるオプトアウトも用意されています。これはデフォルト安全（ゼロ設定で動作）かつエスケープハッチ付きという設計で、後方互換性への配慮と新機能の利便性を両立しています。また、tooltip-placement 属性と tooltip__* CSS パーツが削除されて feedback-placement と feedback パートに置き換えられており、フィードバック機構の名称変更によって概念の刷新が明示されています。

まとめ

この変更は、カスタムトリガーのサポートという新機能の追加を契機に、フィードバック機構の根本から再設計した内容です。tooltip__* パーツの削除は破壊的変更ですが、experimental ステータスのうちに刷新を完了したことで、stable 昇格後のインターフェース安定性を確保しています。