@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.97

package/ai/components/file-picker.md

@@ -0,0 +1,88 @@
+# FilePicker
+
+<!-- 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:file-picker` · Kerf UI · component · Controls
+
+A compact browse trigger and a dashed drop zone around native file inputs, with wiring that reports chosen and dropped files.
+
+## When to use
+
+Let people choose or drop files (attachments, evidence, imports) without app CSS: a link-toned browse trigger and a dashed drop target that highlights while dragging, both around visually hidden native file inputs.
+
+- People attach or import files by browsing or by dropping them onto a target.
+
+**Not when:**
+
+- Do not style a native file input or label from app CSS; use these components.
+- Do not rely on the drop zone alone; it also opens the chooser when clicked or activated from the keyboard.
+
+**Alternatives:**
+
+- [Button](./wa-button.md) (prefer-over) — A button cannot open the native chooser without script; the trigger is a label around the input.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/file-picker` — exports `FilePickerTrigger`, `FileDropZone`, `wireFilePickers`, `fileMatchesAccept`.
+- CSS: the browser build of `@kerfjs/ui/file-picker` pulls its CSS automatically; import `@kerfjs/ui/file-picker.css` manually only without the `browser` export condition.
+- Wiring: `wireFilePickers` from `@kerfjs/ui/wire-file-pickers` (required).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/file-picker`](../public-api-signatures-v1.md#kerfjsuifile-picker) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- browse trigger
+- drop zone
+- dragging
+- disabled
+- accept filter
+- multiple or single
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** what happens to the reported files (upload, validation, limits); the list of chosen files; copy and accepted types.
+
+**Wiring:** `wireFilePickers` is required.
+
+- Reports chosen and dropped files and accepts drops on the zone; without it drops open the file in the browser.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-dragging` on `kui-file-picker (drop zone)` (`wireFilePickers`): "true" while files are dragged over the zone.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The drop zone carries the 8px content-item inline margin; the trigger is a compact 32px inline control.
+
+## Accessibility
+
+- Each control is a label around a real file input that receives keyboard focus; the visible control shows the focus ring. Give the input an accessibleLabel when the visible copy is short.
+
+## 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-file-picker`, `kui-file-picker__title`, `kui-file-picker__detail`, `kui-file-picker__input`, `kui-file-picker__icon`.
+
+Never put `kui-file-picker`, `kui-file-picker__title`, `kui-file-picker__detail`, `kui-file-picker__input`, `kui-file-picker__icon` on an element you write; render `FilePickerTrigger` or `FileDropZone` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-text-link`, `--kui-color-brand-fill-quiet`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-text`, `--kui-focus-ring`, `--kui-font-xs`, `--kui-font-2xs`, `--kui-font-weight-semibold`, `--kui-layout-inline-margin`, `--kui-layout-rounded-radius`, `--kui-radius-pill`, `--kui-space-2xs`, `--kui-space-s`, `--kui-space-xs`. 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: [Button](./wa-button.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=file-picker`.

package/ai/components/foundation.md

@@ -55,7 +55,7 @@ Margin: none · border: none · padding: none (layout role: foundation). `self`
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.
 
-Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-xl`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-l`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-xl`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-sunken-texture`, `--kui-sunken-surface`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-l`. 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`).
 

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

@@ -27,6 +27,7 @@ Arrange related siblings in equal-width columns with either a fixed count or aut
 - [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
 
@@ -95,6 +96,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [Row](./row.md), [List](./list.md), [ResizableRegion](./resize.md).
+- 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/icon-button.md

@@ -0,0 +1,82 @@
+# IconButton
+
+<!-- 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:icon-button` · Kerf UI · component · Controls
+
+Square, icon-only Web Awesome button with a LucideIcon and a required accessible name.
+
+## When to use
+
+Render an icon-only action as a square one form-control height on each side, so it matches an adjacent wa-input or Select, without ::part overrides.
+
+- An icon-only action stands alone or beside a form field, such as a Browse button next to a path input.
+
+**Not when:**
+
+- Do not use inside a ToolbarControlGroup; the group owns its controls' geometry, so compose a native button with a LucideIcon there.
+- Do not use when the action needs a visible text label; use wa-button with text.
+- Do not override wa-button::part(base) width, min-height, or padding to square an icon button; use IconButton.
+
+**Alternatives:**
+
+- [Button](./wa-button.md) (prefer-over) — Web Awesome squares a button only for a lone wa-icon; with a LucideIcon use IconButton.
+- [ListInsetControl](./list-inset-control.md) (composes-with) — Beside a field in a ListInsetControl the square keeps its size and aligns with the field below its label.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/icon-button` — exports `IconButton`.
+- CSS: the browser build of `@kerfjs/ui/icon-button` pulls its CSS automatically; import `@kerfjs/ui/icon-button.css` manually only without the `browser` export condition.
+- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
+- Registration: import `@awesome.me/webawesome/dist/components/button/button.js` once (a side effect).
+- Declared side effects: browser-condition-css, custom-element-registration.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/icon-button`](../public-api-signatures-v1.md#kerfjsuiicon-button) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- default appearance
+- plain
+- outlined
+- danger variant
+- disabled
+- xs, s, m, l, or xl size
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [Button](./wa-button.md), [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** the delegated action; the accessible name; appearance, variant, and size choice.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- label is required and names the button through its LucideIcon (role img), since the button shows no text.
+
+## 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-icon-button`.
+
+Never put `kui-icon-button` on an element you write; render `IconButton` instead (`KUI-L103`).
+
+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: [Button](./wa-button.md), [LucideIcon](./lucide-icon.md), [ListInsetControl](./list-inset-control.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=icon-button`.

package/ai/components/icon-toggle-button.md

@@ -0,0 +1,80 @@
+# IconToggleButton
+
+<!-- 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:icon-toggle-button` · Kerf UI · component · Controls
+
+A standalone icon-only toggle with a single contained toolbar group's geometry and pressed chrome.
+
+## When to use
+
+Render an icon-only aria-pressed toggle in content or a pane footer, where a Toolbar does not belong, with the 44px contained geometry and raised pressed face of a single ToolbarControlGroup.
+
+- An icon-only on/off control (show a panel, a conversation) sits in content or a pane footer outside any Toolbar.
+
+**Not when:**
+
+- Do not use inside a Toolbar; compose a ToolbarControlGroup there.
+- Do not use for a momentary action; use IconButton.
+- Do not use for one-of-several choices; use SegmentedControl.
+
+**Alternatives:**
+
+- [ToolbarControlGroup](./toolbar-control-group.md) (nearest) — Inside a Toolbar, a single ToolbarControlGroup with a pressed button is the same control.
+- [IconButton](./icon-button.md) (nearest) — Use IconButton for a momentary icon-only action.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/icon-toggle-button` — exports `IconToggleButton`.
+- CSS: the browser build of `@kerfjs/ui/icon-toggle-button` pulls its CSS automatically; import `@kerfjs/ui/icon-toggle-button.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/icon-toggle-button`](../public-api-signatures-v1.md#kerfjsuiicon-toggle-button) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- pressed
+- unpressed
+- pill or rounded shape
+- disabled
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** the pressed state and its delegated action; the accessible name.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- Native button with aria-pressed and a required aria-label; with help tags registered it shows that label on hover and keyboard focus.
+
+## 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-icon-toggle-button`, `kui-icon-toggle-button__face`.
+
+Never put `kui-icon-toggle-button`, `kui-icon-toggle-button__face` on an element you write; render `IconToggleButton` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-neutral-border-normal`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-on-quiet`, `--kui-color-surface`, `--kui-color-brand-on-quiet`, `--kui-shadow-s`, `--kui-focus-ring`, `--kui-layout-pill-radius`, `--kui-layout-rounded-radius`, `--kui-layout-highlight-inset`. 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), [ToolbarControlGroup](./toolbar-control-group.md), [IconButton](./icon-button.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=icon-toggle-button`.

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

@@ -4,13 +4,14 @@
 
 `@kerfjs/ui:list-action-row` · Kerf UI · component · Navigation
 
-Configurable navigation rows with structured labels, status/busy metadata, density, group dividers, and sibling primary/trailing native-button actions.
+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.
 
 **Not when:**
 
@@ -26,11 +27,13 @@ Keep a selectable primary row action and an independently named trailing action
 
 - 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) in `public-api-signatures-v1.md`. Do not infer props from examples.
+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):**
 
@@ -44,7 +47,10 @@ Exact prop names and types: [`@kerfjs/ui/list-action-row`](../public-api-signatu
 - 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
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 
@@ -55,13 +61,18 @@ Exact prop names and types: [`@kerfjs/ui/list-action-row`](../public-api-signatu
 - Parents: any.
 - Contexts: `application-ui`.
 - Children: unrestricted.
-- Built from: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md).
+- 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.
+**The app owns:** routing; selection; action handling; domain data attributes; popover or context-menu policy; row order.
 
-No wiring helper.
+**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
 
@@ -70,7 +81,9 @@ Margin: self · border: self · padding: self (layout role: navigation). `self`
 ## 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
 
@@ -80,12 +93,12 @@ Public class hooks (select for layout placement only, never to change the compon
 
 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-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-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-font-xs`. Set a token only where its public contract allows; prefer a prop.
+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-font-xs`. 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), [ListItem](./list-item.md), [AppTab](./tabs.md).
+- Components: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [PopupMenu](./popup-menu.md), [ListItem](./list-item.md), [AppTab](./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-item.md

@@ -20,16 +20,19 @@ Selectable, disabled, trailing, and multiline action or link rows.
 **Alternatives:**
 
 - [ListActionRow](./list-action-row.md) (nearest) — The trailing region must be independently interactive.
+- [SummaryRow](./summary-row.md) (nearest) — Use SummaryRow for dense selectable item summaries with metadata.
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/list-item` — exports `ListItem`, `ListItemLink`.
+- JavaScript: `@kerfjs/ui/list-item` — exports `ListItem`, `ListItemLink`, `wireListReorder`, `reorderListItems`.
 - CSS: the browser build of `@kerfjs/ui/list-item` pulls its CSS automatically; import `@kerfjs/ui/list-item.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-item`](../public-api-signatures-v1.md#kerfjsuilist-item) in `public-api-signatures-v1.md`. Do not infer props from examples.
+Exact prop names and types: [`@kerfjs/ui/list-item`](../public-api-signatures-v1.md#kerfjsuilist-item), [`@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):**
 
@@ -44,9 +47,11 @@ Exact prop names and types: [`@kerfjs/ui/list-item`](../public-api-signatures-v1
 - spacious density
 - centered icon beside a multiline label
 - drag-target state
+- draggable row with dragging and drop-before / drop-after insertion states
 - description and status
 - busy while retaining content
 - 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
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 
@@ -61,9 +66,14 @@ Exact prop names and types: [`@kerfjs/ui/list-item`](../public-api-signatures-v1
 
 ## State and wiring
 
-**The app owns:** routing; link destinations; selection; permissions; action handling; domain data attributes.
+**The app owns:** routing; link destinations; selection; permissions; action handling; domain data attributes; row order.
 
-No wiring helper.
+**Wiring:** `wireListReorder`, `reorderListItems` is optional.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-dragging` on `ListItem / ListItemLink 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 `ListItem / ListItemLink 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
 
@@ -73,7 +83,7 @@ Margin: self · border: self · padding: self (layout role: navigation). `self`
 
 ## Accessibility
 
-- ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls.
+- ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls. A draggable row reorders by pointer drag or, with wireListReorder, Alt+Shift+ArrowUp/ArrowDown; a placeholder is never draggable.
 
 ## Styling boundary
 
@@ -83,12 +93,12 @@ Public class hooks (select for layout placement only, never to change the compon
 
 Never put `kui-list-item`, `kui-list-item__icon`, `kui-list-item__label`, `kui-list-item__primary-label`, `kui-list-item__description`, `kui-list-item__status`, `kui-list-item__trailing` on an element you write; render `ListItem` instead (`KUI-L103`).
 
-Public tokens it reads: `--kui-color-brand-border-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-focus-ring`, `--kui-list-item-color`, `--kui-list-item-background`, `--kui-list-item-align-items`, `--kui-list-item-border-width`, `--kui-list-item-border`, `--kui-list-item-columns`, `--kui-list-item-drag-target-background`, `--kui-list-item-drag-target-outline`, `--kui-list-item-drag-target-outline-offset`, `--kui-list-item-gap`, `--kui-list-item-hover-background`, `--kui-list-item-hover-border`, `--kui-list-item-icon-color`, `--kui-list-item-icon-size`, `--kui-list-item-label-max-width`, `--kui-list-item-label-weight`, `--kui-list-item-min-height`, `--kui-list-item-padding-block`, `--kui-list-item-padding-inline`, `--kui-list-item-radius`, `--kui-list-item-selected-background`, `--kui-list-item-selected-border`, `--kui-list-item-selected-color`, `--kui-list-item-trailing-color`, `--kui-list-group-divider-color`, `--kui-font-xs`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--kui-layout-item-padding`, `--kui-layout-rounded-radius`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-color-brand-border-loud`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-radius-pill`, `--kui-focus-ring`, `--kui-list-item-color`, `--kui-list-item-background`, `--kui-list-item-align-items`, `--kui-list-item-border-width`, `--kui-list-item-border`, `--kui-list-item-columns`, `--kui-list-item-drag-target-background`, `--kui-list-item-drag-target-outline`, `--kui-list-item-drag-target-outline-offset`, `--kui-list-item-dragging-opacity`, `--kui-list-item-drop-indicator`, `--kui-list-item-drop-indicator-width`, `--kui-list-item-gap`, `--kui-list-item-hover-background`, `--kui-list-item-hover-border`, `--kui-list-item-icon-color`, `--kui-list-item-icon-size`, `--kui-list-item-label-max-width`, `--kui-list-item-label-weight`, `--kui-list-item-min-height`, `--kui-list-item-padding-block`, `--kui-list-item-padding-inline`, `--kui-list-item-radius`, `--kui-list-item-selected-background`, `--kui-list-item-selected-border`, `--kui-list-item-selected-color`, `--kui-list-item-trailing-color`, `--kui-list-group-divider-color`, `--kui-font-xs`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--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: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [ListActionRow](./list-action-row.md).
+- Components: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [ListActionRow](./list-action-row.md), [SummaryRow](./summary-row.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-item`.

package/ai/components/list.md

@@ -44,12 +44,14 @@ Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#k
 - typed CssLength gap
 - boolean, finite-keyword, or typed CssFlex flex
 - scrollable
+- base or raised solid surface
+- document reading inset
 - left/center/right/full horizontal alignment
 - top/middle/bottom/full vertical alignment
 - top/right/bottom/left divider combinations
 - 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
+- rootAttributes: safe data-\*, aria-\*, and structural role on the root
 - scroll dividers when named as wireScrollDividers targets chrome
 - multi-select grid for rich ContentItem rows
 
@@ -86,6 +88,7 @@ Margin: none · border: conditional · padding: conditional (layout role: naviga
 
 - List adds layout only and no list role by default; selectionMode="multiple" makes it an aria-multiselectable grid with a required ariaLabel for selectable ContentItem rows.
 - Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll.
+- A focused scrollable List (a keyboard-focusable scroller) draws the theme focus ring inset and rounded inside its own box, so a rounded or clipping parent never cuts it off; do not restyle its focus.
 
 ## Styling boundary
 
@@ -95,7 +98,7 @@ Public class hooks (select for layout placement only, never to change the compon
 
 Never put `kui-list` on an element you write; render `List` instead (`KUI-L103`).
 
-Public tokens it reads: `--kui-color-neutral-border-normal`, `--kui-layout-item-gap`, `--kui-list-divider-color`, `--kui-list-gap`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-color-neutral-border-normal`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-layout-item-gap`, `--kui-list-divider-color`, `--kui-list-gap`, `--kui-space-l`, `--kui-space-m`, `--kui-space-xl`. 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`).
 

package/ai/components/nav-stack.md

@@ -22,6 +22,7 @@ Present a single linear or drill-down flow while preserving each prior view's st
 
 - [SplitView](./split-view.md) (roomy-alternative) — Promote a list-to-detail stack to SplitView once both regions fit together.
 - [TabNavigator](./tab-navigator.md) (composes-with) — Use one NavStack as each TabNavigator tab's persistent content.
+- [ContentSwap](./content-swap.md) (nearest) — Use ContentSwap to swap content in place inside one region without navigation chrome.
 
 ## Imports
 
@@ -100,6 +101,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [Toolbar](./toolbar.md), [ToolbarControlGroup](./toolbar-control-group.md), [ToolbarText](./toolbar-text.md), [SplitView](./split-view.md), [TabNavigator](./tab-navigator.md).
+- Components: [Toolbar](./toolbar.md), [ToolbarControlGroup](./toolbar-control-group.md), [ToolbarText](./toolbar-text.md), [SplitView](./split-view.md), [TabNavigator](./tab-navigator.md), [ContentSwap](./content-swap.md).
 - Docs: [`docs/nav-stack.md`](../../docs/nav-stack.md), [`docs/app-layouts.md#decision-matrix`](../../docs/app-layouts.md#decision-matrix).
 - UX catalog route: `?component=nav-stack`.

package/ai/components/popup-menu.md

@@ -24,7 +24,7 @@ A typed action menu with nested choices, selected state, and optional pointer-an
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/popup-menu` — exports `PopupMenu`, `openPopupMenuAt`, `closePopupMenu`.
+- JavaScript: `@kerfjs/ui/popup-menu` — exports `PopupMenu`, `openPopupMenu`, `openPopupMenuAt`, `closePopupMenu`.
 - CSS: the browser build of `@kerfjs/ui/popup-menu` pulls its CSS automatically; import `@kerfjs/ui/popup-menu.css` manually only without the `browser` export condition.
 - Theme CSS: import `@kerfjs/ui/webawesome.css` once.
 - Registration: import `@kerfjs/ui/popup-menu/register` once (a side effect).
@@ -45,7 +45,7 @@ Exact prop names and types: [`@kerfjs/ui/popup-menu`](../public-api-signatures-v
 - nested actions
 - checked choices and trailing details
 - danger tone and disabled reasons
-- context trigger
+- context trigger with a rendered anchor point and a zero-footprint anchor host
 - placement
 
 ## Composition

package/ai/components/row.md

@@ -47,7 +47,7 @@ Exact prop names and types: [`@kerfjs/ui/row`](../public-api-signatures-v1.md#ke
 - nowrap or wrapping
 - 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
+- rootAttributes: safe data-\*, aria-\*, and structural role metadata on the root
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 

package/ai/components/select.md

@@ -23,6 +23,7 @@ Choose one or more controlled values, keep unavailable choices visible, and opti
 - [SegmentedControl](./segmented-control.md) (nearest)
 - [Select](./wa-select.md) (prefer-over)
 - [Dropdown](./wa-dropdown.md) (prefer-over)
+- [Combobox](./combobox.md) (nearest) — Use Combobox when people may type to filter or create a new value.
 
 ## Imports
 
@@ -110,6 +111,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [LucideIcon](./lucide-icon.md), [Badge](./badge.md), [Select](./wa-select.md), [Option](./wa-option.md), [SegmentedControl](./segmented-control.md), [Dropdown](./wa-dropdown.md).
+- Components: [LucideIcon](./lucide-icon.md), [Badge](./badge.md), [Select](./wa-select.md), [Option](./wa-option.md), [SegmentedControl](./segmented-control.md), [Dropdown](./wa-dropdown.md), [Combobox](./combobox.md).
 - Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#web-awesome-overlap-policy`](../../docs/component-selection.md#web-awesome-overlap-policy).
 - UX catalog route: `?component=select`.