kerfjs 4.5.0-beta.1 → 5.0.0-beta.100

package/CHANGELOG.md

@@ -6,6 +6,2646 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- `kerf-ui-doctor --full` and `kerf-ui-analyze` no longer report findings in gitignored, generated output. A local Playwright run's `playwright-report/` (its trace viewer ships CSS) produced about a hundred `KUI-L006` review findings in one app, so running the tests changed the doctor result. Inside a Git work tree, full traversal now skips every path the project's ignore rules ignore, across TypeScript, the isolated ESLint pass, analyzer discovery, and cache inputs; Playwright's `playwright-report`, `test-results`, and `blob-report` directories are also skipped by name, which covers projects outside Git.
+- A dark-tone `AnchoredSurface` (`tone: 'dark'`) now follows a live color-scheme switch while it is open. It picked its inverse scheme once, on open, so an OS preference change or an app theme toggled on an ancestor left the popup on the old side until it was reopened. It now flips with the page. `openAnchoredSurfaceAt` also reads the dark tone's scheme from `point.context`, the element under the pointer, instead of from the body or dialog that holds its temporary anchor, so a region with its own forced `color-scheme` is honored.
+- A keyboard move made as a long `PopupMenu` submenu (or menu) opens now leaves the chosen item in view, not just focused. When Web Awesome's late first-item focus landed after the move (say `End` pressed right after `ArrowRight`), it scrolled the menu back to the top, and kerf's restore refocused the chosen item without scrolling, so the focused last choice sat out of view below the clip. The restore now scrolls the item into view within its own menu, leaving the page alone.
+- A default-tone `ToolbarControlGroup` in an overlay `Pane` header (`headerPresentation="overlay"`) or in a `DialogSurface` floating header's `header-actions` (`headerPresentation="floating"`) now keeps its controls at WCAG AA over content passing beneath the translucent chrome material. Its quiet control color over its own translucent fill measured about 3.0:1 (light) and 3.5:1 (dark) over the worst case; its controls now take the normal text color there, as they already did in overlay `NavStack` chrome.
+- A dark `ToolbarControlGroup` (`tone="dark"`) holding one control no longer hides its icon on hover over a light page. A lone control's hover replaces the whole group's fill, and the dark tone's hover was a translucent surface wash meant to lie over that fill, so the white icon sat on a near-white circle (about 1.3:1). The wash now paints over the group's loud fill, as it does on one control of a multi-control dark group, and it is 14% instead of 28%: at 28% even that layered paint measured about 2.7:1. Hovered dark controls now keep about 3.4:1 over a light page and about 5.8:1 in dark.
+- An unframed scrollable `List` now stops a row focused or scrolled into view with its whole focus ring inside the scroll clip. Only a framed List carried ring-room scroll padding, so in an unframed one the ring of a row brought into view ended flush against the clip and was cut off. Every `scrollable` List now has 6px of block scroll padding (the ring's 4px reach plus 2px of slack), which moves nothing at rest. An unframed List's first and last rows still meet the clip at the scroll extremes; `frame`'s 4px inset is the answer when they must show a whole ring.
+- An overlay `Pane` header (`headerPresentation="overlay"`) now clears its forced-colors edge. In forced colors the header gains a 1px `CanvasText` bottom border, but `wireScrollDividers` observed the header's content box, so the border alone reported no resize and `--kui-scroll-clearance-block-start` stayed 1px short: the content's first item rested under the edge. The wiring now observes each overlay header's border box, the same box it publishes.
+- `positionAnchored({ fitHeight: true })` (and so `autoReposition()`, `popover()`, `tooltip()`, and `@kerfjs/ui`'s `openAnchoredSurface()`) now keeps an element placed above its anchor growing upward. It set `top` from the height the element had at the reposition, so an element still growing afterwards — say an expand-from-0 `max-height` entrance placed above mid-expand — slid its bottom edge down over the anchor until the next scroll or resize. An above placement now pins the element's bottom edge at the gap above the anchor (`bottom`, with `top: auto`), so it grows and shrinks upward, away from the anchor, whatever height it goes on to lay out; a below placement sets `top` with `bottom: auto`. Placement without `fitHeight` is unchanged (`KF-MZ03RG`).
+- An overlay `Pane` header (`headerPresentation="overlay"`) no longer covers the top of a classic, space-taking scrollbar (Windows and Linux, or macOS with "always show scrollbars"). Its thumb and arrow buttons ran beneath the translucent header. `wireScrollDividers` now also measures the content's vertical scrollbar and publishes a classic one's inline size on the Pane as `--kui-pane-scrollbar-inline-size`, and the header ends where the scrollbar's track begins. Overlay scrollbars take no space and still pass beneath the header like the content.
+- A `ToolbarText` in an overlay `Pane` header (`headerPresentation="overlay"`) now keeps WCAG AA over the translucent chrome material. Over worst-case content passing beneath, its quiet `description` measured about 3.2:1 (light) and 4.1:1 (dark), and a default-size title about 3.8:1 (light). In that header an untoned `ToolbarText` now takes the normal text color for its title at every size and mixes its description halfway toward it (about 5.9:1 in both themes), so the description stays readable and still reads as secondary.
+- A framed `List` (`frame`) now keeps a focused middle row's ring inside its scroll clip in Chromium. The frame's scroll padding equaled the ring's 4px reach, but Chromium's focus scroll stops 1px short of the padded target and a row's fractional position can cost another fraction of a pixel, so about 1px of the ring was cut. The scroll padding is now the ring reach plus 2px; the frame's 4px visual inset and its first- and last-row resting positions are unchanged.
+- `positionAnchored({ fitHeight: true })` now measures an element whose `max-height` is mid-animation at the cap it is headed to. An app transition already running on `max-height` (say an expand-from-0 entrance to `max-height: 300px`) or a `@keyframes` animation of `max-height` made the cap read report the current frame, so a reposition mid-expand judged the element by a height it was about to outgrow and could open it on a side its settled cap does not fit. kerf now reads the cap from the running effect instead — its last `max-height` keyframe, or its first while the current iteration plays in reverse — and, for that case, never touches the element's style, so the app's animation keeps running uninterrupted. A finished animation that still fills is read from computed style as before, and a keyframe `var()` kerf cannot resolve outside the element counts as no cap (`KF-YW3PRD`).
+- `eslint-plugin-kerfjs`'s `ui-css-values` rule now recognizes CSS-value helpers imported from any `@kerfjs/ui` subpath, including the documented `@kerfjs/ui/css-values`. It only knew helpers imported from the package root, so `iconTile={{ color: foregroundColor('#000') }}` with `foregroundColor` from `@kerfjs/ui/css-values` passed lint while `kerf-ui-analyze` reported `KUI-L014` (and likewise `KUI-L015` for a bare `plus()`). Lint now resolves a helper exactly as the analyzer does: by its imported name, from the component's package or any subpath of it, through a named, aliased, or namespace import. A same-named helper from another package is still ignored (`KF-HKGK2C`).
+- `positionAnchored({ fitHeight: true })` now honors a relative `max-height` cap and is no longer fooled by a `max-height` transition. A cap that stays relative after computing — `max-height: 60%`, `calc(50% - 2rem)`, `min(300px, 60%)`, `clamp()` — was treated as no cap, so an element that fit the preferred side at that cap still opened on the roomier side. kerf now resolves it against the element's fixed-position containing block (normally the viewport) with an unpainted probe beside the element, so the element's scroll position and layout are untouched. And an app `transition` on `max-height` made the cap read report the transition's running value (the room kerf last published) and fire `transitionrun` / `transitionstart` events, so the cap was ignored again; kerf now holds off only the `max-height` transition for that read, and every other transition keeps running (`KF-53GEGN`).
+- A `StateBanner`'s side action no longer squeezes or covers its copy on a narrow banner. The banner laid out as a three-track grid whose action track took the action's full width, so on a phone a pair of buttons (say Retry Save and Discard Changes in a wrapping `Row`) left the title about 65px, and a word wider than that ran underneath the buttons. The banner is now a wrapping row: the default `actionPlacement="trailing"` keeps the action beside the copy while the copy has at least 12rem, and otherwise moves it to its own end-aligned trailing row. The choice follows the banner's own width rather than a breakpoint, so it also works in a narrow sidebar on a wide screen and inside an intrinsically sized `CornerStatus`. `actionPlacement="below"` still always uses the trailing row (`KF-PXCKVZ`).
+- `positionAnchored({ fitHeight: true })` (and so `autoReposition()`, `popover()`, `tooltip()`, and `@kerfjs/ui`'s `openAnchoredSurface()`) now honors the element's own `max-height` when choosing a side. It measured a scrolling element at its full content height, so an element the app caps below that height — say `max-height: min(300px, var(--kerf-anchor-available-height))` with 500px of content — fit neither side and opened on the roomier one, even when its 300px capped height fit the preferred side. kerf now reads that cap with its own published room swapped for an unbounded one, so it never mistakes its last cap for the app's, and the read is style-only, so the element's scroll position is kept (`KF-878W6T`).
+- A keyboard move made just as a `PopupMenu` submenu finishes opening is no longer undone. Web Awesome hands focus to the submenu's first item from a timer it queues when the show animation settles, and a browser may dispatch a keypress before that timer runs. So pressing `End` (or an arrow key) at that moment focused the chosen item, and the late handoff then snapped focus back to the first item. PopupMenu now keeps the keyboard or pointer choice through that handoff; a deliberate `Home` to the first item still stands (`KF-XMDR2Q`).
+- An open `PopupMenu` is now announced with a name. Web Awesome renders the `role="menu"` panel in a shadow root, and the trigger's name never reached it: a `context` menu's `label` sat only on its `aria-hidden` anchor, and no ID reference can cross into or out of the shadow roots involved. So a screen reader announced an unnamed menu, and `getByRole('menu', { name })` found nothing. The panel now takes the trigger's name (the `context` or icon-only `label`, or the visible `text`), and each submenu is named by its parent item's label (`KF-AB4ZVD`).
+- A `TabBar` with `snapTabs` no longer grows its tab strip past its allocation. The snap mode reserves end scroll room so the last tab can settle at the strip's start, and it reserved that room as end padding on the strip. A flex item can't shrink below its own padding, so room measured at one width held the strip open after the bar narrowed. This happened, for example, when a drawer opened or lost space to a neighboring panel. The strip then pushed an adjacent `trailing` action and the `end` zone out of the bar, where they could not be clicked; a twelve-tab drawer strip measured 1584px against a 1088px edge. The room is now scrollable content after the last tab, inside the strip. It lengthens only the scroll range, so the strip shrinks to its allocation and the last tab can still snap to the start. Writing the room no longer resizes the strip, so `wireTabBars` now re-measures it on the next frame until the value holds. This replaces the follow-up measurement that a resize used to trigger (`KF-3Q98FJ`).
+- In Safari, closing a `Select` inside a scrolling dialog body no longer leaves blank scroll space below the content. WebKit kept the closed listbox's last box in the body's scrollable overflow, so the body scrolled into an empty band the height of the listbox. The Select now relayouts its popup once after it closes, which keeps focus and the keyboard on the Select (`KF-C3523R`).
+- In a divided list, `ListItem`, `ListItemLink`, and `ListActionRow` corners now follow the row's position. A corner is flat wherever a divider line meets it, whether the row draws that line or its neighbor does, so with lines between rows the first row rounds only its top, middle rows are flat, and the last row rounds only its bottom. Previously each row squared only the edges it drew itself, so in a `divider="after"` list every hovered or selected row was rounded on top and flat on the bottom, including the last. A single divided row is unchanged (`KF-AQN4H7`).
+
+- A collapsible `TokenSearchField` in a `ToolbarControlGroup` with `content="search"` and `sizing="grow"` now opens and closes as one surface. The group snapped straight to its grown width (its `width: auto` cannot transition) while the field animated its own width inside it, so for about 250ms the pill showed an empty band and the query wrapped onto several lines. The group now animates its flex size, and the field fills it on every frame, laid out at least basis-wide while the group clips it. In a toolbar 480px wide or narrower, where the grown group takes its own row, and under reduced motion, both open in one frame (`KF-50K0JM`). A plain collapsible search group (no `sizing="grow"`) had the same defect in a milder form: its field ran a second width transition that lagged the group's by up to 90px, and the query wrapped onto as many as 19 lines for about 100ms. The group now owns that motion too. The field follows it on every frame and keeps the query on one line until the opening ends, then wraps normally again (`KF-CXQB30`).
+
+- A tooltip or popover outside a Web Awesome `wa-dialog` / `wa-drawer` is no longer painted beneath it. Those elements keep their modal `<dialog>` in a shadow root, which kerf's modal checks never saw: a surface opened while one was open was not lifted into the top layer, and surfaces already showing were not re-hosted above one that opened later (its `toggle` event stays inside the shadow root). kerf now also checks the open shadow roots when a surface opens, and watches them for `toggle` while any surface is open; a surface hosted inside the dialog stays where it is. A closed shadow root remains invisible (`KF-1FGTX1`).
+
+- A `ToolbarControlGroup` now dims a native button marked `aria-disabled="true"` (one kept focusable while unavailable) exactly as it dims a `disabled` one: half opacity, a `not-allowed` cursor, and no hover surface, including a lone group's whole-group hover. It used to look and hover like an enabled control. A disabled raw `wa-button` in a group also no longer paints the group's hover surface (`KF-Y3ZZ10`).
+
+- A focused `scrollable` `List` now draws the theme focus ring inset by the ring width and rounded with the standard control radius. Chromium makes a scroller without focusable rows keyboard-focusable, and a dialog may focus it first. It used to show the UA's square outline outside its box, which a rounded or `overflow: hidden` parent clipped (`KF-AJNFTT`).
+
+- Typing quickly into a `TokenSearchField` whose app commits typed grammar to chips from `onEdit` (or removes a chip from `keyboard.onRemoveToken`) no longer loses keys. The token change re-keys the editor, so the controlled render replaced the focused element, and keys typed before the app refocused it went nowhere: `site:north site:annex` became `[site:north] ite:annex`. `wireTokenSearchFields` now hands focus and caret to the replacement at the same mutation checkpoint, as it already did for Clear and native deletion. A caret at the end stays at the end, and any other caret keeps its place in the remaining text (`KF-96TEF4`).
+
+- `DialogSurface` no longer names a `wa-dialog`'s native panel when the host is itself an explicit, named dialog (`role="dialog"` or `"alertdialog"`). Both used to carry the same name, so the accessibility tree had two dialogs with one name and role queries such as Playwright's `getByRole('dialog', { name })` failed in strict mode. Removing or changing the host role restores the panel name (`KF-A0NF2S`).
+
+- A nested `PopupMenu` submenu's pointer "safe triangle" now spans the gap to the placed submenu. Web Awesome measured the submenu for that triangle before its asynchronous placement landed, so the triangle kept the submenu's pre-placement edge (often the viewport origin): its fixed, viewport-sized hit region fanned away from the submenu and could cover the parent menu's rows, swallowing their hover and clicks. PopupMenu now re-measures once the placement lands and again when the submenu's show animation settles, so applications need no `::part(submenu)::before` override (`KF-YAHAZK`).
+
+- A `scrollable` `List` bounded by a `max-height` ancestor now scrolls its rows instead of compressing them. Its children kept the default `flex-shrink: 1`, and a `ListItem` clips its own overflow, so multiline rows shrank into one another and their descriptions overlapped the next row. A scrollable List's direct children no longer shrink, and `docs/layout.md` documents bounding one with `flex` inside a max-height flex column (`KF-93GZC1`).
+
+- A `popover()`, `tooltip()`, or `openAnchoredSurface()` opened from inside a Web Awesome `wa-dialog` or `wa-drawer` is now interactive. Those elements keep their modal `<dialog>` in a shadow root, so kerf found no dialog above the slotted trigger and appended the surface to `document.body`, where the modal made it inert: it painted above the dialog, but its controls took no focus or input. kerf now resolves the modal context across shadow boundaries: a shadow host whose slot renders the trigger inside an open modal `<dialog>` counts as that dialog, and kerf creates the overlay host slot in the host's light DOM, so the surface is slotted inside the dialog. A surface inside a modal context, through its host slot or an explicit `container`, now also closes when that dialog closes. Escape still closes only the surface. `openAnchoredSurface()` accepts a `container` for any other modal context, and `openAnchoredSurfaceAt()`'s `context` resolves a `wa-dialog` / `wa-drawer` too (`KF-F52T5D`).
+
+- Re-renders of a large page whose rows come from a memoized `each()` now scale with the change instead of the row count. The change-scoped morph now also runs on renders that contain `each()` lists: a change beside the list, such as a details pane that follows the selection, is re-parsed and morphed without visiting the rows, and kerf falls back to the full diff when the change sits in the element that holds the rows. After such a render, the scan for list markers skips the bound rows. `SafeHtml` also builds its HTML string on first read instead of at construction, so each element above a list no longer copies every row's markup. A one-row selection on a 300-row memoized keyed page drops from about 3.7 ms to 0.3 ms per render in Chromium (about 29 ms to 3 ms in happy-dom). An attribute set imperatively on an element outside the changed markup now survives such a render, as it already did on list-free pages (`KF-03KWNV`).
+
+- On the same kind of page, a mount that also has a fine-grained binding outside the list (for example `class={signal}` on a page wrapper) no longer searches every row for binding markers after a render that changed the page. Rows carry only their own row-scoped markers, so kerf now skips them. A selection flip on the 300-row keyed fixture with one such binding drops from about 3.7 ms to 0.4 ms in Chromium (about 66 ms to 6 ms in happy-dom) (`KF-5S9XPH`).
+
+- `wireTabBars` no longer re-measures every tab strip after every DOM mutation in the root it watches. It used to read computed style and layout for each strip whenever anything under the root changed, such as terminal output or a list update. In Hot Sheet's terminal profile that work was the single hottest function. Now only the bars a mutation touches are re-measured: a change inside a bar, a newly inserted bar, or a `dir` change on an element above one. A strip with a pinned tab also re-measures when its own size changes (`KF-8H2MH2`).
+
+- `resource().run()` can be called inside an `effect()`. `run()` read the resource's own state through a tracking read, so an effect that re-ran a resource from an input signal subscribed to that state, wrote it, and threw `Cycle detected`. `run()` and its progress and failure paths now read the state untracked; `resource.value` stays a tracking read (`KF-H5PNHK`).
+
+- Re-renders of a large list-free page now scale with the change instead of the page. When a `mount()` render has no `each()` list and no fine-grained bindings, kerf compares the previous and next static HTML, finds the innermost element around the change whose markup parses on its own, and re-parses and morphs only that element's changed children; anything it cannot prove identical to a full diff still takes the full diff. A one-row selection on a 300-row, ~1.4 MB page drops from about 23 ms to 13.5 ms per render in Chromium. One documented behavior narrows: an attribute set imperatively on an element whose markup did not change now survives a render that changed something else, as it already did on a no-op render. The core grows by about 2 KB min+gzip (~13 KB to ~15 KB) (`KF-HA8R27`).
+
+- The morph no longer strips the defaults a custom element reflects onto its host. Web Awesome reflects `variant`, `appearance`, `size`, `attention`, and similar defaults onto `wa-button`, `wa-tag`, `wa-badge`, `wa-textarea`, and others; a template that omitted them lost them on every re-render that reached the element, and Lit put them straight back with a full update (one row selection on a 300-row page flipped 1,200 attributes). On custom elements the morph now removes an attribute the template omits only when the previous template rendered it; a template that stops rendering an attribute still removes it, and plain elements are unchanged. An attribute set imperatively on a custom element now survives re-renders (`KF-K8S4RX`). Elements kerf creates (a mount's first render, a morph insertion, a new `each()` row) start with their template's record, taken before they connect, so even the first re-render leaves their reflected defaults alone; only an element kerf did not create uses the ordinary rule on its first attribute sync (`KF-G7N4PK`).
+
+- `KUI-L017` (exceptional spacing shorthand, such as `<List gap="s" />`) now has one severity everywhere: a review finding. `eslint-plugin-kerfjs` reported it from the `error`-level `ui-css-values` rule, so a deliberate off-scale choice failed lint while `kerf-ui-analyze` queued it for review, and `kerf-ui-doctor` counted every occurrence twice (error plus review) with a `KUI-D003` conflict warning. The finding moves to a new `ui-exceptional-shorthands` rule, `warn` in both `recommended-ui` and `strict-ui`; `ui-css-values` keeps `KUI-L013`–`KUI-L016` at `error`. The doctor reads an ESLint warning for an analyzer review code as that review finding, and the analyzer's `KUI-L014`–`KUI-L017` messages now match ESLint's word for word, so the doctor merges each CSS-value finding into one diagnostic. A new `@kerfjs/ui` contract test fails if any ESLint UI rule's preset severity disagrees with the analyzer's classification of the codes it reports (`KF-P3945Y`).
+
+- `mount()` no longer walks the whole live tree for `each()` list markers after a re-render that changed the page when the render has no `each()` lists and no list is bound. A large list-free page (one `mount()` with plain `.map()`) paid a full DOM traversal per render for markers kerf never emitted (`KF-VBQJAX`).
+
+- Faster JSX attribute serialization on large pages: the runtime remembers, per attribute name, that the name passed the `on*` / malformed-name check and whether it is URL-bearing, instead of re-running those regexes for every attribute of every render, and the URL screen returns early for values without a `:` (no scheme to screen). Rejected names still throw their exact message on every render, and every URL value is still screened. Building a 300-row, ~1.4 MB list-free page drops from about 13.7 ms to 10.8 ms of CPU (`KF-VBQJAX`).
+
+- `wireScrollDividers` no longer forces a synchronous layout after a render. A content mutation used to re-measure the scrollers in the next animation frame, and a structural one at once in the mutation callback, both before the browser had laid out the new tree. Both now re-measure once the frame has laid out and before it paints: the wiring toggles an inert, zero-size probe outside the app tree, and its `ResizeObserver` reports the probe after layout. Without `ResizeObserver` the previous timing remains. In a 300-row work area, `measure` self time drops from about 408 ms to under 1 ms over 16 segment switches and 8 row selections; the layout itself now runs once, in the browser's frame (`KF-4XYQ95`).
+
+- `wireWorkbench` no longer forces a document-wide style recalculation after ordinary renders and presses. It caches each responsive panel's computed overlay state until a Workbench resize, a root font-size change, or a presentation attribute change on that panel, and its observer re-syncs only for a new Workbench, an added or removed panel, or an attribute change on a panel rather than any `data-collapsed` or `data-presentation` change below the root. In a 300-row work area with Web Awesome menus, the overlay check's forced style time drops from about 150 ms to 0 over 16 segment switches and 8 row selections (`KF-CRRD70`).
+
+- Faster `PopupMenu` and `LucideIcon` re-renders in large lists. `LucideIcon` returns the same `SafeHtml` for the same icon and props instead of rebuilding its `<svg>` every render (up to 64 prop variants per icon), and builds its child markup as a Fragment instead of wrapping joined strings in `raw()` (`KF-XW15D6`). `PopupMenu` hashes icon and details markup of 64 or more characters as a memoized digest of the whole string instead of reading every character every render. A 300-row list with a nine-entry menu per row drops from about 12.7 ms to 2.1 ms per render when the icons are rebuilt each render, and from 3.9 ms to 1.3 ms when they are prebuilt. A menu with such a part now has a different `data-key` value than before; the key is still stable across renders, and every other byte of the rendered HTML is unchanged (`KF-V2ZBHT`).
+
+- `PopupMenu` hashes its content key with a streaming `charCodeAt` loop instead of joining every field (including icon markup) into one string and iterating its code points, and caches each menu's trigger and entry markup in a bounded least-recently-used cache keyed by that hash and an independent check hash. An unchanged menu now costs one hash pass instead of rendering every entry again for the morph to skip. Rendered HTML, including the `data-key` digest, is byte-identical (`KF-GVCMC7`).
+
+- Faster attribute serialization for large static values: `LucideIcon` caches each icon node's rendered child markup by node identity, and the JSX runtime's HTML/attribute escaping skips its replace passes when a value has nothing to escape. A 138-icon render pass drops from about 0.80 ms to 0.45 ms (`KF-JPP0Z5`). `jsx()` also iterates props without the rest-spread and `Object.entries` allocations, and the URL screen checks lowercase attribute names without allocating a lowercased copy, about 25% faster for an attribute-heavy list row (`KF-YHNV84`).
+
+- `wireTokenSearchFields` collapses an empty field blurred by a pointer press in the click's own task, after the click reaches the window, instead of a separate task, so the click's render and the collapse share one style recalculation; a click that stops propagating still falls back to the next task (`KF-AS24QP`).
+
+- `wireScrollDividers` no longer re-collects pairings and re-measures every scroller for mutations that cannot change a pairing, such as a row's selection class or a list morph inside scrolled content; it still refreshes when structural elements or target ids are added, removed, re-classed, or renamed (`KF-50PA0Y`). Those content mutations instead re-measure the known scrollers once in the next animation frame, so an absolutely positioned descendant that extends the scroll area still updates its dividers (`KF-E29N3W`).
+
+- The UX Catalog filter keeps its placeholder hidden when a controlled state change rerenders the sidebar while filter text remains (`KF-4EA9R6`).
+
+- Inspector TabBars use the shared rounded rectangle radius on the strip and inset tabs while ordinary segmented TabBars retain their pill geometry (`KF-K3RDN1`).
+
+- **`KUI-L103` no longer flags a component's classes inside its own source.** `ui-public-boundaries` treats a catalog entry's `source` file as the owner of that entry's public classes, so an app component writing its own root class is not reported as recreating itself. Apps no longer need to mark those classes `placeableClasses` to silence it. Any other file, including another component's source, is still checked (`KF-G6FR6V`).
+
+### Documentation
+
+- New recipe in the `kerfjs/async` API reference: move heavy app compute (fuzzy search, CSV or markdown parsing, aggregation) into a Worker by having a `resource()` fetcher post a message to the worker and resolve with its reply. It covers request/reply ids, dropping superseded results, worker errors, transferring `ArrayBuffer`s, and keeping the render on the main thread (`KF-04KHT9`).
+
+- Clarify for AI consumers that sunken/lowered token names resolve to a translucent tint, and explain intentional nested layers versus duplicate surface paint (`KF-9CM6D8`).
+
+- **`layout.roles` vocabulary for app components.** The component-packages guide documents the eleven roles `@kerfjs/ui` uses, what each covers, and how to map application dialogs, rows, status indicators, and composed views onto them. The `kerf.components.json` schema description lists them, and the `create-kerf-component` template now uses `controls` instead of a one-off `counter` role (`KF-4E04HF`).
+
+### Removed
+
+- **Breaking (`@kerfjs/ui`, 5.0 beta):** remove the Catalog geometry highlight overlay, its `geometryOverlay` prop, `wireCatalogGeometryOverlay` helper, and specimen skip marker. Catalog previews retain their component borders, outlines, and focus states (`KF-E3WKA5`).
+
+- **Breaking (`@kerfjs/ui`, 5.0 beta):** remove the deprecated `TabScaffold` component and type aliases, `wireTabScaffold` and `WireTabScaffoldOptions`, and the `tab-scaffold`, `wire-tab-scaffold`, and `tab-scaffold.css` package subpaths. Use `TabNavigator`, `TabNavigatorTab`, `TabNavigatorProps`, `wireTabNavigator`, and their corresponding subpaths. The rendered DOM classes and data attributes remain stable. See `ui/docs/tab-navigator.md` for migration steps (`KF-CMK0W8`).
+
+### Added
+
+- `TabNavigator` takes `barPresentation: 'docked' | 'overlay'` (default `docked`). With `overlay`, the tab bar lies over the active scene on the translucent chrome material, so content scrolls visibly beneath it, as under an iOS tab bar. `wireTabNavigator` measures the live bar (bottom safe area included), and the scenes hand its height to their content as the block-end edge inset: a plain scene, a sole `Pane`, or a `NavStack` (whose own overlay bottom toolbar then sits just above the bar) rests its last item clear of it. Unselected and selected labels lift to keep AA over the material. The bar is opaque under reduced transparency, increased contrast, or without `backdrop-filter`, and paints `Canvas` with a `CanvasText` edge in forced colors. Unwired, the bar stays docked. Like the NavStack overlay bars, the tab bar ends where the active scene's classic (space-taking) scrollbar begins, so the thumb and buttons stay visible.
+- `@kerfjs/ui/wire-list-focus-scroll`'s `wireListFocusScroll(root)` brings a keyboard-focused row of a `scrollable` List fully into view, focus ring included, in every engine. Firefox's `focus()` leaves a partly hidden row alone until about half of it is hidden and then centers it, and Safari's never scrolls it, so arrow-key or Tab navigation could rest on a row that was mostly clipped. The wiring calls `scrollIntoView({ block: 'nearest' })` only when a `:focus-visible` element's ring crosses the List's clip, honoring its ring-room scroll padding; pointer focus is left alone, so a click never scrolls its row from under the pointer.
+- **`AnchoredSurface` dark tone for popups anchored to media chrome.** `openAnchoredSurface` and `openAnchoredSurfaceAt` take `tone: 'dark'`, the same loud, inverse tone as a `ToolbarControlGroup` or `ToolbarText` `tone="dark"`. A volume popup anchored to a dark media control group over a video preview is dark beside a light page and light beside a dark one, matching the group that opened it. The surface takes the opposite of its anchor's color scheme when it opens and is marked `data-tone="dark"`. Every semantic token is a `light-dark()` pair, so the content inherits the inverse text, border, and focus colors without tone props or overrides: a `ListItem` mute row and a `wa-slider` included. Measured on the catalog demo in Chromium, Firefox, and WebKit, the row label reads 12.8:1 and its focus ring 8.1:1 on a light page, and 16.8:1 and 4.0:1 on a dark one. The default tone is unchanged.
+- A floating `DialogSurface` title bar (`headerPresentation="floating"`) now draws its divider as scroll state, like an overlay `Pane` header: a 1px line along its bottom edge while the body, or a filling child that reaches beneath it (a transcript `List` or `Pane` with block-start `scrollClearance`), is scrolled away from its top, and none at rest. In light mode the title bar over white bubbles had little separation. `@kerfjs/ui/surface-scaffold/register` follows those scrollers; a nested scroller that starts below the title bar never counts.
+- **Analyzer and lint check row icon-tile colors.** Catalog `cssValueProps` paths now reach a member of an object-valued prop (`iconTile.color`) as well as each array item's member (`choices[].swatch`); a prop given a non-object value, such as a tone string `iconTile="brand"`, is skipped. `ListItem`, `ListItemLink`, and `ListActionRow` record `iconTile.color` as a color fill (`fillColor()`, `uiColor()`, `colorVar()`) and `iconTile.foreground` as a foreground (`uiColor()`, `foregroundColorVar()`, `foregroundColor()`), so the Kerf UI analyzer, `kerf-ui-doctor`, and the `kerfjs/ui-css-values` ESLint rule report `foregroundColor()` on a tile fill (`KUI-L014`) and keep accepting it as the glyph color. The catalog and composition schemas' `path` pattern accepts the same grammar, so consumer catalogs can publish object-member paths (`KF-R02RDK`).
+- **Catalog frames can be a named anchor with a centered content column.** `CatalogExample`'s `viewport` takes `anchorName`, a CSS dashed-ident (`"--app-shell-main"`) that becomes the frame's `anchor-name`, so a top-layer specimen (a `popover="manual"` request popup, say) whose own CSS sets `position-anchor` to that name positions against the frame exactly as it does against its production anchor. An invalid name throws a `TypeError`. `minHeight` adds `"app"` (592px, a floor the frame can grow past), and `contentWidth` (`"compact"` 440px, `"medium"` 640px, or `"wide"` 864px, capped at the frame) with `contentAlign` (`"start"` or `"center"`) gives each in-flow child a centered or start-aligned reading column; `[popover]` children keep their own geometry. An app no longer needs a wrapper stage element to name the anchor and center the column. The catalog's Application Layout page shows a request popup docked to the bottom of its frame (`KF-D532S2`).
+- **`fillColor()` for application fill colors.** `@kerfjs/ui/css-values` adds `fillColor(value)`, the fill twin of `foregroundColor()`: it accepts one application-chosen CSS color (`#3b82f6`, `rgb(20 40 60 / 0.8)`, `rebeccapurple`) with the same single-declaration check, but returns a plain `CssColor` rather than a `CssForegroundColor`, so a fill literal is rejected by props that paint text or an icon (`SelectChoice.color`, `LucideIcon.color`, `Text.color`, an `iconTile` `foreground`). Use it for a `ChoiceChips` `swatch` and a list row's `iconTile` `color`; every example, demo, and design template now does. A `CssForegroundColor` is still a `CssColor`, so an existing `foregroundColor()` fill keeps compiling, and the `ChoiceChips` catalog entry now records `choices[].swatch` as a color fill so the Kerf UI analyzer reports `foregroundColor()` there (`KUI-L014`) with `fillColor()` as the fix (`KF-7JA25S`).
+- **Framed result pickers without app CSS.** `List` takes `frame`, `maxHeight`, and `minHeight` (typed `CssLength`s from `@kerfjs/ui/css-values`). `frame` draws a 1px neutral border with the `--kui-radius-m` control radius and a 4px inset on every side, replacing `inset`, `textInsets`, and `controlInsets`. That inset is exactly a row's focus-ring reach, and the frame adds it to its scroll padding, so the first and last rows' rings stay inside the clip. With `scrollable`, the height bounds work without a flex-column ancestor. `<List scrollable frame gap="2xs" minHeight={rem(4.25)} maxHeight={rem(14)}>` is a bounded list of `ListItem` candidates, such as Hot Sheet's duplicate-ticket picker. The catalog's List page shows it as "Result Picker" (`KF-SHW2J9`).
+- **Transcripts scroll beneath a floating composer.** A `scrollable` `List` and a `Pane` take `scrollClearance` (`"block-start"`, `"block-end"`, or `"both"`; the `ScrollClearance` type). It clears chrome laid over the scroller's block edge inside its own scroll area: the scroller adds the inherited `--kui-scroll-clearance-block-start` / `--kui-scroll-clearance-block-end` context that the chrome publishes to its block padding and `scroll-padding`. Content then passes visibly beneath the chrome, while the first and last items, and anything focused or scrolled into view, still rest clear of it. A `DialogSurface` with `footerPresentation="floating"` publishes block-end clearance for a `fill` or `fill-last` child that opts in. That clearance is the footer's measured height plus its offset. The body stops reserving the footer below that child, so a chat transcript reaches the panel's end and scrolls beneath the transparent composer. Without the opt-in, the transcript still ends at the composer's top. Every dialog body clears clearance inherited from the page. An app that overlays its own translucent chrome on a scrolling region publishes the same context, so header clearance works today. The catalog's chat dialog now scrolls its transcript beneath the composer (`KF-ET0EX8`). `PaneConfig` carries `scrollClearance` too, so a composed Pane opts in through a Workbench `mainPane` or panel `pane`, a `CollapsiblePanel` `pane`, or a `NavStack` view's `pane`; the composites now forward every `PaneConfig` field through one exhaustively typed helper, so a new field can no longer be silently dropped (`KF-574HQV`).
+- **Translucent overlay Pane headers.** `Pane` takes `headerPresentation` (`"docked"`, the default, or `"overlay"`; the `PaneHeaderPresentation` type, also in `PaneConfig`). An overlay header is laid over the top of the scrolling content on the new chrome material. The material is `--kui-chrome-material`, the surface at 80% opacity, behind `--kui-chrome-material-filter`, a blur and saturation backdrop filter, so content scrolls visibly beneath the header. `wireScrollDividers` measures each overlay header with a `ResizeObserver` and publishes its height on the Pane as `--kui-scroll-clearance-block-start`. The Pane's content clears that automatically, so the first item rests just below the header and anything scrolled into view stays clear of it. The clearance follows the header as its title wraps or its text grows. Until the wiring runs, and with `chromePlacement="auto"`, the header stays docked. The material turns opaque under `prefers-reduced-transparency: reduce` or `prefers-contrast: more`, and without `backdrop-filter`. In forced colors the header paints `Canvas` with a `CanvasText` edge. Normal text keeps WCAG AA over any content beneath the material. Quiet text does not, so overlay-header text uses the normal text color (`ui/docs/accessibility.md` "Chrome material"). The catalog's Pane page shows an inbox scrolling beneath its header (`KF-DT6C3F`).
+- **Translucent dialog title bars.** `DialogSurface` takes `headerPresentation` (`"docked"`, the default, or `"floating"`; the `DialogSurfaceHeaderPresentation` type). A floating header lies over the body's block start on `--kui-chrome-material-raised`, a new token for chrome on a raised surface: the raised panel color at 80% opacity behind `--kui-chrome-material-filter`. The `surface-scaffold/register` import now measures the header as well as the footer, and the body reserves the header's height before its own inset, with matching scroll padding, so flowing content starts below the title bar and scrolls beneath it. Without the register, the header stays docked. When the body's only child fills it and opts into block-start `scrollClearance`, the body publishes the header's height as `--kui-scroll-clearance-block-start` instead. With a floating composer and `scrollClearance="both"`, a transcript then scrolls beneath both the title bar and the composer while its first and last messages rest clear of them. The material has the same opaque fallbacks as the Pane overlay header, and normal text keeps WCAG AA over any content beneath it. An untoned `ToolbarText` slotted as the dialog's label (or into its header actions) takes the same AA lift it gets in an overlay Pane header: a normal-color title and a description mixed halfway toward it. The catalog's surface scaffold page adds a "Floating Title Bar" thread dialog (`KF-REH2T2`).
+- **Translucent NavStack top bar.** `NavStack` takes `chromePresentation` (`"docked"`, the default, or `"overlay"`; the `NavStackChromePresentation` type). An overlay top chrome lies over the active view on the same chrome material as an overlay Pane header, so content scrolls visibly beneath it, as under an iOS navigation bar. `wireNavStack` measures the live chrome (never a cross-fading copy) with a `ResizeObserver`, publishes its height on the stack root with a `data-chrome-overlay="measured"` gate, and restores both before paint if a re-render strips them. The measured height, top safe area included, becomes the viewport's block-start edge inset, so a plain view, a sole `Pane`, or a nested layout clears the bar automatically: the first item rests just below it, and focused or scrolled-to content stops clear of it. A classic, space-taking scrollbar in the active view stays uncovered: the chrome ends where its track begins. Unwired, or with `hideToolbar`, the chrome stays docked. The material keeps its opaque fallbacks (reduced transparency, increased contrast, no `backdrop-filter`) and its forced-colors edge, and an untoned `ToolbarText` in the chrome lifts its title and description to AA exactly as in an overlay Pane header. `SplitView` forwards the option through `compactStack`, and a Workbench navigation panel through `navStack`. The catalog's NavStack page adds an **Overlay Chrome** example; `ui/tests/browser/overlay-nav-stack.spec.ts` covers it in Chromium, Firefox, and WebKit.
+- **Translucent NavStack bottom toolbar.** `NavStack` takes `bottomToolbarPresentation` (`"docked"`, the default, or `"overlay"`; the `NavStackBottomToolbarPresentation` type), a separate prop from `chromePresentation`, which keeps governing only the top chrome. An overlay bottom toolbar lies over the active view's bottom edge on the same chrome material, as an iOS toolbar does. `wireNavStack` measures the live toolbar (never a cross-fading copy), publishes its height with a `data-bottom-toolbar-overlay="measured"` gate, and the measured height, bottom safe area included, becomes the views' block-end edge inset: a plain view's or a sole `Pane`'s last item (or the Pane's footer) rests just above the toolbar while content scrolls visibly beneath it, and the toolbar's scroll divider keeps working. Unwired, or while no bottom toolbar is shown, it stays docked; inside a `TabNavigator` scene it sits just above the tab bar. It keeps the material's opaque fallbacks, and in forced colors its top border becomes a `CanvasText` edge. A default-tone `ToolbarControlGroup` in either overlaid bar now lifts its controls to the normal text color, so they keep AA over the content beneath (the top chrome's back control measured about 3.0:1 before). A non-scrolling `List` directly in a `Pane`'s content no longer shrinks below its rows, so the content's block-end padding (a bottom safe area or the toolbar's clearance) follows the last row. `SplitView` forwards the option through `compactStack`, and a Workbench navigation panel through `navStack`. The catalog's **Overlay Chrome** example now overlays both bars; `ui/tests/browser/overlay-nav-stack-bottom.spec.ts` covers it in Chromium, Firefox, and WebKit.
+
+- **Anchored surfaces fit beside their anchor.** `positionAnchored()` / `autoReposition()` (and so `popover()` and `tooltip()`) take `viewportMargin`, a gutter in px that the horizontal clamp and the vertical fit test keep from the viewport edges (default `0`, the bare edge as before), and `fitHeight` for an element that scrolls its overflow: when neither side has room for its full height it opens on the roomier side, and every placement publishes that room as the `--kerf-anchor-available-height` custom property on the element, so CSS can cap it (`max-height: var(--kerf-anchor-available-height); overflow: auto`). Scrolling inside the element keeps its scroll position. Without the new options placement is unchanged. `@kerfjs/ui`'s `openAnchoredSurface()` uses both: the surface stays 8px inside the viewport (`viewportMargin` overrides it), caps its height to the room beside its anchor, scrolls its content, and exposes that room to its content as `--kui-anchored-surface-available-height`, refreshed on scroll and resize, so a tall help surface fits beside a field on a phone with no application media queries (`KF-K4GE6K`).
+
+- **Stateful `TokenSearchField` trailing action.** `trailingAction` now takes `expanded` (a disclosure such as a help toggle; renders `aria-expanded`) or `pressed` (a toggle; renders `aria-pressed`), which are mutually exclusive at compile time, plus `controls` (`aria-controls`), `haspopup` (`aria-haspopup`), and `attributes` for domain `data-*` metadata (the field keeps `data-action`). An open or pressed button keeps its hover fill and reads at full text strength. In the `toolbar-group` presentation it now takes the clear button's control-highlight radius, so the compact 24px help glyph beside the clear button matches it in every presentation with no application CSS. The catalog's Structured Ticket Search help toggle opens syntax help in an `openAnchoredSurface` (`KF-R056AJ`).
+
+- **Link `Chip` for downloadable files.** `Chip` takes an `href`, with an optional `download` (`true` or a suggested file name) and `external` (new tab, `rel="noopener noreferrer"`, and an "(opens in new tab)" accessible-name suffix, as on `ListItemLink`). It then renders a native `<a>` with the chip's geometry, icon slot, truncation, focus ring, and hover feedback, so an app no longer styles its own file-link chips. A link chip cannot also carry a remove button, and a disabled one drops its destination and leaves the tab order. The new `inherit` tone (`ChipTone`) follows the surrounding foreground, for a chip inside a `brand-loud` or `neutral` `ContentItem` bubble. It draws a currentColor border and no fill, so the label keeps the bubble's text contrast, and its focus ring follows the foreground too. The Chip catalog shows file chips in both bubble kinds (`KF-H658D6`).
+
+- **Multi-select `ChoiceChips`.** Set `multiple` with a `readonly Value[]` `value` and the same wrapping pills, swatches, and icons become native checkboxes in a named `role="group"`: each pill is its own Tab stop, Space toggles it, assistive technology reads its native checked state, and every checked value submits under `name` (`FormData.getAll(name)`). The props are a discriminated union, so a multiple group rejects a single value (and a single group an array), and a multiple group takes no `required`. Every chip color is a theme token, so on dark inverse chrome, such as a media viewer's annotation intents, place the chips in a dark appearance scope (`.wa-dark`) rather than restyling them. The UX catalog adds Multiple Selection and On Dark Chrome examples, and the design templates add a Multiple Selection variant.
+- `ListItem`, `ListItemLink`, and `ListActionRow` take an `iconTile` prop that presents the leading icon in a filled 32px rounded tile holding an 18px glyph, for settings and command rows identified by color. Pass a tone (`neutral`, `brand`, `success`, `warning`, or `danger`, the same quiet palette as `ToolbarControlGroup.tileTone`) or `{ color, foreground? }` with a typed `CssColor` fill (`uiColor()`, `colorVar()`, or `foregroundColor('#e5484d')`) and an optional `CssForegroundColor` glyph; without a foreground, the glyph is black or white, whichever contrasts with the fill. The tile keeps 6px clear of a standard 44px row, a compact row is at least 42px tall, the label moves to the tile's edge, and hover and selection leave the tile's colors alone.
+
+- **A chat composer without app chrome.** The new `Composer` (`@kerfjs/ui/composer`) is a raised frame (the standard border, large radius, and `shadow-l`) whose border turns brand while focus is within. It holds a borderless textarea that grows with `field-sizing: content` between `minRows` (default 1) and `maxRows` (default 8) lines and then scrolls. Below the textarea sits an action row with an optional quiet `hint`, which describes the field when you pass an `id`, and the trailing `actions` (a Send button). Engines without `field-sizing` show a fixed three-line field that scrolls. Slot it into a `DialogSurface` floating footer to float it over a transcript; the catalog's chat dialog now does (`KF-S5EG5K`).
+- **Enter-to-send for `Composer`.** Set `submitOnEnter` and call `wireComposers(root)` (`@kerfjs/ui/wire-composers`) once: Enter, or Cmd/Ctrl+Enter, in the field clicks the composer's first trailing action, so a keyboard send runs the same delegated `data-action` handler as a click. Shift+Enter still inserts a newline. An Enter that commits an IME composition (`isComposing`, keyCode 229, or between `compositionstart` and `compositionend`) is left to the input method, and an empty or whitespace-only message, an auto-repeating key, a disabled field, or a disabled or loading action sends nothing. The field announces the shortcut with `aria-keyshortcuts="Enter"`. The catalog's Composer and chat dialog examples use it (`KF-DGD5QS`).
+- `PopoverDialogSurface` takes an optional `describedBy` id, rendered as `aria-describedby` on its `role="dialog"` root. Pair it with a title `ToolbarText`'s `descriptionId` so a non-modal dialog keeps its accessible description; `rootAttributes` accepts only `data-*` attributes, so there was no way to set it before. `DialogSurface` is unchanged, because it wraps a `wa-dialog` that the app authors and does not render the dialog root itself (`KF-SKVEQW`).
+- A compact `ListActionRow` is 36px tall, as documented, instead of 44px. Its label kept the standard row's minimum height and its primary button kept the standard 8px block padding, so `density="compact"` had no effect on a single-line row. Compact rows now use 4px block padding like a compact `ListItem`, so the two row kinds stay level in a dense list; a compact row with an `iconTile` is exactly 42px. The ListActionRow catalog adds a Compact Rows example (`KF-4Q5MJ5`).
+- `ListActionRow` leading icons default to 18px (they were 24px), the same size as `ListItem` icons, so a `List` that mixes the two row kinds starts their labels on one edge, not 6px apart. Both read a new shared `--kui-list-row-icon-size`: set it on a containing `List` to resize both row kinds' untiled icons together. `--kui-list-item-icon-size` still wins for `ListItem` rows that set it, and an `iconTile` keeps its 32px tile and 18px glyph. An app that wants the old 24px `ListActionRow` glyphs sets `--kui-list-row-icon-size: 24px` on the list (`KF-KWFMM1`).
+- `ListItem` and `ListActionRow` share one leading inline inset. Set `--kui-list-row-padding-inline` on a containing `List` and both row kinds move their content and reorder insertion lines together; a `ListActionRow` adds the 1px a `ListItem` border takes, so their leading icons stay on one edge at any value. It defaults to `--kui-layout-item-padding`, so unset lists render as before. Previously only `ListItem` had an inline padding token, and overriding it moved `ListItem` icons away from `ListActionRow` icons in the same list. `--kui-list-item-padding-inline` still wins for `ListItem` rows that set it. The List catalog's new Shared Row Inset example shows mixed rows on a customized inset (`KF-N3TDV3`).
+- `@kerfjs/ui` now has one capitalization rule for interface copy, taken from Apple's guidance and documented in the new `ui/docs/writing.md`. Text that names a command, control, view, or field is title style ("Save Draft", "Back to Inbox", "Workspace Settings"): buttons, menu items, segments, `Select` choices, tabs, titles, `ListHeader` labels, and field labels. Text that describes, explains, or reports is sentence style: descriptions, messages, tooltips, placeholders, option text, and status lines. The AI skill, `llms.txt`, and the design docs carry the rule. `kerf-ui-doctor` reports a lowercase word in a known title-style label as the warning `KUI-D040`, with the repaired label. The catalog demos, recipes, and design templates now follow the rule (`KF-6VWSV4`).
+- **Chat-style dialogs without `::part()` rules.** `DialogSurface` gains `footerPresentation="floating"`, which lays the footer over the body's block end, a typed `footerOffset` from the panel's inline and block-end edges (default the 16px container inset), on a transparent background. The `surface-scaffold/register` import measures the footer, and the body reserves that height plus the offset, so a growing composer never hides the transcript's last message. `bodyLayout="fill-last"` (also on `PopoverDialogSurface`) keeps the body's leading children at their natural height and gives the last child the remaining height and its own scrolling: a notice above a scrolling transcript. The catalog's new chat dialog example composes both (`KF-913AT2`).
+- `@kerfjs/ui`'s title-style rule now reaches the names the doctor could not see. `TokenSearchField`'s default `clearLabel` is `Clear Search` (it was `Clear search`); a test or app that addresses the clear control by its default accessible name needs the new spelling, and `clearLabel` still overrides it. The catalog shell (`Filter Catalog`, `Clear Filter`, `Reduce Motion`, `Vertical Stripes`, `Layout Guide`, `Related Entries`, `Capture Region`, the `Demo Source` / `Component Source` / `Design Template` / `Integration Guidance` resource links, and the `Used By` related group), the catalog entry names that render as page titles (`Foundation Tokens`, `Surface Scaffolds`, `List Workspace States`, …), and the demos' and recipes' accessible region, control, field, dialog, tab, and list-item names are title style. `kerf-ui-doctor`'s `KUI-D040` now also reads the accessible names of icon-only controls: `IconButton` / `IconToggleButton` / `PopupMenu` `label`, `SplitButton` `optionsLabel`, `TokenSearchField` `clearLabel`, and the `aria-label` of a `button` or `wa-button` whose only content is an icon (`KF-ZAD6EJ`).
+- `@kerfjs/ui` catalog example and stack labels are headings, so they now use title style across every UX-demo page ("Heading Identity Stays Whole", "Icon Trigger in a Toolbar Group"); their notes stay sentence style. Demo content item titles ("Build Output", "Work Area") follow, with mirrored `ariaLabel`s. `kerf-ui-doctor`'s `KUI-D040` now reads `CatalogExample` and `CatalogExampleStack` `label`, and keeps a minor word inside a longer hyphenated compound lowercase ("Edge-to-Edge"). A test that addresses a demo specimen by its region name needs the new spelling (`KF-4TXTVV`).
+- A labelled `CatalogExample` now names its `section` with its label, so each specimen is a named region that assistive technology and `getByRole('region', { name })` can address. An unlabeled example stays an ordinary grouping (`KF-ZQMXK1`).
+- `CatalogExampleStack` takes a `width` option: `reading` (default) keeps the 736px reading measure, and `full` lets the stack span the stage so a catalog can show application-width compositions such as boards, app shells, drawers, and split views without clipping them (`KF-HKVT5S`).
+- `CatalogExample` `viewport.width` takes `sidebar`: a 272px production-rail width, capped at the stage, so sidebar-pane specimens render at their real width without a wrapper (`KF-DH5MH8`).
+- In a `PopupMenu` level (the top menu or one submenu) that holds a checkbox choice, plain commands now reserve the check column too, so check, icon, and label columns line up across checked, unchecked, and plain rows; a level without a choice keeps the compact start. Submenu checkbox rows drop an extra 1em label inset, so their icon-to-label gap matches the top level (`KF-31QHPE`).
+- Hovering a selected (`aria-current`) or pressed `ListItem` likewise keeps its selected tint instead of the neutral hover colors (`KF-84AGE5`).
+- Hovering a selected or pressed `ListActionRow` keeps its selected tint instead of switching to the neutral hover colors, so a freshly selected row no longer looks unselected while the pointer stays on it (`KF-Z737D0`).
+- A `width="full"` `CatalogExampleStack` now spans the whole catalog stage on wide screens; the stage's 1120px canvas cap no longer stops it short of the right edge (`KF-WDSFWH`).
+- **Chat-bubble `ContentItem`s.** `bubble="start" | "end"` lays a `ContentItem` out as a transcript bubble: it fits its message up to 80% of the row, sits at the start (other participants) or end (the person's own messages), and wraps long unbroken text. The new `appearance="brand-loud"` paints the solid brand fill with its on-loud foreground for the person's own messages (`KF-M3HJK8`).
+
+- **`DialogSurface rootAttributes`.** `DialogSurface` takes safe `data-*` `rootAttributes`, such as a `data-key`, on its root; its own configuration attributes stay protected. Sibling dialogs that render conditionally then morph by identity rather than by position. Before, a re-render could reuse one open dialog's element for another, swapping its accessible name and suppressing `wa-after-hide`. Apps no longer wrap each dialog in a keyed `div` (`KF-D7H0WN`).
+
+- **Heading supporting text.** A read-only `ToolbarText` takes `description`: quiet, single-line, truncating copy under the title ("Changes save automatically."). It starts at the title's text whether or not a leading icon group is present, and shares the control band so trailing actions stay aligned. `descriptionId` gives it an id for `aria-describedby`. With a description, `id` and `headingLevel` apply to the title span alone, so `aria-labelledby` names only the title. Apps no longer recompute the title inset from toolbar tokens (`KF-DXVMBN`).
+
+- **Drag-to-reorder list rows in `@kerfjs/ui`.** `ListItem`, `ListItemLink`, and `ListActionRow` take `draggable`, `dragging`, and `dropPosition: 'before' | 'after'`: a draggable row is a native HTML drag source (never while it is a loading placeholder), a dragging row dims, and a drop position draws a 2px brand insertion line on that edge of the row (`--kui-list-item-drop-indicator` / `--kui-list-action-row-drop-indicator` and matching width and dragging-opacity tokens; system `Highlight` in forced colors). The new `@kerfjs/ui/wire-list-reorder` subpath adds `wireListReorder(root, { onReorder })`, which paints those states during a pointer drag, moves rows with Alt+Shift+ArrowUp/ArrowDown and restores focus after the re-render, and reports `{ listId, sourceIds, target: { id, position }, source }`; dragging a selected or pressed row moves every selected row of its `List`. `reorderListItems` applies the change to an array. Apps no longer hand-style dragged rows and insertion lines (`KF-HWYE11`).
+
+- **Compact `Toolbar` density.** `Toolbar density="compact"` makes a 40px header for a panel embedded in a card or inspector: a 34px control band (the compact `ToolbarControlGroup` size) with 3px block insets, keeping the 8px inline insets and zone gap. Fill it with `size="compact"` groups. `--kui-toolbar-inset` still overrides the block inset Composite toolbars forward `density` from their `ToolbarConfig` (Workbench panel, main, and bottom toolbars, CollapsiblePanel, NavStack, SplitView) and size the groups they compose (panel and relocated toggles, the back button) to match; `CollapsiblePanelRelocated` takes `density` for its destination toolbar (`KF-0QDF0V`, `KF-QPSTTA`).
+
+- **`ChoiceChips` for a wrapping exclusive choice.** `@kerfjs/ui/choice-chips` renders one choice from a visible set too large for a `SegmentedControl` track, such as a nine-color palette in a 560px dialog, as separate pills that wrap with the standard 8px gap at any width. Each pill is backed by a native radio in a named `role="radiogroup"`, so the group is one Tab stop, arrow keys move the selection, and the checked radio submits under `name`. A choice may lead with a `swatch` (a `CssColor`, or `'transparent'` for an outlined dot struck through diagonally) or a decorative `icon`; the group takes `label` or `labelledBy`, a controlled `value`, a delegated `action` for `change`, `size="compact"`, `required`, and group or per-choice `disabled`. Use it instead of wrapping a segmented control or button-appearance `wa-radio` set, whose joined borders turn ragged across rows (`KF-EJPYWD`).
+
+- **Viewport-locked app root.** In the opt-in `@kerfjs/ui/document.css` baseline, `data-viewport="locked"` on a body-child `.kui-app-root` gives `html`, `body`, and the root `height: 100dvh` and `overflow: clip`. Mobile browser toolbars can then never leave the root taller than the visible area, and the document itself never scrolls; only the shell's panes do. `docs/document-baseline.md` covers the on-screen keyboard (`KF-1XNQYP`).
+
+- **Semantic cursors in `document.css`.** The opt-in `@kerfjs/ui/document.css` baseline now gives native controls semantic cursors with zero specificity: `pointer` on enabled buttons, links, `role="button"`, `summary`, selects, checkbox/radio/button-type inputs, and labels around checkboxes or radios; `not-allowed` on disabled controls, `aria-disabled` role buttons, and a disabled `wa-button`'s `base` part (Web Awesome 3.12 leaves a pointer there); and `text` on text-like inputs and textareas. Components and applications keep their own cursors (`KF-C336VV`).
+
+- **`Badge maxWidth`.** A text `Badge` takes `maxWidth` (a `CssLength`). Longer text truncates with an ellipsis inside a new `kui-badge__label`, the badge may shrink below the cap in a tight row, and string or number content becomes the native `title` tooltip unless `title` is supplied (`KF-0WKZY2`).
+
+- **`Text align`.** `Text` takes `align="start" | "center" | "end"` (default `start`), so centered status copy that wraps in a narrow surface, or an end-aligned value, uses `Text` directly instead of an app rule on `.kui-text`. Start and middle truncation align their single line to match (`KF-MMAWEG`).
+
+- **`SummaryRow`.** `@kerfjs/ui/summary-row` is a selectable, focusable summary of one item (`role="option"`) as a list `row` (bottom divider, `listEdge` rounding for rounded sections) or a board `card`. It has a leading glyph, a semantic `rail`, an identity `title` clamped to `titleLines` (two for rows, four for cards) with `trailingMeta` floated at its end, and a wrapping `metadata` line. Kerf owns hover, focus, `selected`, `dimmed`, narrow compaction, and optional `deferRendering` for long lists (`KF-XCFMX8`).
+- **`Combobox`.** `@kerfjs/ui/combobox` is a free-text field with filtered suggestions that can also create a new value (tags, labels): a native input with the themed field chrome and a 16px font floor on touch devices, on the ARIA combobox pattern (`role="combobox"`, `aria-activedescendant`, a listbox of options). `wireComboboxes(root, { onCommit })` from `@kerfjs/ui/wire-comboboxes` filters as people type, moves the active option with the arrow keys, and reports `{ id, value, created, input }` on Enter, a comma, or a click; `createLabel={false}` allows only suggestions (`KF-XDVAMR`).
+- **File picking and dropping.** `@kerfjs/ui/file-picker` adds `FilePickerTrigger` (a compact, link-toned browse control) and `FileDropZone` (a dashed target that also opens the chooser), both around visually hidden native file inputs with visible focus rings. `wireFilePickers(root, { onFiles })` from `@kerfjs/ui/wire-file-pickers` reports browsed and dropped files, filters drops by `accept` (exported as `fileMatchesAccept`), marks a zone `data-dragging` while files are over it, and resets the input so the same file can be chosen again (`KF-RDV6V9`).
+- **`ContentSwap`.** `@kerfjs/ui/content-swap` swaps two contents in one shared cell (a dialog's two steps, a footer's changing actions) with a `push` (forward or backward, mirrored in right-to-left documents), a `crossfade`, or no motion. Kerf owns the keyframes, the reduced-motion fade, and the inactive side's `inert` and `aria-hidden`; `label` makes it a named region and `slot`/`fill` place it in a dialog label or footer (`KF-V7MZY9`).
+- **`ColumnTrack` for boards.** `@kerfjs/ui/column-track` is a horizontal scroll owner for columns that share the width equally but never narrow below `minColumnWidth` (250px), so a narrow board scrolls instead of crushing them. `layout="paged"` shows one near-full-width column per page with a `peek` of the next, mandatory start snapping, a hidden scrollbar, and smooth scrolling unless reduced motion is preferred (`KF-9WEWRF`).
+- **`EdgeActivityIndicator`.** `@kerfjs/ui/edge-activity-indicator` is a layout-free, pointer-inert activity strip pinned below the top safe area (or flush). While `busy` its thin bars ripple in a traveling wave, drawn by one gradient and an animated mask with no per-bar elements or resize script, and an optional `message` hangs from the edge as a polite status pill. It takes a semantic `tone`, scales in from the edge, and only fades under reduced motion (`KF-CS729Y`).
+- **`ValueTable` layout props.** `labelWidth` (a typed length) gives labels a minimum column and the value the rest of the row; `presentation="stacked"` puts each value under its label, starting at the label's text; and `stackBelow="compact" | "narrow"` stacks only while the table itself is narrower than 512px or 576px (a stacking table fills its container's width). Apps no longer override `--kui-value-table-row-columns` and the row gap/padding tokens for this (`KF-BTMDH5`).
+- **`SplitButton`.** `@kerfjs/ui/split-button` renders a primary action and an attached options trigger on one loud semantic fill (`tone`: brand, neutral, success, warning, danger) with `fill` for full width, `busy` (a spinner and `aria-busy`), and separate `disabled`/`optionsDisabled`. Both halves are native buttons, so the options trigger's `aria-expanded`, `aria-haspopup`, and name reach assistive technology, which a `wa-button-group` could not (`KF-KFC7C2`).
+- **`IconToggleButton` for standalone icon toggles.** `@kerfjs/ui/icon-toggle-button` renders a native `aria-pressed` button with a single contained `ToolbarControlGroup`'s 44px geometry and raised pressed face (pill or rounded), for content and pane footers where a `Toolbar` does not belong and `ToolbarControlGroup`'s toolbar-parent rule (`KUI-L201`) applies. Its required `label` names it and, with help tags registered, shows on hover and focus (`KF-HBWDHE`).
+- **Selected-chrome opt-out for icon-state toggles.** `ToolbarControlGroup` `selectedChrome="none"` keeps pressed controls looking like their neighbors, and `data-selected-chrome="none"` on one button opts out just that control, for a toggle whose glyph already shows its state (an empty or filled star). Hover and focus treatment are unchanged (`KF-GGDABA`).
+- **`FramedList` for inset-grouped rows.** `@kerfjs/ui/framed-list` draws `ValueTable`'s rounded, bordered frame (lowered or base surface) around `FramedListRow`s of arbitrary content, with each row owning its 8px inset, a 44px minimum height, the inset divider above it, and an optional `highlighted` tint. Settings, account, and shortcut lists no longer need a hand-rolled `ul` stylesheet (`KF-2HB7RT`).
+- **ARIA root attributes and a document inset for `List`/`Row`.** `rootAttributes` on a `List` or `Row` now also accepts `aria-*` attributes and a structural `role` (`region`, `group`, `list`, `status`, landmarks, …), so a labeled drop-target region or an `aria-busy` stack needs no wrapper; widget roles are dropped, and a multi-select List keeps owning its grid role and name. `List` `inset="document"` adds a reading inset (24px block, 32px inline, 16px inline below 576px) for reader views (`KF-DNZJCG`).
+- **`Badge` icon, title, and identity.** A text `Badge` takes a decorative leading `icon` (4px before its text, like `Chip`), and every Badge takes a `title` tooltip and safe `data-*` `rootAttributes`, so apps no longer wrap a Badge for status identity or nest a `Row` inside it for icon spacing. A text Badge with a `label` is now a labeled image (`role="img"`), so that name is actually exposed in place of its abbreviated visible text (`KF-2YKKK5`).
+- **`IconButton` for icon-only Lucide buttons.** Web Awesome gives a `wa-button` its square icon-button geometry only when its label holds a lone `wa-icon`, so a button whose only child was a `LucideIcon` kept text-button padding and did not match an adjacent field. `IconButton` (`@kerfjs/ui/icon-button`) renders a `wa-button` with a `LucideIcon` as a square one form-control height on each side, takes a required `label` that names it, and keeps that square beside a field in a `ListInsetControl` (`KF-1315VN`).
+- **`List` surface.** `surface="base"` or `"raised"` paints `--kui-color-surface` or `--kui-color-surface-raised` behind a List and its insets, so a banner strip above a sunken work area no longer needs an app wrapper whose only CSS is a background. A lowered region remains a `SunkenPanel` (`KF-ZKYYH1`).
+- **`CornerStatus` for non-dismissible app-level progress.** The new `@kerfjs/ui/corner-status` component hosts one or more `StateBanner`s at a viewport corner (`placement`: `bottom-end` by default, `bottom-start`, `top-end`, or `top-start`, RTL-aware) with a 16px gutter plus device safe-area insets. It is a native `popover="manual"` in the top layer, so it sits above fixed and z-indexed page chrome, and it has no close button, light dismiss, Escape handling, or focus change. `wireCornerStatus` (`@kerfjs/ui/wire-corner-status`) opens each host as renders insert it; the app removes the host when the work ends. Inside it, a banner drops its inline margin, gains elevation, and paints its tone fill over the opaque surface. `presentation="embedded"` renders the same stack in flow. This replaces fixed-position app CSS around a `StateBanner` and hiding a toast's close button (`KF-PZCPHQ`).
+- **`StateBanner` strip presentation.** `presentation="strip"` renders a full-width status band for a layout edge, such as above a workspace: flush (no inline margin), square, with its copy on the shared content-text column and only tone-colored `dividerSides` edges (bottom by default; `''` draws none). Apps no longer zero the card's margin, radius, padding, and border tokens and draw their own per-tone rule. The default `card` presentation is unchanged (`KF-JQ8FB0`).
+- **Dialogs that fill, and a non-modal dialog surface.**
+  - `DialogSurface` gains `height`: a definite modal height bounded by the dynamic viewport minus both gutters, like `maxHeight`. It also gains `bodyLayout="fill"`, which gives the body's whole height to one child (a `SplitView` or `Pane`) that owns its scrolling.
+  - The new `PopoverDialogSurface` in `@kerfjs/ui/surface-scaffold` is the non-modal counterpart. It is a native `popover="auto"` `role="dialog"` section that light-dismisses on Escape or an outside press and leaves the page interactive.
+  - It owns Kerf's dialog chrome and takes the same `size` / `preferredWidth` / `viewportGutter` / `height` / `maxHeight` / `bodyLayout` props, and it centers in the top layer whatever alignment its host sets. `presentation="embedded"` renders it in flow for catalogs and inline previews.
+  - Apps no longer hand-build popovers with their own chrome, viewport math, `:popover-open` grid, and embedded resets (`KF-XHECB9`).
+
+- **Sunken surfaces have a fine grain texture.** Every sunken surface paints the new `--kui-sunken-surface`: a seeded 100px monochrome Gaussian grain tile at 4% maximum opacity, over the lowered color. That covers `SunkenPanel`, sunken `Pane`, Workbench regions, TabNavigator scenes, Web Awesome `appearance="sunken"`, and the catalog's lowered specimen viewport. The tile is generated once per page at runtime by the first sunken surface that renders, so no asset ships. `ensureSunkenTexture()` (exported from `@kerfjs/ui` and `@kerfjs/ui/sunken-panel`) covers pages with only Web Awesome sunken surfaces. Set `--kui-sunken-texture: none` at `:root` for the previous flat surface. An app's `--kui-sunken-panel-background` / `--kui-wa-sunken-background` override still wins (`KF-GMAK3H`).
+
+- **Required wiring can be root-delegated actions.** Composition catalogs and `kerf.components.json` accept `wiring.actions`, the `data-action` values the app must handle with its own root `delegate()` / `delegateActions()` listener. Required wiring now names at least one helper _or_ action, so an app no longer has to mark such wiring `required: false` and weaken the check. `eslint-plugin-kerfjs`'s `ui-wiring` reports each unhandled action as `KUI-L401`. An action counts as handled when a reachable module imports a Kerf delegation API and names it as a string, selector, or table key. Comments and the component's own source do not count (`KF-AF5KD5`).
+
+- **`kerf.components.json` declares where app-owned wiring helpers live.** `composition.wiring.sources` lists each application helper's `{ export, source }`. The generator verifies that the helper is in `helpers`, that the file exists, and that the file exports it. `ui-wiring` then resolves the app's relative imports of that helper, so page-root wiring with helpers such as `wireTicketSearchFields` no longer raises `KUI-L401`. `composition.wiring.scope` (`application` or `module`) is now authorable too. Both fields were previously expressible only in a hand-written catalog (`KF-YZE3DP`).
+
+- **`kerf.components.json` zones can name their JSX prop.** A zone may declare `jsx: { prop }` (`children` for the default slot). The prop must be unique per component, and the generated composition catalog keeps it, so `ui-composition` maps a prop's value to its zone exactly as it does for `@kerfjs/ui`'s own catalog (`KF-99Z95S`).
+
+- **Context `PopupMenu` owns its anchor.** A context-mode menu takes an `anchor: { x, y }` prop in viewport pixels and renders the point into its own template, so the point survives re-renders and a menu rebuilt with changed items. Open it with the new `openPopupMenu(menu)`; `openPopupMenuAt` still works for menus without `anchor`. The menu's root is now out of flow (`position: fixed`, 0×0). Previously its 0×0 `inline-block` added a line box in block layout and an extra gap slot in a flex row. Apps no longer need a fixed, 1px, z-indexed wrapper, and no z-index is needed because the open menu is in the top layer (`KF-FXGW0C`).
+
+- **`SplitView` `listWidth`.** Size the fixed list column with a prop instead of a raw token: a number of CSS pixels, or `{ size, maxFraction }` to cap it at that share of the split's own width (`{ size: 432, maxFraction: 0.5 }` is 432px until the split is narrower than 864px). A narrow dialog then always leaves the detail in view. It is validated, and it throws when combined with `resizable`, which already sizes the list. The guide now states, and browser tests pin, that a SplitView fills any container with a definite height: a block box, a fixed-size popover, a flex column below a header, or a grid. Apps do not need a `display: grid` / `minmax(0, 1fr)` wrapper (`KF-7R5NWM`).
+
+- **`Text` truncates at the start or in the middle.** With `wrap="truncate"`, the new `truncate` prop places the ellipsis at the `end` (default), the `start` (keeping the tail, for branch names), or the `middle` (keeping a suffix, for file paths). `truncateKeep` chooses that suffix: the last path segment (default) or a number of trailing characters. Start truncation uses an isolated left-to-right run instead of a bare `direction: rtl`, so punctuation stays in place. Both positions keep the whole value in the DOM and show it as the `title` unless the app sets one. Apps no longer need split spans or rtl CSS for this (`KF-XYA6VR`).
+
+- **A trailing overflow menu for `ListActionRow`.** Pass `trailingMenu: { label, icon, items, placement?, disabled? }` instead of the `trailingAction*` props and the row renders a real `PopupMenu` (icon-only, no caret, opening `bottom-end` by default) as its sibling trailing control, so a command row with a "…" menu of Edit and Delete no longer needs a control inside dormant content or an override. The types accept exactly one trailing control. `trailingActionVisibility="interaction"` reveals the menu trigger on hover or focus and keeps it visible while the menu is open; a placeholder row disables it. `openPopupMenuAt` now also opens a button-triggered `PopupMenu` at a pointer position: for that opening the menu anchors at the point and opens `bottom-start`, then returns to its trigger and placement once it closes. A row can therefore open its trailing menu from its own `contextmenu` handler (`KF-VWTCYB`).
+
+- **UX Review capture for catalogs served without Vite.** `@kerfjs/ui/vite-ux-review` now also exports the endpoint behind the catalog's **Capture region** link in server-neutral forms: `resolveUxReviewProject({ root?, projectDirectory? })`, `uxReviewProjectResponse(request, projectDirectory)` for Fetch API servers (Hono, Bun, Deno), and `uxReviewMiddleware(projectDirectory)` for Node/connect servers (Express, `node:http`). An app that serves its UX catalog from its own backend mounts one on its development server instead of hand-rolling the route. `uxReviewPlugin()` is now built on the same middleware, with unchanged behavior (`KF-PFF721`).
+
+- **A per-entry settings pane in `@kerfjs/ui/catalog`.** Pass an entry's variant and state controls as `Catalog`'s new `settings` prop and the Catalog renders a **Settings** pane beside the stage, with the standard collapse toggle: in the pane's header while open, at the end of the entry toolbar while collapsed. Entries without settings render neither the pane nor the toggle. The app owns `settingsCollapsed`; hand the same signal to `wireCatalog`'s new `settingsCollapsed` option and it flips the signal from the toggle (`onToggleSettings` reports it) and wires the pane as a Workbench rail, so below the `narrow` breakpoint it starts collapsed and opens as an overlay that Escape or an outside press closes, exclusive with the sidebar overlay. `settingsPanel` sets the title, width, resizing, and overlay options (`settingsSize` / `settingsStorageKey` remember a resized width). The UX catalog's Badge entry demonstrates it with a playground. Consumers no longer build their own settings aside and toggle (`KF-0AY6AE`).
+
+- **`kerf-component-catalog` generates the selection catalog too.** Packages and apps that keep `kerf.components.json` no longer hand-maintain a second selection JSON (`useWhen`, `avoidWhen`, `publicClasses`, `publicTokens`, …) for `@kerfjs/ui`'s component-catalog extension. Set `package.json#kerfComponentCatalog.selectionOutput`, add a top-level `description` and a per-component `selection` block (`useWhen`, `avoidWhen`, optional `uses`, `styleSources`, `demoSource`, `documentation`, and a `geometry` override), and `--write` / `--check` emit and verify the selection catalog beside the composition catalog. `name`, `kind`, `purpose`, `source`, `publicClasses`, `publicTokens`, and `geometry` come from the existing metadata; the composition catalog's `compatibility.componentCatalog` points at the selection file. The output is validated against the canonical selection schema, which `create-kerf-component` now ships. Recipes are not selection entries, `composed` geometry needs an explicit override, and `uses` must name this package's components or installed `@kerfjs/ui` catalog ids (`KF-K1SY5X`).
+
+- **UX Review capture in any `@kerfjs/ui/catalog` app.** The catalog's **Capture region** header link, which starts a UX Review region screenshot preset with the project and the active entry, now ships in the package instead of living in Kerf's own demo. Add `uxReviewPlugin()` from the new Node-only `@kerfjs/ui/vite-ux-review` subpath to the Vite config. Report the project with `wireCatalog`'s new `onUxReviewProject` callback, and pass it to `Catalog`'s new `uxReview` prop. The link appears on local dev and preview servers and stays hidden on static hosting. `uxReviewCaptureUrl` and `loadUxReviewProject` are exported from `@kerfjs/ui/catalog` for custom placements (`KF-XB1G3S`).
+
+- Deep-inset Pane content supports `--kui-pane-scrollbar-gutter: stable` for opaque edge-to-edge content, and Pane/Workbench focus rings paint above such scrollers without blocking their controls (`KF-9NVNGT`).
+
+- NavStack now has `separator="auto" | "hidden"`. Automatic separators frame a sunken active Pane at the top chrome and optional bottom toolbar; hidden suppresses stack-owned lines (`KF-1XRSRW`).
+
+- The UX catalog remembers its background, light or dark theme, contrast, and reduced-motion choices across reloads.
+
+- The UX catalog can show a layout guide background with three one-pixel vertical rules at 15px, 23px, and 32px.
+
+- `Row`, `Grid`, and `List` accept `gap={{ column, row }}` with independent typed spacing values, while their existing single-value gaps continue to apply to both axes (`KF-8HJFWC`).
+
+- `ListHeader` accepts `badge` and `status` together, including explicit `undefined` for either when app state changes; a semantic `count` remains separate.
+
+- `Pane`, `SunkenPanel`, plain `TabNavigator` scenes, `Workbench` regions, and static `ContentItem` surfaces can opt into keyboard or programmatic focus; `outlined` holds the standard focus ring for application states such as drop targets. Inactive scenes and collapsed panels suppress their focus stop and outline.
+
+- `TabNavigator`, `TabNavigatorTab`, `TabNavigatorProps`, and `wireTabNavigator` name the complete persistent bottom-tab layout. The matching module, wiring, and CSS subpaths are available; former `TabScaffold` names and paths were deprecated aliases in earlier 5.0 betas.
+
+- `Pane` exposes its resolved logical inline content insets to child CSS, so a table can paint edge to edge while its cell text stays aligned, with or without `deepInset`.
+
+- `Pane` and plain `TabNavigator` scenes accept `deepInset` for a 16px outer content gutter while nested Row, List, and Grid spacing remains at its normal 8px.
+
+- The TabNavigator catalog now demonstrates a NavStack with a view-owned top toolbar and Pane above the persistent tab bar, including push, tab switch, and return.
+
+- UI Doctor now checks component root class names, stylesheet names, and CSS selectors that reach into another local component.
+
+- Configure modal `DialogSurface` viewport gutters and typed maximum heights, including a dynamic viewport cap, without application shadow-part overrides.
+
+### Changed
+
+- A resizable `@kerfjs/ui` `Workbench` panel without a `label` now names its resize handle in title style, as `ui/docs/writing.md` asks for region names: "Resize Left Rail", "Resize Right Rail", and "Resize Bottom Drawer" (previously "Resize left rail" and so on). A test or locator that matched the old accessible name needs the new one (`KF-NWS9GB`).
+
+- `kerf-ui-doctor`'s `KUI-D040` now also checks template literals passed to title-style props, judging only their static words: ``label={`Edit ${name} shortcut`}`` is reported with the suggestion `` `Edit ${name} Shortcut` ``. Interpolated values and words joined to an interpolation are never judged. The UX demos' dynamic control names follow it ("Edit … Shortcut", "Open Ticket …", "New Tab …"), and the NavStack demo's detail item is named by its visible title alone (`KF-8B6JES`).
+
+- `kerf-ui-doctor`'s `KUI-D040` now also reads region and landmark names, which `ui/docs/writing.md` makes title style, and raw Web Awesome field labels. The new region names are:
+  - the `label` of `Pane`, `Workbench`, `Toolbar`, `ToolbarControlGroup`, `TabBar`, `NavStack`, `CollapsiblePanel`, `FloatingToolbar`, and `ResizableRegion`;
+  - the `ariaLabel` of `SunkenPanel` and `List`;
+  - a `Pane`'s `contentLabel`;
+  - the panel, toolbar, and pane labels in Workbench, CollapsiblePanel, and NavStack configuration;
+  - the `aria-label` of `section`, `nav`, `aside`, `main`, `header`, `footer`, `form`, `search`, or an element with a landmark role.
+
+  The field labels it reads are the `label` of a raw `wa-input`, `wa-select`, `wa-textarea`, or `wa-radio-group`. `wa-checkbox`, `wa-switch`, and `wa-radio` option text, and `LoadingSpinner` and `Skeleton` labels, stay unread. Expect new warnings on lowercase names such as `<Pane label="Workspace pages">` ("Workspace Pages"). The package's own fixtures and examples are fixed. The catalog shell's sidebar navigation is now named "Kerf Components" (it was "Kerf components") (`KF-8JR7EC`).
+
+- A panel toolbar's `toggle: { action, name }` (Workbench panels, `CollapsiblePanel`) now documents `name` as the panel's title-style name. Pass `name: "Navigator"`, not `"navigator"`: `name` labels the toggle group and completes the default "Show …" / "Hide …" label, which kerf never recapitalizes. The docs, demos, and recipes passed lowercase names, which produced sentence-style accessible names such as "Show output". They now pass title-style names. The catalog shell names its sidebar "Kerf Catalog" and its settings rail toggle reads "Hide Settings" (they read "Kerf catalog" and "Hide settings"). `KUI-D040` now reports a lowercase `name` in a `toggle` object literal that also has an `action` (`KF-EJ32ZH`).
+- A `NavStack` root view's title now defaults to the `xlarge` page-heading size, and steps down to `large` once a back control shares the bar. An explicit `titleSize` still wins. A Workbench panel's stack keeps `large` at every depth, so narrow rails stay quieter than the work-area title (`KF-2XWXFR`).
+- The built-in close control of a `wa-dialog` or `wa-drawer` now matches a borderless single `ToolbarControlGroup` button, the close a toolbar-composed dialog uses: a 40px circle with no border and the neutral hover fill, instead of Web Awesome's 35px rounded square (`KF-5B5C4W`).
+- A capped, scrolling `Select` listbox, `PopupMenu` menu, or phone-width `PopupMenu` submenu now shows that it scrolls: a soft shadow lines each edge with more choices beyond it. With overlay scrollbars (macOS, iOS, Android), a capped submenu whose bottom edge fell between rows looked like a complete short list. The cue is CSS only, the same on every popup in the shared popup contract, and absent when every choice fits (`KF-B6BTHW`).
+- A centered `NavStack` title (and any lone `ToolbarText` in a `centerAlign="balanced"` center) now keeps the full-strength text color the root title has, instead of dimming to the quieter `large`-size color as it centers (`KF-DX3739`).
+- Once a `NavStack` shows a back control, the view title centers on the toolbar like a platform navigation bar. It stays on the midpoint while the sides leave room, moves away from a wider side when they do not, and truncates with an ellipsis before it reaches the back control or a trailing group. At the root, and on a view that supplies `toolbar.center`, the title stays left-aligned. A lone `ToolbarText` in a `centerAlign="balanced"` toolbar gets this navigation-bar layout in any `Toolbar` (`KF-9YD9KV`).
+- The `NavStack` back control is now a contained, bordered `ToolbarControlGroup` (the default pill), so it reads as a real control instead of a bare chevron beside the title (`KF-TBRP2P`).
+- HTML and attribute escaping in the JSX runtime now runs one pass over a value instead of one `replace` pass per special character, about 2x faster on values that need escaping. Output is unchanged (`KF-3SHRTR`).
+
+- Rename the internal TabNavigator implementation folder, files, and focused test files from `tab-scaffold` to `tab-navigator`; public imports and rendered DOM hooks stay stable.
+
+- `deepInset` now adds the same 8px to the top and bottom of Pane and plain TabNavigator scroll content, including scroll padding; Pane header and footer still own their safe-area edges.
+
+- Toolbar composition guidance and catalog metadata now allow direct `KerfUiContent` in every zone; `ToolbarControlGroup` remains the recommended shared chrome for related controls.
+
+- The UI composition lint rule checks component parent requirements for direct content passed through a named zone prop.
+
+- Toolbar zones center direct content by default while keeping ToolbarText, control groups, and standalone primary actions on their established control-band axis.
+
+### Fixed
+
+- Catalog Pane's documented `--kui-pane-scrollbar-gutter` token so downstream doctor and ESLint checks accept the supported setting (`KF-W5VXQF`).
+
+- The actionable ToolbarText catalog example uses the standard TokenSearchField toolbar presentation for its search control, and an empty TokenSearchField shows its placeholder.
+
+- Preserve toolbar visibility and measurement state across app renders to prevent geometry-driven render loops and repeated observer/layout work (`KF-58HBRR`).
+
+- Restore accessible native dialog names through `@kerfjs/ui/surface-scaffold/register`, preserving live title slots and headerless labels.
+
+- Validate remote CI freshness through newer-run searches and exact-run details before warning about a failed main build (`KF-X4PTHF`).
+
+- Select menus now shift their complete visible surface inside narrow viewport edges while preserving `fitMenu` trigger width (`KF-H4JBQP`).
+
+- Toolbar visibility probes stop rewriting unchanged styles, allowing catalog geometry overlays and responsive controls to settle after updates (`KF-JVWC92`).
+
+- Busy toolbar groups preserve their relocation annotation, so the inert action and live status remain available when a panel closes.
+
+- Navigation stacks now visibly slide pushed views over the previous screen and cross-fade both header and footer across repeated or interrupted push/pop transitions.
+
+### Added
+
+- Add typed toolbar item `hideBelow`/`showBelow` lengths and `wireToolbarVisibility`, including complementary container-width overflow and dynamic font/token updates (`KF-MXE9YV`).
+
+- Expanded grouped search supports `expandedOverflow="visible"` for application-owned surfaces below its positioning anchor.
+
+- `@kerfjs/ui` ToolbarControlGroup adds `tileTone` quiet semantic palettes for non-interactive heading icon tiles.
+
+- ToolbarText supports `tone="dark"` for filenames, headings, and actionable titles on loud toolbar surfaces.
+- `@kerfjs/ui` Text accepts `controlMargins` for selected exterior control gutters, avoiding a Row wrapper around isolated text.
+
+- Make lowered surfaces and decorative neutral fills/borders translucent, and replace the SunkenPanel prototype with direct component compositions.
+
+- **UI components share `SemanticTone`.** Badge, Chip, StateBanner, and ContentItem
+  use `neutral`, `info`, `pop`, `success`, `warning`, and `danger`. Replace
+  Badge/Chip `tone="brand"` with `tone="info"`; the existing brand color tokens
+  still supply its palette. `BadgeTone` and `StateBannerTone` are deprecated aliases.
+
+- **Catalog sidebars filter by item or heading name.** The shared catalog
+  shell now searches primary and ecosystem sections as you type, including
+  collapsed groups, and keeps the query when the active preview changes.
+
+- **ListHeader has five label sizes.** `size="xs|sm|m|l|xl"` controls visual
+  scale separately from the semantic heading level; `sm` preserves the existing
+  uppercase treatment and `FieldLabel` remains unchanged.
+
+- **The pinned TabBar catalog example scrolls with native momentum.** It no
+  longer reserves a long blank strip after the final tab; applications can
+  still opt into whole-tab settling with `snapTabs`.
+
+- **Doctor reports foreign CSS restyles of co-owned classes.** A stylesheet
+  outside every co-owner now receives one `KUI-L019` per subject rule, including
+  inferred BEM modifiers, with the co-owner set in the diagnostic evidence.
+
+- **Doctor respects explicit ownership groups with implicit ownership enabled.**
+  A group's stylesheet remains owned by the group even when one of its source
+  modules, or an unrelated module, imports that CSS directly.
+
+- **LucideIcon supports filled glyphs.** Pass `appearance="solid"` to use the
+  icon's current text color as its fill; outline remains the default.
+
+- **Doctor detects borrowed component markup.** Source modules that place a
+  foreign public class in JSX, raw HTML, or DOM class writes now receive
+  `KUI-L023`; documented placeable classes remain allowed.
+
+- **Doctor offers strict same-package selector context checks.**
+  `ownershipContext: "any"` reports a sibling component's class even when it is
+  only used as selector context; cross-package composition stays available.
+
+- **Doctor catches classless descendants of composed components.** Component
+  mode uses JSX evidence to identify element selectors below component hooks,
+  sibling roots, and direct composed child roots.
+
+- **Doctor component ownership recognizes source evidence.** Selection-only
+  components and literal BEM classes rendered by a component are protected
+  when its stylesheet styles their block. CSS imports can supply the owned
+  stylesheet, and uncataloged modules can opt into the same inference.
+
+- **`createScope().dispose` is typed as a bound function property.** Consumers
+  can store or return it as a teardown without a wrapper or an unbound-method
+  lint suppression.
+
+- **ToolbarControlGroup grow sizing keeps its basis in wide toolbars.** An
+  expanded grow search now contributes its minimum width to the trailing zone's
+  intrinsic size, keeping sibling groups beside it instead of wrapping early.
+
+- **TabBar can settle overflowing peers at whole-tab starts.** Opt into
+  `snapTabs` beside a pinned leading AppTab; selection and scroll gestures
+  align peers after the pin in LTR and RTL, with enough end room for the final
+  tab instead of leaving a clipped sliver at rest.
+
+- **The pre-push check no longer adds timing metadata to Hot Sheet tickets.**
+  It still runs the repository gate or skips an identical verified clean tree;
+  historical timing notes remain readable through `ticket:timing summary`.
+
+- **Wrapping catalog resource groups align with the toolbar control band.** A
+  single row centers in the band, while multiple rows start at its top.
+
+- **UI browser checks cover the current catalog specimens.** Select, toolbar,
+  tab, and control group browser assertions now address the expanded demos;
+  a focused toolbar search field restores its default surface color when no
+  background override is set.
+
+- **Pinned tabs cover the full leading edge of their scroll strip.** The
+  backing now includes the strip border as well as its padding, preventing a
+  sliver of a scrolling tab label from showing beside the pinned tab.
+
+- **Catalog resource links remain readable at phone widths.** The resource
+  group wraps whole actions onto another row instead of clipping the Guidance
+  label at the right edge; `ToolbarControlGroup overflow="wrap"` is available
+  for the same independent-link pattern.
+
+- **The UI analyzer resolves application component imports through TypeScript
+  path aliases.** `KUI-L022` now catches a styled hook class when an imported
+  cataloged component uses an exact or wildcard `paths` mapping; Doctor uses
+  the same resolution.
+
+- **TabBar accepts standalone Web Awesome actions in `trailing` and `end`.**
+  A single `wa-button` can sit beside the scrolling tabs or at the far edge
+  without ToolbarControlGroup chrome; the composition rule recognizes the
+  cataloged custom element in these zones.
+
+- **FieldLabel matches form-control labels over field previews.** The
+  `@kerfjs/ui/text` export gives a read-only field the same label typography
+  and inset as a themed Web Awesome input, with an id for accessible grouping.
+
+- **TokenSearchField form fields match adjacent Web Awesome inputs.** The
+  control uses the form-control radius, and its required marker uses the
+  same neutral color and offset tokens as `wa-input`.
+
+- **Grid supports labeled multi-select ContentItem tiles.** Opt into
+  `selectionMode="multiple"` with `ariaLabel`; `wireContentItems` follows the
+  rendered columns with four arrow keys and keeps nested controls independent.
+
+- **Collapsible TokenSearchField can fill a stretched Toolbar center.** The
+  `fill` prop expands the field and its search group to the available width
+  while preserving the compact collapsed action.
+
+- **TokenSearchField has a typed trailing icon action.** `trailingAction`
+  renders an accessible button with Kerf owned chrome and a full 24px wide hit
+  target; the existing `trailing` content slot remains for passive content.
+
+- **PopupMenu and registered PopupSurface dropdowns preserve fast keyboard
+  navigation during opening.** Item focus gained while Web Awesome animates
+  the menu is restored after its initial focus handoff, so Enter acts on the
+  item the user reached.
+
+- **PopupMenu submenu checkmarks stay inside the menu surface.** Checked
+  submenu rows align their checkmark beside the label instead of letting the
+  Web Awesome negative check margin paint beyond the submenu border.
+
+- **Filled SegmentedControl labels keep contrast while switching themes.**
+  Web Awesome's native button color transition no longer interpolates the
+  label against the already-switched track fill.
+
+- **Workbench numeric overlays no longer restyle the full work area on unrelated changes.**
+  The overlay wiring mirrors active presentation and open state onto the Workbench
+  root for CSS, and avoids layout measurements when no wired panel uses a numeric
+  breakpoint.
+
+## [5.0.0] - 2026-09-29
+
+- **`ui-public-boundaries` inspects `kerfjs/html` tagged templates.** The
+  no-build `html` template writes the same markup as JSX, so its static
+  `class` attributes now carry `KUI-L101` (private `kui-*` anatomy) and
+  `KUI-L103` (a component's anatomy on your own element):
+  ``html`<aside class="kui-pane">` `` is reported with `Pane` to render, and a
+  plain ``html`<div class="kui-content-item">` `` with `ContentItem`, while a
+  `<ul>` carrier keeps the placeable class. The template's static parts are
+  read by the runtime's own rules; a class a hole supplies (`class=${cls}`)
+  is unknown and skipped.
+
+- **`KUI-L103`'s "render X instead" answer has one implementation.**
+  `@kerfjs/ui` ships `ai/component-class-owners.cjs`, the rule that decides
+  which cataloged classes are a component's anatomy and which export renders
+  each. `eslint-plugin-kerfjs`'s `ui-public-boundaries` loads it beside
+  `application-ui-profile-sync.cjs`, and the generated `ai/components/*.md`
+  pages use it too, so the lint message and the component reference can no
+  longer name different components (a test pins their agreement over the whole
+  shipped catalog). A vendored `profileContractPath` directory must now also
+  hold `component-class-owners.cjs`; an `@kerfjs/ui` without it reports
+  `KUI-L090`.
+
+- **A delegated click no longer re-fires on a target the re-render recycled.**
+  A delegated handler that writes a signal makes `mount()` re-render
+  synchronously, inside the same event dispatch; when the morph recycled the
+  clicked element in place into a control with a different `data-action`,
+  delegates registered later for the same event matched the recycled element
+  and fired too (a `request` click immediately ran `cancel` and undid itself).
+  `delegate()`, `delegateCapture()`, and `kerfjs/actions`' `delegateActions()`
+  now resolve every delegate's match against the DOM as it stood when the
+  event reached the first kerf delegate listener, like per-element listeners:
+  a delegate that matched at dispatch start still fires (unless an earlier
+  handler removed its element), one that matches only after a re-render does
+  not, and `delegateActions()` dispatches by the action value the element
+  carried at dispatch start. `mount()` stays synchronous. The
+  wrap-it-in-a-distinct-element workaround is no longer needed. Cost: about
+  0.11 KB min+gzip, which moves the advertised core size from ~12 KB to
+  ~13 KB.
+
+- **Component packages declare `placeableClasses`, and `KUI-L103` covers
+  their anatomy classes.** `create-kerf-component`'s `kerf.components.json`
+  accepts optional `boundaries.placeableClasses` (a subset of
+  `publicClasses`) and `boundaries.rootElement`, validates them, and copies
+  them into the generated `component-composition.json`.
+  `eslint-plugin-kerfjs`'s `ui-public-boundaries` now checks every class the
+  application or third-party catalogs in `.kerf-ui-profile.json` declare, not
+  only `kui-*` names: `<div class="acme-meter">` is reported with the
+  package's component to render (`Meter`), while its placeable classes stay
+  allowed. The scaffold template's README explains the field, and
+  `@kerfjs/ui/ai/skill.md` (1.50.0) applies the rule to package entries.
+
+- **`eslint-plugin-kerfjs` `ui-public-boundaries` reports a plain
+  `<div class="kui-content-item">` as `ContentItem` recreated (`KUI-L103`).**
+  The `kui-content-item` classes stay placeable on another carrier (a `<ul>`, a
+  `Text`, a control-cluster `<footer>`), but a plain `<div>` carrying them is
+  exactly what `ContentItem` renders; the diagnostic now says to render
+  `ContentItem`. The `@kerfjs/ui` catalogs gain an additive `rootElement`
+  field (selection entry and composition `boundaries.rootElement`) naming the
+  element a component renders around its own placeable classes, and
+  `check:guidance` derives its repository check from the same fields, so the
+  package check and the downstream diagnostic cannot drift. The rule also
+  inspects the static class names of a template-literal `class` /
+  `className` value.
+
+- **`eslint-plugin-kerfjs` `ui-public-boundaries` reports a component's
+  anatomy class written onto an application-owned element (`KUI-L103`).**
+  `<div class="kui-toolbar">`, `<aside class="kui-pane">`, or
+  `<wa-dropdown class="kui-popup-menu">` recreates a component by class and
+  inherits (and invites restyling of) its CSS; the diagnostic names the
+  component to render instead (`Toolbar`, `Pane`, `PopupMenu`). The
+  `@kerfjs/ui` catalogs gain `placeableClasses` (selection entry field and
+  composition `boundaries.placeableClasses`) naming the public classes an
+  application may place itself — the layout utilities, `kui-app-root`, the
+  `kui-content-item` geometry on a non-div carrier, and Web Awesome
+  `hide-actions` — and `check:catalog` requires every class-only entry to list
+  its classes there. A component's own element (`<Toolbar className="kui-toolbar">`)
+  is not reported. The README pane example and `@kerfjs/ui/ai/skill.md`
+  (1.47.0) now render `Pane` instead of writing its classes, and each generated
+  `ai/components/*.md` page states which classes are placeable and which
+  component renders the rest.
+
+- **`kerf-ui-analyze` retires `KUI-L005` ("forced component dimension").**
+  `KUI-L019` already reports any application rule whose subject is a cataloged
+  component, dimensions included, so `.kui-pane { width: 300px }` was reported
+  twice (an error and a review finding). L005's only other shape, a public
+  class as an ancestor (`.kui-pane .app-sidebar { width: 240px }`), sizes the
+  application's own element and is allowed. The analyzer no longer emits it;
+  the id stays in the diagnostic registry (now listing it under `retired`) so
+  existing profile exceptions that name it still load.
+
+- **`KUI-L301` now reports every `Discouraged` Web Awesome element rendered
+  directly.** The `@kerfjs/ui` package-default application profile avoids all
+  fifteen Discouraged entries (Dropdown/Dropdown Item → `PopupMenu`,
+  Select/Option → `Select`, Tab Group/Tab/Tab Panel → `TabBar`, Icon →
+  `LucideIcon`, Split Panel → `ResizableRegion`, Button Group →
+  `SegmentedControl`, Tree/Tree Item → `List`, and Animated Image, Comparison,
+  and Zoomable Frame → `ContentItem`), each with a rationale, and
+  `eslint-plugin-kerfjs` `ui-preferences` (and `kerf-ui-doctor`, which runs it)
+  now resolves a custom-element JSX tag such as `<wa-dropdown>` to its catalog
+  entry, not only an imported component. A declared component's own source
+  stays exempt because it is the wrapper that owns the element. A test keeps
+  the profile's avoid set equal to the catalog's Discouraged set in both
+  directions and lints the UX demo, recipes, and catalog shell clean;
+  `@kerfjs/ui/ai/skill.md` (1.46.0) names the diagnostic.
+
+- **New (`@kerfjs/ui`): `NavStack` and `TabScaffold` take `chromeDividers`
+  (`'scroll' | 'always' | 'none'`), like `Pane`.** `scroll` (the default) keeps
+  today's behavior: the stack's top-chrome and bottom-toolbar lines and the
+  scaffold's bar line follow the scroll once `wireScrollDividers` is installed.
+  `always` draws them permanently without the wiring; `none` never draws them,
+  even when wired. The top `Toolbar`'s own `toolbarConfig.dividerSides` is
+  unaffected. `SplitView` forwards it to its compact stack through
+  `compactStack.chromeDividers`.
+
+- **Fix (`@kerfjs/ui`): a `Pane` that is the only content of a `NavStack` view
+  or a `TabScaffold` scene fills it.** It used to size to its content, so the
+  view scrolled the whole Pane and its header scrolled away. Now the Pane's own
+  content scrolls under its pinned header and footer, the Pane's slots take the
+  safe-area edges the view or scene still reaches, and scroll dividers key on
+  the Pane's content. The rule lives in `pane.css`, as the Workbench-region fill
+  does.
+
+- **The `@kerfjs/ui` suite-v3 AI-regression protocol test runs in every gate
+  again.** `ui/tests/integration/ai-regressions-v3.test.ts` was selected by no
+  package script, so neither `npm --prefix ui run check` nor CI executed it. It
+  now runs as `test:ai-regressions` inside the package's `npm test`, and a new
+  unit guard fails when any file under `ui/tests` is selected by no script
+  reachable from `check` or `test:e2e`.
+
+- **Importing `@kerfjs/ui/catalog` or `@kerfjs/ui/workbench` now ships every
+  stylesheet those composites render.** `catalog`, `workbench`, `nav-stack`,
+  `split-view`, `tab-scaffold`, and `collapsible-panel` gain a CSS-aware
+  `browser` export condition whose generated wrapper imports the foundation, the
+  CSS of each internally rendered component (Pane, Toolbar, ToolbarText, List,
+  ListItem, ListInsetText, Row, PopupMenu, …) in dependency order, and the
+  composite's own CSS. Apps no longer hand-import `pane.css`, and a Catalog
+  sidebar's styling no longer depends on whether the app happens to import
+  `ListInsetText` elsewhere. The list is derived from the source import graph
+  (now following parent-relative imports), the `import` condition stays
+  CSS-free, and the companion `.css` subpaths remain for pipelines without the
+  `browser` condition. `@kerfjs/ui/ai/skill.md` is 1.46.0.
+
+- **The `@kerfjs/ui` AI guidance now states every maintainer design rule
+  explicitly.** An audit of the package's tickets folded the missing rules into
+  `@kerfjs/ui/ai/skill.md` (1.45.0), `llms.txt`, and the design docs: prefer a
+  Kerf UI component over a Web Awesome component over a raw tag and never render
+  a `Discouraged` Web Awesome element directly (only through the Kerf component
+  that wraps it); nothing wraps inside a `ToolbarControlGroup` and a
+  `ToolbarText` is one ellipsized line unless `wrap`/`maxLines` is set; a
+  `Select` or `PopupMenu` trigger drops its focus ring while its popup is open
+  and the ring follows the control's shape (never add ring CSS); dividers earn
+  their place (`dividerSides=""` over self-spacing content or between a pane's
+  header and its list, never padded around); a control sits near where its
+  effect appears; and text aligns to text and icons to icons — a border is
+  never the alignment anchor. The ToolbarControlGroup catalog entry no longer
+  points at a hand-written `wa-dropdown` trigger, and the bundled kerf app
+  configs (`ai/skill.md` 1.25.0, `ai/cursorrules` 1.23.0) name the List family
+  and carry the "components own their styles; configure, never override" rule.
+
+- **Applications and component packages are held to the component-ownership
+  rules `@kerfjs/ui` enforces internally: components own their styles and are
+  configured, never overridden.** `kerf-ui-analyze` and `kerf-ui-doctor` add
+  four error diagnostics (review findings under `--adoption`):
+  - `KUI-L019` — a CSS rule whose subject is another package's cataloged
+    component: a public class (`.kui-toolbar`, `.acme-meter`), its
+    `[data-component]` root, or a Web Awesome tag the package themes
+    (`wa-button`). Your own element in a component's context
+    (`.kui-toolbar > .my-widget`), keying on its state inside `:has()`, and
+    setting its public tokens stay allowed.
+  - `KUI-L020` — reading or writing another component's private `--_*`
+    variable (`--_kui-list-gap`).
+  - `KUI-L021` — overriding a token a typed prop sets (`--kui-list-gap` is
+    `<List gap>`); the message quotes the prop's example.
+  - `KUI-L022` — a class placed on a component's root (`<Toolbar
+className="header" />`) that the application then styles.
+
+  Each message names the component's configuration (typed props, public
+  tokens, variants) and ends by routing a need with no prop to a component-gap
+  report instead of an override. Ownership is per package, from the nearest
+  `package.json`, so a component package styling its own components — including
+  in a Kerf UI parent's context — passes, and third-party catalogs declared in
+  `.kerf-ui-profile.json` get the same protection. `eslint-plugin-kerfjs` adds
+  `ui-component-ownership` (in `recommended-ui` and `strict-ui`, `error`),
+  reporting `KUI-L020` / `KUI-L021` in style strings, style objects, and
+  `style.setProperty()`. The `create-kerf-component` scaffold now ships a
+  `counter.css` that styles only Counter (configured by a typed `size` prop and
+  a `--kerf-counter-gap` token, with context named after Counter and a
+  Toolbar-context rule in its own stylesheet), plus `npm run check:styles`
+  (`kerf-ui-analyze`, from a new `@kerfjs/ui` dev dependency) in
+  `prepublishOnly`.
+
+- **Behavior change (`@kerfjs/ui`): `NavStack` and `TabScaffold` chrome
+  dividers follow the scroll.** The `NavStack` bottom toolbar's and the
+  `TabScaffold` bar's top borders are no longer permanent. With `wireScrollDividers`
+  installed, a `NavStack`'s top chrome draws a line along its bottom edge only
+  while the active view's content is scrolled beneath it, its bottom toolbar a
+  line along its top edge only while more content lies below, and a
+  `TabScaffold` bar a line along its top edge only while the active scene's
+  content continues below it — none when the content fits. The line follows
+  the active view across a push or pop and the active scene across a tab
+  switch, and keys on whichever element actually scrolls: the view or scene
+  itself, or, through a sole child with no chrome of its own on that edge, a
+  `Pane`'s content or a nested `NavStack`'s active view (a sole `Pane`'s own
+  header or footer draws that boundary instead). Each layout draws the line
+  from its own stylesheet (an overlaid pseudo-element on the stack's chrome; the
+  bottom toolbar and bar keep their 1px top border, transparent until shown),
+  so nothing moves; the wiring
+  writes only its `data-scroll-overflow` / `data-scroll-divider` state. Without
+  the wiring those edges draw no line.
+
+- **Behavior change (`@kerfjs/ui`): toolbars no longer draw a divider by
+  default; dividers between pinned chrome and scrolling content follow the
+  scroll.** `Toolbar`'s `dividerSides` now defaults to `''` (was `'b'`), and
+  the `Workbench` (`mainToolbar`, `mainBottomToolbar`, panel toolbars, and the
+  `mainHeader` / `mainFooter` lists), `CollapsiblePanel`, and `Catalog`
+  toolbars no longer place dividers of their own. Instead a `Pane` draws one
+  line under its header and one over its footer, wherever that chrome ends:
+  the header's only while content is scrolled beneath it, the footer's only
+  while more content lies below, and neither when the content fits. The new
+  `@kerfjs/ui/wire-scroll-dividers` subpath's `wireScrollDividers(root, {
+targets? })` reports that state — call it once at the app root and keep its
+  disposer (`wireCatalog` installs it for its own root). It also marks each
+  side of a `TabBar` strip with tabs scrolled out of view, and lets a
+  `Toolbar` or `List` named as chrome in `targets` draw the divider facing an
+  app-owned scroller. The wiring only writes the `data-scroll-overflow` /
+  `data-scroll-divider` state attributes; each component draws its own line,
+  and no state moves the chrome, the content, or a tab. `Pane` gains
+  `chromeDividers` (`scroll` default, `always`, `none`; also in `PaneConfig`,
+  so `mainPane` and a panel's `pane` forward it) and TabBar the
+  `--kui-tab-bar-divider-color` token. To keep a permanent line, set
+  `chromeDividers: "always"` on the pane or an explicit `dividerSides`.
+
+- **`@kerfjs/ui`: `Pane`, `NavStack`, `SplitView`, and `TabScaffold` fill a
+  Workbench region from their own stylesheets.** As a Workbench main area's
+  or panel's only child, each sets its own `height: 100%` in that context,
+  which the Workbench marks on its regions (`data-workbench-main`, and the new
+  `data-workbench-panel-content` on each panel's content); `workbench.css` no
+  longer sizes another component's root (it still fills a nested Workbench).
+  Rendering is unchanged.
+
+- **`@kerfjs/ui`: layouts name the covered-floating-controls context after
+  themselves, and no longer write `FloatingToolbar`'s inset token.** Workbench,
+  CollapsiblePanel, and ResizableRegion each provide their own private
+  `--_kui-<layout>-covered` context in place of the shared
+  `--_kui-floating-covered` flag; `FloatingToolbar` and every restore corner
+  read all three. A restore corner no longer sets
+  `--kui-floating-toolbar-inset: 0px`; `FloatingToolbar` zeroes its own inset
+  inside a restore corner (a toolbar's own `inset` still wins). Rendering is
+  unchanged. One edge case changes: a floating control inside an open overlay
+  of one layout type that is itself covered by another layout type's open
+  overlay (for example, a ResizableRegion overlay in a Workbench work area
+  under an open rail overlay) now stays hidden.
+
+- **`@kerfjs/ui`: `ListHeader`, `NavStack`, `Select`, and `StateBanner` no
+  longer restyle a composed child through a class on its root.** Each child
+  now styles itself: `Text` sets a `ListHeader` label from `text.css`, `Badge`
+  spaces a `Select` count and a `StateBanner` badge from `badge.css`, and a
+  `NavStack` title uses `ToolbarText`'s new `fill` option. Rendering is
+  unchanged. `ToolbarText` gains `fill` (grow into the free space of its
+  toolbar zone and truncate there). The `kui-list-header__label`,
+  `kui-nav-stack__title`, `kui-select__count`, and `kui-state-banner__badge`
+  classes are removed; select a ListHeader label with
+  `.kui-list-header__title > .kui-text` and a NavStack title with
+  `.kui-toolbar-text[data-fill="true"]` if a test needs to find them.
+
+- **`@kerfjs/ui` ships a markdown component reference for AI assistants.**
+  `@kerfjs/ui/ai/components/README.md` indexes every catalog entry in one line,
+  and `@kerfjs/ui/ai/components/<id>.md` gives each entry a short page: when to
+  use and avoid it, imports and CSS/registration side effects, a link to its
+  exact props, legal parents and zones (JSX prop and child count), app- and
+  wiring-owned state, geometry, accessibility obligations, its styling boundary
+  (configure through props; do not override internals), and its diagnostics.
+  `llms.txt` and the shipped skill now send assistants there instead of to the
+  263 KB `component-catalog.json` and 221 KB `component-composition.json`,
+  which remain the canonical sources for tools. The pages are generated from
+  those two files and a package check fails when they drift.
+
+- **Breaking (`@kerfjs/ui` and `create-kerf-component`): the composition
+  catalog files are renamed so they no longer read as a "v2" of the component
+  catalog.** The composition catalog is a generated composition layer beside
+  `component-catalog.json`, not a newer version of it. Update any import,
+  `$schema`, `$ref`, or `.kerf-ui-profile.json` catalog location that names an
+  old path:
+
+  | Old path                                                       | New path                                                        |
+  | -------------------------------------------------------------- | --------------------------------------------------------------- |
+  | `@kerfjs/ui/ai/component-catalog-v2.json`                      | `@kerfjs/ui/ai/component-composition.json`                      |
+  | `@kerfjs/ui/ai/component-catalog-v2.schema.json`               | `@kerfjs/ui/ai/component-composition.schema.json`               |
+  | `@kerfjs/ui/ai/component-catalog-v2.d.ts`                      | `@kerfjs/ui/ai/component-composition.d.ts`                      |
+  | `@kerfjs/ui/ai/component-catalog-v2-overrides.json`            | `@kerfjs/ui/ai/component-composition-rules.json`                |
+  | `@kerfjs/ui/ai/component-catalog-extension-v2.schema.json`     | `@kerfjs/ui/ai/component-composition-extension.schema.json`     |
+  | `@kerfjs/ui/ai/component-catalog-extension-v2.d.ts`            | `@kerfjs/ui/ai/component-composition-extension.d.ts`            |
+  | `@kerfjs/ui/docs/examples/component-catalog-extension-v2.json` | `@kerfjs/ui/docs/examples/component-composition-extension.json` |
+  | scaffolded package `component-catalog-v2.json`                 | scaffolded package `component-composition.json`                 |
+
+  The exported types follow: `ComponentCatalogV2` → `ComponentComposition`,
+  `CatalogCompositionEntryV2` → `CatalogCompositionEntry`,
+  `ConsumerComponentCatalogV2` → `ConsumerComponentComposition`, and
+  `ConsumerCatalogEntryV2` → `ConsumerCompositionEntry`. In the repository,
+  `npm run catalog:v2:sync` is now `npm run composition:sync`
+  (`catalog:sync` still runs both generators). The file contents and their
+  `schemaVersion` are unchanged.
+
+- **Breaking (`@kerfjs/ui`, `create-kerf-component`, and `kerfjs setup`): the
+  composition catalog's own fields no longer read as a "v2" of the component
+  catalog.** In `component-composition.json` (and any consumer composition
+  catalog), `"schemaVersion": 2` is now `"schemaVersion": 1` — the composition
+  format's own first version, independent of `component-catalog.json`'s — and
+  `compatibility.v1Catalog` is now `compatibility.componentCatalog`. A
+  scaffolded package's `kerf.components.json` renames its `v1Catalog` field to
+  `componentCatalog` the same way. Regenerate scaffolded catalogs
+  (`npm run catalog:generate`), and change any `.kerf-ui-profile.json` `composition`
+  location from `"schemaVersion": 2` to `"schemaVersion": 1`; a catalog still
+  carrying the old fields fails validation with a message naming the rename.
+  The `ComponentComposition` type follows (`schemaVersion: 1`,
+  `compatibility.componentCatalog`).
+
+- **`@kerfjs/ui` `NavStack` bars use the standard `Toolbar` padding.** The
+  navigation bar dropped its toolbar's block padding to stay 44px tall, so its
+  title and controls touched the bar's edges. It now keeps the 8px above and
+  below that every other toolbar has (60px plus any top safe-area inset).
+
+- **`@kerfjs/ui` multiline list rows break long camelCase names at word
+  boundaries.** A string label in a `multiline` `ListItem` or `ListActionRow`
+  (such as a Catalog sidebar entry) gets `<wbr>` break opportunities at its
+  camelCase and acronym boundaries, so `QuickTicketComposer` wraps as
+  `QuickTicket` / `Composer` instead of `QuickTicketComp` / `oser`. Breaking
+  mid-word remains the fallback for a single word that is still too wide.
+- **`wbr` is a typed JSX intrinsic element.** The runtime already rendered it
+  as a void element; `JSX.IntrinsicElements` now declares it.
+
+- **`@kerfjs/ui` `Badge` has a text-free dot, and `TabScaffold` tabs can show
+  it.** `Badge` takes `size="dot"`: an 8px solid circle in the badge's tone,
+  with no children, appearance, or shape. Because a dot has no text, its props
+  require either a `label` (announced as an image, for example
+  `label="New activity"`) or `ariaHidden` when the owning component already
+  announces it. `TabScaffoldTab` accepts `badge: true` for the iOS tab-bar dot
+  (new content without a count), centered on the icon's top-trailing corner;
+  its `badgeLabel` is required and joins the tab's accessible name
+  ("Settings, Update available"). `BadgeTextProps` and `BadgeDotProps` are
+  exported from the root barrel.
+
+- **`@kerfjs/ui` `Toolbar` truncates the leading title instead of letting the
+  center zone cover it.** When a leading identity, a `center` group, and
+  trailing actions no longer fit one row, the center zone keeps its whole
+  content width and the leading title ends in an ellipsis. Previously the
+  center track could shrink below its group, which then painted over the
+  title — a pushed `NavStack` view with a center group did this at 390px. The
+  fix holds under every `responsive` policy and both `centerAlign` values, and
+  a toolbar that fits lays out exactly as before.
+
+- **`@kerfjs/ui` `ValueTableRow` keeps its value readable beside a long
+  label.** A long single-word label (such as `ConnectionStateBanner` in a
+  390px-wide table) no longer squeezes the value to 0px wide, where it wrapped
+  one character per line while the label ran underneath it. The label and value
+  now share the row as two content-sized columns: a short value stays whole on
+  one line, the label wraps at its spaces and ends an over-long word in an
+  ellipsis before the value, and when both are long they split the row.
+
+- **`@kerfjs/ui` pinned chrome can give way in a short pane.** `Pane` takes
+  `chromePlacement="auto"`: its header and footer stay pinned while the pane is
+  at least 480px (30rem) tall, and below that the whole pane scrolls as one
+  column so tall chrome never squeezes the content to nothing.
+  `WorkbenchChromePlacement` gains `"auto"` for `mainHeaderPlacement` /
+  `mainFooterPlacement`, and `Catalog` now defaults `headerPlacement` /
+  `footerPlacement` to `"auto"`. Its entry description is pinned under the
+  toolbar, which at 200% text size on a short window had left the preview 0px
+  tall.
+
+- **`@kerfjs/ui` `TabScaffold` tabs can show a badge.** Give a
+  `TabScaffoldTab` a `badge` (a count or short string) to show the iOS tab-bar
+  badge — a compact, solid danger `Badge` at the top-trailing corner of the
+  tab's icon. The badge is hidden from assistive technology; the tab's
+  accessible name becomes `"<label>, <badgeLabel>"` (for example
+  "Inbox, 3 unread"), with `badgeLabel` defaulting to the badge text. Tabs
+  without a badge are unchanged.
+
+- **`@kerfjs/ui` `ListItem` and `ListActionRow` labels stay out of the
+  trailing slot.** A long single-word primary label (such as a Catalog sidebar
+  entry named `ConnectionStateBanner` in a narrow rail) no longer runs
+  underneath trailing status text. Single-line rows now end the primary label
+  and description with a real ellipsis (previously the text was cut mid-glyph
+  with no "…"), and `multiline` rows break a word wider than the label column
+  onto the next line.
+
+- **Custom elements keep the `role` and `aria-*` they set on themselves across
+  re-renders.** Web components conventionally own their host's ARIA (Web
+  Awesome's `wa-option` sets `role="option"` / `aria-selected`, `wa-divider`
+  sets `role="separator"`; Shoelace and FAST do the same), but a template never
+  mentions them, so the morph and the keyed-list attribute fast path stripped
+  them on the next re-render. On any custom element (hyphenated tag), `role`
+  and `aria-*` are now element-owned like `open`: never removed just because
+  the template omits them. The template can still set or change them, a signal
+  binding set to `null` / `false` still removes them, and plain elements are
+  unchanged. Trade-off: omitting one from a static template no longer removes
+  it from a custom element — render an explicit value (`aria-pressed="false"`)
+  instead.
+
+- **`@kerfjs/ui` layout regions no longer slow edits to long lists inside
+  them.** The rule that clears the safe-area context for the children of a
+  Workbench main area or panel, SplitView list or detail, NavStack view,
+  TabScaffold scene, or CollapsiblePanel content made each child re-check the
+  region in Chromium on every DOM change. A 1000-row list placed directly in
+  one of these regions took about 46ms per style recalculation (2ms with the
+  list one level down), and now takes about 0.2ms. Layout and insets are
+  unchanged.
+
+- **`@kerfjs/ui` `CollapsiblePanel` no longer slows insertions into long
+  lists.** An expanded inline panel clears its screen edge for its siblings;
+  the rules that did so selected the siblings themselves
+  (`:has(~ panel)` and `panel ~ *`), which in Chromium made each row inserted
+  into or removed from a long list restyle the list's other rows — about
+  14.6ms instead of 0.2ms per insertion beside a 1000-row list. The panel's
+  container now carries a flag that a CSS style query reads, so a list pays
+  nothing. The edge still clears for the panel's siblings and returns when it
+  collapses; the one difference is that a sibling placed before a left panel
+  or after a right or bottom panel now loses the edge too.
+
+- **`@kerfjs/ui` restore corners and covered floating controls no longer slow
+  every style recalculation.** The `CollapsiblePanel` / `ResizableRegion`
+  restore-corner anchor scope (`:has(> restore) > * > * > *`) and the static
+  side-overlay covered flag (`:has(> open overlay) > :not(overlay)`) put a
+  universal selector after a `:has()` container, which in Chromium restyled
+  the children of every ancestor of each DOM change — about 85ms instead of
+  1ms per edit beside a 1000-row list. The drawer now publishes its anchor
+  only beside a restore control's container (or its work-area column), and
+  the covered flag is set on the overlay's container and cleared on its
+  overlay children. Restore-corner placement and covered-control hiding are
+  unchanged; a new CSS unit test rejects the costly `:has()` shapes.
+
+- **`@kerfjs/ui` adds `ContentItem`.** Import it from
+  `@kerfjs/ui/content-item` to render one self-contained pane child with the
+  shared 8px margin, 1px border, and 8px padding. Framing and shape are typed
+  props instead of hand-written modifier classes:
+  - `frame="framed"` paints the neutral border in the 1px the item always
+    reserves, so its geometry does not change (replacing
+    `class="kui-content-item kui-content-item--framed"`);
+  - `shape="pill"` selects the 22px radius.
+  - `ariaLabel` names a distinct region, and `focusTarget` makes the item a
+    programmatic focus target (`tabindex="-1"`), such as a NavStack view's
+    `data-nav-focus` target.
+
+  The `.kui-content-item` classes stay public for elements that must carry the
+  geometry themselves; their CSS now lives in `content-item.css`, which
+  `layout.css` still imports. There is no filled variant — use `SunkenPanel`
+  for a lowered surface. The catalog, demos, and recipes use the component.
+
+- **`@kerfjs/ui` icon-only toolbar buttons show the same help tag.** An
+  icon-only `<button>` or link inside a `ToolbarControlGroup`, named by
+  `aria-label` with no visible text, now shows the help tag icon-only Selects
+  and PopupMenus show, with the same 500ms hover delay, keyboard-focus-only
+  display, press/Escape dismissal, and quick scanning along a toolbar. The tag
+  is `aria-hidden` and never renames the button. A button with a native
+  `title`, or with its own Web Awesome tooltip, keeps that and gets no second
+  tag. The `select/register` and `popup-menu/register` imports install it; a
+  toolbar with icon-only buttons but neither control imports the new
+  `@kerfjs/ui/help-tags/register` subpath, which registers only the tooltip.
+
+- **`@kerfjs/ui` icon-only Select and PopupMenu triggers show a help tag.**
+  An icon-only `Select` (single or `multiple` with `triggerIcon`) and an
+  icon-only `PopupMenu` now show a Web Awesome tooltip naming the control on
+  hover (after 500ms) and on keyboard focus: a filter reads "Filter by label:
+  Bug, Docs", a single Select its name and current choice, a menu its `label`.
+  It hides while the popup is open, on a press, and on Escape. The tag repeats
+  the accessible name, so it is `aria-hidden` and never joins
+  `aria-labelledby`; screen readers still hear the name once. It is installed
+  by the existing `select/register` and `popup-menu/register` imports, needs no
+  props, and never appears for labeled Selects or text menu triggers.
+
+- **`@kerfjs/ui` toolbar groups drop their focus ring while a popup is open.**
+  A `ToolbarControlGroup` that owns the ring (`focusRing="outline"` or
+  `"halo"`) no longer paints it while a Select listbox or `PopupMenu` inside it
+  is open; the open popup shows focus, and the ring returns when the popup
+  closes with focus still in the group. This matches the per-control Select
+  and PopupMenu triggers.
+
+- **`@kerfjs/ui` multiple `Select` can be an icon-only toolbar filter menu.**
+  Set `selectedPresentation: 'icon-only'` on a `multiple` Select together with
+  a fixed `triggerIcon` (for example a funnel `LucideIcon`); the types require
+  `triggerIcon` there and reject it everywhere else. The trigger keeps the
+  icon-only caret pill used in a `ToolbarControlGroup`, and:
+  - shows the fixed icon whatever is chosen;
+  - adds a compact count `Badge` while any choice is chosen;
+  - ends the combobox's accessible name with the chosen labels in choice order
+    ("Filter by label: Bug, Docs"), leaving the hidden value text empty so the
+    list is not announced twice.
+
+  The popup still stays open while choices toggle.
+
+- **`@kerfjs/ui` `Select` options keep their accessibility semantics across
+  re-renders.** Re-rendering a Select (for example after its `change` handler
+  updates the controlling signal) removed the `role="option"` and
+  `aria-selected` Web Awesome sets on each option, so screen readers lost every
+  option's role and selected state. They now survive in single and `multiple`
+  Selects through the core rule below (custom elements own their `role` /
+  `aria-*`), with no Select-specific restore.
+
+- **`@kerfjs/ui` `Select` dividers keep their separator role across
+  re-renders.** The `wa-divider` a `separatorBefore` choice adds lost the
+  `role="separator"` and `aria-orientation` Web Awesome sets on it the first
+  time the enclosing mount re-rendered, and never got them back, so assistive
+  technology stopped announcing the break between option runs. The Select now
+  renders both attributes itself.
+
+- **`@kerfjs/ui` `Select` and `PopupMenu` re-renders no longer force Web
+  Awesome updates.** Web Awesome reflects its default `size`, `appearance`,
+  `placement`, and `orientation` onto `wa-select`, `wa-dropdown`, and
+  `wa-divider`; the templates omitted them, so every re-render of the enclosing
+  mount stripped them and each host ran a full Lit update to put them back. The
+  templates now render those defaults (`wa-select size="m"
+appearance="outlined" placement="bottom"`, `wa-dropdown size="m"`, divider
+  `orientation="horizontal"`), so an unchanged re-render leaves the hosts
+  alone. No visual change. The `@kerfjs/ui/webawesome` JSX declarations type
+  these attributes.
+
+- **`@kerfjs/ui` Workbench and CollapsiblePanel panes and chrome lists are
+  configurable.** The `Pane`s these layouts compose around app content now
+  take the new `PaneConfig` type (`contentElement`, `contentLabel`,
+  `separators`, `safeAreaEdges`): a Workbench panel's or `CollapsiblePanel`'s
+  `pane`, and the Workbench's `mainPane`. The `List`s holding `mainHeader` /
+  `mainFooter` take the new `ListConfig` type (`gap`, `hAlign`, `vAlign`,
+  `dividerSides`, `textInsets`, `controlInsets`) through `mainHeaderList` /
+  `mainFooterList`. Previously this configuration was hard-coded, so, for
+  example, a navigator rail could not render its content as a `nav` landmark
+  without restyling. Omitted or `undefined` fields keep today's defaults, and
+  the default markup is unchanged.
+
+- **`@kerfjs/ui` `SplitView` forwards its `ResizableRegion` and compact
+  `NavStack` configuration.** `resizable` now also takes the list region's
+  `separator`, `handleIcon`, `contentOverflow`, and collapse options
+  (`collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,
+  `restorePosition`), so an app can hide the list and float a restore control
+  without leaving `SplitView`. The new `compactStack` prop forwards the compact
+  stack's `toolbarConfig`, `backIcon`, `backText`, `hideToolbar`, and
+  persistent `bottomToolbar`, and gives the list and detail views their own
+  toolbar groups (`list` / `detail`: `leading`, `center`, `toolbar`,
+  `bottomToolbar`). Omitted options keep today's defaults.
+
+- **`@kerfjs/ui` `NavStack` renders its top chrome as a real `Toolbar`.** The
+  back control is a borderless `ToolbarControlGroup` and the title a
+  `ToolbarText` in the leading zone, and the stack now forwards:
+  - `toolbarConfig` — the `Toolbar` configuration (`dividerSides`,
+    `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`) plus `label`,
+    `titleSize` (default `large`), and `headingLevel`;
+  - per-view `leading` and `center` groups beside the existing trailing
+    `toolbar`;
+  - `backIcon` and visible `backText` for the back control.
+
+  The defaults keep today's bar: no divider, one 44px band, and the top and
+  side safe-area edges claimed. The hand-rolled `kui-nav-stack__lead` and
+  `kui-nav-stack__actions` wrappers are gone (their content now sits in the
+  toolbar's zones), and `kui-nav-stack__back` / `kui-nav-stack__back-icon`
+  are no longer styled by the stack.
+
+- **`@kerfjs/ui` configures with props instead of token overrides.** Five
+  settings apps previously reached through raw `--kui-*` overrides now have a
+  typed prop or modifier; each defaults to today's rendering, and the
+  underlying tokens keep working:
+  - `FloatingToolbar` `inset` (a `CssLength`, default `--kui-space-m`) moves
+    it from the container edges. Omit it inside a restore corner, which owns
+    the inset.
+  - `DisclosureArrow` `size` (a `CssLength`, default 18px root-scaled).
+  - `ListHeader` `headingLevel` (1–6, default 2) sets the label's native
+    heading element for passive and trailing-action headers; a toggle header
+    has no heading and rejects it at compile time.
+  - `TokenSearchField` `clearIcon` replaces the clear action's glyph.
+  - `.kui-content-item--framed` paints the standard neutral border on a
+    content item that marks a real distinction, with no geometry change.
+
+  The docs and AI guidance also stop recommending `--kui-edge-inset-*`
+  overrides: an app-owned arrangement passes `safeAreaEdges` to its panes and
+  edge-claiming toolbars (including the layout toolbar configurations, which
+  forward it).
+
+- **`@kerfjs/ui` hides a work area's floating controls under an open side
+  overlay.** While a side overlay is open — a Workbench rail (static
+  `presentation: "overlay"`, or a responsive overlay whose breakpoint applies),
+  a `wireSidebar` compact overlay or `presentation="overlay"`
+  `CollapsiblePanel`, or a horizontal `presentation="overlay"`
+  `ResizableRegion` — the covered work area's `FloatingToolbar`s and the
+  layouts' restore corners are now hidden (`visibility: hidden`, so they also
+  leave the tab order and the accessibility tree) instead of relying on
+  stacking order alone. A phone-width app could otherwise paint the main
+  column's floating drawer toggle over its open inspector. They come back as
+  the overlay closes; the overlay's own floating controls and a bottom
+  drawer's overlay are unaffected.
+
+- **`@kerfjs/ui` `Select` supports multiple selection.** Set `multiple: true`
+  and pass the chosen values as an array `value`; the props are typed so an
+  array value requires `multiple`. Behavior:
+  - The popup stays open while the person toggles choices with the pointer,
+    Enter, or Space, and closes only on an outside press, Escape, or focus
+    leaving.
+  - Each chosen option shows a check.
+  - The closed control summarizes the chosen labels in choice order as a short
+    localized list, or shows `placeholderText` when none are chosen.
+  - `change` / `input` report the value array, and a form submits every chosen
+    value under `name`.
+  - Re-rendering with a different `value` updates the selection even after the
+    person has interacted.
+
+  `renderSelected` and `selectedPresentation="icon-only"` stay single-value
+  only.
+
+- **`@kerfjs/ui` `PopupMenu` now looks exactly like `Select`.** Both read one
+  shared popup contract, so a command menu beside a value list in a toolbar
+  draws the same popup. `PopupMenu` changes:
+  - its caret turns to face the open menu;
+  - its menu fades in without scaling;
+  - it takes the Select listbox's 4px inset (also under the default
+    `menuInset="standard"`);
+  - its rows use the Select option's height, padding, and reserved check
+    column, and its icons use the same 16px size and 8px gap;
+  - a keyboard-focused item takes the Select's current-option fill instead of
+    a focus ring;
+  - headings render as the Select's uppercase group titles rather than slotted
+    `h3` elements.
+
+  An open `Select` also no longer paints its trigger focus ring. The open
+  listbox shows focus, and the ring returns when it closes.
+
+- **`@kerfjs/ui` `Catalog` exposes its sidebar and toolbar configuration.** New
+  `sidebar` prop (size, `resizable`, `separator`, `collapseMotion`,
+  `presentation`, `responsiveOverlayAt`, `compactOverlay`, and the header
+  `toolbar`'s `ToolbarConfig`) forwarded to its Workbench rail, plus
+  `mainToolbar` / `footerToolbar` `ToolbarConfig` props. `wireCatalog` takes
+  `sidebarSize` / `sidebarStorageKey` to wire a resizable sidebar. Today's
+  288px fixed sidebar and toolbar policies remain the defaults.
+
+- **`@kerfjs/ui` composed toolbars are configurable.** `WorkbenchMainToolbar`,
+  `WorkbenchMainBottomToolbar`, and the panel `toolbar` of a Workbench panel or
+  `CollapsiblePanel` now take the `Toolbar`'s configuration: the new
+  `ToolbarConfig` type, covering `dividerSides`, `centerAlign`, `responsive`,
+  `responsiveAt`, and `safeAreaEdges`. Previously their dividers were
+  hard-coded, so for example dropping the line between a toolbar and its
+  content took CSS. Today's dividers remain the defaults. Also:
+  - `mainBottomToolbar` and panel toolbars take a `center`;
+  - panel toggles take localized `showLabel` / `hideLabel`;
+  - a Workbench panel's floating restore controls follow its
+    `restorePosition`.
+
+- **Breaking (`@kerfjs/ui`): removed the pre-release compatibility surface.**
+  - The `DividerSides` type is gone; use `Sides`, from the renamed `sides`
+    module.
+  - `ListInsetText.horizontalOnly` and its `kui-list-inset-text--horizontal`
+    class are gone; pass `sides="rl"` instead.
+  - The legacy color tokens are gone, both as `--kui-color-*` properties and
+    as `uiColor()` names. Replace them with their canonical tokens:
+
+    | Removed                                       | Use instead             |
+    | --------------------------------------------- | ----------------------- |
+    | `border`                                      | `neutral-border-normal` |
+    | `border-quiet`                                | `neutral-border-quiet`  |
+    | `accent`                                      | `brand-fill-normal`     |
+    | `accent-text`                                 | `brand-on-quiet`        |
+    | `pop`                                         | `pop-fill-quiet`        |
+    | `pop-text`                                    | `pop-on-fill`           |
+    | `success`, `warning`, `danger`                | `*-fill-quiet`          |
+    | `success-text`, `warning-text`, `danger-text` | `*-on-quiet`            |
+
+- **New `@kerfjs/ui` `PopupMenu` (`@kerfjs/ui/popup-menu`).** It renders a
+  trigger and typed commands, headings, and dividers over the Web Awesome
+  dropdown. Put it in a `single` `ToolbarControlGroup` with `nestedDropdown`, or
+  wrap it in a `PopupSurface`. Register it once with
+  `@kerfjs/ui/popup-menu/register`. It replaces hand-written `wa-dropdown`
+  markup, which the catalog discourages: the guidance, the toolbar demos, and
+  the Catalog's "Components" menu now use it. It also fixes two defects that
+  hand-written menus had:
+  - Icon-only triggers were unnamed, because a Web Awesome button ignores an
+    `aria-label` on its host. PopupMenu renders `label` as visually hidden text
+    inside the button.
+  - A keyboard choice (Enter or Space) never reached click-delegated
+    `data-action` handlers. PopupMenu's registration routes it through the
+    item's click.
+- The UX catalog's application-layout demo no longer uses the discouraged
+  `wa-button-group`.
+
+- **`@kerfjs/ui`'s `TokenSearchField` takes a `revision` prop for programmatic
+  text replacement.** The editor's text is DOM-owned, so a new `query` with the
+  same tokens was silently ignored, for example when reseeding a persistent
+  dialog's field on reopen. Changing `revision` rebuilds the editor from `query`
+  and `tokens`, so consumers no longer need to re-key a wrapper element.
+
+- **`@kerfjs/ui`'s `TabBar` strip no longer scrolls vertically.** The strip set
+  only `overflow-x: auto`, so any vertical excess (consumer padding, focus-ring
+  insets, taller tabs under larger text) let it scroll up and down on touch. It
+  now scrolls only horizontally, and it takes a `min-height` so it grows to fit
+  taller tabs instead of clipping them.
+
+- **The `@kerfjs/ui` desktop app-shell recipe is a `Workbench`.** The old
+  pane switcher that showed one pane at a time below desktop sizes is gone. The
+  navigation and inspector are now resizable Workbench rails with their own
+  toolbars, and their show toggles relocate into the work-area toolbar. On a
+  narrow container the rails overlay the task list one at a time. The
+  collapsible-sidebar recipe composes each panel's `toolbar` and uses
+  `CollapsiblePanelRelocated` for its restore controls.
+
+- **`@kerfjs/ui`'s `CollapsiblePanel` composes a panel toolbar and relocates its
+  controls.** A panel takes the same `toolbar` roles as a `Workbench` panel
+  (`title`, `panelOnly`, `constant`, and a standard `toggle`) plus a `footer`,
+  and the new `CollapsiblePanelRelocated` renders a collapsed panel's constant
+  groups and toggle wherever the app's work-area toolbar holds them.
+  `wireSidebar` hands focus to that relocated toggle when the panel closes, even
+  when the app renders it a frame late. `collapsiblePanelToggleIcon` is
+  unchanged.
+
+- **`@kerfjs/ui`'s `Catalog` is built on `Workbench` and dogfoods the package's
+  components.** The sidebar is a Workbench left rail with the standard toggle
+  (labels "Show/Hide {brand} catalog"), which moves into the entry toolbar while
+  collapsed; on a small screen the sidebar overlays the stage instead of the
+  former stacked two-column navigation, which is gone. The sidebar, sections,
+  footer, and example notes are `List` / `ListHeader` / `ListInsetText` / `Text`
+  compositions, and most catalog CSS (and every viewport media query in the
+  shell) is removed. New: `Catalog`'s `id`, `headerPlacement`, and
+  `footerPlacement`; `wireCatalog`'s `collapsed` and `id` options (the sidebar is
+  wired like a Workbench rail and an open overlay closes on a selection);
+  `Workbench`'s `mainHeader`, `mainFooter`, `mainHeaderPlacement`,
+  `mainFooterPlacement`, and `mainToolbar.responsive` / `responsiveAt`;
+  `ListInsetText`'s `rootAttributes`. `wireWorkbench` now also re-checks panel
+  breakpoints when the root font size changes, and hands focus to a panel's
+  relocated toggle when an unfocused click on its own toggle closes it (WebKit).
+
+- **`@kerfjs/ui`'s `Workbench` rails overlay the work area on small screens by
+  default.** A rail's `responsiveOverlayAt` now defaults to `"narrow"` (704px
+  of Workbench width; the new `"never"` keeps it inline), so a sidebar covers
+  the work area and any open drawer instead of squeezing it, one at a time
+  with `wireWorkbench`. On a compact (448px) Workbench an open overlay rail
+  fills the width less a 44px dismiss strip
+  (`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge;
+  the new per-rail `compactOverlay: "full"` fills it. The bottom drawer's
+  behavior is unchanged. `WorkbenchPanelToolbar` and the other panel-toolbar
+  types are now exported from `@kerfjs/ui/workbench`.
+
+- **`@kerfjs/ui`'s `Workbench` composes panel toolbars and moves a closed
+  panel's controls into the work area.** A panel takes an optional `toolbar`
+  (`title`, `panelOnly`, `constant`, and a standard `toggle: { action, name }`
+  the Workbench renders) and `footer`; the Workbench takes `mainToolbar` and
+  `mainBottomToolbar`. While a panel is closed its constant groups and toggle
+  move to the work area — a left rail's lead the main toolbar, a right rail's
+  end it, a drawer's trail the bottom toolbar or float in a corner
+  `FloatingToolbar` — and its panel-only groups stay behind. `wireWorkbench`
+  keeps focus with the toggle as it moves. Panels without a `toolbar` render
+  exactly as before, and a region's only-child `Pane` or layout now fills it.
+
+- **`@kerfjs/ui`'s list-detail dialog guidance is Workbench-shaped.** On roomy
+  devices the list is a full-height sidebar and the detail a full-height main
+  column, each a `Pane` with its own top `Toolbar`; the main column carries
+  the primary title, the close control (`data-dialog="close"` in a
+  `without-header` Web Awesome dialog), and the record actions, instead of a
+  dialog header spanning both columns. The recipe, `docs/recipes.md`, and the
+  shipped AI skill say so; compact devices keep the full-screen drill-down
+  sheet.
+
+- **`@kerfjs/ui`'s `ToolbarControlGroup` centers a direct icon tile.** A
+  non-interactive icon placed directly in a group — a heading's identity
+  glyph — now takes an icon button's 40px slot and 16px visual, so it centers
+  in the group. It previously sat at the group's start edge, which pushed
+  apps to wrap it in a focusable `<button>` that did nothing.
+
+- **`@kerfjs/ui`'s `Toolbar` keeps its controls in a top control band.** A
+  toolbar now reserves one 44px band at its top: each zone item no taller than
+  the band is centered in it by its own size, and a taller item — a wrapped
+  `ToolbarText` title, a multi-line search, a second trailing row — starts at
+  the band's top and grows down without moving the others. A wrapped title
+  centers its first line in the band, so trailing controls stay beside that
+  line instead of dropping to the middle of the whole title.
+
+- **`@kerfjs/ui`'s segmented `TabBar` ends its strip concentric with the pill
+  track.** The first tab's leading corners, and with `allocation="fill"` the
+  last tab's trailing corners, now follow the track's curve instead of keeping
+  the small segment radius, and compact tabs are inset from the track's ends
+  by the same distance as from its top and bottom. Corners between tabs are
+  unchanged.
+
+- **`@kerfjs/ui`'s `StateBanner` keeps its title, badge, and detail on one
+  baseline in Safari.** The truncating detail was a clipped `inline-block`,
+  which WebKit baselines at its bottom edge: the detail rose about 2px above
+  the title and pushed the title and badge down, so the banner's contents
+  looked vertically misaligned. The detail is now an inline flex wrapper
+  around a clipped inner `<span>`, which takes its text baseline in every
+  engine; truncation and the narrow-width detail line are unchanged.
+
+- **`@kerfjs/ui`'s `wireTabBars` reveals a tab the application selects.** A
+  tab added and selected by the app in an overflowing `TabBar` stayed
+  off-screen, because the wiring revealed a selection only at wire-up, on
+  focus, and after its own keyboard/drag changes. A change of a bar's selected
+  tab now scrolls that bar's strip (never the page) to show it; re-renders that
+  keep the selection leave a user-scrolled strip alone.
+
+- **`eslint-plugin-kerfjs`'s `ui-composition` rule resolves application
+  wrappers imported through a barrel.** A cataloged wrapper registered only by
+  its defining source file, so `import { DemandSegmentsControl } from
+'./components/index.js'` (where `index.ts` re-exports it) was an unknown
+  element and reported `KUI-L202` in a toolbar zone despite its `rendersAs`.
+  Relative re-exports — `export { X } from`, `export { X as Y } from`,
+  `export * from`, and chains of them — are now followed to the cataloged
+  source file. Type-only and namespace re-exports and non-cataloged components
+  stay unresolved.
+
+- **A collapsed `@kerfjs/ui` `Workbench` panel or `ResizableRegion` leaves
+  the accessibility tree.** Only its content was `inert`, so the labeled
+  `aside` / `section` stayed behind as an empty complementary or region
+  landmark that a screen-reader user could still land on. The collapsed
+  region itself now renders `inert` and `aria-hidden="true"`, like a
+  collapsed `CollapsiblePanel`; its separator was already hidden, and each
+  `restoreControl` renders outside it and stays reachable.
+
+- **An expanded `@kerfjs/ui` `CollapsiblePanel` holds its size in a flex
+  layout.** The panel shrank like any flex item beside a work area with wide
+  content, while its content kept the panel's fixed size for the slide-out, so
+  the panel's edge clipped the content — in the collapsible-sidebar recipe at
+  1280px, the rail showed 211 of its 232px and cut off the selected Inbox
+  row's count. The panel is now `flex-shrink: 0`; the sibling work area gives
+  way instead.
+
+- **`@kerfjs/ui` overlay panels span their host on the fixed axis.** The
+  85vw / 85vh overlay maximums (`--kui-resizable-region-overlay-max-*`,
+  `--kui-workbench-overlay-max-*`) applied to both axes, so an overlay bottom
+  drawer stopped about 15% short of its host's width and an overlay side rail
+  in a full-height layout stopped short of the bottom. Each maximum now caps
+  only the panel's resizable axis: side overlays cap their width, drawers
+  their height.
+
+- **An overlay `@kerfjs/ui` `ResizableRegion` paints the surface.** With
+  `presentation="overlay"` the region floated over the work area with a
+  shadow but no background, so the content beneath — and a collapsed rail's
+  restore control stacked under it — showed through. It now paints
+  `--kui-color-surface`, like an overlay `CollapsiblePanel`; an inline region
+  stays transparent over its host.
+
+- **A pinned `@kerfjs/ui` resize separator no longer overwrites the
+  remembered size.** When a container squeezes a `Workbench` rail, drawer, or
+  `ResizableRegion` below its `min` (or its reachable range collapses to one
+  size), the separator cannot move it, yet an arrow/Home/End key or a drag
+  still committed the configured `min` to the app's size signal and storage:
+  a rail remembered at 280px silently became 180px and came back at 180px
+  when the window widened. A pinned separator now commits nothing, so the
+  track returns at its remembered size once there is room.
+
+- **A `pending` `@kerfjs/ui` `AppTab` is selectable and no longer dimmed.**
+  A known tab that is still opening now keeps its select button enabled and
+  in the roving tab order, so a user can switch to it and the application can
+  show placeholder content in its panel until loading completes. With
+  `webawesome.css` loaded, Web Awesome's native `button:disabled` no longer
+  dims the pending pill to 50%; it shows only its quiet name color and
+  trailing spinner, as documented. Close and dragging stay disabled while
+  pending, and it stays `aria-busy`. An unknown `placeholder` tab is
+  unchanged: disabled and out of the tab order.
+
+- **Closing a `@kerfjs/ui` `Workbench` panel from its own control by mouse
+  returns focus in Safari.** Safari never focuses a clicked button, so
+  pressing an open panel's Hide control blurred the focused control to the
+  page before the click collapsed the panel, and `wireWorkbench` — which
+  returns focus only when it is inside the closing panel — left focus on the
+  page body instead of the toggle that opened it. A press that starts inside
+  the panel while focus is there now counts as focus inside, so the close
+  returns it; focus the user has moved to another element since is left
+  alone.
+- **A collapsed `@kerfjs/ui` `CollapsiblePanel` or `ResizableRegion` leaves
+  the Tab order.** Both kept collapsed content in the DOM, only slid out and
+  clipped, so Tab still reached its controls; focusing one scrolled the clipped
+  panel, and a `CollapsiblePanel`'s `aria-hidden` put those focusable controls
+  inside a hidden subtree. A collapsed `CollapsiblePanel` now renders `inert`
+  beside its `aria-hidden`, and a collapsed `ResizableRegion` renders its
+  content wrapper `inert`, with no wiring needed. The slide-out still animates,
+  each `restoreControl` stays outside the inert subtree and reachable, and
+  `wireSidebar` still hands focus to the panel's toggle when it collapses from
+  inside.
+
+- **A collapsed `@kerfjs/ui` `Workbench` rail's restore control no longer
+  covers an expanded bottom drawer.** A `leftRail` / `rightRail`
+  `restoreControl` floats in the Workbench's bottom corner, which the bottom
+  drawer's column reaches once the rail collapses, so with the drawer expanded
+  the control sat on the drawer's content. An expanded inline drawer now
+  publishes its top edge as a CSS anchor scoped to its Workbench, and the
+  rail's control floats the restore inset above it, returning to the corner
+  when the drawer collapses. An overlay drawer (static or `responsiveOverlayAt`)
+  still covers the control as every open overlay does, a nested Workbench's
+  drawer moves only its own rails' controls, and engines without anchor
+  positioning keep the corner.
+
+- **A collapsed `@kerfjs/ui` `Workbench` panel's content leaves the Tab order.**
+  A collapsed rail or bottom drawer kept its content in the DOM, only slid out
+  and clipped, so Tab still reached its controls; focusing one (at a narrow
+  width, the collapsed inspector's or output drawer's own Hide control)
+  scrolled the clipped panel and slid its hidden content back over the work
+  area. The panel's content wrapper now renders `inert` while `collapsed`, with
+  no wiring needed, so neither Tab nor assistive technology reaches it; the
+  slide-out still animates and the `restoreControl`, which lives outside the
+  content, stays reachable.
+
+- **A `kerfjs/overlay` popover or tooltip in a transformed or filtered modal
+  `<dialog>` now lands against its anchor.** A surface rendered into a
+  dialog's `[data-kerf-overlay-host][data-morph-skip]` slot is
+  `position: fixed`, and a dialog styled with `transform`, `filter`,
+  `perspective`, `contain`, or `will-change` becomes the containing block for
+  fixed descendants, so the surface used to land offset by the dialog's
+  position (and scale). `positionAnchored` (and so `autoReposition`,
+  `popover()`, and `tooltip()`) now measures the element's fixed-position
+  containing block with a transient 1px probe and maps its viewport
+  coordinates into it, compensating translation and scale. Rotated or skewed
+  containing blocks are not compensated.
+- **The `@kerfjs/ui` UX catalog demonstrates a standalone restore control.**
+  The CollapsiblePanel route gains a "Restore control" example: a bottom
+  drawer that collapses to a `FloatingToolbar` `restoreControl` in its frame's
+  corner, wired with `wireSidebar` so the control restores the drawer and
+  focus moves between it and the drawer's own hide toggle.
+
+- **A `@kerfjs/ui` collapsed rail's restore control no longer covers an open
+  bottom drawer beside it.** When a `CollapsiblePanel` or `ResizableRegion`
+  with a `restoreControl` shared its container with an expanded bottom
+  drawer — a bottom `CollapsiblePanel` or bottom `ResizableRegion` — as a
+  sibling or inside the app's work-area column, the control floated in the
+  container's bottom corner, on top of the drawer. It now floats the same
+  inset above the drawer's top edge, follows the drawer as it resizes, and
+  returns to the corner when the drawer collapses. A drawer nested deeper,
+  inside the work area's own content, does not move it. This uses CSS anchor
+  positioning; engines without it keep the container corner.
+
+- **An open `@kerfjs/ui` `CollapsiblePanel` or `ResizableRegion` overlay now
+  covers other panels' restore controls, as a `Workbench` overlay does.** A
+  collapsed panel's `restoreControl` stacked at z-index 42, above
+  `wireSidebar`'s compact overlay and its backdrop and above an overlay
+  `ResizableRegion`, so it floated over an open overlay and stayed clickable
+  behind the overlay's focus trap. `--kui-collapsible-panel-restore-z` now
+  defaults to two less than `--kui-collapsible-panel-overlay-z` (38),
+  `--kui-resizable-region-restore-z` to two less than
+  `--kui-resizable-region-overlay-z` (39), and the compact backdrop's
+  `--kui-collapsible-panel-backdrop-z` to one less than the overlay (still
+  39), so an app that moves the overlay z-index keeps the order. When the
+  overlay closes, the control shows and works again.
+- **An open `@kerfjs/ui` `Workbench` overlay now covers other panels'
+  restore controls.** Restore controls stacked above every overlay, so a
+  collapsed drawer's corner restore control floated over an open right-rail
+  overlay's content. An open overlay is now the top layer, like a sheet over
+  the view beneath it: `--kui-workbench-restore-z` defaults to two less than
+  `--kui-workbench-overlay-z` (39 by default, previously 42), below the
+  drawer and rail overlays. When the overlay closes, the control shows and
+  works again; a collapsed overlay passes pointer events through to it.
+- **`@kerfjs/ui` `wireWorkbench` overlay panels now take focus and keep Tab
+  inside them,** like `wireSidebar`'s compact overlay (the ARIA dialog
+  pattern). An open overlay covers the work area, yet focus stayed on the
+  control that opened it and Tab walked through the covered editor. A wired
+  panel that opens while it presents as an overlay now focuses its first
+  focusable control (usually the close control in its header); while it is
+  open, Tab and Shift+Tab cycle through its controls, and Escape, its own
+  close control, or an outside press leaves it, returning focus to the
+  opener. Panels opening inline never move focus. Focus returned on close
+  also skips an opener inside another panel that has closed since.
+  `dismissOverlays: false` leaves all of this to the app.
+- **`@kerfjs/ui` `Workbench` keeps its work-area minimum beside fixed rails
+  and above the bottom drawer.** `mainMinSize` used to apply only beside a
+  resizable rail, so two fixed 280px rails on a ~730px Workbench left the
+  editor 174px; now every inline rail, fixed or resizable, shrinks in
+  proportion (its content following the shown width) to keep the work area
+  `mainMinSize` px wide. A new `mainMinHeight` prop (default 120, `0` turns it
+  off) is the drawer's counterpart: an inline drawer, fixed or resizable,
+  shrinks when the Workbench gets shorter, and `wireWorkbench` stops a
+  resizable drawer where the work area would drop below that height (reported
+  in `aria-valuemax`) instead of only at the drawer's own `max`.
+- **A `@kerfjs/ui` Workbench rail squeezed below its minimum now reports the
+  width it shows.** When the Workbench was too narrow for a rail's `min`
+  beside the work-area minimum, the rail showed about 172px while its
+  separator still announced `aria-valuenow="180"`. The separator now reports
+  the shown width, with `aria-valuemin` and `aria-valuemax` pinned to it: the
+  WAI-ARIA window splitter's value is the separator's actual position and must
+  sit inside its range, and the separator cannot move a rail the container
+  holds there. Resizing still commits no less than `min`, and the configured
+  range returns once there is room. A `ResizableRegion` a parent clamps below
+  its `min` reports the same way.
+- **`KUI-L018` (`kerf-ui-analyze` / `kerf-ui-doctor`) now measures contrast and
+  follows the cascade.** When a `--wa-color-{tone}-fill-loud` override and its
+  `on-loud` are both literal colors (including `light-dark()`), a pair below
+  4.5:1 in either color scheme is reported with its ratio, and an unpaired
+  literal fill that still clears 4.5:1 against the theme's default `on-loud`
+  is no longer reported. An `on-loud` set in an ancestor scope (`:root`, or the
+  leading selector of a descendant chain) or in another stylesheet the same
+  entry loads now counts as the pair.
+- **`kerf-component-catalog` lets a private application declare components
+  without a fake `exports` map.** In a private package
+  (`"private": true`), a component's `publicExports` items may omit `subpath`; the generator
+  verifies each name against the component's `source` file instead of
+  requiring a `./dist/<path>.js` export the bundled app never emits. Publishable
+  packages still need every subpath in `exports`. The v2 catalog schema makes
+  `subpath` optional to match, and the `kerfjs/ui-composition` rule resolves a
+  subpath-less export only by its source file.
+- **`kerf-ui-doctor` and the `kerfjs/ui-public-boundaries` ESLint rule no
+  longer flag the documented `class="kui-app-root"` as KUI-L101 private
+  anatomy.** The `@kerfjs/ui` component catalog now has a `document-baseline`
+  composition entry for `@kerfjs/ui/document.css` that lists `kui-app-root`
+  as its public class, with a catalog demo route showing a `SplitView` filling
+  the root's definite height.
+- The `@kerfjs/ui` heading guidance (`ai/skill.md`, `llms.txt`,
+  `docs/component-selection.md`, `docs/layout.md`) now sizes a panel title to
+  its track: extra-large `ToolbarText` stays the title size for a page, view,
+  dialog, or pane that holds it, while a narrow peripheral rail or drawer
+  names itself with the default size, since extra-large truncated "Inspector"
+  to "Ins…" in a 160px Workbench rail.
+- **A `@kerfjs/ui` `Workbench` panel open when `wireWorkbench` wired up no
+  longer drops focus to the page when it closes from inside.** Such a panel
+  had no recorded opener, so without a restore control closing it from its
+  own header left focus on `<body>`. Focus now falls back to a control
+  outside the panel whose `aria-controls` names it (or an element inside it).
+  Each panel renders a stable `id` for that — `<id>-left-rail`,
+  `<id>-right-rail`, and `<id>-bottom-drawer` — so a toggle can name the
+  panel it controls.
+- **`@kerfjs/ui` `wireWorkbench` keeps overlay panels exclusive.** At a narrow
+  width two overlay rails could both be open and, together wider than the
+  Workbench, the right rail covered the left rail's own close control. Opening
+  a panel while it presents as an overlay now closes every other open overlay
+  panel, the bottom drawer included, like `wireSidebar`'s compact overlays;
+  panels presenting inline are never closed by it. New option
+  `exclusiveOverlays` (default `true`); pass `false` to let overlays stay open
+  together.
+- **A `@kerfjs/ui` `CollapsiblePanel` or `ResizableRegion` restore control
+  stays inside its container.** `restoreControl` was `position: fixed` to the
+  viewport, so a panel or region embedded in a page floated it over unrelated
+  page content. It now floats in the `restorePosition` corner of the element
+  that holds the panel (or region), scrolls with it, and is inset by the
+  component's restore inset plus the unsafe area of the edges that container
+  reaches, so a full-viewport shell still places it clear of them. While the
+  control is shown, that container isolates its stacking and becomes its
+  containing block; an app that positions the container itself keeps its own
+  `position`. As in `Workbench`, the corner owns the inset, so a
+  `FloatingToolbar` hosting the control no longer doubles it.
+- The `@kerfjs/ui` UX catalog's Workbench page gains a responsive overlay
+  drawer example: an output drawer with `responsiveOverlayAt: "narrow"` that
+  takes its own track beside a wide editor and becomes a transient overlay
+  over the editor's bottom once the Workbench is 704px or narrower, starting
+  hidden there and closing from its own header, on Escape, or on a press
+  outside it. The Workbench guide shows the pattern.
+- A `@kerfjs/ui` `Workbench` now stacks overlay rails above an overlay bottom
+  drawer. With the drawer and a rail both presented as overlays, their order
+  followed the markup, so the drawer covered the left rail while the right
+  rail covered the drawer. Both rails now stack above the drawer, mirroring
+  the inline layout where rails span the full height beside the drawer's
+  column, and the right rail stacks above the left; restore controls stay
+  above every overlay. The drawer's overlay z-index is now one less than
+  `--kui-workbench-overlay-z`.
+- **A `@kerfjs/ui` `Workbench` overlay rail can always be closed from inside
+  itself.** At a narrow width, the UX catalog's inspector overlay covered the
+  editor toolbar's "Hide inspector" toggle, leaving only Escape or an outside
+  press to close it. The catalog's resizable rails now carry their own close
+  control in their `Pane` header, and the Workbench guide recommends the same
+  for any panel that may present as an overlay. `wireWorkbench` now returns
+  focus stranded in a panel however the panel closed — including through the
+  app's own control inside it, and for inline panels — to the control that
+  opened it, else to its restore control; before, only an Escape, an outside
+  press, or a breakpoint collapse returned it.
+- **A `@kerfjs/ui` `Workbench` restore control stays inside its Workbench.**
+  `restoreControl` was `position: fixed` to the viewport, so an embedded
+  Workbench (the UX catalog's, for one) floated it over the page footer. It is
+  now anchored to a corner of the Workbench itself — the drawer's in the
+  corner of the work-area column, so it never covers an expanded rail — inset
+  by `--kui-workbench-restore-inset` plus the unsafe area of the edges that
+  corner reaches, and it scrolls with the Workbench. The Workbench now
+  isolates its own stacking, so its overlays and restore controls never stack
+  against the page around it. A `FloatingToolbar` can host the control
+  without doubling the inset: the corner owns it, and `FloatingToolbar` now
+  honors `--kui-floating-toolbar-inset` set on an ancestor as well as on
+  itself. The catalog's collapsed console restores from such a toolbar.
+- **`@kerfjs/ui` `wireWorkbench` makes overlay panels transient.** A rail
+  whose `responsiveOverlayAt` breakpoint applied stayed expanded over the
+  editor until the user found its toggle. Pass a panel's app-owned
+  `collapsed` signal (`panels: { leftRail: { collapsed } }`; `size` is now
+  optional, so a panel need not be resizable) and, like `wireSidebar`'s
+  compact overlay, the wiring collapses it when the breakpoint begins to
+  apply (without the collapse motion) and gives back its inline state when
+  the breakpoint stops applying or the wiring is disposed. An open overlay
+  panel, responsive or `presentation: "overlay"`, closes on Escape or on a
+  press that starts and ends outside it, and focus stranded inside returns to
+  the control that opened it, else to its restore control. It is on by
+  default for panels given `collapsed`; `dismissOverlays: false` turns it
+  off. The UX catalog's resizable example wires its rails this way.
+- A `@kerfjs/ui` `Workbench` rail with `presentation: "overlay"` now renders
+  exactly its size. Out of flow, it sized to its content plus its 1px
+  separator border, so a 280px rail measured 281px; it now takes its size
+  explicitly, as the responsive overlays do. Rails and the drawer are also
+  `border-box` now, so a panel's `size` is its whole track, border included,
+  even in an app without a global `box-sizing` reset, and overlay content
+  fills the panel inside its separator instead of painting over it.
+- **A `@kerfjs/ui` `Workbench` bottom drawer with `presentation: "overlay"`
+  is visible again.** Its content is positioned against the drawer's bottom
+  edge, so the out-of-flow overlay box had no height of its own and collapsed
+  to its 1px border. An overlay drawer now takes its configured height (220px
+  by default, or its `size`), covers the bottom of the work-area column, and
+  clamps its content to the overlay maximum height. The drawer also accepts
+  `responsiveOverlayAt: "narrow" | "compact"` like the rails: below that
+  Workbench width it presents as the same overlay, without a separator and
+  never resizable, while the work area takes the full height and keeps its
+  bottom safe-area inset beneath it.
+- The bundled AI assistant configs (`ai/skill.md`, `ai/cursorrules`) now
+  explain the `data-kerf-overlay-host` opt-in next to the one-`mount()`-per-root
+  rule: a modal `<dialog>` of your own that anchors kerf popovers or tooltips
+  needs `<div data-kerf-overlay-host data-morph-skip></div>`, the one allowed
+  nested-mount boundary. The `kerfjs/ai-assistant-configs` lint rule reports
+  installed copies as stale until they are refreshed.
+- The opt-in `rebuiltListeners` dev warning no longer reports a popover or
+  tooltip closing inside a modal dialog's host slot. Removals inside a
+  `[data-kerf-overlay-host][data-morph-skip]` slot belong to the surface's own
+  mount, so the enclosing mount now ignores them, as its re-renders already
+  did. A listener lost to a re-render inside the surface is still reported,
+  once.
+- **A popover or tooltip in a modal `<dialog>` no longer lingers after the
+  dialog is removed when its anchor was moved out first.** A surface rendered
+  into a dialog's host slot left with the dialog, but because its anchor was
+  still in the document, kerf kept it registered as open, and a tooltip on
+  that anchor never showed again. A slot-hosted surface now closes itself
+  (without calling `onDismiss`) when it leaves the document, and the tooltip
+  shows again on the next hover or focus.
+- **A popover inside a modal `<dialog>` is reachable by Tab in Safari on
+  macOS.** A popover or tooltip rendered into a dialog's host slot follows the
+  dialog's own Tab order, and WebKit on macOS skips buttons and links there
+  unless the system keyboard-navigation setting is on. kerf now gives each
+  implicitly tabbable control in a slot-hosted surface an explicit
+  `tabindex="0"` when it opens and again before each Tab keypress, the same
+  way its focus trap already did. Authored tabindexes, disabled controls, and
+  surfaces outside a slot are left alone.
+- `@kerfjs/ui` `Workbench` rails gain `responsiveOverlayAt: "narrow" |
+"compact"`, mirroring `ResizableRegion`'s `responsiveFillAt`: below the
+  Workbench's own 704px (`narrow`) or 448px (`compact`) width the rail
+  presents as an overlay over the work area, without a separator and never
+  resizable, and inline above it — the CSS decides, so apps no longer derive
+  `presentation` from a `deviceClass()` check. The bottom drawer ignores it.
+  A collapsed overlay rail (with `presentation: "overlay"` too) now drops its
+  surface and shadow instead of leaving an empty panel-sized box over the work
+  area. The UX catalog's resizable example uses it and now renders at phone
+  widths, and its collapsed console's restore control is a `ToolbarControlGroup`
+  toggle that actually restores the console.
+- `@kerfjs/ui` `Workbench` keeps a minimum work area beside resizable rails.
+  Two rails dragged near their 480px maximum on a ~1024px Workbench used to
+  leave the editor a sliver; now the work area keeps at least `mainMinSize`
+  px (a new `Workbench` prop, default 320, `0` turns it off). `wireWorkbench`
+  stops drag and keyboard resizing where the work area would drop below it
+  (and reports that reachable maximum in `aria-valuemax`), and when the
+  Workbench narrows, resizable rails shrink in proportion to their sizes, with
+  their content following the shown width, instead of squeezing the work
+  area. Workbenches without a resizable rail render exactly as before. The UX
+  catalog's resizable example adds a resizable inspector to show it.
+- `@kerfjs/ui`'s static analyzer (`kerf-ui-analyze`, and the analyzer stage of
+  `kerf-ui-doctor`) reports a new review finding, `KUI-L018`, when a
+  stylesheet overrides a loud tone fill (`--wa-color-{tone}-fill-loud` for
+  neutral, brand, success, warning, danger, or pop) without setting the
+  matching `--wa-color-{tone}-on-loud` in the same scope. The theme pairs each
+  loud fill with a foreground that clears WCAG AA, and an unpaired override
+  keeps that foreground on a fill it was never checked against. The pair must
+  share a selector (after resolving nesting and splitting selector lists) and
+  at-rule scope in the same stylesheet, in one rule or separate ones; another
+  tone's `on-loud` does not count. It is a review finding because it checks
+  the pairing, not the contrast; pass `--fail-on-review` to gate it. The
+  `webawesome-theme.md` customization example now sets both halves of each
+  pair.
+- **Tooltips and popovers also stay visible when your own code opens a modal
+  `<dialog>`.** `kerfjs/overlay` already moved every open tooltip and popover
+  above a modal dialog it opened itself, but a dialog opened with a bare
+  `dialog.showModal()` went unnoticed and left them inert beneath it. While
+  any kerf surface is open, one capture-phase listener on the document now
+  catches the dialog's `toggle` event and re-hosts them the same way, one task
+  after the `showModal()` call. The listener is removed once nothing is open.
+  An engine that fires no `toggle` event for `<dialog>` still misses such a
+  dialog; open it through `overlay()` there.
+- **A popover inside a modal `<dialog>` is clickable.** Browsers make
+  everything outside an open modal dialog inert, so a popover lifted above the
+  dialog was visible but its buttons could not be clicked or focused, and
+  kerf's one-mount-per-tree rule kept it from rendering inside a kerf-mounted
+  dialog. `popover()` and `tooltip()` whose anchor sits inside an open modal
+  `<dialog>` now render into the dialog's host slot, an element marked
+  `data-kerf-overlay-host data-morph-skip`, so they are part of the modal and
+  fully interactive: Tab reaches them, and Escape closes the popover before the
+  dialog. A dialog `kerfjs/overlay` opened gets the slot automatically (an
+  empty `display: contents` element added on first use). For your own
+  `<dialog>`, add `<div data-kerf-overlay-host data-morph-skip></div>` to its
+  markup, or pass `container`. The slot is the one place a second `mount()`
+  may live inside a mounted tree: the enclosing mount's morph, nesting guard,
+  and binding and `each()` marker scans all stop there. The `kerfjs/dev`
+  `inert` warning now fires only when no slot was used.
+- `@kerfjs/ui` `Workbench` rails and the bottom drawer can be drag-resized,
+  as an opt-in per panel. `WorkbenchPanel` gains `resizable: true | { min, max }`
+  (off by default, so existing Workbenches render unchanged); a resizable panel
+  gets a separator on its inner edge with the same focusable
+  `role="separator"` contract, grip, and 20px hit target as a
+  `ResizableRegion` handle. The new `@kerfjs/ui/wire-workbench` subpath's
+  `wireWorkbench(root, { id, panels, deviceClass?, storage?, onResize? })`
+  drives it: live pointer drags, arrow / Shift+arrow / Home / End keys,
+  clamping to the limits, and commits to the app-owned size signals, with
+  optional `storageKey` persistence. Collapsing keeps a panel's size, so it
+  expands back to the size it had, and resizing is suspended on compact device
+  classes and for overlay or hidden panels. The UX catalog's Workbench page
+  adds a resizable example. `wireResizableRegions` now drives only handles that
+  are direct children of a `ResizableRegion`, so it never double-drives a
+  Workbench separator under the same root.
+- `@kerfjs/ui` elevation shadows follow the color scheme, with or without the
+  optional `@kerfjs/ui/webawesome.css` theme. Kerf's theme layer set
+  `--wa-shadow-s` / `-m` / `-l` to fixed light-mode shadows (14%, 11%, and 9%
+  black), which all but vanished against the dark page, and the
+  `--kui-shadow-s` / `--kui-shadow-l` foundation fallbacks copied those fixed
+  values. The theme now pairs each light alpha with a stronger dark one (50%,
+  40%, 32%) through `light-dark()`, and the foundation fallbacks mirror them, so
+  selected segments and app tabs, compact overlay panels, and Web Awesome
+  surfaces that read `--wa-shadow-*` keep their elevation in dark mode. Light mode is unchanged. The browser parity test
+  now compares every `--kui-shadow-*` token with and without the theme in both
+  schemes.
+- `@kerfjs/ui` text on loud tone fills clears WCAG AA in both color schemes,
+  with or without the optional `@kerfjs/ui/webawesome.css` theme. White
+  `on-loud` text reached about 2.2:1 on the success fill, 3.5:1 on the light
+  brand fill (`#0088ff`), and 3.6:1 on the danger fill (`#ff383c`) in both
+  schemes. Kerf's theme layer and the foundation fallbacks now pair each
+  fill with a foreground chosen to keep the tone's look: success keeps its
+  bright green with dark text (`#1d1d1f`, 7.6:1), as warning already did; light
+  brand and danger keep white text on a slightly deeper fill of the same hue
+  (`#0075db`, 4.6:1; `#eb0005`, 4.6:1); dark danger keeps its fill with dark
+  text (`#111113`, 5.3:1), as dark brand already did. Web Awesome accent
+  buttons, badges, and checked controls pick this up, and accent `wa-badge`s now
+  use their variant's `on-loud` foreground by default instead of a fixed dark
+  color (`--kui-wa-badge-accent-foreground` still overrides it). The browser
+  contrast test asserts every tone's `on-loud` over `fill-loud` pair, including
+  pop and neutral, in both schemes with and without the theme.
+- `@kerfjs/ui` brand, success, and warning text clears WCAG AA on the lowered
+  page background in light mode, with or without the optional
+  `@kerfjs/ui/webawesome.css` theme. Their light `on-quiet` values (`#1e6ef4`,
+  `#008932`, `#a16a00`) passed on the white surface but reached only about
+  4.1:1 on `#f2f2f7`. Kerf's theme layer and the foundation fallbacks now use
+  the same hues a step darker: `#0c62f3` (4.64:1), `#007f2e` (4.62:1), and
+  `#966200` (4.65:1) on the page, about 5.2:1 on white. Links, selected tabs,
+  segmented and toolbar selections, and token-search accents that read
+  `brand-on-quiet` darken with it. Dark mode is unchanged. The browser contrast
+  test no longer skips light text over the page background.
+- `@kerfjs/ui` surfaces, links, and focus rings match the optional
+  `@kerfjs/ui/webawesome.css` theme without it. Three foundation fallbacks
+  pointed at a different token than the theme: `--kui-color-surface-raised`
+  fell back to the surface color (the theme's dark raised surface is
+  `#2c2c2e`), `--kui-color-text-link` fell back to the brand fill (`#0088ff`,
+  about 3.5:1 on white) instead of the brand on-quiet text color, and the focus
+  ring used the brand fill instead of the theme's focus color (`#007aff`). Each
+  now falls back to the theme's value. The browser parity test now covers every
+  `--kui-color-*` token the foundation declares, plus the focus ring, instead of
+  only the tone tokens.
+- The `@kerfjs/ui` UX catalog's `StateBanner` route adds a placeholder with a
+  badge for every tone, next to the existing badge-less placeholder, so visual
+  review and captures show the solid badge's loading skeleton on each tone's
+  fill. A browser test checks that each tone's badged placeholder is present.
+- `@kerfjs/ui` toned text stays readable in dark mode without the optional
+  `@kerfjs/ui/webawesome.css` theme. The foundation's fallbacks for the
+  success, warning, and danger `on-quiet` and `on-normal` tokens were single
+  light-mode colors, so dark danger `Text` rendered dark red on a dark surface
+  (under 3:1). Every tone token now falls back to the same light and dark
+  pair the theme assigns, including `brand-on-loud` (dark text on the pale dark
+  brand fill instead of white) and `neutral-border-quiet`. Light-mode colors
+  are unchanged. A browser test bundles the package with and without the theme
+  and asserts that every tone token resolves identically in both color schemes
+  and that toned text clears WCAG AA in dark mode.
+- `@kerfjs/ui` danger text and badges are readable in dark mode, and every
+  tone's `StateBanner` detail and quiet or outline `Badge` text now clears
+  WCAG AA. The danger tone was the only one without an on-fill foreground: its
+  solid badge fill and `StateBanner` text reused `danger-on-quiet`, a mid red
+  in dark mode (banner detail 4.0:1, badge placeholder skeleton 2.25:1). A new
+  `--kui-color-danger-on-fill` token (also accepted by `uiColor()`) matches the
+  other tones' pale dark values, lifting the dark danger banner text to 8.2:1.
+  The banner detail no longer dims to 78% opacity, which left the light info,
+  success, warning, and danger details at 3.4 to 4.3:1; it reads as secondary
+  through its smaller type, and the neutral detail uses the quiet text color.
+  Quiet and outline badges use their tone's on-fill text, lifting light brand,
+  success, and warning from about 4.1:1 to at least 5:1.
+
+- A `@kerfjs/ui` placeholder skeleton inside a solid `Badge`, such as the
+  badge of a `StateBanner` placeholder, is now clearly visible. The generic
+  skeleton tint, 12% of the text color, almost disappeared on the badge's
+  saturated fill in every tone. A solid badge now tints its skeleton from its
+  own foreground color, which contrasts with the fill in every tone in light
+  and dark mode. Quiet and outline badges keep the generic tint, which already
+  reads on their pale fills. Geometry is unchanged.
+- The `@kerfjs/ui` SVG design templates render badges as filled pills: the
+  `StateBanner` badge and the `ListHeader` and `List` count pills used to show
+  as plain text, because the template build loaded only a hand-written list of
+  stylesheets that omitted `badge.css`. The build now loads each component's
+  full stylesheet set from its generated browser entry, the same set a
+  consumer's browser import loads, so a nested component's CSS can no longer be
+  missed. The `ListHeader` and `List` templates also pick up the label inset
+  from `text.css`, so a header label now lines up with the list items below it,
+  as it does in the live component.
+- A `@kerfjs/ui` `StateBanner` placeholder's badge sits at the live badge's
+  height on every platform. With a skeleton instead of text, the badge took a
+  baseline from the skeleton's bottom edge and sat about a pixel higher, by an
+  amount that depended on the platform's font metrics.
+- A `@kerfjs/ui` `StateBanner` with a long, wrapping title keeps its badge
+  one item gap after the title's last word, and its detail uses the full copy
+  width. The wide flex layout shrank the title and detail together, which left
+  a large gap before the badge and truncated the detail early. The title,
+  badge, and detail now flow as inline text: the detail stays beside the title
+  while it fits whole, and otherwise moves to its own line, truncating only at
+  the full width. A wrapped title's lines stay evenly spaced.
+- A `@kerfjs/ui` `ListHeader` disclosure toggle disabled with `actionDisabled`
+  is dimmed by the component itself, at the same tone as a disabled action
+  button, and shows the `not-allowed` cursor. It used to rely on Web Awesome's
+  native `button:disabled` dimming, so without `webawesome.css` it looked
+  enabled. Disabled toggles and action buttons also no longer show hover
+  feedback without `webawesome.css`.
+- A `@kerfjs/ui` `ListActionRow` placeholder keeps its `busy` spinner. The
+  whole status line used to collapse into one skeleton, dropping the spinner
+  the component draws from a known prop. Now only the `status` text becomes a
+  skeleton, matching `ListItem`.
+- **A tooltip or popover already showing stays visible when a modal opens.**
+  Lifting a surface above an open modal `<dialog>` was decided only when the
+  surface opened, so a tooltip or popover already on screen when a modal
+  dialog opened was left inert beneath it. Whenever `kerfjs/overlay` opens a
+  modal `<dialog>` (a `native: true` modal, or one it lifted), it now moves
+  every open tooltip and popover into the top layer above the new dialog. One
+  that is already a `[popover]` is re-shown so it stacks on top. The existing
+  `kerfjs/dev` warnings still report an engine without the Popover API, and a
+  surface with controls the modal keeps inert. A modal `<dialog>` the app
+  opens itself, outside kerf, is not observed.
+- Moved `mount()`'s list-binding lifecycle (turning list markers into
+  bindings, first-render row-contract validation, orphan pruning) into its own
+  internal module, so `mount.ts` holds only the render orchestration. No
+  behavior or public API change.
+- A narrow (576px and below) `@kerfjs/ui` `StateBanner` keeps its badge
+  sized to its content, one item gap after the title and on the title's
+  baseline, as in the wide layout. The narrow grid stretched the badge across
+  the free column into a wide pill that sat less than 1px from the title.
+- Hovering a `@kerfjs/ui` `ListActionRow` placeholder with
+  `trailingActionVisibility="interaction"` no longer reveals its disabled
+  trailing button. A placeholder is inert, so it keeps the live row's resting
+  state, with the trailing action hidden until an interaction it cannot take.
+- A `@kerfjs/ui` `ListItem` placeholder keeps its `busy` spinner. The whole
+  trailing slot used to collapse into one skeleton, dropping the spinner the
+  component draws from a known prop and shifting the label's width. Now only
+  the values in that slot become skeletons: `status` text in its status line
+  and author-supplied `trailing` content (always a value, since the component
+  cannot tell a chevron from a count) each get their own.
+- `@kerfjs/ui` placeholders keep the live disabled tone of a control the
+  author disabled. A disabled `ListItem` or `ListActionRow`, a
+  `trailingActionDisabled` button, a disabled `SegmentedControl` choice, or a
+  `ListHeader` with `actionDisabled` rendered at full opacity as a
+  placeholder, because the placeholder reset could not tell its own
+  `disabled` attribute from the author's. Those controls now carry a
+  component-owned `data-kui-disabled="true"` marker whenever their disabled
+  prop is set; the disabled tone keys on it and the placeholder reset skips
+  it. The marker is reserved: the extension-attribute props cannot set it.
+- `@kerfjs/ui` adds a browser test that renders every placeholder-capable
+  component live and as a placeholder from identical props and diffs each
+  element's geometry and computed chrome, so any future drift outside a value
+  slot fails. It caught one more: a `ListActionRow` placeholder's `status`
+  line was 3.5px shorter than the live line; the status line now always
+  keeps a full line height.
+- `@kerfjs/ui`'s `Select` placeholder hint now matches the live hint: 14px
+  text at a 1.6 line height, 7px below the box. It was 12px / 1.4 with a 4px
+  gap, so a placeholder with a `hint` was 8.6px shorter than the loaded
+  control and the content below it jumped when loading finished.
+- `@kerfjs/ui`'s `StateBanner` placeholder adds a detail skeleton only when
+  `detail` is set, matching the live banner. Previously every placeholder
+  showed a detail line, so a banner without one changed shape when loading
+  finished. Pass the banner's real `title` and `detail` with `placeholder`;
+  an empty `detail` now means no detail line.
+- `@kerfjs/ui`'s `AppTab` placeholder pill is no longer dimmed to 50% with a
+  `not-allowed` cursor when `webawesome.css` is loaded; it keeps the live
+  tab's tone, and only its name is a skeleton.
+- `@kerfjs/ui`'s `ListHeader` placeholder no longer dims its action button
+  (48%) or, in `toggle` mode, the whole title and label (Web Awesome's native
+  50%), and its inert action and toggle give no hover feedback. A live
+  `actionDisabled` header still dims its action.
+- `@kerfjs/ui`'s `SegmentedControl` placeholder now keeps its choices. The
+  choices are known; only the selection is unknown, so a placeholder renders
+  every choice's live label or icon at its live size, selects none, and stays
+  inert. Previously every segment became a 4em text skeleton (widening icon
+  segments from 40px to 60px) and was dimmed to 45%.
+- `@kerfjs/ui`'s `ListItem` and `ListActionRow` placeholders now match the
+  live row. They are no longer dimmed (the rows' own `:disabled` tone and
+  hover highlight skip placeholders), and a row with a `description` (or a
+  `ListActionRow` `status`) keeps that line as a second, smaller skeleton, so
+  the row keeps its live height instead of collapsing to one line. The
+  `ListActionRow` icon placeholder is an 18px block centered in its icon slot,
+  like `ListItem`'s.
+- `@kerfjs/ui` placeholders no longer look disabled. A component's
+  `placeholder` keeps its controls `disabled` (inert and out of the keyboard
+  order), but `skeleton.css` now neutralizes generic disabled chrome under
+  `[data-placeholder="true"]`: full opacity and the default cursor instead of
+  Web Awesome's native `button:disabled` dimming to 50% with a `not-allowed`
+  cursor. A component's own opacity (a control hidden until interaction) still
+  applies.
+- `toElement('<image href="…" />')` now returns an SVG `<image>`. The HTML
+  parser rewrites an orphan `<image>` to an HTML `<img>` before kerf sees the
+  tag, so it previously came back as an XHTML `img` that no `<svg>` would
+  render. kerf now recognizes a leading `<image` tag in the raw input
+  (case-insensitive, after leading whitespace) and parses it through the SVG
+  wrapper. A genuine `<img>` is unchanged.
+- `delegateActions()` (`kerfjs/actions`) dispatches only the table's own
+  entries. It used to look the action up with a plain property read, so a
+  `data-action` naming an inherited `Object.prototype` member resolved:
+  `"__proto__"` or `"hasOwnProperty"` threw a `TypeError` from the listener,
+  and `"toString"` or `"constructor"` silently ran the inherited function.
+  Those values are now ignored like any other action absent from the table.
+  An own entry with such a name (`{ toString: … }`) still dispatches.
+- `toElement()` now puts orphan camelCase SVG fragments in the SVG namespace.
+  `toElement('<linearGradient>…</linearGradient>')`, and likewise `clipPath`,
+  `radialGradient`, and `foreignObject`, previously returned an XHTML
+  `LINEARGRADIENT` element that no `<svg>` would render, because the lookup
+  compared the HTML parser's lowercased tag against camelCase names. The
+  fragment is now wrapped in `<svg>` and XML-parsed like `<path>` or `<g>`,
+  and the returned element keeps its camelCase `localName`.
+- **A tooltip or popover no longer outlives its anchor.** When the anchor left
+  the document, most commonly because the modal containing it closed, the
+  `tooltip()` or `popover()` stayed on screen: a removed element fires no
+  `pointerleave` or `blur`. Both now watch their anchor with the same removal
+  tracking as `kerfjs/attach`. The tooltip hides, and the popover closes
+  without calling `onDismiss`, as soon as the anchor leaves the document.
+  Moving the anchor within the document keeps them open. A tooltip show still
+  pending when its anchor is removed never appears.
+- **Overlays opened over a modal `<dialog>` are visible and usable.** A browser
+  makes everything outside an open modal dialog inert and paints a plain
+  element beneath it, so a `tooltip()`, `popover()`, or `confirm()` opened
+  from inside a `native: true` dialog without `native` itself was invisible and
+  could not be used. While a modal `<dialog>` is open, `kerfjs/overlay` now
+  hosts such a surface in the top layer anyway: a tooltip or popover becomes a
+  `[popover]`, and a nested modal becomes its own `<dialog>`. The browser's
+  default `[popover]` / `<dialog>` styles then apply, as they do with `native:
+true`. Browsers keep a popover outside the modal dialog inert even in the top
+  layer, so a lifted popover with buttons is visible but not clickable. A new
+  always-on `kerfjs/dev` warning reports that case, and an engine without the
+  needed API.
+- **A tooltip shown inside a modal no longer disables the modal.** `kerfjs/overlay`
+  used to treat the most recently opened overlay as the only one that could
+  react to input, so a `tooltip()` (which handles no input) inside an open
+  modal left Escape doing nothing and let Tab leave the dialog. Every overlay,
+  native or fallback, now joins one open-order stack, and each Escape, backdrop
+  click, outside click, or trapped Tab goes to the topmost surface that handles
+  it. A modal still blocks everything beneath it, and a surface that handles
+  nothing never intercepts. A popover that dismisses on Escape gets it before
+  the modal beneath. One click that is both outside a popover and on a modal's
+  backdrop now closes only the popover. A native `<dialog>` is arbitrated with
+  the fallback surfaces: one Escape closes one surface, and a fallback modal
+  beneath an open dialog no longer takes the dialog's Tab. Closing a lower
+  overlay first leaves focus in the overlay that holds it. An overlay opened
+  from inside it then restores focus to the closed overlay's opener, not a
+  detached node.
+- `kerfjs` now exports the `EachOptions<T>` type (`{ cacheKey?, key? }`), the
+  options-object form of `each()`'s third argument, so a helper that builds or
+  forwards those options can import the shape instead of restating it:
+  `import { type EachOptions } from "kerfjs"`. Type-only; no runtime or bundle
+  change.
+- Documentation: the companion-utility reference now matches the code. The
+  router's `match()` / `activeClass()` compare a literal path prefix, so
+  `match('/users/:id')` is never true. Link interception still applies to
+  `target="_self"`, the no-match `outlet()` is `null` with `params` `{}`,
+  components receive `(params, route)`, and hash mode keeps `route.hash` at
+  `''`. Invalid `bindList` configuration throws only `RangeError`. `popover()`
+  defaults `className` to `'kerf-popover'`, and the toast region is a reused
+  `.kerf-toasts` element when one exists. A `resource()` `cacheKey` applies
+  only to `run(input, fetcher)`, and throttle's `flush()` leaves the cooldown
+  running. `delegate()` / `delegateCapture()` throw on an invalid selector at
+  registration. The reference also now lists the `kerfjs/jsx-dev-runtime`
+  alias, the `DEV_HOOKS` export of `kerfjs/dev`, and `Signal#peek()`.
+- Documentation: `morph(liveRoot, template)` is now described as it behaves.
+  It reconciles only the root's children and never touches the root's own
+  attributes, so `template` describes the content inside the root (an
+  `Element` template contributes its child nodes). The examples no longer
+  nest a duplicate `<article>` inside the live one. An `each()` list parent is
+  not a children-only short-circuit: the diff still walks it and skips only
+  the owned rows. The user-agent-owned `open` exception covers custom elements
+  as well as `<details>` / `<dialog>`, and a content-only row change inside an
+  `each()` list keeps its DOM node (and focus) unless the row's top-level tag
+  changes or the same render also inserts, removes, or moves rows.
+- Every opt-in `kerfjs/dev` warning now ends with a silence hint that leads
+  with the browser-reachable switch, for example "Silence it with
+  enableWarnings({ narrowSet: false }) from kerfjs/dev, or set
+  KERF_DEV_WARN_NARROW_SET=0 (or unset it) under Node." Previously the
+  messages named only the environment variable, which a browser cannot reach.
+  The docs now teach `enableWarnings()` wherever they showed an env-only
+  switch, and name all three creation-time boundaries: `signal()`
+  (`untrackedSignals`), `effect()` (`delegateInEffect`), and `mount()`
+  (`rebuiltListeners`) decide once when created, so anything created before
+  the install or the opt-in stays uncovered.
+- The `kerfjs/dev` rebuilt-listeners warning (`rebuiltListeners` /
+  `KERF_DEV_WARN_REBUILT_LISTENERS`) now dedups once per `mount()`, as
+  documented. Previously the first warning silenced every other mount for
+  the life of the process, so a second mount with the same bug stayed quiet.
+- `kerfjs/router`: a second router on the same document no longer diverges
+  from the URL after a link click. The first router's interceptor navigates
+  with `pushState`, which fires no `popstate`, so the second router ignored
+  the already-handled click and kept the old route. An already-handled click
+  now re-syncs the route from the URL; when nothing navigated, it is a no-op.
+  One router per document remains the supported shape: a second router does
+  not follow another router's programmatic `navigate()` (no `popstate` fires
+  and routers do not broadcast to each other) until the next `popstate` or
+  link click. This is now documented and pinned by a test.
+- `kerfjs/scope`: a disposed `Scope` handle no longer leaks registrations.
+  Previously `add` / `mount` / `effect` / `delegate` on a handle after its
+  `dispose()` (or from a disposer while `dispose()` ran) pushed into a list
+  nothing would ever run, leaving the effect subscribed or the listener
+  attached. Such a registration now tears down at once: `add(fn)` calls `fn`
+  immediately, and the wrappers create and immediately dispose.
+- `bindList` measured-height virtualization no longer applies a stale
+  scroll-anchor correction. A `setHeight()` report for a row above the viewport
+  is now resolved when the animation frame runs: if the source removed the key,
+  moved it below the fold, or the user scrolled the row into view first,
+  `scrollTop` is left alone, and several reports for one key in a frame net
+  out. Fixed-height windows also clamp to the source length, so a list that
+  shrinks while scrolled deep no longer pads far past its content.
+- `create-kerf-component` accepts an explicit `boundaries.rootClass: null` as
+  an author decision, as its schema always allowed. A wrapper whose root
+  element belongs to another catalog (a `rendersAs` wrapper) no longer has to
+  invent a class to satisfy the generator. An absent `rootClass` still fails
+  as undecided.
+- `@kerfjs/ui`'s `Select` placeholder now matches the live control. The label
+  uses the field-label style (uppercase, extra-small, quiet, inset to line up
+  with the value), and the chevron is the same glyph at the same size.
+  Previously the placeholder drew a larger, regular-weight label at a
+  different inset and a different, smaller chevron. Only the value is a
+  skeleton; the chrome no longer changes when loading finishes.
+- **Wrapper components can declare the cataloged root they render.** A
+  `kerf.components.json` component may set `composition.rendersAs`, for
+  example `["@kerfjs/ui:toolbar-control-group"]`: a list of the roots it
+  renders, any one of them, or nothing. `kerf-component-catalog` copies it
+  into the generated v2 entry and fails unless every key resolves to a
+  cataloged entry. `eslint-plugin-kerfjs`'s `ui-composition` rule, and so
+  `kerf-ui-doctor`, now loads the application and third-party catalogs a
+  `.kerf-ui-profile.json` declares. It resolves their components by package
+  subpath or source file and checks a wrapper as each declared root: a zone
+  must accept every root, each root's parent contract applies where the
+  wrapper is placed, and a wrapper counts as zero or one child. Undeclared
+  wrappers keep reporting `KUI-L202`.
+- `@kerfjs/ui`'s `AppTab` adds `pending` for a known tab that is still
+  opening. It keeps the name visible in the quiet text color and uses it as
+  the tab's accessible name, so a trailing spinner's label is not folded in.
+  Like `placeholder`, it disables select and close, turns off dragging, and
+  sets `aria-busy`, and it shows the consumer's `trailing` spinner. It keeps
+  the live tab's pill geometry, so it swaps in place without shifting the bar.
+  Dormant tabs (placeholder or pending) no longer reveal their disabled close
+  button on hover.
+- `@kerfjs/ui`'s `wireSidebar` moves focus into an opening panel without
+  scrolling it. A plain `focus()` scrolled the panel's clipped content to the
+  target while it was still sliding in, then the slide unwound that scroll:
+  a bottom drawer's content jumped up past its top and drifted back. The
+  collapsible-sidebar recipe also floats the drawer's expand toggle in a
+  `FloatingToolbar` at the bottom edge the drawer opens from, and drops the
+  divider under the drawer's toolbar.
+- `@kerfjs/ui`'s `Skeleton` takes `block` (default `false`). It lays the
+  placeholder out as `display: block` instead of `inline-block`, for a
+  skeleton that stands in for a box rather than text: no text line and no
+  baseline gap of its own. `ListItem`'s placeholder icon uses it.
+- `@kerfjs/ui/css-values` adds `remify(px)`, the runtime twin of source
+  CSS's `remify(<px>)`. It turns a pixel count into a rem `CssLength` against
+  the fixed 16px baseline, so `remify(18)` is `1.125rem`. `ListItem`'s
+  placeholder icon now uses it at 18px, and `Skeleton` no longer forces a
+  24px minimum width, so small placeholders keep the size they ask for.
+- `@kerfjs/ui/catalog`'s application-sized (`height: "app"`) example frame
+  no longer loses taps in Safari/WebKit. The frame became the containing block
+  for screen-fixed chrome through `contain: layout`. Combined with its clip,
+  that made WebKit mis-hit-test any transformed element inside an open compact
+  overlay. Every pressed `ListItem` scales, so taps on an overlay rail's items
+  went to their section instead. The frame now uses an identity transform,
+  which docks the same chrome without the bug and renders identically.
+- **Breaking (`@kerfjs/ui/catalog`):** `CatalogExample`'s viewport drops
+  `height: "fill"` and `fillChildren`. The catalog lays examples out at their
+  content height, so neither could give a specimen a definite height, and a
+  child sized with `height: 100%` (a horizontal `ResizableRegion`, say)
+  collapsed to its content. Use a fixed `height` (`short` through `app`) when
+  a specimen must fill its frame. `minHeight` remains, documented as a minimum
+  rather than a fill.
+- `create-kerf-component`'s `kerf.components.json` now accepts an optional
+  `composition.wiring.stateAttributes` declaration (the wiring-owned state
+  attributes `@kerfjs/ui`'s catalog now carries), so third-party
+  component authors can list the `data-*` attributes their wiring helpers write
+  (`{ name, on, helper, meaning }`). `kerf-component-catalog` passes them
+  through to the generated `component-catalog-v2.json` and reports a non-`data-*`
+  name, a duplicate name, an empty `on` or `meaning`, or a helper missing from
+  `wiring.helpers` at its exact path.
+- `@kerfjs/ui`'s component catalog now declares **wiring-owned state
+  attributes**. A new optional `wiring.stateAttributes` in
+  `component-catalog-v2` (and per wiring item in v1) lists each `data-*`
+  attribute a wiring helper writes at runtime, such as `data-handle-inset` and
+  `data-resizing` from `wireResizableRegions`. For each one it records the
+  element, the helper, and the meaning, so AI consumers and tools can tell
+  them apart from attributes the app writes. Every first-party wiring helper
+  is declared. `check:catalog` fails when a helper's declarations differ from
+  what its source writes.
+- `@kerfjs/ui`'s `wireSidebar` no longer leaves focus inside a panel it just
+  collapsed. When the collapse was triggered from a toggle inside the panel
+  (the documented placement), focus now moves to that panel's toggle outside
+  it, including one the app renders only once the panel is collapsed. The
+  collapsible-sidebar recipe now shows one control per action: each panel's
+  own collapse toggle while it is open, and the main header's expand toggle
+  only while it is collapsed. Wide widths no longer show two rail toggles.
+- `@kerfjs/ui`'s `wireSidebar` keeps a compact overlay intact when the app
+  re-renders the wired root without changing a panel. Previously, selecting a
+  destination in an open compact rail morphed the root, which removed the
+  overlay attributes and the backdrop, and the "overlay" rail fell back into
+  the layout. The wire now re-applies its host attributes and backdrop after
+  any such re-render, and the backdrop carries `data-morph-preserve`.
+- `@kerfjs/ui`'s `wireSidebar` now opens a compact overlay only on a user
+  action. Wiring on a compact device, or crossing from a wide device class to
+  a compact one, collapses every panel. The page is no longer covered by a
+  backdrop and focus trap until dismissed. Crossing back to a wide class, or
+  disposing the wire, restores each panel's remembered inline state.
+  Persistence now stores only that inline choice, never an overlay's
+  open/closed state. A new optional `WireSidebarPanel.inlineCollapsed`
+  declares the inline default when an app seeds its signal from the device
+  class, which avoids an open first frame on a compact device. The
+  collapsible-sidebar recipe no longer opens its rail as a blocking overlay
+  on load at compact widths.
+- `@kerfjs/ui`'s `ResizableRegion` handle keeps its hit target and focus ring
+  whole at a clipping edge. When a parent clamps the region to its own edge
+  (the catalog's 390px stage, an app shell with a `max-width` container),
+  `wireResizableRegions` marks the region `data-handle-inset` and the handle
+  moves inside it instead of overhanging the edge by 10px, where the frame cut
+  its focus ring in half. The ring is now drawn inside the handle's box
+  (`outline-offset: -3px`), so it is also no longer shaved where the region's
+  ends meet a clipping edge.
+- `@kerfjs/ui`'s `wireResizableRegions` keeps a clamped separator's
+  `aria-valuenow`/`aria-valuemax` current at rest. Previously, after a size was
+  saved at a wider width, narrowing the parent or any unrelated re-render left
+  the handle reporting the unclamped rendered size until it was next focused or
+  resized. A `ResizeObserver` on each region and its parent and a
+  `MutationObserver` for re-renders now re-clamp the report; the disposer
+  disconnects both.
+- The `@kerfjs/ui` catalog's `height: "app"` example frame is now the
+  containing block for screen-fixed chrome, so a compact `CollapsiblePanel`
+  overlay, its backdrop, and restore controls dock to the frame's edges. The
+  collapsible-sidebar recipe's compact rail was fixed to the page's left edge,
+  24px outside the inset frame, so its leading edge looked cut off at 390px.
+- The `CollapsiblePanel` compact-overlay backdrop now covers its whole
+  containing block. As a `<button>`, it did not stretch between its insets and
+  scrimmed only a 35px strip.
+- `@kerfjs/ui`'s `wireResizableRegions` now bounds a resize to the space the
+  region's parent actually leaves. When a parent clamps the track (a
+  `max-width` stage, a narrow container), pointer and keyboard resizing stop at
+  the visible size, and the separator reports that size in `aria-valuenow` and
+  its visible maximum in `aria-valuemax`. Previously a region resized to 420
+  inside a 340px stage announced 420 and needed several key presses before the
+  separator moved. Focusing the handle reports a stale larger committed size as
+  the shown size without committing it.
+- The UI evaluator's `KUI-B050` target-size rule now accepts a 44×36 target
+  inside compact density (`[data-density="compact"]`), matching the 36px
+  compact row height; standard density still requires 44×44, and the width
+  floor is unchanged.
+- Fixed `kerf-ui-analyze` and the `eslint-plugin-kerfjs` UI rules treating
+  every name in a catalog entry's `publicExports` as that entry's component,
+  so a helper such as `uiColor` or `flex` called with an object whose keys
+  matched a contract path (`uiColor({ choices: [...] })`) was checked as a
+  `Select` or `List` call. Only component exports, whose names start with an
+  uppercase letter as JSX component tags do, now resolve to an entry; the
+  `@kerfjs/ui` catalog check fails if a cataloged `SafeHtml` render function
+  is lowercase or any other runtime export is uppercase.
+- The `@kerfjs/ui` component catalog's `ToolbarText` entry now lists every
+  token its `xlarge` size reads (`--kui-color-text`, `--kui-font-l`,
+  `--kui-font-2xl`) in `publicTokens`; previously it named only the tokens of
+  the smaller sizes.
+- The `@kerfjs/ui` browser evaluator's target-size check (`KUI-B050`) now
+  measures the pointer-reachable area instead of only the border box: an
+  undersized control is hit-tested outward from its center, so a transparent
+  `::before`/`::after` hit layer (such as the `ListHeader` action's) counts,
+  while `pointer-events: none` decoration, clipping, and overlapping
+  neighbors do not. Diagnostic evidence now carries the measured size plus
+  the border `box`.
+- Fixed the `eslint-plugin-kerfjs` `ui-css-values` messages (`KUI-L013`,
+  `KUI-L014`, `KUI-L017`) listing suggested helpers with unbalanced backticks
+  (``use `uiColor() or `foregroundColorVar().``); each helper is now wrapped
+  as `` `uiColor()` ``.
+- Fixed `kerf-ui-analyze` skipping the CSS-value contracts of `@kerfjs/ui`
+  `Select` and `Skeleton`. Its component lookup was keyed by display name, so
+  the same-named Web Awesome catalog entries (`wa-select`, `wa-skeleton`) —
+  which carry no CSS-value props — shadowed them, and a wrong-grammar helper
+  such as `colorVar()` for `SelectChoice.color` went unreported although the
+  ESLint rule caught it. Entries now resolve by `package:id`, using the
+  selection catalog's public exports and import subpaths.
+- Fixed `@kerfjs/ui` monospace text rendering in the generic face (Courier on
+  macOS Chromium) whenever Web Awesome was loaded: `--kui-font-mono` deferred to
+  Web Awesome's `ui-monospace, monospace`, which Chromium does not resolve, and
+  the trailing generic `monospace` kept Kerf's named fallbacks from ever
+  applying. `--kui-font-mono` is now Kerf's own stack (`ui-monospace,
+SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`),
+  and the Web Awesome theme points `--wa-font-family-code` at it so Kerf `Text
+font="monospace"` and Web Awesome code text match.
+- The `@kerfjs/ui` Web Awesome theme now gives default-size single-line
+  controls Kerf's 44px control height, so a plain `wa-input` or `wa-button`
+  sits flush beside a Kerf `Select` instead of about 9px shorter. It sets
+  `--wa-form-control-height` to `2.75em` (44px at the default size) on Button,
+  Color Picker, Input, Known Date, Number Input, Radio Group, Select, Textarea,
+  and Time Input; `size="large"` scales proportionally, `size="small"` keeps Web
+  Awesome's compact height, and buttons inside a `ToolbarControlGroup` keep the
+  group's 40px (32px compact) height. Tags, copy buttons, and toasts are
+  unchanged.
+- Fixed an `@kerfjs/ui` `Select` menu drawing two separators when a choice with
+  `separatorBefore` opened a separated group: the group's border plus a
+  `wa-divider` left an empty band between the group title and its first
+  choice. `separatorBefore` now only divides a choice from the previous choice
+  in the same list; a group boundary is already the single separator.
+- Fixed `@kerfjs/ui` compact `ToolbarControlGroup` end highlights not being
+  concentric with the group: controls sat 2px from the sides but 1px from the
+  top and bottom. A compact group now has no padding, so its 32px controls sit
+  on a 1px inset on every side with a radius of the group radius minus 1px
+  (pill and rounded). In compact mixed groups the raised selection still paints
+  over the border with the group's radius, neighboring controls still abut, and
+  the trailing dropdown trigger keeps the 1px end inset instead of running onto
+  the border. Compact groups are 2px narrower as a result.
+- Added `Toolbar.safeAreaEdges` to `@kerfjs/ui` so an app bar or bottom bar
+  that sits at a screen edge, outside any `Pane` header or footer, can claim
+  those edges for device safe areas. A toolbar there used to take only the
+  inline edges an owner handed it, so the app-shell recipe's top bar never
+  cleared the status area. Each claimed side pads by the routed
+  `--kui-edge-inset-*` context, or the full device inset when nothing routes
+  it, while the bar's surface and divider still paint through; the minimum
+  height grows with the claimed block insets so a shrinking flex column keeps a
+  whole control row clear. A claim inside a `Pane` header or footer adds
+  nothing, since the pane already owns those edges. The app-shell recipe's app
+  bar now claims the top edge and both sides.
+- Fixed `@kerfjs/ui` slide-motion `ResizableRegion` content overflowing its
+  separator when a parent clamps the region. The expanded content kept the
+  committed size even when a `max-width` or narrow container held the track
+  smaller, so in the catalog at 390px a region resized to 420px showed text
+  running past its handle. Expanded content now follows the region's actual
+  track on both axes; the fixed expanded size still applies while collapsing, so
+  the collapse keeps reading as a slide.
+- Fixed `@kerfjs/ui` `ResizableRegion` panes stopping at their content's
+  height. The region's content now spans the whole region, like its separator,
+  and a lone child (normally a `Pane`) fills it, so the app-shell recipe's
+  navigation and inspector panes reach the bottom edge and scroll long content
+  inside their own content slot instead of ending partway down the region.
+  Several children still stack at their natural height.
+- Fixed `@kerfjs/ui` `Toolbar responsive="center-priority"` leaving an
+  expanded center control at roughly half the row on narrow toolbars. The
+  policy set the toolbar's own grid template inside a container query on the
+  toolbar itself, which can never match, so the center kept only the first
+  column track once the leading and trailing zones left. The dead rule is gone
+  and the expanded center now spans every column track, filling the toolbar's
+  content width at phone widths.
+- Fixed a nested `@kerfjs/ui` `List`, `Row`, or `Grid` inheriting its
+  ancestor's `gap` and `flex`. Those props travel through private custom
+  properties, which inherit, so a nested `List` without its own `gap` took the
+  enclosing `List`'s gap (a heading unit inside a form got a 24px gap between
+  its title and supporting line) and any nested instance without `flex` took the
+  ancestor's flex growth. Every instance now resets its private values, so an
+  omitted prop means that component's own default. The workspace-header recipe's
+  breadcrumb now sits directly above its title and the List demo's section rows
+  sit flush under their header, as intended.
+- Fixed `@kerfjs/ui` slide-motion `ResizableRegion` content staying at its
+  previous width during a live resize until the app re-rendered the committed
+  size. `wireResizableRegions` now applies the live size to the sliding content
+  as well as the track, for pointer drags and key presses, so the content fills
+  the region (including a safe-area edge extent) throughout the drag and a later
+  collapse still slides it out at the resized width.
+- Fixed the `@kerfjs/ui` `ListHeader` action's pointer target being only its
+  fitted 36px square although the guidance promises 44px. A transparent hit
+  layer now extends the target to at least 44 × 44 around the square without
+  moving layout or enlarging the painted hover surface. Compact headers are
+  36px tall like the rest of the compact List family, so their action target is
+  44px wide and clamped to the header height, never reaching into a neighboring
+  row.
+- Fixed re-renders closing open Web Awesome popups: the morph (and the keyed-list
+  attribute fast path) no longer removes a live `open` attribute from custom
+  elements (`wa-select`, `wa-dropdown`, `wa-dialog`, …) when the template omits
+  it — the same user-agent-owned treatment `<details>` / `<dialog>` already
+  had. A template can still set `open`; closing stays imperative.
+- The `@kerfjs/ui` composer-form recipe's supporting line now sits directly
+  under its toolbar title instead of 24px lower, because a nested `List` no
+  longer inherits the form's section gap (see the nested `List`/`Row`/`Grid`
+  fix above). The guidance now
+  also states that `ToolbarText` below `xlarge` is intentionally quiet identity
+  text with no tone option. A normal-color subsection title is `Text` with an
+  `h2`–`h6` variant, or `ListHeader` for a list or menu section.
+- Fixed `@kerfjs/ui` `ToolbarText size="small"` labels rendering in a
+  monospace fallback face in Chromium. The small size used the code-font token,
+  which resolves through Web Awesome's `ui-monospace, monospace` stack; Chromium
+  does not recognize `ui-monospace`, so labels such as a pane's "Workspace" or
+  "Ready" fell back to the generic monospace font. Every `ToolbarText` size now
+  keeps the inherited UI sans stack.
+- Fixed `@kerfjs/ui` `ListInsetControl` not stretching its control as
+  documented. Its `justify-content: stretch` is a no-op on a flex row, so a
+  `Select`, `wa-input`, or `wa-button` inside stayed at its natural width. Each
+  direct child now grows to fill the inset row (several children share it with
+  the 8px gap) and may shrink below its intrinsic width instead of overflowing.
+- `@kerfjs/ui` `List`, `Row`, and `Grid` can now be the layout root of a
+  fixed-height parent. New `fill` takes the parent's full height (use `flex`
+  inside a flex layout as before), and new `rootAttributes` carries safe
+  `data-*` metadata while the component's structural attributes stay
+  protected. The app-shell and collapsible-sidebar recipes now use a filling
+  List or Row root instead of a frame `Pane` whose scroll owner never scrolled;
+  the collapsible sidebar's rail and drawer now reach the real frame edges, so
+  they paint through safe areas as the layout model intends. The UX catalog
+  adds an application-sized `height: "app"` (592px) specimen frame, and both
+  recipes use it instead of the cramped 360px `tall` frame.
+- Fixed a `@kerfjs/ui` stacked `Toolbar` clipping its last trailing action at
+  phone widths (the compact-toolbar recipe's "More" button at 390px). A
+  toolbar's trailing zone now wraps whole control groups onto another
+  trailing-aligned row under every `responsive` policy, and a
+  `responsive="stack"` toolbar wraps its stacked center and trailing groups the
+  same way, so no action is ever clipped or shrunk. Stacked zones also span the
+  full toolbar width; they previously lost 16px to empty column tracks. New:
+  `responsive="wrap"` keeps a heading on one row while everything fits and
+  otherwise moves the trailing zone below a whole title instead of truncating
+  it. The loading-inspector recipe uses it, so its narrow heading shows the
+  whole record title instead of an ellipsis.
+- `@kerfjs/ui` layouts and `Pane` now handle device safe areas as one model.
+  Pane and panel backgrounds, separators, and dividers paint through unsafe
+  areas; content is padded only on the edges a region actually reaches, and
+  block insets become scroll padding so content can scroll under the status bar
+  or home indicator but always scroll clear. `Workbench` rails and drawer,
+  `CollapsiblePanel`, and the `SplitView` list grow by the inset they dock to.
+  A center pane picks up the inset when an adjacent rail collapses, and
+  interior or nested edges are never double-inset. A header or footer `Toolbar`
+  keeps its dividers edge to edge. New: `Pane.safeAreaEdges` (default all
+  sides; `[]` opts out), the `--kui-safe-area-*` device-inset tokens (default
+  `env(safe-area-inset-*)`), the inherited `--kui-edge-inset-*` edge context for
+  app-owned layouts, and `--kui-resizable-region-edge-extent`. Nothing changes
+  on devices or pages without safe-area insets.
+- Fixed a `@kerfjs/ui` `ListHeader` action sitting about 4px outside the
+  trailing toolbar action of the Pane header above it. Its fitted action now
+  centers in the same 44px slot a toolbar control occupies at the 8px inline
+  margin, so trailing icon actions share one axis. The action's size, 18px
+  visual, and hover square are unchanged.
+- **Breaking (`@kerfjs/ui`, 5.0 beta):** `SelectChoice.color` now accepts only
+  a foreground color, the new `CssForegroundColor` brand from
+  `@kerfjs/ui/css-values`. `uiColor()` returns it for foreground token names
+  (the new `UiForegroundColorName`: the `*-on-*` roles, `text`, `text-quiet`,
+  `text-link`, and the `*-text` aliases), and the new
+  `foregroundColorVar('--app-icon-color', fallback?)` returns it for an
+  application-owned property. The `--kui-color-success` / `warning` / `danger`
+  / `pop` / `accent` compatibility aliases are quiet fills that read like
+  foreground colors; colored with one, an icon rendered at about 1.2:1
+  contrast. `uiColor('success')` and the other fill, border, and surface tokens
+  still return a plain `CssColor` and no longer type-check as an icon color,
+  and neither does a plain `colorVar()` value. Migrate
+  `color: uiColor('success')` to `uiColor('success-on-quiet')` and
+  `color: colorVar('--app-color')` to `foregroundColorVar('--app-color')`;
+  `uiColor('…-on-…')` calls keep compiling unchanged. The catalog's CSS-value
+  contract for `choices[].color` lists `uiColor` and `foregroundColorVar`, so
+  `eslint-plugin-kerfjs` also reports `colorVar()` there (`KUI-L014`), and
+  the source and packed consumer type contracts pin the rejected fills.
+
+- Fixed an `@kerfjs/ui` icon-only `Select` beside other controls in one
+  `ToolbarControlGroup`. A compact Select no longer eats 1px of the group's
+  4px gap on each side (the lone-trigger padding overlap now applies only when
+  it is the group's only child), a compact rounded Select uses its siblings'
+  item radius instead of the lone-slot radius, and the Select now shows the
+  same hover pill as its sibling buttons (a lone Select lifts the whole group,
+  like a popup-menu dropdown). In a group with per-control focus rings
+  (`focusRing="control"`, the default) the Select paints the same ring as its
+  siblings even when `focusRingOwner="group"` was set, which previously left it
+  with no visible focus. A compact icon-only `<button>` is now a 32px circle,
+  so a selected compact segment is no longer a 34x32 oval. The
+  ToolbarControlGroup catalog adds a "Select beside actions" example.
+
+- Changed the `@kerfjs/ui` icon-only `Select`
+  (`selectedPresentation="icon-only"`) to keep its disclosure caret. The
+  selected icon and caret now form one pill with the same geometry as a
+  `ToolbarControlGroup` popup-menu `wa-dropdown` trigger: 8px inline padding on
+  both sides, 12px from the icon to the caret, the same caret glyph size, and a
+  40px default or 32px compact control height, so the icon sits left of center
+  to balance the caret. In a single `ToolbarControlGroup` the group now sizes to
+  the trigger (a 70x44 default or 68x34 compact pill, wider than it is tall)
+  with an even inset on every side and a concentric radius, for pill and
+  rounded shapes, so the group-owned outline or halo ring follows the pill while
+  focused and while the listbox is open. Before, a default-size trigger was a
+  32px square left-aligned in its 44px group, and the caret was hidden. The
+  Select catalog adds a default-size "Toolbar icon" example beside the compact
+  one.
+
+- Fixed the `@kerfjs/ui` icon-only `Select` focus ring in a
+  `ToolbarControlGroup` not matching the control: the compact trigger grew its
+  group into a 36x34 oval and its disclosure caret overflowed the trailing edge.
+  The group-owned ring now stays concentric with the trigger while focused and
+  while the listbox is open. The Select demo's "Quiet" option icon also used the success fill alias
+  as its color and was nearly invisible; it now uses `success-on-quiet`, and the
+  `SelectChoice.color` guidance names foreground tokens.
+
+- `@kerfjs/ui` UX catalog: the ten production recipes now compose Kerf
+  components, layouts, and Web Awesome surfaces through their public
+  configuration alone, with no route stylesheets, inline styles, or
+  styling-only classes. The list-detail dialog is rebuilt from `DialogSurface`,
+  the dialog's own labeled header and close control, `SplitView` (a full-screen
+  list-to-detail drill-down on compact devices), aligned `ListHeader`s, a
+  `ValueTable`, and footer actions. The desktop application shell switches to one
+  pane at a time below desktop sizes through `deviceClass()`. Page and pane
+  headings stack instead of hiding their titles at narrow widths, and supporting
+  copy, content-item text, and loading skeletons sit on the shared 17px text
+  inset. The catalog frames each recipe in a `CatalogExample` viewport that the
+  recipe declares through an exported `presentation`, and recipe ownership notes
+  render as that example's note. `npm run check:recipes` now fails on a recipe
+  stylesheet, an inline style, a class outside the published layout and Web
+  Awesome vocabulary, a non-public stylesheet import, or recipe-specific rules in
+  the catalog shell stylesheet.
+- Fixed `@kerfjs/ui/webawesome.css` `wa-dialog` titles given as a plain-string
+  `label` sitting at the bare surface inset; they now inset by one bordered
+  item step (`--kui-layout-item-padding` + 1px) so the header label lines up
+  with body text and icons. Slotted label elements are unaffected.
+- Fixed icon + label `wa-button`s inside `ToolbarControlGroup` stacking the
+  icon above the label; their label part now lays out as a single nowrap row,
+  matching native mixed buttons.
+- `prompt()` / `form()` now reject with a `TypeError` when a validator returns
+  a promise (validators are synchronous), instead of resolving the value and
+  leaving an unhandled rejection. `prompt()` also re-reads its input on every
+  OK, so a reactive `render` that replaces the input no longer submits the
+  detached original's stale value, and a removed input rejects the promise.
+- A local `npm run check` run with `KERF_SKIP_PACKAGE_GATES=1` no longer
+  records a verified tree, so the pre-push hook cannot skip the sibling-package
+  gates that run left out.
+- `kerfjs/overlay`: a `prompt()` `validate` or `form()` `field.validate` that
+  throws now closes the dialog (full teardown, focus restored) and rejects the
+  returned promise with the original error. Previously the error escaped the
+  OK click or Enter handler, and the dialog stayed open with an OK button that
+  could never succeed. Validators are synchronous; this is the error channel
+  for a validator bug.
+- `kerfjs/overlay`: when a `form()` field input disappears after the dialog
+  opens (for example a reactive `render` re-render drops it), OK and Enter now
+  close the dialog and reject the promise with an error naming the missing
+  field. Previously `form()` resolved `null`, which
+  reads as a Cancel, and threw from the click handler.
+- `@kerfjs/ui`: a multiline `ListItem` whose label fits on one line now
+  centers its icon on that line. The row's 44px minimum used to stretch the
+  grid track, which centered the label but left the start-aligned icon about
+  1.4px above it.
+- `@kerfjs/ui`: a `ToolbarControlGroup` with `focusRing="outline"` or
+  `"halo"` keeps its group focus ring while a `Select` inside it has its
+  listbox open. Chromium and WebKit did not carry `:focus-within` from the
+  focused option to the group, so the ring disappeared.
+- UX catalog: the foundation palette's Brand swatch uses the brand on-fill
+  color again, the Spacer demo gives its flexible spacer room to grow again,
+  and the TokenSearchField adoption demo again wires its chip keyboard and
+  `onEdit` readout. The catalog demo rework had broken all three.
+- Documented and pinned how `tooltip()` surfaces a failed show from its delay
+  timer: the half-built tooltip is rolled back, the original error escapes the
+  timer for the host to report (a window `error` event in browsers, matching
+  kerf's other deferred callbacks), and the tooltip stays armed so the next
+  hover or focus tries again.
+- Fixed the dialog helpers (`confirm` / `prompt` / `form` / `choice`) leaving
+  wiring behind when a step after the overlay opened failed. Their post-open
+  wiring (required-slot checks, the click-table `delegate()`, the Enter-key
+  listener) is now part of construction: a failure removes the listeners
+  already wired, closes the overlay (including a `native` `<dialog>`), restores
+  focus, and rethrows the original error, so no pending promise is left
+  attached to an on-screen dialog.
+- Added `ticket:timing summary --all`, a read-only cross-ticket timing report
+  (median/p90 per phase, gate, and check step) that counts one push shared by
+  a batch of tickets once and detects and excludes fan-out backfill, such as
+  the first timed push that attached one check interval to 374 historical
+  tickets.
+- Ticket timing now records per-step durations of the root `npm run check`
+  chain (printed at the end of every run), interrupted gate attempts, active
+  time through `ticket:timing claim`/`release` wrappers around `hotsheet-cli`,
+  and CI/publication intervals imported idempotently from GitHub Actions with
+  `ticket:timing import-ci`.
+- The pre-push hook no longer reruns `npm run check` when a local run already
+  passed on the exact clean tree being pushed; the skip is recorded in ticket
+  timing, and any dirty worktree, different tree, Node.js change,
+  failed/interrupted rerun, or `KERF_FORCE_CHECK=1` runs the full gate.
+- The pre-push hook no longer fans its timing record out to every ticket in a
+  push that names more than 25 of them (a first push of a long history, a
+  force-push). It prints a notice and records only the explicit
+  `KERF_TICKET_TIMING_TICKETS` list, or nothing, so it can no longer write the
+  backfill shape the cross-ticket summary has to exclude.
+- The pre-push hook's "already verified" skip now also requires the same
+  platform, architecture, and installed dependencies as the passing run: a
+  fingerprint of every `package-lock.json` and `node_modules/.package-lock.json`
+  across the root, `ui/`, `eslint-plugin/`, `create-kerf-component/`, and
+  `site/`. A reinstall, a lockfile change, or a missing `node_modules` now runs
+  the full gate.
+- `ticket:timing record` accepts `--run-id <n>`, and `import-ci` no longer
+  imports a GitHub run a second time when it was already recorded by hand:
+  an interval with that run id, or one with no run id for the same phase and
+  gate whose span overlaps the run's (within 60 seconds), counts as imported.
+- `bindList()` now rolls back when its first render throws: rows that pass
+  already created are disposed (content mounts and element-mode `dispose`
+  callbacks) and removed before the original error is rethrown, instead of
+  leaking live row effects with no handle to release them.
+- `bindList()` virtualization now validates its dimensions: heights (fixed,
+  estimated, callback-returned, and `setHeight` reports) must be finite and
+  non-negative, a fixed window-mode `rowHeight` must be positive, and
+  `overscan` / `minRows` must be non-negative integers. Invalid values throw a
+  descriptive error instead of producing blank windows or a corrupted scroll
+  anchor.
+- `bindList()` now rejects a source that carries the `arraySignal` brand but
+  has no patch queue with a descriptive error at bind time, instead of failing
+  with a generic `TypeError` on its first render.
+- Added `wa-dialog.hide-actions` support to `@kerfjs/ui/webawesome.css`, hiding
+  Web Awesome's directly exported `header-actions` shadow part for dialogs that
+  provide their own dismissal affordance.
+- Fixed `mount()` leaving an element permanently "already mounted" when its
+  first render throws. The first render is now transactional: the original
+  error is rethrown, every binding effect and the dev listener observer
+  acquired so far are released, the element's pre-mount child nodes are
+  restored, and a retry on the same element succeeds.
+- Fixed `overlay()` construction leaking a live wrapper, mount, dismissal
+  listeners, and concurrent-overlay stack entry when setup failed partway. A
+  malformed `initialFocus` selector now throws a descriptive `overlay()` error
+  before anything is touched, and a throwing first render or `native`
+  `showModal()` / `showPopover()` call rolls back everything already installed
+  (restoring focus) before rethrowing. `popover()` and `tooltip()` roll back the
+  same way when positioning fails; the dialog helpers inherit the guarantee.
+- Added an opt-in `@kerfjs/ui/document.css` baseline for border-box sizing,
+  token-backed body and link presentation, and a `.kui-app-root` full-height
+  chain for application shells.
+- Added an inline `Text` span variant for secondary copy inside rows, labels,
+  and table cells, preserving tone, size, and font roles without box geometry.
+- Reworked every focused UX catalog demo to dogfood Kerf components, Web
+  Awesome surfaces, and semantic HTML without route-local stylesheets, inline
+  styles, styling-only classes, or shared icon/button render helpers. Added
+  catalog-owned specimen viewport constraints and a nonwaivable conformance
+  gate that prevents those styling shortcuts from returning.
+- Fixed `ToolbarControlGroup` dropdown triggers that were sized to fixed 48px/66px boxes,
+  which clipped popup icons and let compact mixed-control carets overflow in
+  Safari while distorting longer catalog controls.
+- Added a `TabBar.end` action zone for layouts that need a tab-local adjacent
+  `trailing` action and a separate far-edge action; the tab strip now owns the
+  shrink/scroll geometry while all action regions remain visible.
+- Moved the UX catalog checkerboard to the preview scroll owner and replaced
+  its four gradients with one repeated SVG tile, so the pattern continues
+  through below-fold content.
+- Added explicit native `slot` support to every stable single-root
+  `@kerfjs/ui` visual component, including alternate render branches, while
+  keeping multi-root `ResizableRegion` and `CollapsiblePanel` excluded.
+- Fixed the UX catalog's desktop grid sizing so both the sidebar and component
+  detail can scroll all the way to their final content while narrow layouts
+  retain normal document scrolling.
+- Fixed single-line `ToolbarText` clipping glyph descenders while retaining its
+  horizontal ellipsis behavior.
+- Formalized UX catalog demos as components, compositions, or recipes; catalogs
+  now group and order those kinds consistently and label compositions with a
+  visible tag instead of title suffixes.
+- Removed stale Web Awesome guidance that still advertised the deleted
+  aggregate theme route; focused component routes remain the supported catalog
+  surface.
+- Aligned Web Awesome Accordion and Details disclosure geometry: plain Details
+  keep a flush body, plain Accordion items use the 8px surface inset throughout,
+  framed Details use 16px on the trigger and 8px on the body, and framed
+  Accordion items use 16px throughout.
+- Added a first-class `@kerfjs/ui/grid` layout primitive for any positive
+  equal-width column count, with typed gap and flex values and zero-minimum
+  fractional tracks that stay equal when child content has different intrinsic
+  widths.
+- Made accent and filled-outlined Web Awesome badge variants meet WCAG AA at
+  their compact text size while preserving loud accent fills and outlined
+  borders.
+- Added independent typed `tone`, `size`, and `font` presentation roles to
+  `@kerfjs/ui/text`, covering quiet/danger copy, compact metadata, and monospace
+  identifiers without global utility classes or appearance-only heading levels.
+- Made filled Web Awesome badges use a quiet semantic fill with normal text by
+  default, preserving variant tint while meeting WCAG AA for their compact text.
+- Fixed nested Rows and Lists inheriting inset values for sides that were not
+  selected on the inner layout component.
+- Fixed migrated `Text` instances in Catalog and passive `ListHeader` labels
+  retaining nested padding or border geometry that offset their visible content.
+- Added `Row.vAlign="baseline"` for native flex cross-axis baseline alignment;
+  `List.vAlign` remains limited to values supported by vertical main-axis
+  distribution.
+- Added a first-class `@kerfjs/ui/text` component for native `h1`–`h6` and
+  paragraph semantics with standard transparent-border and content-padding
+  geometry and margin-neutral defaults; it renders `p` when `variant` is omitted,
+  and Kerf UI's headings and prose now use it.
+- Added the shared physical `Sides` contract to `List` and `Row` text/control
+  insets and to `ListInsetText` / `ListInsetControl`; inset wrappers now default
+  to all four sides, while `ListInsetText.horizontalOnly` remains a deprecated
+  compatibility alias for `sides="rl"`.
+- Added `ListHeader.inline` for shrink-wrapped section labels that remove the
+  component root's outer margin, border, and padding while preserving title,
+  count, action, and disclosure behavior.
+- Added a catalog-driven public-component integration validator for
+  `@kerfjs/ui`, including an all-at-once dry-run report across package, build,
+  barrel, CSS, demo, route, signature, and compatibility surfaces.
+- Added one change-local `@kerfjs/ui` verification command that synchronizes
+  generated projections, runs component/bundle/type coverage, builds the demo,
+  reports exact gzip deltas, and records reviewed budget updates with reasons.
+- Made every `@kerfjs/ui` Playwright invocation build current catalog source
+  after fast preflights, with a served source digest that rejects stale preview
+  output during focused browser runs.
+- Added durable Hot Sheet phase timing for active work, local verification,
+  push hooks, CI, and publication, including safe failure aggregation and
+  per-ticket summaries.
+- Added typed flex participation to `Row`, matching `List`'s boolean, finite
+  keyword, and branded `CssFlex` contract.
+- Added a first-class horizontal `Row` with typed spacing, physical-axis
+  alignment, and opt-in wrapping; `List` now supports the same alignment
+  vocabulary while retaining its existing defaults.
+- Refined compact mixed `ToolbarControlGroup` selections to retain standard
+  horizontal padding, remove the internal separator, and raise the selected
+  surface over the outer border; avatar group hover now preserves image fitting.
+- Moved the comprehensive local `npm run check` gate from pre-commit to
+  pre-push so coherent commit batches pay its cost once; pre-commit now performs
+  only Git's staged whitespace check, and multi-source AI guidance files are
+  excluded from repository-wide Prettier enforcement.
+- Fixed `create-kerf-component` releases carrying a stale composition-catalog
+  schema by generating the bundled copy from `@kerfjs/ui`'s canonical schema
+  and gating both the root check and interactive release flow against drift.
+- Added catalog-driven CSS value diagnostics across `eslint-plugin-kerfjs`,
+  `kerf-ui-analyze`, and `kerf-ui-doctor`. Stable `KUI-L013`–`KUI-L017`
+  findings now identify raw or unknown values, wrong-dimension helpers,
+  incomplete expressions, declaration-list escapes, and review-worthy
+  off-scale spacing from first- or third-party component catalogs.
+- Extended the property-specific `@kerfjs/ui/css-values` contracts: `List.flex`
+  now uses finite keywords or `flex()`, `Skeleton` dimensions use `CssSize` and
+  `CssLength`, and `SelectChoice.color` uses `uiColor()` or `colorVar()`.
+  Removed the unrestricted `style` escape hatches from `ListItem` and
+  `ListActionRow` before the 5.0 stable release; use `className`, public tokens,
+  and cataloged props instead.
+- Added typed, CSS-free `@kerfjs/ui/css-values` builders and branded complete
+  versus expression length types. `List.gap` now accepts direct spacing-token
+  shorthands or complete `CssLength` values and rejects unrestricted CSS strings.
+- Added the public recursive `JSXChildren` type from both `kerfjs` and
+  `kerfjs/jsx-runtime`, giving third-party function components a canonical
+  declaration for nullable, signal-backed, and arbitrarily nested readonly
+  child content that matches the runtime.
+- Added the public recursive `KerfUiContent` type across semantic UI content
+  zones, so nullable conditionals and mutable or readonly nested component
+  arrays compose directly without a `Fragment` while raw strings, numbers, and
+  signals remain rejected outside explicit text positions.
+- Fixed bottom `Workbench` drawers overshooting and snapping during collapse
+  transitions by anchoring fixed-height content to the shell's stable bottom
+  edge.
+- Fixed bottom `CollapsiblePanel` drawers overshooting their open position and
+  snapping back by anchoring fixed-height content to the panel's stable bottom
+  edge throughout the transform transition.
+- Formalized named `SafeHtml` prop slots as explicit `zone.jsx.prop` bindings
+  in the UI composition catalog and generalized `ui-composition` linting beyond
+  Toolbar, including statically visible `children`, cardinality, aliases,
+  namespaces, arrays, fragments, and branches.
+- Added `ToolbarControlGroup.avatarImage`, painting contained avatar imagery on
+  a lone group or on the pressed highlight when the group has multiple buttons.
+- Split the AppTab and TabBar catalog routes into focused component specimens,
+  and moved their controlled selection, tabpanel, overflow, add/close, and
+  reorder lifecycle into a separate application-tabs composition demo.
+- Fixed `wireNavStack` focus ownership across controlled navigation: pushes
+  focus the new top view, pops restore its remembered descendant, and removed
+  targets fall back through `data-nav-focus`, the first enabled control, and
+  the view container.
+- Fixed compact mixed-content `ToolbarControlGroup` dropdown triggers being
+  forced into an icon-only width, which painted the label across its separator
+  and the Web Awesome caret outside the group.
+- Made `ListItem` clip label, status, and dormant trailing painting to its
+  rounded row boundary so compact and constrained rows cannot visibly overflow;
+  described rows now grow enough to keep their owned two-line label readable.
+- Fixed compact toolbar `Select` focus to follow its owning group's pill or
+  rounded geometry and restored consistent spacing between popup icons and labels.
+- Fixed the compact-toolbar recipe's independent overflow action to use the
+  same full-height pill geometry as its adjacent toolbar controls.
+- Fixed the catalog footer's `Components` relationship selector to fit its icon
+  and plural label and give popup headings/items consistent border clearance.
+- Fixed a collapsible `TokenSearchField` inside a rounded
+  `ToolbarControlGroup` retaining its independent pill radius instead of using
+  the group's shared concentric highlight radius.
+- Updated the header-composition catalog demo's supporting copy to use the
+  horizontal `ListInsetText` geometry, aligning it with the value-table content
+  edge across responsive, RTL, and zoomed layouts.
+- Updated the `Pane` catalog demo's secondary header copy to use
+  `ListInsetText`, aligning it with the standard pane content gutter at wide and
+  narrow sizes instead of maintaining demo-only padding.
+- Completed `NavStack` navigation transitions by cross-fading top and bottom
+  chrome alongside content slides, added per-view bottom toolbars with a
+  persistent fallback, and replaced the static focused demo with a working
+  push/pop flow.
+- Replaced the static compact `SplitView` detail specimen with a controlled,
+  interactive list-to-detail drill-down whose Back action restores the list;
+  the roomy example now demonstrates controlled selection as well.
+- Documented and demonstrated list-first dialog bodies: use `List` with
+  `bodyInset="none"`, and wrap bare dialog copy in `ListInsetText` so content
+  shares the standard list gutter without double-insetting.
+- Fixed `@kerfjs/ui`'s collapsible `TokenSearchField` keep-open ownership in
+  WebKit: when `focusout.relatedTarget` is missing during pointer activation of
+  an external `data-token-search-keep-open` surface, the helper now uses the
+  actual pointer target instead of collapsing and removing the target before
+  its click handler runs.
+- Added a first-class vibrant `pop` semantic color for attractive non-status
+  emphasis, with complete light/dark/increased-contrast token roles and typed
+  StateBanner, ListHeader indicator, and ToolbarControlGroup selected tones.
+- Fixed canonical `Select` popup animation reversals so an earlier close cannot
+  hide a reopened menu after resizing. Canceled transitions retain the accepted
+  state, and removed controls cannot receive stale completion or deferred focus.
+- Fixed managed `TokenSearchField` Clear focus before the next input task, so
+  immediate typing stays in the replacement editor instead of triggering page
+  shortcuts; genuine later focus handoffs and selections remain untouched.
+- Fixed `@kerfjs/ui/tab-scaffold` bottom-tab labels being vertically clipped by
+  flex shrinkage while retaining horizontal ellipsis for long labels.
+- Made inset selection and hover highlights follow their owning control's pill
+  or rounded shape, with concentric inner radii derived from the full inset.
+- Fixed animated `ResizableRegion` overlays so remembered desktop dimensions
+  cannot make their content overflow the responsive panel cap on narrow screens.
+- Added configuration-first application-panel policies across `ResizableRegion`,
+  `Workbench`, and `CollapsiblePanel`: separator visibility, instant-track
+  collapse with optional composited content motion, popup-safe overflow,
+  inline/overlay/hidden responsive presentations, and safe-area restore-control
+  placement. `wireResizableRegions` now suppresses motion during pointer drags
+  and ignores unavailable regions; `wireSidebar` supports hidden compact
+  replacements and exclusive overlays.
+- Added typed `TabBar` allocation/presentation/action-placement and `AppTab`
+  presentation/size/label-width variants for segmented inspector strips,
+  compact drawer tabs, icon-only accessible tabs, and truncating labels.
+- Added typed `ToolbarControlGroup` size, density, content anatomy, selected
+  chrome/tone, nested-dropdown, and avatar scrim variants.
+- Added typed `Select` form, borderless-toolbar, intrinsic-navigation, compact,
+  icon-only-selected, truncation, and composed focus-ring variants.
+- Added `DialogSurface` and `PopupSurface` composition APIs for standard dialog
+  sizes/presentations, independent body/footer insets, and list-compatible popup
+  menu insets without consumer `::part()` overrides.
+- **Breaking (`@kerfjs/ui`):** removed `PanelHeader` and its subpath/CSS export.
+  Compose page, panel, and dialog headings directly with `Toolbar`, a direct
+  extra-large `ToolbarText`, and optional `ToolbarControlGroup` icon/action zones;
+  keep supporting copy as app-owned content below the toolbar.
+- Fixed controlled TokenSearchField Select All + Backspace/Delete collapsing the
+  editor: managed deletion keeps the adopted open signal and restores replacement
+  focus before another keystroke, without a stale animation-frame caret reset.
+  The adoption demo now persists both edited text and remaining tokens.
+- Fixed `Select` controls using only `ariaLabel` being unnamed to assistive
+  technology. Ordinary and custom selected content retain their geometry while
+  the actual shadow combobox receives its accessible name.
+- Added first-class `Select` hint text below interactive and loading-placeholder
+  controls while keeping empty-value `placeholderText` semantically distinct.
+
+- Changed the Web Awesome Dialog theme to use 8px body padding and 16px footer
+  padding, independently of the component's shared `--spacing` value.
+
+- Fixed `kerf-ui-doctor` so its isolated Kerf ESLint pass preserves applicable
+  consumer core rules and suppression reporting options. Playwright's required
+  `no-empty-pattern` fixture suppression no longer becomes a false unused
+  directive while consumer plugin rules remain outside the doctor boundary.
+
+- Cataloged `SplitView` and its documented
+  `--kui-split-view-list-width` override so `kerf-ui-doctor --full` accepts the
+  public token in downstream application stylesheets.
+
 - Added the first-class `List` vertical-layout component with gap, flex, scroll,
   and multi-edge divider options; `Toolbar` now uses the same typed
   `dividerSides` contract instead of a boolean divider.
@@ -250,6 +2890,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Added the lockstep `@kerfjs/ui` package: accessible toolbar, menu, tab, header, resize, select, and feedback primitives; semantic CSS tokens and browser component subpaths that automatically include only reachable component styles; CSS-free root/SSR entries and an optional complete stylesheet; opt-in Web Awesome registration; AI-oriented docs; a production-backed UX catalog; bundle/unit/three-engine browser gates; and a least-privilege release workflow.
 - The virtual-list demo animation opens on the full app again (header, the "N in the DOM" badge, and the list) before the scroll; the list now scrolls inside its own box while the header stays put (previously the whole frame was a full-bleed list strip), holds at row 0 before gliding instead of starting a few rows down, and the loop stays in phase on every pass. Captured with domotion-svg 0.28.2.
 
+- @kerfjs/ui panel toolbars now place groups in leading, center, and trailing zones; relocateOnCollapse keeps chosen groups available when a panel closes.
+
 ## [4.4.1] - 2026-08-26
 
 - Overhauled the README landing page: new one-line tagline, npm/size/license/TypeScript-types badges, a hoisted "Quick start" (install + `tsconfig`) right under the hook, and a jump nav (Quick start · Why kerf · Quick tour · Docs). The counter example now shows `delegate()` wiring the click handler.