Color Pickerの横方向フリップを修正

Color Pickerコンポーネントから sync="width" 属性を削除することで、ビューポート右端での横方向フリップが機能するようになりました。この変更により、Floating UIの配置計算が正しく動作し、画面端でもColor Pickerが適切に表示されます。

背景

<wa-color-picker> は垂直方向のフリップには対応していましたが、画面右端に配置した場合に横方向へフリップしない問題がありました。#1839 で報告されたこの問題は、開発者ツールで sync="width" を削除すると解消することが確認されていました。

この属性は、ポップアップの幅をアンカー要素（小さなトリガーボタン）に合わせる制約を課していました。Color Pickerのパネルは独自の寸法を持つため、この制約が Floating UI のフリップ計算を妨げていたのです。

技術的な変更

packages/webawesome/src/components/color-picker/color-picker.ts 内の <wa-popup> 要素から、sync="width" 属性が削除されました。

変更前:

<wa-popup
  placement="bottom-start"
  distance="0"
  skidding="0"
  sync="width"
  flip
  flip-fallback-strategy="best-fit"
  shift
>

変更後:

<wa-popup
  placement="bottom-start"
  distance="0"
  skidding="0"
  flip
  flip-fallback-strategy="best-fit"
  shift
>

Color Pickerパネルの寸法は、CSSカスタムプロパティ（--grid-width、--grid-height）で定義されており、トリガーボタンの幅とは独立しています。sync 属性を削除することで、Floating UIはこれらの実際の寸法を使用してフリップ計算を行えるようになりました。

設計判断

sync="width" 属性の削除という判断は、コンポーネントの特性に基づいています。

PR内では、この属性がドロップダウンのようなコンポーネントには有用であることが言及されています。ドロップダウンではメニューの幅をトリガーに合わせることが望ましいためです。しかし、Color Pickerの場合、トリガーは小さなカラースウォッチボタンであり、パネルをこの幅に合わせると使用不可能になります。

CSSによるオーバーライドでパネルは正しくレンダリングされていましたが、sync 属性はFloating UIの内部計算には影響を与え続けていました。この属性を完全に削除することで、レイアウトと配置ロジックの両方で一貫性が保たれるようになりました。

まとめ

本PRは、Color Pickerコンポーネントから不要な幅同期制約を削除することで、Floating UIの配置計算を正常化した変更です。1行の削除という最小限の変更で、ビューポート右端での使用性が向上し、コンポーネントの設計意図（独自の寸法を持つパネル）と実装が整合するようになりました。