Popupコンポーネントのarrow表示方向を修正

<wa-popup> の -start および -end プレースメント指定時に、矢印（arrow）が誤った方向を向いていた問題が修正されました。CSS属性セレクタの演算子を変更することで、プレースメント名のサフィックスに依存しない正確な方向判定が実現されています。

背景

<wa-popup> コンポーネントでは、data-current-placement 属性に基づいて矢印の回転角度を決定しています。この属性には left、right、bottom などの基本方向に加え、left-start、right-end のようなサフィックス付きの値も設定されます。

これまでのCSS属性セレクタは ~= 演算子（単語マッチ）を使用していたため、left-start のようなハイフン区切りの値に対して正しくマッチしませんでした。その結果、Discordスレッドで報告されたように、-start や -end プレースメントで矢印が意図しない方向を向く不具合が発生していました。

技術的な変更

packages/webawesome/src/components/popup/popup.styles.ts で、属性セレクタの演算子を ~= から |= に変更しました。

変更前:

:host([data-current-placement~='left']) .arrow {
  rotate: -45deg;
}

:host([data-current-placement~='right']) .arrow {
  rotate: 135deg;
}

:host([data-current-placement~='bottom']) .arrow {
  rotate: 225deg;
}

変更後:

:host([data-current-placement|='left']) .arrow {
  rotate: -45deg;
}

:host([data-current-placement|='right']) .arrow {
  rotate: 135deg;
}

:host([data-current-placement|='bottom']) .arrow {
  rotate: 225deg;
}

この変更により、以下のマッチング動作が実現されます：

• data-current-placement="left" → マッチ（従来通り）
• data-current-placement="left-start" → マッチ（新たに対応）
• data-current-placement="left-end" → マッチ（新たに対応）

|= 演算子は、属性値が指定された文字列と完全一致するか、指定された文字列にハイフンが続く場合にマッチするため、ハイフン区切りの値のプレフィックスマッチに適しています。

まとめ

本PRは、CSS属性セレクタの演算子を ~= から |= に変更することで、-start および -end サフィックスを含むすべてのプレースメントパターンに対応しました。この変更はCSSのみで完結しており、実行時のJavaScriptコストを伴いません。