ToastコンポーネントをWeb Awesome Proに追加

2026年02月19日 03:12 JST shoelace-style/webawesome

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

Web Awesome Proに Toast と Toast Item コンポーネントが追加され、サイドバーでの表示とドキュメント構成が整備されました。これにより、Kickstarterのストレッチゴールとして計画されていたToastコンポーネントが利用可能になります。

背景

ToastコンポーネントはKickstarterのストレッチゴールとして計画されていましたが、実装は未完了の状態でした。サイドバーには「計画中」のバッジが表示され、#105への参照リンクが設置されていました。

本PRはWeb Awesome ProのPR #141の支援PRとして作成され、コンポーネント本体の実装とドキュメントサイトの整備を連携させています。コンポーネント実装はProリポジトリで行われ、本PRではサイドバーの更新と関連するドキュメント整備を担当しました。

技術的な変更

packages/webawesome/docs/_includes/sidebar.njk でToastコンポーネントのサイドバー表示が更新されました。

変更前:

<li><span class="is-planned wa-split">Toast <span><a href="https://github.com/shoelace-style/webawesome/issues/105"
        target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>

変更後:

<li>
  <span class="wa-split">
    <a href="/docs/components/toast/">Toast</a>
    {{ proBadge() }}
  </span>
  <ul>
    <li>
      <span class="wa-split">
        <a href="/docs/components/toast-item/">Toast Item</a>
        {{ proBadge() }}
      </span>
    </li>
  </ul>
</li>

is-planned クラスと plannedBadge マクロが削除され、実際のドキュメントページへのリンクに置き換えられました。Toast ItemはToastの子要素としてネストされたリストに配置され、親子関係が視覚的に表現されています。

.gitignore に .claude/settings.local.json が追加され、Claude AIのローカル設定ファイルがバージョン管理から除外されるようになりました。

+.claude/settings.local.json

packages/webawesome/docs/docs/resources/changelog.md では、「Next」セクションが「Unreleased」に改名され、バージョン3.0.0以降のリリース記録に日付が追記されました（注: Diffに含まれる日付には未来日が含まれていますが、これはプレースホルダーと思われます）。

## Unreleased

<small>TBD</small>

## 3.2.1

<small>February 4, 2026</small>

## 3.2.0

<small>February 4, 2026</small>

## 3.1.0

<small>December 16, 2025</small>

## 3.0.0

<small>December 2, 2025</small>

ページのメタデータから dateLastUpdated フィールドが削除され、自動更新日付の表示が廃止されました。

設計判断

Toast ItemをToastの ネストされたリストアイテム として配置する構造が採用されました。サイドバーのHTML構造で親子関係を明示することで、コンポーネントの依存関係が視覚的に伝わりやすくなっています。

proBadge マクロの呼び出しでは、description パラメータが削除されシンプルな形式に変更されました。変更前は proBadge({ description: "This will require access to Web Awesome Pro" }) でしたが、変更後は引数なしの proBadge() になっています。

Changelogの日付表示方式は、動的な最終更新日から各バージョンごとの静的なリリース日へと変更されました。これによりリリース履歴が明確になり、バージョン間の時系列が追跡しやすくなっています。

まとめ

本PRは、Web Awesome Proのコンポーネント実装に合わせてドキュメントサイトを更新した変更です。計画中の状態から実装済みへの移行により、サイドバー構造とChangelog形式が整理され、コンポーネントの利用可能性とリリース履歴が明確に伝わるようになりました。