@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/ai/components/framed-list.md

@@ -0,0 +1,80 @@
+# FramedList
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:framed-list` · Kerf UI · component · Structure
+
+An inset-grouped list: one rounded, bordered frame with dividers between rows of arbitrary content.
+
+## When to use
+
+Group settings-style rows of arbitrary content (copy, keycaps, controls) in one framed surface with between-row dividers and an optional highlighted row, without app list CSS.
+
+- Settings rows, account or source cards, or shortcut lists group several rows of arbitrary content in one framed surface.
+
+**Not when:**
+
+- Do not use for read-only label/value facts; use ValueTable.
+- Do not use for selectable navigation rows; use List with ListItem.
+- Do not pad or border its rows from application CSS; FramedListRow owns the inset and divider.
+
+**Alternatives:**
+
+- [ValueTable](./value-table.md) (nearest) — Use ValueTable when every row is a label and a value.
+- [List](./list.md) (nearest) — Use List with ListItem for navigation or selectable rows.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/framed-list` — exports `FramedList`, `FramedListRow`.
+- CSS: the browser build of `@kerfjs/ui/framed-list` pulls its CSS automatically; import `@kerfjs/ui/framed-list.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/framed-list`](../public-api-signatures-v1.md#kerfjsuiframed-list) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- lowered surface
+- base surface
+- highlighted row
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** row content and its controls; which row is highlighted; the list's accessible name.
+
+No wiring helper.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- Rows own the 8px inset and the inset 1px divider above them; the frame owns the 8px margin, border, and radius.
+
+## Accessibility
+
+- Renders a list (ul role=list, li rows); pass label when no heading names it. Highlight is visual; carry its meaning in row content or a control's state.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Public class hooks (select for layout placement only, never to change the component's look): `kui-framed-list`, `kui-framed-list__row`.
+
+Never put `kui-framed-list`, `kui-framed-list__row` on an element you write; render `FramedList` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-framed-list-border`, `--kui-color-neutral-border-normal`, `--kui-color-surface-lowered`, `--kui-color-surface`, `--kui-color-brand-fill-quiet`, `--kui-layout-inline-margin`, `--kui-layout-item-padding`, `--kui-layout-rounded-radius`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [ValueTable](./value-table.md), [List](./list.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=framed-list`.

package/ai/components/grid.md

@@ -0,0 +1,101 @@
+# Grid
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:grid` · Kerf UI · component · Structure
+
+Equal-width columns with a fixed count or a minimum-width responsive mode, typed gaps, physical-side text/control insets, and optional flex participation.
+
+## When to use
+
+Arrange related siblings in equal-width columns with either a fixed count or automatic container-width collapse.
+
+- Arrange related siblings into a fixed positive number of equal-width columns.
+- Fit equal-width columns down to a typed minimum and collapse as the container narrows.
+- Prevent wider intrinsic content from making one fractional track wider than its peers.
+- Use a finite flex keyword or the flex() builder when Grid participates in a flexible parent layout.
+
+**Not when:**
+
+- Do not use Grid for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid.
+- Do not use Grid when columns need a user-operable separator; use ResizableRegion.
+- Do not combine fixed columns with minColumnWidth; choose one layout mode.
+- Do not pass raw CSS strings to gap or flex, mix their distinct grammars, or use s/xl spacing steps without a deliberate exception.
+
+**Alternatives:**
+
+- [Row](./row.md) (axis-alternative) — Use Row for one horizontal flex line, alignment, or wrapping rather than fixed equal tracks.
+- [List](./list.md) (axis-alternative) — Use List when the main layout axis is vertical.
+- [ResizableRegion](./resize.md) (interactive-alternative) — Use ResizableRegion when people must adjust the boundary between tracks.
+- [ColumnTrack](./column-track.md) (nearest) — Use ColumnTrack for a board of columns that scroll sideways or page instead of wrapping.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/grid` — exports `Grid`.
+- CSS: the browser build of `@kerfjs/ui/grid` pulls its CSS automatically; import `@kerfjs/ui/grid.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/grid`](../public-api-signatures-v1.md#kerfjsuigrid) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- any positive safe-integer equal-track count
+- typed minimum column width with automatic container-width collapse
+- named none/2xs/xs/s/m/l/xl token gap
+- typed CssLength gap
+- boolean, finite-keyword, or typed CssFlex flex
+- top/right/bottom/left text and control inset combinations
+- fill: the layout root fills a definite-height parent
+- rootAttributes: safe data-\* metadata on the root
+- selectionMode=multiple: labeled multi-select grid for ContentItem tiles
+
+**CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
+
+- `minColumnWidth`: length grammar; raw values: forbid; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `minColumnWidth={px(376)}`
+- `gap`: length grammar; raw values: forbid; shorthands `none`, `2xs`, `xs`, `m`, `l`; exceptional (justify) `s`, `xl`; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `gap="m"`
+- `flex`: flex grammar; raw values: forbid; shorthands `none`, `auto`, `initial`; helpers `flex` — e.g. `flex`
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** child semantics and content; fixed column count or responsive minimum width; typed gap, flex, and physical-side inset choices.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: none · padding: conditional (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- textInsets adds 17px and controlInsets adds 8px on selected physical sides; text wins on overlap.
+- Fixed tracks use minmax(0, 1fr); responsive tracks use auto-fit with a minimum width capped at 100%, preserving equal distribution without narrow overflow.
+
+## Accessibility
+
+- Grid adds no role by default; selectionMode=multiple requires ariaLabel and supplies a multi-select grid for ContentItem row/gridcell tiles.
+- wireContentItems uses rendered tile positions for Left/Right/Up/Down and reaches the first or last tile with Home/End.
+- Responsive column-count changes preserve source and focus order.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Public class hooks (select for layout placement only, never to change the component's look): `kui-grid`.
+
+Never put `kui-grid` on an element you write; render `Grid` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-grid-gap`, `--kui-layout-item-gap`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [Row](./row.md), [List](./list.md), [ResizableRegion](./resize.md), [ColumnTrack](./column-track.md).
+- Docs: [`docs/layout.md`](../../docs/layout.md), [`docs/layout.md#grid`](../../docs/layout.md#grid).
+- UX catalog route: `?component=grid`.

package/ai/components/headers.md

@@ -0,0 +1,63 @@
+# Headers
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:headers` · Kerf UI · CSS composition · Structure
+
+## When to use
+
+Page, dialog, and definition-list hierarchy.
+
+- Compose page, dialog, and definition-list hierarchy from their distinct primitives.
+
+**Not when:**
+
+- Do not reuse one header primitive only because its typography looks similar.
+
+## Imports
+
+- Nothing to import: this is a reference composition.
+- Declared side effects: css.
+
+## Props
+
+No props: this entry has no JavaScript API.
+
+**Variants (configure, do not restyle):**
+
+- page
+- dialog
+- key/value
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [Toolbar](./toolbar.md), [ToolbarControlGroup](./toolbar-control-group.md), [ToolbarText](./toolbar-text.md), [ValueTable](./value-table.md).
+
+## State and wiring
+
+**The app owns:** scope hierarchy; copy; actions.
+
+No wiring helper.
+
+## Geometry
+
+Margin: child · border: child · padding: child (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- Preserve heading and description relationships for the containing surface.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [Toolbar](./toolbar.md), [ToolbarControlGroup](./toolbar-control-group.md), [ToolbarText](./toolbar-text.md), [ValueTable](./value-table.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#ambiguous-choices`](../../docs/component-selection.md#ambiguous-choices).
+- UX catalog route: `?component=headers`.

package/ai/components/layout.md

@@ -0,0 +1,75 @@
+# Application Layout
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:layout` · Kerf UI · CSS composition · Foundation
+
+Unpadded panes, 24px content stacks, and self-contained 8/1/8 content items for application layout boundaries.
+
+## When to use
+
+Provide one reusable pane, toolbar, content stack, and content-item geometry across sidebars, main areas, and dialogs.
+
+- Build sidebars, main areas, inspectors, or dialogs from an unpadded pane with optional toolbar/footer and one content stack.
+- Relocate a hidden pane's restore control into the adjacent main toolbar on the same logical edge.
+
+**Not when:**
+
+- Do not pad the pane itself or add wrapper insets around children that already own content-item geometry.
+- Do not leave an empty icon-only rail after collapsing a pane.
+
+## Imports
+
+- CSS: import `@kerfjs/ui/layout.css` once.
+- Declared side effects: css.
+
+## Props
+
+No props: this entry has no JavaScript API.
+
+**Variants (configure, do not restyle):**
+
+- toolbar + content
+- toolbar + content + footer
+- hidden inline-start pane restored from main-toolbar leading
+- hidden inline-end pane restored from main-toolbar trailing
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [ContentItem](./content-item.md).
+
+## State and wiring
+
+**The app owns:** layout hierarchy; reading width; responsive relocation; pane visibility and matching collapse/restore controls.
+
+No wiring helper.
+
+## Geometry
+
+Margin: child · border: child · padding: child (layout role: foundation). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- Keep reading and focus order coherent when controls wrap or panes relocate, and preserve one scroll owner per pane.
+- When collapse replaces one control with its counterpart in another toolbar, move focus to the newly rendered restore or collapse control.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Public class hooks (select for layout placement only, never to change the component's look): `kui-content`, `kui-control-cluster`, `kui-inline-metadata`, `kui-scroll-owner`.
+
+Classes an application may place on its own elements: `kui-content`, `kui-control-cluster`, `kui-inline-metadata`, `kui-scroll-owner`.
+
+Public tokens it reads: `--kui-layout-control-gap`, `--kui-layout-content-gap`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-metadata-gap`, `--kui-layout-pill-radius`, `--kui-layout-rounded-radius`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [ContentItem](./content-item.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/layout.md#public-roles-and-tokens`](../../docs/layout.md#public-roles-and-tokens).
+- UX catalog route: `?component=layout`.

package/ai/components/list-action-row.md

@@ -0,0 +1,108 @@
+# ListActionRow
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:list-action-row` · Kerf UI · component · Navigation
+
+Configurable navigation rows with structured labels, status/busy metadata, density, group dividers, and a primary native-button action beside a sibling trailing native button or trailing overflow PopupMenu.
+
+## When to use
+
+Keep a selectable primary row action and an independently named trailing action as sibling native controls inside one noninteractive visual row.
+
+- A navigation or item row needs both a primary selectable action and an independently focusable trailing action.
+- A command row needs a trailing "…" overflow menu (trailingMenu), optionally also opened at the pointer from the row's contextmenu with openPopupMenuAt.
+- A settings or command row identifies each entry by a colored icon tile (iconTile) instead of a bare glyph.
+
+**Not when:**
+
+- Use ListItem when trailing content is dormant metadata; use TabBarItem only for tablist semantics and ToolbarControlGroup only for toolbar controls.
+- Do not inject declaration strings; use className, public tokens, and cataloged component props for application styling.
+
+**Alternatives:**
+
+- [ListItem](./list-item.md) (nearest) — Trailing content is noninteractive.
+- [TabBarItem](./tabs.md) (semantic alternative) — The primary control selects a tabpanel inside TabBar.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/list-action-row` — exports `ListActionRow`.
+- CSS: the browser build of `@kerfjs/ui/list-action-row` pulls its CSS automatically; import `@kerfjs/ui/list-action-row.css` manually only without the `browser` export condition.
+- Wiring: `wireListReorder` from `@kerfjs/ui/wire-list-reorder` (optional).
+- Wiring: `reorderListItems` from `@kerfjs/ui/wire-list-reorder` (optional).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/list-action-row`](../public-api-signatures-v1.md#kerfjsuilist-action-row), [`@kerfjs/ui/wire-list-reorder`](../public-api-signatures-v1.md#kerfjsuiwire-list-reorder) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- selected
+- pressed
+- disabled primary
+- disabled trailing action
+- multiline
+- placeholder (loading)
+- compact density
+- description and status
+- busy while retaining content
+- interaction-revealed trailing action
+- trailing overflow menu
+- before, after, or paired group divider
+- position-aware divided-list corners: flat wherever a divider line (this row's or a neighbor's) meets the edge
+- draggable row with dragging and drop-before / drop-after insertion states
+- filled leading icon tile (iconTile): a quiet tone preset (neutral, brand, success, warning, danger) or an application fill with an optional foreground; a 32px rounded tile holding an 18px glyph
+
+**CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
+
+- `style`: declarations grammar; raw values: forbid — e.g. `className="app-row"`
+- `iconTile.color`: color grammar; raw values: forbid; helpers `fillColor`, `uiColor`, `colorVar` — e.g. `iconTile={{ color: fillColor("#e5484d") }}`
+- `iconTile.foreground`: color grammar; raw values: forbid; helpers `uiColor`, `foregroundColorVar`, `foregroundColor` — e.g. `iconTile={{ color: fillColor("#e5484d"), foreground: foregroundColor("white") }}`
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [PopupMenu](./popup-menu.md).
+
+## State and wiring
+
+**The app owns:** routing; selection; action handling; domain data attributes; popover or context-menu policy; row order.
+
+**Wiring:** `wireListReorder`, `reorderListItems` is optional.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-dragging` on `ListActionRow rows being dragged` (`wireListReorder`): "true" on every row a pointer drag is moving (the dragged row, or every selected row of its list when the dragged row is selected). Same attribute the `dragging` prop renders.
+- `data-drop-position` on `ListActionRow row under the pointer` (`wireListReorder`): "before" or "after": the edge of this row the dragged rows would land beside. Same attribute the `dropPosition` prop renders.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: navigation). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- The noninteractive root contains two sibling native buttons in primary-then-trailing focus order; each button has its own action, item identity, accessible name, and disabled state.
+- A trailingMenu replaces the trailing button with a PopupMenu trigger in the same position: an icon-only button named by trailingMenu.label that exposes aria-haspopup="menu" and aria-expanded, moves focus into the menu, and returns focus to the trigger on Escape or a choice.
+- Selection semantics are exposed only by the primary button; label, icon, and trailingActionIcon are dormant SafeHtml and must not contain interactive descendants; never place an interactive descendant in ListItem.trailing.
+- A draggable row is dragged by its noninteractive root; with wireListReorder, Alt+Shift+ArrowUp/ArrowDown on its primary button moves it, and focus returns to that button after the application re-renders.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Public class hooks (select for layout placement only, never to change the component's look): `kui-list-action-row`, `kui-list-action-row__icon`, `kui-list-action-row__label`, `kui-list-action-row__primary-label`, `kui-list-action-row__description`, `kui-list-action-row__status`, `kui-list-action-row__primary`, `kui-list-action-row__trailing-action`.
+
+Never put `kui-list-action-row`, `kui-list-action-row__icon`, `kui-list-action-row__label`, `kui-list-action-row__primary-label`, `kui-list-action-row__description`, `kui-list-action-row__status`, `kui-list-action-row__primary`, `kui-list-action-row__trailing-action` on an element you write; render `ListActionRow` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-brand-border-loud`, `--kui-color-brand-border-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-border-quiet`, `--kui-focus-ring`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--kui-layout-item-padding`, `--kui-layout-rounded-radius`, `--kui-radius-pill`, `--kui-list-action-row-background`, `--kui-list-action-row-border`, `--kui-list-action-row-color`, `--kui-list-action-row-dragging-opacity`, `--kui-list-action-row-drop-indicator`, `--kui-list-action-row-drop-indicator-width`, `--kui-list-action-row-hover-background`, `--kui-list-action-row-hover-border`, `--kui-list-action-row-selected-background`, `--kui-list-action-row-selected-border`, `--kui-list-action-row-selected-color`, `--kui-list-action-row-trailing-hover-background`, `--kui-list-group-divider-color`, `--kui-list-row-padding-inline`, `--kui-list-row-icon-size`, `--kui-font-xs`, `--kui-radius-m`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-on-quiet`, `--kui-color-success-fill-quiet`, `--kui-color-success-border-quiet`, `--kui-color-success-on-quiet`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-border-quiet`, `--kui-color-warning-on-quiet`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-border-quiet`, `--kui-color-danger-on-quiet`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [PopupMenu](./popup-menu.md), [ListItem](./list-item.md), [TabBarItem](./tabs.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=list-action-row`.

package/ai/components/list-detail-dialog.md

@@ -0,0 +1,90 @@
+# ListDetailDialog
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:list-detail-dialog` · Kerf UI · component · Structure
+
+A modal list-detail dialog whose list and detail columns each run its full height: the list column carries a secondary title and its own controls, the detail column carries the dialog's primary title, actions, and close control, and compact devices get a full-screen drill-down.
+
+## When to use
+
+Present a selectable list beside the selected item's detail inside a modal, with the dialog's title and close control in the detail column and a one-pane drill-down on compact devices.
+
+- A modal task picks one record from a list and shows its detail beside it (project details, account switcher, settings categories): render ListDetailDialog with list and detail, open it with openDialog(), and pass compact from deviceClass().value.compact.
+- The dialog's primary title, actions, and close control belong to the selected item's detail rather than spanning both columns, and the column divider should run the dialog's full height.
+
+**Not when:**
+
+- Do not use it for a single-pane dialog; use DialogSurface.
+- Do not compose DialogSurface around a SplitView by hand for this layout; the surface header would span both columns and stop the divider below it.
+- Do not use it when the task needs a durable route or more working space than a modal; use a page with SplitView.
+
+**Alternatives:**
+
+- [Surface Scaffolds](./surface-scaffold.md) (nearest) — Use DialogSurface for a single-pane dialog.
+- [SplitView](./split-view.md) (responsive-alternative) — Use SplitView for the same list-detail flow as a page rather than a modal.
+- [WorkbenchDialog](./workbench-dialog.md) (nearest) — Use WorkbenchDialog for an editing task with side panels.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/list-detail-dialog` — exports `ListDetailDialog`, `ListDetailDialogProps`, `ListDetailDialogList`, `ListDetailDialogDetail`, `ListDetailDialogRootAttributes`, `openDialog`, `closeDialog`.
+- CSS: the browser build of `@kerfjs/ui/list-detail-dialog` pulls its CSS automatically; import `@kerfjs/ui/list-detail-dialog.css` manually only without the `browser` export condition.
+- Wiring: `wireNavStack` from `@kerfjs/ui/wire-nav-stack` (optional).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/list-detail-dialog`](../public-api-signatures-v1.md#kerfjsuilist-detail-dialog), [`@kerfjs/ui/wire-nav-stack`](../public-api-signatures-v1.md#kerfjsuiwire-nav-stack) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- roomy modal: a full-height list column and a full-height detail column with a fixed list width (default 280px, at most 40% of the dialog)
+- list column header controls and a pinned list footer
+- detail header actions before the close control, a description under the title, and a pinned detail footer
+- compact full-screen NavStack drill-down with the close control on every view
+- definite height (default 560px) or a viewport height cap, viewport gutter, size or preferred width, and light dismiss
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [Surface Scaffolds](./surface-scaffold.md), [SplitView](./split-view.md), [NavStack](./nav-stack.md), [Pane](./pane.md), [Toolbar](./toolbar.md), [ToolbarText](./toolbar-text.md), [ToolbarControlGroup](./toolbar-control-group.md), [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** open state (openDialog and closeDialog); device-class policy (compact); selected item and, on compact devices, detailActive and the back action (nav-back); list and detail content, their titles, toolbar controls, and footers; dismissal policy (lightDismiss).
+
+**Wiring:** `wireNavStack` is optional.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-nav-chrome-transition` on `kui-nav-stack` (`wireNavStack`): "true" while the chrome cross-fades between the outgoing and incoming view.
+- `data-nav-chrome-copy` on `kui-nav-stack__chrome-copy` (`wireNavStack`): Marks the inert, aria-hidden snapshot of the outgoing chrome shown during the cross-fade.
+- `data-nav-revealed` on `kui-nav-stack__view` (`wireNavStack`): "true" on the preserved, aria-hidden previous view while an incoming view slides over it.
+- `data-nav-exiting` on `kui-nav-stack__view` (`wireNavStack`): "true" on a popped view the helper briefly re-inserts to slide it out.
+- `data-chrome-overlay` on `kui-nav-stack` (`wireNavStack`): measured once the helper has measured the compact stack's overlay chrome (compactStack.chromePresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it.
+- `data-bottom-toolbar-overlay` on `kui-nav-stack` (`wireNavStack`): measured once the helper has measured the compact stack's overlay bottom toolbar (compactStack.bottomToolbarPresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it.
+
+## Geometry
+
+Margin: parent · border: self · padding: child (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The dialog draws no header and no body inset; each column is a Pane that owns its chrome and content insets, and the column divider runs the dialog's full height.
+
+## Accessibility
+
+- It is a native modal \<dialog> named by label: the page is inert, focus stays inside, Escape asks to close, and focus returns to the opener on close.
+- Pass describedBy, the id of app-owned summary copy, for the dialog's accessible description; the detail description describes the selection and is not wired. On roomy devices the detail title is a level-2 heading; every presentation keeps a close control named Close (closeLabel), and the compact back control is named by backLabel.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [Surface Scaffolds](./surface-scaffold.md), [SplitView](./split-view.md), [NavStack](./nav-stack.md), [Pane](./pane.md), [Toolbar](./toolbar.md), [ToolbarText](./toolbar-text.md), [ToolbarControlGroup](./toolbar-control-group.md), [LucideIcon](./lucide-icon.md), [WorkbenchDialog](./workbench-dialog.md).
+- Docs: [`docs/list-detail-dialog.md`](../../docs/list-detail-dialog.md), [`docs/recipes.md#list-detail-dialog`](../../docs/recipes.md#list-detail-dialog).
+- UX catalog route: `?component=list-detail-dialog`.

package/ai/components/list-header.md

@@ -0,0 +1,91 @@
+# ListHeader
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:list-header` · Kerf UI · component · Navigation
+
+Configurable section headings with five independent label sizes, full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.
+
+## When to use
+
+Fill the available section width by default, or shrink-wrap without outer geometry when inline, while splitting a dormant title and optional count or combined badge/status indicators from a logical-end action with an 18px visual; disclosure mode renders the title cluster as a button with a default production DisclosureArrow.
+
+- Label a navigation section with an optional semantic count or simultaneous badge and status indicators, plus an action or disclosure state; toggle mode supplies an 18px DisclosureArrow unless actionIcon replaces it.
+
+**Not when:**
+
+- Do not concatenate a section count into label or pass a bare number through badge; use count with its required localized countLabel for a sole section quantity.
+- Do not use as a page or dialog title.
+
+**Alternatives:**
+
+- [Toolbar](./toolbar.md) (nearest)
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/list-header` — exports `ListHeader`.
+- CSS: the browser build of `@kerfjs/ui/list-header` pulls its CSS automatically; import `@kerfjs/ui/list-header.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/list-header`](../public-api-signatures-v1.md#kerfjsuilist-header) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- heading
+- label sizes xs, sm (default), m, l, xl
+- count
+- badge
+- badge and status together
+- action
+- toggle
+- placeholder (loading)
+- inline shrink-wrapped presentation
+- compact density
+- neutral, accent, pop, or danger indicator tone
+- before, after, or paired group divider
+
+## Composition
+
+- Parents: any.
+- Contexts: `navigation-list`.
+- Children: unrestricted.
+- Built from: [Badge](./badge.md), [LucideIcon](./lucide-icon.md), [DisclosureArrow](./disclosure-arrow.md), [Text](./text.md).
+
+## State and wiring
+
+- expanded — controlled
+
+No wiring helper.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: navigation). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- When toggle mode is used, the application reveals matching content and keeps expanded state synchronized.
+- The owning control retains a stable accessible name.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Public class hooks (select for layout placement only, never to change the component's look): `kui-list-header`, `kui-list-header__action`, `kui-list-header__action-layer`, `kui-list-header__title`, `kui-list-header__toggle`.
+
+Never put `kui-list-header`, `kui-list-header__action`, `kui-list-header__action-layer`, `kui-list-header__title`, `kui-list-header__toggle` on an element you write; render `ListHeader` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-neutral-border-quiet`, `--kui-focus-ring`, `--kui-list-header-action-icon-size`, `--kui-list-header-border-width`, `--kui-list-header-color`, `--kui-list-header-min-height`, `--kui-list-header-title-min-height`, `--kui-list-header-title-padding-block`, `--kui-list-header-title-padding-inline`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--kui-layout-item-padding`, `--kui-list-header-hover-background`, `--kui-list-group-divider-color`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Diagnostics
+
+- `KUI-C103` (error) when toggle mode does not reveal matching controlled content: ListHeader expanded state must match real revealed content.
+
+## Related
+
+- Components: [Badge](./badge.md), [LucideIcon](./lucide-icon.md), [DisclosureArrow](./disclosure-arrow.md), [Text](./text.md), [Toolbar](./toolbar.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=list-header`.