DiffDaily Deep & Concise - OSS変更の定点観測
トップに戻る

shoelace-style/webawesome

https://github.com/shoelace-style/webawesome

ボタンから `line-height` を除去し、複雑なコンテンツの表示崩れを解消

ボタンに設定されていた `line-height` の計算式が、複雑なコンテンツを内包した場合にレイアウト崩れを引き起こしていた問題を修正。`wa-button` とネイティブボタンの両方からプロパティを削除し、`inline-flex` コンテナ本来のセンタリング機能に委ねる形に整理されました。

2026年05月08日 Claude Sonnet 4.6

`<wa-badge>`のアイコン有無による高さ不一致をCSSで修正

`<wa-badge>` コンポーネントでアイコンをスロットに挿入した際に高さが微妙にずれるバグが修正されました。`badge.styles.ts` の `[part='start']` と `[part='end']` に `line-height: 0` を適用することで、インライン要素の `vertical-align` 計算によって生じていた余分な垂直スペースを除去しています。

2026年05月08日 Claude Sonnet 4.6

`<wa-copy-button>` のツールチップ依存を廃止し、stable へ昇格

`<wa-copy-button>` が `<wa-tooltip>` への直接依存を廃止し、デフォルト・カスタムトリガー双方で動作する組み込みフィードバックポップアップへと刷新されました。`tooltip__*` CSS パーツは `feedback` パートに置き換えられ、カスタムトリガーは追加設定なしで自動的にフィードバックを受け取れるようになっています。あわせてコンポーネントのステータスが experimental から stable に昇格しました。

2026年05月08日 Claude Sonnet 4.6

スイッチコンポーネントのRTL対応:見た目とキーボード操作を両立

WebAwesomeのスイッチコンポーネントにRTL対応が追加されました。CSS `:dir(rtl)` 擬似クラスでサムの位置を視覚的に反転し、`LocalizeController` を使ってArrowLeft/ArrowRightキーの論理的な意味もRTL環境に合わせて逆転させています。AndroidやiOSのネイティブスイッチと同等のRTL挙動を、スタイルとロジックの責務を分離した設計で実現しています。

2026年05月08日 Claude Sonnet 4.6

`<wa-button-group>` に要素が1つのときボーダー半径が失われるバグを修正

`<wa-button-group>` に子要素が1つだけ存在する場合、その要素が `:first-child` と `:last-child` の両方に同時に一致してしまい、4隅すべてのボーダー半径が 0 に上書きされるバグが修正されました。`::slotted(:first-child:not(:last-child))` と `::slotted(:last-child:not(:first-child))` という対称的なセレクター修正で、JavaScriptを用いずCSSのみで解消しています。

2026年05月08日 Claude Sonnet 4.6

`wa-textarea`の`resize="auto"`が非表示状態から復元後も高さが折りたたまれたままになるバグを修正

`<wa-textarea resize="auto">`が初期状態で非表示のコンテナ内に配置された場合、表示後も高さが0のままになるバグを修正。ResizeObserverの監視対象をautoモードでは内部のtextareaからホスト要素へ変更し、幅変化フィルタリングとrequestAnimationFrameによる遅延実行を組み合わせることで、再帰ループを防ぎながら非表示→表示遷移での自動リサイズを正しく動作させる。

2026年05月07日 Claude Sonnet 4.6

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

WebAwesomeに`wa-text-wrap-nowrap`・`wa-text-wrap-balance`・`wa-text-wrap-pretty`の3つのテキストユーティリティクラスが追加されました。既存の`wa-{property}-{value}`命名規則に従い、CSSの`text-wrap`プロパティを統一的なインターフェースで提供します。Firefoxが未サポートの`text-wrap: pretty`は`@supports`ブロックで包まれ、未サポートブラウザでは通常の折り返しにフォールバックするグレースフルデグラデーションが実装されています。

2026年05月07日 Claude Sonnet 4.6

`text-wrap: pretty` をプログレッシブエンハンスメントで適用するCSSフォールバック対応

Firefoxで `text-wrap: pretty` が未サポートなことによるテキストオーバーフローバグを修正。`@supports` による機能検出を使ってベースラインを `wrap` に設定しつつ、対応ブラウザには `pretty` を適用するプログレッシブエンハンスメントパターンを導入しました。

2026年05月07日 Claude Sonnet 4.6

ドキュメントサイトデータの一元管理:`site.json`の導入

WebAwesomeのドキュメントサイトに `_data/site.json` を新設し、ブランド名・メールアドレス・SNS URL・GitHub URL・法的リンクパスを一元管理する仕組みを導入しました。Eleventyの `_data/` 規約を活用することで設定変更不要でグローバルデータとして利用可能となり、約54ファイルに散在していたハードコード値が `{{ site.* }}` テンプレート参照に置き換えられました。

2026年05月07日 Claude Sonnet 4.6

ドキュメント用CSSの重複・未使用コード削除と論理プロパティへの統一

WebAwesomeのドキュメント用CSS(`docs.css` / `utils.css`)から重複ルールや未使用セレクタを除去し、約180行を削減するクリーンアップが行われました。物理プロパティ(`width`・`height`など)を論理プロパティ(`inline-size`・`block-size`など)へ統一し、ブランドカラー変数を `docs.css` から `utils.css` へ移動することで、CSSの責務分離と国際化対応の基盤が整えられています。

2026年05月05日 Claude Sonnet 4.6

ドキュメントサイトのメインコンテンツ余白を `.content-container` で統一

ページごとに不統一だったドキュメントサイトのメインコンテンツ余白・最大幅設定を、`.content-container` クラスを正規プリミティブとして刷新することで一元化。`base.njk` にフロントマターの `hasFlushMain` フラグによるオプトアウト機構を導入し、フルブリードページの自由度を保ちつつサイト全体のレイアウト一貫性を実現しました。

2026年05月02日 Claude Sonnet 4.6

ドキュメントサイドバーの現在ページに視覚的アクセント線を追加

WebAwesomeのドキュメントサイドバーに、現在表示中のページを示すアクセント線がCSSで追加されました。`:has()` セレクタと `::before` 疑似要素を組み合わせ、既存のリンクスタイルを変更せずに視覚的表現を追加しています。寸法・色はすべてデザイントークンで定義されており、テーマ変更やRTLレイアウトにも対応した実装です。

2026年05月02日 Claude Sonnet 4.6

バックグラウンドユーティリティのCSSアーキテクチャ整理:`::after`への統合とCSS変数の名前空間化

`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クラスすべてを正しく扱えるよう修正されました。

2026年04月29日 Claude Sonnet 4.6

Eleventy テンプレートエラーのデバッグ情報を改善

Eleventy のテンプレートエラー時に `undefined` しか表示されなかった問題を修正。エラー詳細が `cause` ではなく `originalError` に格納されていた点を正し、ファイルパス・行番号・パーサーメッセージを正確に表示する `formatError` ユーティリティを新設。ビルド中に抑制されていた 11ty の警告もエラー発生時に遡って表示されるようになりました。

2026年04月29日 Claude Sonnet 4.6

`utils.css`にフェードマスクとパターン制御プロパティを追加

`utils.css`に下端フェードマスクユーティリティクラス`.wa-mask-fade-below`と、背景パターンのサイズ・位置を制御する`--background-pattern-size`・`--background-pattern-position`カスタムプロパティが追加されました。`.wa-mask-fade-below`は`.background-wa-pattern`と組み合わせた場合は装飾の`::after`擬似要素のみをマスクし、単独使用時はコンテンツを含む要素全体をマスクするという文脈依存の挙動を1つのクラスで実現しています。

2026年04月28日 Claude Sonnet 4.6

デザイントークンドキュメントの全面改訂:タブナビゲーション導入と「デフォルト値」列の廃止

Web Awesomeのデザイントークンドキュメントが全面刷新され、各カテゴリページへのサイドバーリンクをタブナビゲーションに集約。全トークンテーブルからCSS関数の連鎖で視認性が低かった「Default Value」列を廃止し、代わりに各トークンの説明文(Description)を追加。HTMLテーブルへの移行により各行への直接リンクも可能になった。

2026年04月28日 Claude Sonnet 4.6

ドキュメント基盤を刷新:サイドバー再設計・インストールタブ同期・バックドロップフィルター対応

Web Awesomeのドキュメントサイト全体を対象とした大規模UI/UX改善PR。サイドバーの情報設計を再構築し、`install-tabs.js` を新設してインストール手順タブの選択状態を `localStorage` で横断同期する仕組みを追加。コンポーネント説明文を front matter から `@summary` JSDoc タグへ一本化し、`<wa-dialog>` と `<wa-drawer>` に `--backdrop-filter` CSSカスタムプロパティを追加した。

2026年04月28日 Claude Sonnet 4.6

ビデオコンポーネント向けアイコンと多言語翻訳の追加

ビデオプレーヤーコンポーネントの新設に向け、システムアイコンライブラリに16種のSVGアイコンを追加し、全26言語の翻訳ファイルに17種のビデオ操作UIキーを一括追加した変更です。コンポーネント本体の実装に先行してアセット層を整備することで、リリース時に多言語対応とアイコンが揃う設計になっています。

2026年04月24日 Claude Sonnet 4.6

フォームコントロールのサイズスケールを5段階に拡張(xs/s/m/l/xl)

WebAwesomeのフォームコントロール群が従来の3段階(small/medium/large)から5段階(xs/s/m/l/xl)のサイズスケールへ拡張されました。旧来の長形式値はdeprecatedとなりつつも後方互換性が維持されており、スタイルシートには4.0まで旧セレクタが残される段階的な移行設計が採用されています。

2026年04月23日 Claude Sonnet 4.6

Chromeの翻訳機能で発生するロケールエラーを上流ライブラリの更新で修正

`@shoelace-style/localize` を 3.2.1 から 3.2.2 へ更新し、Chromeの組み込み翻訳機能を使って言語を切り替えた際に `Intl.Locale` コンストラクタが無効な言語コードを受け取って `RangeError` を繰り返しスローする問題を修正しました。修正は上流ライブラリへの委譲で解決されており、webawesome 側のコード変更はありません。

2026年04月22日 Claude Sonnet 4.6
前へ 1 2 3 4 … 9 次へ

© 2026 DiffDaily - Powered by AI

タケユー・ウェブ