The <bs-pagination> component renders a Lit <mp-pagination> primitive under the hood. The visible budget is capped by [numberOfBoxes] (which includes the prev/next arrows) and is further clamped to whatever fits the host width so the same paginator renders correctly on mobile and desktop. Below are targeted examples that exercise the growth algorithm.
Just 5 pages. With no numberOfBoxes cap the algorithm trivially shows every page — no ellipsis, no clamping.
7 pages, current = 5, [numberOfBoxes]="7". The right side would otherwise hide a single page (6) behind an ellipsis — instead the algorithm extends the end range so page 6 is rendered directly. Move the selection: when current is in the middle, both gaps are wide enough to render as …; otherwise a single hidden page is always shown directly.
30 pages with [numberOfBoxes]="9" and current in the middle. Both ellipses appear; the visible window slides as you click around.
Same 30 pages, current = 2. The left edge fills with real pages (1, 2, 3, …); only the right ellipsis renders.
Same 30 pages, current = 29. Mirror of the previous case — only the left ellipsis renders.
Omit [numberOfBoxes] and the component renders every page in [pageNumbers]. Useful when the set is small enough to fit comfortably on the smallest viewport you support.
The component doesn’t assume 1..N — pass any sorted number[]. This is exactly how the datatable's "rows per page" selector is built: [10, 20, 50, 100, 200] with arrows hidden.
[size] accepts 'small', 'medium' (default), and 'large'.