paginationコンポーネントを追加

[yamaki0405]

Paginationコンポーネントの新規追加

概要

Paginationコンポーネントを新規追加します。
1画面に収まらない量の一覧コンテンツを複数のページに分割し、任意のページへ移動できるようにするナビゲーション系のコンポーネントです。

仕様のたたき台となるドキュメントページを design/design.pepabo.com#632（デザインポータル、GHE）で提案しており、この PR はその仕様に対応する実装です。仕様確定前のため draft で出しています。

変更内容

• @pepabo-inhouse/pagination パッケージを新規作成
• @pepabo-inhouse/components-web に統合
• stories-web に Pagination コンポーネントとストーリーを追加

構成要素

要素	クラス	説明
ルート	.in-pagination	<nav> 要素。aria-label にナビゲーション対象名を設定
List	._list	ページ番号を並べる <ul>。Previous / Next は含めない（読み上げに含まれる項目をページ番号だけに揃え、種類の異なる操作が混ざらないようにするため）
Item	._item	<li>
リンク	._link	各ページへの <a>
現在ページ	._current	リンクにしない <span>。aria-current="page" を設定。太字+背景色で表現
省略記号	._truncation	非インタラクティブ。<li> に aria-hidden="true"
Previous / Next	._previous / ._next	List の外に配置。chevron アイコン付き。端のページでは disabled にせずリンクを出力しない。代わりに -is-placeholder（visibility: hidden の span）を置いて要素分の領域を保持する（レイアウトシフト・誤クリック防止）
カウンター	._counter	5 / 10 のような現在位置表示。ページ番号なしの Simple 形式で使用

対応しているバリエーション

軸	値	修飾子
サイズ	s, m, l（get-interactive-component-height-keys()）	.-size-{value}

• Numbered（ページ番号あり）/ Simple（前へ次へ+カウンター）の2形式は、修飾子ではなくマークアップ構造で表現しています（Simple は ._list を置かず ._counter を置く）

インタラクション

• ._link / ._previous / ._next: :hover / :active（背景オーバーレイ）、:focus-visible（フォーカスリング表示）

確認

• npm run compile / npm run lint / npm run test すべてパス
• ビルドした Storybook で Index（両側 truncation）/ FirstPage / LastPage / FewPages / Simple の表示と、aria-current / aria-hidden / nav 構造を確認済み

レビューポイント

• 現在ページ（._current）の表現: 太字 + get-surface-color(light, secondary) の背景にしています。もっと強調（interactive色の塗り等）すべきか
• Previous / Next のラベルはテキスト「前のページ」「次のページ」+ chevron アイコンにしています。アイコンのみ形式の要否
• siblingCount（現在ページ前後の表示数、デモ実装ではデフォルト2）の妥当性