Show More

Collapse a grid to N rows and reveal the rest on demand — LB.ShowMore. The limit is rows × the grid's rendered column count, so it follows the responsive template as the viewport changes; data-lb-show-more-sm overrides the row count on phones (≤640px). Collapsing scrolls back to where the reader expanded, so the button lands exactly where it was before the page grew.

a11y (built in): the trigger is a consumer-authored real button the DS wires with aria-controls + aria-expanded and a swapped label (data-lb-label-more / data-lb-label-less); it hides itself when nothing is hidden. Tiles collapse via the native hidden attribute — gone for every reader, not just visually.

Usage: data-lb-show-more="3" on a grid with an id, plus your own button carrying data-lb-show-more-for="<that id>". Auto-inits (instance at el._lbShowMore) with expand() / collapse() / toggle() / refresh(), and emits a bubbling lb-show-more-toggle with detail.expanded. A ResizeObserver recomputes on resize and when the grid becomes visible (inside a tab panel, an accordion…). Tiles are your elements of any class — the DS ships a [data-lb-show-more] > [hidden] rule so a tile's own display never beats the collapse. Reveal motion is deliberately not bundled; add your own entrance animation if the page wants one.

Grid collapsed to 2 rows — phone override 3

Resize the window: the visible count follows the column count. On phones the data-lb-show-more-sm="3" override applies.

Nothing hidden — the button hides itself

Four tiles in a 2-row collapse: at most widths nothing overflows the limit, so the trigger stays hidden until the grid actually collapses something.