Carousel pagination のクリッピング防止へブロックパディングを追加
この PR は、<wa-carousel> のページネーションドットが拡大表示された際に、上下が切り取られるバグを解消します。.pagination 要素に垂直方向のパディングを追加するだけで、レイアウト全体への影響を最小限に抑えました。
背景
ページネーションのドットが拡大表示されてもコンテナの高さが追従しないという問題が Issue #2495 で報告されました。Carousel を Dialog と組み合わせて Lightbox を構築した際、拡大されたドットの下部が切れ、スクロールが必要と判定される現象が発生していました。根本原因は .pagination のブロックサイズが固定で、拡大ドット分の余白が確保されていなかったことです。解決策として、上下に余白を付与すれば表示が完全になると判断されました。
技術的な変更
.pagination クラスに padding-block を付与し、上下に var(--wa-space-3xs) の余白を追加しました。これにより、拡大ドットが完全に収まり、クリッピングが防止されます。変更は packages/webawesome/src/components/carousel/carousel.styles.ts に以下の差分として実装されています。
@@ -29,6 +29,7 @@ export default css`
flex-wrap: wrap;
justify-content: center;
gap: var(--wa-space-s);
+ padding-block: var(--wa-space-3xs);
}
.slides {
さらに、修正内容を公開ノートに反映するため packages/webawesome/docs/docs/resources/changelog.md にエントリを追加しました。
@@ -34,6 +34,7 @@ Web Awesome follows <a href="https://semver.org/" class="appearance-plain">Seman
:::fixed
- Fixed a bug in `<wa-select>` that prevented the dropdown menu from scrolling when using the keyboard [issue:2472]
+- Fixed a bug in `<wa-carousel>` that caused the pagination controls to clip vertically by adding block padding around them [issue:2495]
- Fixed component API tables in the `webawesome` Agent Skill by generating them from the CEM instead of scraping the rendered HTML [issue:2475]
:::
設計判断
最小限の CSS 調整で機能障害を解消する方針が採用されました。新たなレイアウトロジックやコンポーネント構造の変更は行わず、既存のデザイントークン --wa-space-3xs を利用したことで、他の UI 部分への副作用を回避しつつ保守性を保ちました。パディング追加は安全な手段であり、テーマやカスタマイズとの整合性も維持されます。
まとめ
<wa-carousel> のページネーションが拡大ドットで切れないよう、.pagination に padding-block: var(--wa-space-3xs) を追加しました。限定的な CSS 変更に留めることでバグを解消し、デザイン一貫性と保守性を両立させた実装です。