Tabs

Tabs connected to their panels, with arrow keys and one tab stop.

Bits owns arrow navigation, Home and End, roving tabindex and the connection
between tab and panel — `aria-controls` and `aria-labelledby`. Without it,
tabs are buttons that swap content and a screen reader never says they belong
together.

**The tabs are data, not child components.** Flux writes
`<flux:tab name="profile">Profile</flux:tab>` because Blade has no good way to
hand over a list of objects. Svelte does, the tabs in an Askr app usually come
from the server anyway, and Lauf's icons are components already — so they
travel in the array like everything else. One list, one code path.

Three variants: `underline`, `segmented`, `pills`. A badge is part of the
tab's accessible name, so a screen reader reads "Orders 12" — which is what a
sighted reader gets too.

**Tabs that do not fit wrap; `scrollable` puts them on one scrolling line.**
Either way the overflow stays inside the component. Without that they pushed
past their own container and made the page scroll 27 px sideways at 390 px —
found by measuring `scrollWidth` in a real browser, because axe says nothing
about it.

**An inactive panel carries `hidden`, so Ctrl+F cannot see into it.** On a
settings page split across six tabs that makes the browser's own search a lie.
`findable` marks inactive panels `hidden="until-found"`: the browser searches
them anyway and fires `beforematch` on a hit, which the panel uses to select
the owning tab. Browsers without it treat any value as plain `hidden`, so the
feature degrades and the page does not.