`<wa-page>` がコア（無償版）へ移行

<wa-page> コンポーネントが Web Awesome Pro（有償）からコア（無償）へ移行され、すべてのユーザーが利用できるようになりました。ページ全体のレイアウトをスキャフォールドする機能が、ライセンスなしで使えるようになります。

背景

<wa-page> はこれまで Web Awesome Pro の一員として提供されており、サイドバーのナビゲーションでも proBadge() マクロと実験的機能アイコン（wa-icon name="flask"）を伴う特別なエントリとして扱われていました。今回の変更はそのステータスを解除し、コアコンポーネントとして正式に格上げするものです。

changelog には「Moved <wa-page> from Web Awesome Pro to Web Awesome core」と明記されており、有償プランのリポジトリ側の対応 PR（webawesome-pro#178）とセットで行われています。

技術的な変更

コンポーネント本体（page.ts）とスタイル（page.styles.ts・page.mobile.styles.ts）がコアパッケージに追加されました。これにより、Pro 側に依存していた実装がコアリポジトリで完結します。

page.ts は WebAwesomeElement を継承した Lit ベースのカスタム要素です。スロットは banner・header・subheader・navigation-header・navigation・navigation-footer・main-header・main-footer・aside・footer と多層構成になっており、すべてオプションです。スロットにコンテンツを渡さなければそのエリア自体が非表示になる設計で、必要なセクションだけをオプトインできます。

page.mobile.styles.ts はブレークポイントを引数に取る関数としてモバイル向けスタイルを分離しています。

export default (breakpoint: string = '768px') => `
  @media screen and (width < ${breakpoint}) {
    [part~='navigation'] {
      display: none;
    }

    :host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
      display: contents;
    }
  }
`;

デスクトップではナビゲーション領域をインラインで表示し、モバイルでは <wa-drawer> に切り替える仕組みです。mobile-breakpoint プロパティでブレークポイントを変更でき、demo-1.html では 920px に設定する例が示されています。

page.styles.ts では CSS カスタムプロパティとして --menu-width・--main-width・--aside-width などのレイアウト変数を :host スコープで定義しています。また、--banner-height・--header-height・--subheader-height を使って --scroll-margin-top を自動計算する仕組みも含まれており、固定ヘッダーのある画面でアンカーリンクがヘッダーに隠れる問題を構造的に防いでいます。

サイドバーナビゲーション（sidebar.njk）では、Pro バッジ付きのエントリが2箇所から削除され、通常コンポーネントとして「P」の位置（アルファベット順）に追加されています。

変更前（Pro バッジ付き）:

<li>
  <span class="wa-split">
    <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
      Page
      <wa-icon name="flask" aria-hidden="true" class="icon-shrink de-emphasize"></wa-icon>
    </a>
    {{ proBadge() }}
  </span>
</li>

変更後（通常リンク）:

<li><a href="/docs/components/page/">Page</a></li>

ドキュメントとして page.md（コンポーネントリファレンス）、インタラクティブな anatomy デモ（anatomy-demo.html / .css / .js）、および2つのサンプルページ（ドキュメントサイト風・メディアアプリ風）が同時に追加されています。

設計判断

CSS カスタムプロパティによるレイアウト制御 を採用しており、各カラム幅をユーザーがオーバーライドできる設計になっています。documentation.md のサンプルでは --menu-width: 15rem; --aside-width: 15rem; を直接指定しており、グリッドレイアウトの細部をコンポーネント内部に閉じ込めつつ、カスタマイズポイントをカスタムプロパティとして公開するアプローチです。

toPx / toLength 関数についてはコード内に TODO コメントが残されており、「ユーティリティとして抽象化するには命名や文書化が不十分」と明示されています。現段階ではコンポーネント内部に留める判断がされており、将来の整理が予定されていることが読み取れます。

モバイルスタイルを通常スタイルと分離して関数で提供する構造は、ブレークポイントを動的に変更できる mobile-breakpoint プロパティの実装に直結しています。文字列テンプレートとして生成することで @media クエリ内の値をランタイムに差し替えられるようにした判断です。

まとめ

<wa-page> のコア移行は、単なるライセンス変更にとどまらず、スロットベースのレイアウト設計・レスポンシブ対応・スクロールオフセットの自動計算など、成熟したコンポーネントとしての実装を伴う格上げです。Pro からの移行でありながらコードと充実したドキュメントが一緒に追加されたことで、コアユーザーが即日利用を開始できる状態が整っています。