https://github.com/shoelace-style/webawesome
Web Awesome 3.4 で導入されたバグにより、`<wa-select>` などのコンポーネントで `change`/`input` イベントが誤ったタイミングで発火し、ハンドラ内で `event.target.value` を読み取ると古い値が返される問題を修正しました。`<wa-option>` の `selected` 変更時の不要な `handleDefaultSlotChange()` 呼び出しと、`<wa-select>` の `optionValues` キャッシュにおける `null` 値の特殊処理を除去することで解消しています。
Web Awesome のオートローダーに `data-wa-preload` 属性のサポートが追加されました。HTML マークアップにタグ名を列挙するだけで、ページ初回描画時点で DOM に存在しないコンポーネントを事前登録でき、動的に追加される要素の FOUCE を防止できます。変更は `autoloader.ts` の `discover` 関数への最小限の追記のみで、既存のユニーク化・登録処理を共有する設計です。
`setIconPath()` / `getIconPath()` の追加により、Web Awesomeのデフォルトアイコンライブラリの参照先をFont Awesome CDNからセルフホスト環境へ切り替えられるようになりました。また、family/variantからフォルダ名を解決する `getIconFolder()` もパブリックAPIとして公開され、カスタムリゾルバーでの再利用が可能になっています。
`<wa-drawer>` の `pointerdown` イベントリスナーの登録先を `document.body` から `document` に変更し、Web Awesome を `<head>` 内で読み込んだ際に発生するエラーを修正しました。`document.body` は `<head>` 内スクリプト実行時点では存在しないため `null` 参照エラーが起きていましたが、`document` への変更により解消しています。
`<wa-color-picker>`に`placement`属性が追加され、カラーピッカーのポップアップ表示位置を明示的に指定できるようになりました。画面右端などで発生していたポップアップが画面外にはみ出すバグ(#2099)を、ハードコードされた`"bottom-start"`を属性化するという最小限の変更で解消しています。デフォルト値は`'bottom-start'`のため、既存の動作への影響はありません。
`<wa-dropdown>` の見出しスタイルで `color` プロパティに付与されていた `!important` を削除しました。Shadow DOM 内の `::slotted()` セレクターが `!important` でスタイルを適用していたため、ライトDOMからの色の上書きが不可能になっていた問題(#2102)を1行の変更で解消しています。
`wa-dropdown-item` が `disabled` 状態でもプログラム的な `.click()` 呼び出しによってクリックイベントが発火してしまうバグが修正されました。Shadow DOM 内部のハンドラだけでは防げないプログラム的クリックに対応するため、ホスト要素に `handleHostClick` を追加し、`stopImmediatePropagation` で確実に遮断するようになりました。
`<wa-select>` で空文字列(`""`)をバリューに持つオプションを選択した際、ラベルと表示テキストが重なるバグが修正されました。`:state(blank)` カスタムステートの判定を `value` 単体から `value && displayLabel` の複合条件に拡張し、クリアアイコンの表示条件も同様に修正されています。フォームの送信値と表示テキストを独立した状態として扱うことで、空文字列バリューを使う実装パターンが正しく動作するようになります。
`wa-option`のdisabledプロパティをJavaScriptから設定しても見た目が変わらないバグを修正しました。DOM属性セレクタ`:host([disabled])`への依存をやめ、CSS Custom State(`:state(disabled)`)を導入することで、属性・プロパティのどちらから設定しても視覚的な無効化が正しく機能するようになっています。
ネイティブスタイルユーティリティの `<select>` 要素に存在した2つのバグが修正されました。`padding-inline-end` の追加とキャレットアイコンサイズを考慮した `calc()` 計算により選択テキストとアイコンの重複が解消され、`&[multiple]` セレクタで `height: auto` と `background-image: none` を適用することで複数選択リストが正しく展開されるようになっています。
`<wa-rating>` が Form Associated Custom Element に対応し、`<form>` タグとのネイティブなフォーム送信・バリデーションが利用できるようになりました。継承元を `WebAwesomeFormAssociatedElement` に変更し、`required` バリデーションのサポートと、ARIA属性のホスト要素への移動によるアクセシビリティ改善も合わせて実施されています。
`<wa-button>`コンポーネントに`disabled`・`icon-button`・`link`・`loading`の4つのCSSカスタムステートが追加されました。既存の`@watch`ハンドラに`customStates.set()`を追加する最小限の変更で、`:state()`擬似クラスを使ったスタイリングが可能になります。`<wa-copy-button>`で確立したパターンを拡張したもので、コンポーネントライブラリ全体のスタイリングAPIの一貫性が高まります。
`<wa-badge>` コンポーネントで `<slot>` 要素に誤って付与されていた `role="status"` をHTML仕様に準拠した構造に修正しました。各スロットを `<span>` でラップし、`role` と `part` 属性をラッパー要素側に移動することで、Shadow DOMにおけるコンテンツ投影とARIAセマンティクスの責務を明確に分離しています。
`<wa-copy-button>`のデフォルトスロットに`<wa-button>`や`<button>`など任意の要素をカスタムトリガーとして差し込めるようになりました。HasSlotControllerを導入して既存のアイコンスロットAPIとの後方互換性を維持しつつ、コピー操作の結果をCSSカスタムステート(`:state(success)` / `:state(error)`)でも通知できるよう拡張されています。
WebAwesomeに実験的ユーティリティコンポーネント `<wa-markdown>` が追加されました。Markedライブラリを採用し、`<script type="text/markdown">` でコンテンツを渡す設計でブラウザのHTMLパースを回避します。レンダリング結果はライトDOMに注入されてページのスタイルを継承し、共有Markedインスタンスを通じてプラグイン拡張にも対応します。SEOやXSSリスクを明記した上での実験的リリースです。
`wa-tab-group` の `body` CSS パートが `<slot part="body">` から `<div part="body"><slot></slot></div>` へ変更され、`wa-dialog` や `wa-card` と同じラッパー構造に統一されました。`::part(body)` のパート名は維持されるため、既存テーマへの影響はありません。`wa-card` での同様の変更(#2198)に続くコンポーネントライブラリ全体の構造的一貫性確保の一環です。
`<wa-dropdown-item>` のラベルで `g`・`y`・`j` などのディセンダー文字が切り取られるバグを修正。機能しないテキスト省略のために設定されていた `overflow: hidden`・`text-overflow: ellipsis`・`white-space: nowrap` の3プロパティを削除することで根本解決しました。
WebAwesome ドキュメントの「Open in CodePen」機能で使用するCDNをjsDelivrから自社CDN(ka-p.webawesome.com)に切り替えました。jsDelivrは公開npmパッケージのミラーであるためプロコンポーネントの配信に対応できず、kit識別子をURLパスに埋め込む自社CDN方式に移行することでCodePen上でもプロコンポーネントが正しく動作するようになります。
`<wa-number-input>` のステッパーボタンをモバイルでタップすると仮想キーボードが表示される問題を修正しました。`click` イベントから `pointerup` に切り替え、`PointerEvent.pointerType` でタッチ操作を判別することで、タッチ時のみフォーカス処理を抑制しつつマウス操作での挙動は維持しています。
`<wa-color-picker>` の `swatches` プロパティが `{ color, label }` オブジェクトの配列を受け付けるようになりました。ラベルを指定することでスクリーンリーダーがカラーコードではなく人間が読みやすい名前でスウォッチを読み上げられるようになります。既存の文字列・文字列配列フォーマットとの後方互換性は完全に維持されています。