Library view
The media-library template — three modules on one canvas: the Toolbar Row (search · filter with count · sort · view switcher · pagination — all existing atoms), the Media Card (grid + --row variants, hover action cluster, duration overlay, caption + kebab), and the Selection system (LB.Selection) wiring them together: the toolbar flips to its bulk bar while anything is selected. Consumed here: Input · Button · Badge · Segmented · Pagination · Checkbox · Card media presets · Popover. Detail pairs with the Inspector Panel.
a11y (built in): selection rides native controls — each card's check is a real <input type="checkbox"> inside a <label> with its own aria-label ("Select title"), a 24px control in a 32px padded hit area (the WCAG 2.5.8 floor) held clear of the top-right action cluster, and select-all sets native indeterminate for partial sets rather than a custom mixed state. Checks reveal on :focus-within as well as hover — so they are reachable without a pointer — and the --row variant keeps them permanently visible; Esc clears the whole selection. One _sync() pass re-checks every box, rewrites the "N selected" count and fires lb-selection-change, and prefers-reduced-motion drops the reveal transition.
Selection spec: checks are 24px controls in 32px hit areas (WCAG 2.5.8 AA floor), kept clear of the action cluster so the spacing rule holds; they reveal on hover/focus and the first selection escalates checks onto every card; long-press (a 500 ms hold with any pointer — touch or mouse) enters selection; select-all shows the minus (indeterminate) for partial sets; selection persists after bulk actions until deliberately cleared (Esc, deselect-all, or the ✕).
Grid + toolbar + selection
Hover a card — check appears top-left, actions top-right. Select one — every card grows a check and the toolbar becomes the bulk bar. Esc clears.
Sunset session
Old School
Tape warmth
Ambient noise
List variant — --row
Same card, horizontal — the check sits inline at the row start and the whole row carries the selected state. Same LB.Selection layer: select one and checks appear on every row; Esc clears.
0:49
Sunset session
1:04
Old School
Usage
Load js/components/lb-selection.js. Container: data-lb-selection (+ data-lb-selection-toolbar="#id"); items: data-lb-selectable data-lb-id="…" each holding a .lb-media-card__check checkbox. Toolbar hooks: data-lb-selection-all / -count / -clear. API at el._lbSelection: getSelected() · selectAll() · clear() · toggle(id). Event: lb-selection-change {ids, count, total} — wire your bulk actions to it; selection persists after actions until you call clear().