Data Table
The composed data-table view — an admin screen, not a component: App Shell frame, toolbar (search · filters · columns · density · pagination) with the bulk flip, applied-filter chips, a sticky split table with resizable columns and selection, and the App Shell's in-flow right rail (.lb-shell__panel) as the row's side peek — the table stays interactive while the record opens. Client-side here; swap the filter/slice step for a server query and the chrome stays identical. Windowed virtualization for 100k-row sets is deliberately not bundled — bring TanStack Virtual or Clusterize per the pluggable-engines rule, same as the media player's engine note.
a11y (built in): the result counter is a polite live region (aria-live="polite"), so search, filter and page changes are announced, and the table reports the whole filtered set through aria-rowcount plus per-row aria-rowindex even though only one page is in the DOM. Column resize handles are focusable role="separator" widgets — ←/→ step the width, aria-valuenow updates as they move, and double-click resets to auto width as the single-pointer alternative. Every region is a named landmark (nav aria-label on sidebar, breadcrumb and pagination; aside aria-label on the side peek), the shell's <main> carries tabindex="-1" so it can take focus programmatically, the density switch is a roving-tabindex role="radiogroup", and select-all goes indeterminate on a partial selection.
Usage: Two scripts: js/lb.js (Table, Pagination, Segmented and Popover are core) plus js/components/lb-shell.js for the frame — the table auto-inits from data-lb-table, column resize from data-lb-table-resize on the sticky wrap, the pager from data-lb-pagination. The render loop is yours: filter/slice your data, write rows into the <tbody>, then call LB.initIcons(tbody) and table._lbTable.refresh() — refresh is the documented post-swap hook that re-runs the icon/checkbox passes, selection classes and select-all state. Wire lb-table-select ({selectedCount}) to the toolbar's bulk flip, lb-page-change ({page}) back into the loop, and push totals to nav._lbPagination (totalPages / currentPage + render()). One split-table gotcha: the select-all checkbox lives in the header table, outside the <tbody> the Table instance scans, so relay change events both ways — this page's source carries the canonical ~15-line bridge.
Consumed here: App Shell (frame + right rail) · Table (sticky split, resize, selection) · Input (toolbar search) · Popover (filters/columns) · Segmented (density) · Pagination · Chip (filter pills) · Badge · Avatar · Empty State.
Everything here is the canonical wiring documented on the component pages — the toolbar flip adapter, the filter/search/slice render loop with refresh(), split-sync column resize (data-lb-table-resize on the wrap), and the select-all bridge for the split header. View this page's source for the full composition.