Page Header

Trail, title, description, meta and actions in one header. breadcrumbs is a Crumb[] handed to @automindz/breadcrumbs rather than a markup slot, and actions is an array — the header can only move an action into a menu if it knows what the action is. meta is the one node slot; the header owns its spacing and its type size so two pages cannot disagree.

Tabs are links in a <nav>, not a tablist: a tablist promises panels in this document, and these change the page. The active one marks itself aria-current="page". Tax documents is blocked with a reason and keeps its place — hiding a tab just makes people ask where it went. The row carries the header's bottom rule, so the active underline sits on it.

Scroll inside the frame. Past the top the title shrinks, the trail, description and meta collapse to nothing and go inert, and the actions and tabs stay reachable. Watch the blocks below: the header grows its own bottom margin by whatever its box loses, so nothing slides while it condenses. The header finds its own scroll container, so this needs no configuration in a preview or in an app shell — only stickyOffset when something is pinned above it. prefers-reduced-motion drops the transition and the condense snaps.

Four actions in a 24rem column. The primary stays visible and the rest become an overflow menu rather than wrapping to a second row — measured against the header's own width, so a header in a narrow content column collapses on a wide screen too. Sync now is blocked but focusable and explains itself; Delete workspace is really disabled.

onSelect is awaited, so the header owns the state. Press Export CSV: it takes the spinner and aria-busy, its siblings recede rather than just going flat, and the rejection lands in place under role="alert" while the button becomes Try again. The alert sits outside the collapse — a failure the condense hides is a failure nobody reads.

The data-driven text becomes skeletons inside the real elements — same paddings, same line boxes — so the header keeps its full structure and its height to within a line of text. One description line and one meta row are reserved, so a description that wraps to two lines settles by a line rather than by the whole block. The config-driven slots keep rendering: the trail, the tabs and the action row are all known before the data is.