`text-wrap`ベースのテキストユーティリティクラスを追加

WebAwesomeにwa-text-wrap-nowrap・wa-text-wrap-balance・wa-text-wrap-prettyの3つのユーティリティクラスが追加され、CSSのtext-wrapプロパティをデザインシステムの命名規則に沿って使えるようになりました。

背景

これまでWebAwesomeのテキストユーティリティには折り返し制御の手段としてwa-text-truncate（省略記号付き切り捨て）しか存在せず、折り返しの調整には独自CSSを書く必要がありました。一方、モダンブラウザではCSS text-wrapプロパティが広くサポートされ、balanceやprettyといった値によって視覚的に整ったテキストレイアウトが実現できるようになっています。

なお、text-wrap: prettyはFirefoxが未サポートのため、他の2値とは異なる対応が必要という制約がありました。この制約も含めてどう実装するかが、本PRの設計上の焦点になっています。

技術的な変更

packages/webawesome/src/styles/utilities/text.cssに3つのクラスが追加されました。wa-text-wrap-nowrapとwa-text-wrap-balanceは単純なプロパティ宣言として追加されていますが、wa-text-wrap-prettyのみ@supports (text-wrap: pretty)ブロックで包まれています。

.wa-text-wrap-nowrap {
  text-wrap: nowrap;
}

.wa-text-wrap-balance {
  text-wrap: balance;
}

@supports (text-wrap: pretty) {
  .wa-text-wrap-pretty {
    text-wrap: pretty;
  }
}

@supportsブロックを使うことで、Firefoxなどtext-wrap: prettyを未サポートのブラウザではクラスそのものが無効化され、テキストは通常の折り返し動作にフォールバックします。クラスを付与しても壊れた表示にはならない、グレースフルデグラデーションの実装です。

ドキュメント側ではdocs/utilities/text.mdに新たなWrappingセクションが追加され、Truncationセクションの直前に配置されています。各クラスの挙動をプレビューできるテーブルと、Firefoxでの非サポートに関する:::infoアドモニションも含まれています。

設計判断

クラス名は既存のwa-{property}-{value}規則に従って命名されています。wa-align-items-*・wa-justify-content-*・wa-font-size-*と同じ体系であり、クラス名を見ただけで対応するCSSプロパティと値が一意に特定できます。PR内でもこの命名規則への準拠が明示的な設計指針として挙げられています。

text-wrap: prettyの扱いについては、@supportsによるプログレッシブエンハンスメントが採用されました。未サポートブラウザでは何も適用されないため、text-wrap: prettyの意図（最終行への孤立語防止）は達成されないものの、レイアウト崩れは発生しません。nowrapとbalanceについては広くサポートされているため、@supportsなしで直接宣言されています。

まとめ

本PRは最小限のCSS追加で3つの折り返し制御ユーティリティを提供しつつ、ブラウザ互換性の差異を@supportsで透過的に吸収した変更です。命名規則の一貫性とグレースフルデグラデーションを両立させた実装は、デザインシステムのユーティリティ拡張における典型的なパターンを示しています。