https://github.com/shoelace-style/webawesome
WebAwesomeのドキュメントサイドバーに、現在表示中のページを示すアクセント線がCSSで追加されました。`:has()` セレクタと `::before` 疑似要素を組み合わせ、既存のリンクスタイルを変更せずに視覚的表現を追加しています。寸法・色はすべてデザイントークンで定義されており、テーマ変更やRTLレイアウトにも対応した実装です。
`utils.css`の3つのバックグラウンドユーティリティクラス(`.background-grid`、`.background-dot-grid`、`.background-wa-pattern`)が統一されたアーキテクチャに整理されました。共通の`position: relative` / `z-index` / `::after`ベーススタイルがグループセレクターに集約され、`.background-grid`と`.background-dot-grid`の描画も`::after`疑似要素へ移管されています。あわせてCSS変数が`background-`プレフィックスで名前空間化され、`wa-mask-fade-below`のセレクターも3クラスすべてを正しく扱えるよう修正されました。
Eleventy のテンプレートエラー時に `undefined` しか表示されなかった問題を修正。エラー詳細が `cause` ではなく `originalError` に格納されていた点を正し、ファイルパス・行番号・パーサーメッセージを正確に表示する `formatError` ユーティリティを新設。ビルド中に抑制されていた 11ty の警告もエラー発生時に遡って表示されるようになりました。
`utils.css`に下端フェードマスクユーティリティクラス`.wa-mask-fade-below`と、背景パターンのサイズ・位置を制御する`--background-pattern-size`・`--background-pattern-position`カスタムプロパティが追加されました。`.wa-mask-fade-below`は`.background-wa-pattern`と組み合わせた場合は装飾の`::after`擬似要素のみをマスクし、単独使用時はコンテンツを含む要素全体をマスクするという文脈依存の挙動を1つのクラスで実現しています。
Web Awesomeのデザイントークンドキュメントが全面刷新され、各カテゴリページへのサイドバーリンクをタブナビゲーションに集約。全トークンテーブルからCSS関数の連鎖で視認性が低かった「Default Value」列を廃止し、代わりに各トークンの説明文(Description)を追加。HTMLテーブルへの移行により各行への直接リンクも可能になった。
Web Awesomeのドキュメントサイト全体を対象とした大規模UI/UX改善PR。サイドバーの情報設計を再構築し、`install-tabs.js` を新設してインストール手順タブの選択状態を `localStorage` で横断同期する仕組みを追加。コンポーネント説明文を front matter から `@summary` JSDoc タグへ一本化し、`<wa-dialog>` と `<wa-drawer>` に `--backdrop-filter` CSSカスタムプロパティを追加した。
ビデオプレーヤーコンポーネントの新設に向け、システムアイコンライブラリに16種のSVGアイコンを追加し、全26言語の翻訳ファイルに17種のビデオ操作UIキーを一括追加した変更です。コンポーネント本体の実装に先行してアセット層を整備することで、リリース時に多言語対応とアイコンが揃う設計になっています。
WebAwesomeのフォームコントロール群が従来の3段階(small/medium/large)から5段階(xs/s/m/l/xl)のサイズスケールへ拡張されました。旧来の長形式値はdeprecatedとなりつつも後方互換性が維持されており、スタイルシートには4.0まで旧セレクタが残される段階的な移行設計が採用されています。
`@shoelace-style/localize` を 3.2.1 から 3.2.2 へ更新し、Chromeの組み込み翻訳機能を使って言語を切り替えた際に `Intl.Locale` コンストラクタが無効な言語コードを受け取って `RangeError` を繰り返しスローする問題を修正しました。修正は上流ライブラリへの委譲で解決されており、webawesome 側のコード変更はありません。
`<wa-input>` の `type="number"` / `date` / `time` / `datetime-local`、および `<wa-number-input>` に無効な値を設定した際、カスタム要素の `value` プロパティがその値をそのまま保持してしまうバグを修正。`updated()` ライフサイクルフック内でネイティブ `<input>` の値と照合し、ブラウザによるサニタイズ結果を内部状態に反映することで、ネイティブ入力と一貫した動作を実現しました。
`<wa-dropdown-item>` でサブメニューが開いている際、キーボード操作時にはホバーと同じ選択スタイルが表示されない問題を修正。CSS Custom State(`:state(submenu-open)`)を用いたスタイルルールを追加することで、操作手段によらず一貫した視覚フィードバックを実現しました。
WebAwesome が TypeScript を 5.7.2 から 5.9.3 にアップグレードし、新バージョンの厳格化された型チェックで検出された警告・エラーを修正しました。変更の大部分は複数のテストファイルからの未使用インポートの削除と、`Uint8Array` への型パラメータ明示などの型定義の精密化です。TypeScript 6 が存在する中での段階的なアップグレード戦略として 5.9.3 が選択されています。
`<wa-number-input>`のステッパーボタン操作時に`beforeinput`イベントが発火されるようになりました。`event.preventDefault()`で値の変更をキャンセルできるようになり、ネイティブの`<input type="number">`との動作が揃います。変更はShadow DOMの境界を越えてイベントを伝播させる`composed: true`と、ネイティブとの型互換を保つ`InputEvent`の採用が特徴です。
`wa-dropdown-item` を無効化した際、サブメニュー内に配置した場合のみ `cursor: not-allowed` の代わりに `pointer` カーソルが表示されるバグを修正。`pointer-events: none` が設定された要素ではカーソルスタイルが下位要素に委ねられる仕様が原因で、CSSとJSの両箇所から `pointer-events: none` を削除することで解決しています。クリック制御は既存のイベントリスナーが担っているため機能上の影響はありません。
`<wa-checkbox>` の不確定(indeterminate)状態において、`aria-checked` 属性が `false` のまま設定されていたアクセシビリティバグが修正されました。三項演算子を入れ子にした1行の変更により、`indeterminate` が `true` の場合に WAI-ARIA 仕様に準拠した `mixed` が出力されるようになり、スクリーンリーダーなどの支援技術が不確定状態を正しく認識できます。
`<wa-button>` のアイコンボタンに `with-caret` 属性を付与した際、Firefoxでキャレットがボタン外にはみ出す表示崩れが修正されました。CSSセレクタを `:has(wa-icon)` から `.caret` クラスへ変更し、`aspect-ratio: auto` と `min-width: var(--wa-form-control-height)` を追加することで、キャレットがある場合のみボタン幅が内容に合わせて伸長するようになりました。
WebAwesomeのサイト内検索に `synonyms`(同義語)と `use-cases`(ユースケース)フロントマターフィールドを追加。「modal」でDialog、「sidebar」でDrawerが見つかるように。MiniSearchのブーストウェイト階層化(t:20, s:14, h:10, u:6, c:1)により既存の検索ランキングを維持しつつ、89のドキュメントファイルにキーワードを整備した。
WebAwesomeのコアパッケージ全コンポーネントのテストが、`accessibility`・`properties`・`events`などのネストした`describe`ブロックによる統一構造にリファクタリングされた。`@open-wc/testing`からの直接インポートも`fixtures`ユーティリティに統一され、SSR/ハイドレーション両環境でのテスト実行が保証される。リファクタリングの過程で`<wa-rating>`と`<wa-zoomable-frame>`の2件のバグも修正されている。
カラーパレットのスウォッチ表示が崩れていた問題を修正。`wa-copy-button`のShadow DOM内部を`::part(button)`でスタイリングする方式から、スロットに挿入したネイティブ`<button>`要素に直接CSSを適用する方式へ変更することで、スタイルの確実な適用を実現しました。
`<wa-carousel>` を非表示のタブパネル内に配置すると、スライド内のボタンやリンクが操作不能になるバグが修正されました。`firstUpdated()` に一度限りの `ResizeObserver` を追加し、カルーセルがレイアウト寸法を獲得した時点で `synchronizeSlides()` を再実行することで、誤って付与された `inert` 属性を正しく解除します。