@kerfjs/ui 5.0.0-beta.94 → 5.0.0-beta.96

package/docs/component-selection.md

@@ -210,7 +210,7 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Interface need                                                                                                          | Use when                                                                                                                                                                                                                                                                                                                                                 | Do not use when; nearest alternative                                                                                                                                                                                                                                                                                                       | Required wiring                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Application owns                                                                                                                                         | Import                                                                                    | Recipe                                                                              |
 | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 | Icon — `LucideIcon`                                                                                                     | A decorative or explicitly labeled Lucide-compatible icon belongs in app UI.                                                                                                                                                                                                                                                                             | Do not use an icon as the only name of an unfamiliar action; add visible or accessible text. Prefer it over Web Awesome `wa-icon`.                                                                                                                                                                                                         | None.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Icon choice and meaningful label.                                                                                                                        | `@kerfjs/ui/lucide-icon`                                                                  | [Accessibility](./accessibility.md#shared-rules)                                    |
-| Compact metadata — `Badge`                                                                                              | A short status, count, category, or metadata label needs self-owned visual treatment configured by semantic props.                                                                                                                                                                                                                                       | Do not use it as a button, link, or removable chip. Do not restyle consuming-component descendants to create a badge.                                                                                                                                                                                                                      | Choose `tone`, `appearance`, `shape`, and `size`; supply `label` for abbreviated content or `ariaHidden` when a surrounding component already owns the same accessible text. For new content without a count use the text-free `size="dot"`, which requires `label` or `ariaHidden`.                                                                                                                                                                                                                                                                                                                                                                                                                                   | Metadata text, semantic tone mapping, and abbreviated-content labeling.                                                                                  | `@kerfjs/ui/badge`                                                                        | [Component ownership](./component-contract.md#ownership-boundaries)                 |
+| Compact metadata — `Badge`                                                                                              | A short status, count, category, or metadata label needs self-owned visual treatment configured by semantic props.                                                                                                                                                                                                                                       | Do not use it as a button, link, or removable chip. Do not restyle consuming-component descendants to create a badge.                                                                                                                                                                                                                      | Choose `tone`, `appearance`, `shape`, and `size`; supply `label` for abbreviated content or `ariaHidden` when a surrounding component already owns the same accessible text. For new content without a count use the text-free `size="dot"`, which requires `label` or `ariaHidden`. Set `maxWidth` to truncate long app-supplied text with an ellipsis and a hover `title`.                                                                                                                                                                                                                                                                                                                                           | Metadata text, semantic tone mapping, and abbreviated-content labeling.                                                                                  | `@kerfjs/ui/badge`                                                                        | [Component ownership](./component-contract.md#ownership-boundaries)                 |
 | Disclosure indicator — `DisclosureArrow`                                                                                | A control needs one animated 18px root-scaled visual for open and closed state, including configurable directions or a replacement icon.                                                                                                                                                                                                                 | Do not use it as the interactive control or accessible name; place it inside the button or control that exposes expanded state.                                                                                                                                                                                                            | Pass the controlled `open` state, render it inside the owning control, author replacement icon content facing right before transforms, and override `--kui-disclosure-arrow-size` only when another visual size is required. Direction changes use the shortest rotation path, with counterclockwise chosen for a 180-degree closed-to-open tie.                                                                                                                                                                                                                                                                                                                                                                       | Open state, interaction, accessible name, size override, replacement glyph, direction choices, and shortest-path rotation.                               | `@kerfjs/ui/disclosure-arrow`                                                             | [Component ownership](./component-contract.md#ownership-boundaries)                 |
 | Application toolbar or heading — `Toolbar`                                                                              | Leading identity, optional centered content, and trailing controls form one horizontal app bar or a page/panel/dialog heading.                                                                                                                                                                                                                           | Do not add bespoke heading geometry or a private wrapper; use the same zone contract everywhere.                                                                                                                                                                                                                                           | Put identity/title text directly in a zone as `ToolbarText`; group controls and icon tiles in `ToolbarControlGroup`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Actions, command availability, responsive relocation, state, and supporting copy below a heading.                                                        | `@kerfjs/ui/toolbar`                                                                      | [Toolbar composition](../README.md#component-subpaths)                              |
 | Toolbar control cluster — `ToolbarControlGroup`, `ToolbarActionLink`                                                    | Related toolbar buttons, semantic links, compact/tight controls, avatar actions, or a dropdown trigger/menu surface need one configured chrome contract.                                                                                                                                                                                                 | Do not use it merely to align unrelated controls. Do not restyle anchors or dropdown parts in application CSS; use `ToolbarActionLink`, `overflow`, and `menuInset`. Web Awesome `wa-button-group` is only for an exceptional grouped-action contract.                                                                                     | Delegate child actions; use `ToolbarActionLink` for native navigation, `overflow="scroll"` for bounded action rows, and `menuInset` for dropdown surface padding. Use `avatarImage` instead of inserting an `img`; use `SegmentedControl` for an exclusive choice.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Actions, destinations, pressed/expanded state, content, and policy.                                                                                      | `@kerfjs/ui/toolbar-control-group`                                                        | [Component ownership](./component-contract.md#ownership-boundaries)                 |
@@ -219,6 +219,8 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Semantic block or inline text — `Text`                                                                                  | Ordinary application copy needs native `h1`–`h6` or `p` semantics plus standard geometry, or inline secondary copy needs a native `span` without box geometry.                                                                                                                                                                                           | Do not choose heading levels for appearance alone or recreate muted, error, small, or code utility classes. Use `ToolbarText` for toolbar identity/title content and `ListInsetText` when list-aligned prose needs full margin/border/padding geometry.                                                                                    | Omit `variant` for the default `p`, choose `h1`–`h6` from the document outline, or choose `span` inside a row, label, or table cell. Independently compose `tone="quiet                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | danger"`, `size="compact"`, and `font="monospace"`; ordinary native global, `data-_`, and `aria-_` attributes pass through.                              | Copy, localization, semantic variant, presentation roles, and document heading hierarchy. | `@kerfjs/ui/text`                                                                   | [Text](./layout.md#text) |
 | Vertical stack — `List`                                                                                                 | Rows, sections, or arbitrary components need a consistent vertical stretch layout, optional standard/custom gap, flex growth, one vertical scroll owner, or edge dividers.                                                                                                                                                                               | It is layout-only and does not provide `ul`/`ol` semantics. Do not nest scroll owners or use it when a horizontal layout is required.                                                                                                                                                                                                      | Choose `gap`, `flex`, `scrollable`, and canonical `dividerSides` (`t`, `r`, `b`, `l` combinations in that order); bound the block size when scrolling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Child semantics/content, containing height, and which optional layout behaviors apply.                                                                   | `@kerfjs/ui/list`                                                                         | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Equal-width columns — `Grid`                                                                                            | Equal-width sibling columns need a fixed count or should collapse as their container narrows, while preserving equal tracks despite intrinsic child widths.                                                                                                                                                                                              | Do not use it for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                                  | Choose fixed `columns` or typed `minColumnWidth`, plus typed `gap`, optional `flex`, and physical-side `textInsets` / `controlInsets` when the track group needs a standard text or control inset; text wins on overlap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Child semantics/content, outer width, fixed count or minimum width, and typed gap/flex/inset choices.                                                    | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
+| Board of columns — `ColumnTrack`                                                                                        | A board shows parallel columns (kanban lanes) that must keep a readable width and scroll sideways, or page one at a time on a phone.                                                                                                                                                                                                                     | Do not use it for a wrapping responsive grid; use `Grid`. Do not use it for two resizable panes; use `SplitView`. Do not re-track a `Grid` from app CSS.                                                                                                                                                                                   | Pass columns as children (each owns its inset and vertical scroll); set `minColumnWidth` (default 250px) or `layout="paged"` with an optional `peek` for phones. Name it with `rootAttributes`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Columns, their content, the layout choice per device, and drag and drop.                                                                                 | `@kerfjs/ui/column-track`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Two contents swapped in place — `ContentSwap`                                                                           | A region swaps between two contents in place, such as a dialog's two steps or a footer's changing actions, and the change should read as motion.                                                                                                                                                                                                         | Do not use it for full views with toolbars; use `NavStack`. Do not hand-roll stacked cells, inert handling, or push keyframes.                                                                                                                                                                                                             | Set `active` to `a` or `b`, `transition` (`push`, `crossfade`, `none`) and the push `direction`; pass `label` to name it and `slot`/`fill` for a dialog label or footer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | The active side, the direction, both contents, and the region name.                                                                                      | `@kerfjs/ui/content-swap`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                           |
 | Navigation row — `ListItem`                                                                                             | A pane or navigation area needs a selectable, disabled, dormant-trailing, or multiline action row.                                                                                                                                                                                                                                                       | Do not put a control in `trailing`; use `ListActionRow` when the trailing region must be independently interactive. Use an `<a>` for navigation that must retain link behavior, a native `<button>` for an ordinary action, or implement the complete ARIA menu widget.                                                                    | Delegate its `data-action`; compose inside a `.kui-content` section. Put domain event/drop metadata in `rootAttributes` rather than adding wrapper markup. The rounded root clips overflowing descendants; set `multiline` when the primary label should wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Routing, selection, permissions, copy, action handling, and domain `data-*` values.                                                                      | `@kerfjs/ui/list-item`                                                                    | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Navigation row with trailing action — `ListActionRow`                                                                   | A full-width row needs a selectable primary action and an independently focusable trailing action.                                                                                                                                                                                                                                                       | Use `ListItem` when trailing content is dormant metadata. Do not put controls inside the row's `label`, `icon`, or `trailingActionIcon` SafeHtml slots. Do not use `AppTab` outside tablist semantics or `ToolbarControlGroup` outside a toolbar.                                                                                          | Delegate both action strings; update controlled selection and any popover/context-menu state in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Routing, selection, both action policies, domain metadata, and popover/context-menu behavior.                                                            | `@kerfjs/ui/list-action-row`                                                              | [Accessibility](./accessibility.md#listactionrow)                                   |
 | Navigation section heading — `ListHeader`                                                                               | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state.                                                                                                                                                                                                                                  | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Keep its 44px hit target; do not resize its 36px square. Do not use it as a page, panel, or dialog title; use a heading `Toolbar`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header`                                                                  | [Pane geometry](../README.md#pane-and-content-geometry)                             |
@@ -232,21 +234,31 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Compact top-level destinations — `TabNavigator`                                                                         | A handset or portrait-tablet app has two to five co-equal destinations whose scenes and nested navigation must remain mounted across switches.                                                                                                                                                                                                           | Do not use it for document tabs, reorderable work items, or a desktop navigation rail.                                                                                                                                                                                                                                                     | Keep the active id controlled, import its CSS explicitly, and call `wireTabNavigator`; commonly place one `NavStack` in each tab scene.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Destination definitions, active id, routing, persistence, and roomy-device replacement.                                                                  | `@kerfjs/ui/tab-navigator`                                                                | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
 | Desktop multi-panel workspace — `Workbench`                                                                             | A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions.                                                                                                                                                                                                                                  | Do not shrink the full shell onto compact devices or use it for one standalone panel.                                                                                                                                                                                                                                                      | Render only the required rails/drawer, keep collapse state controlled, and replace peripheral regions with stacks or overlays below desktop sizes. Opt a panel into drag/keyboard resizing with `resizable` and call `wireWorkbench` with its size signal.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Panel presence/content, collapsed states, sizes, persistence, responsive replacement, and controls.                                                      | `@kerfjs/ui/workbench`                                                                    | [Workbench](./workbench.md)                                                         |
 | Standalone rail or drawer — `CollapsiblePanel`                                                                          | One left/right rail or bottom drawer needs controlled collapse without adopting the complete `Workbench` shell.                                                                                                                                                                                                                                          | Do not use it for several coordinated workspace panels or retain an empty icon-only rail while collapsed.                                                                                                                                                                                                                                  | Pair it with `CollapsiblePanelToggle`; call `wireSidebar` for focus transfer, Escape/backdrop dismissal, compact overlay trapping, and persistence integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Panel content/size, collapsed state, toggle placement, persistence, and compact policy.                                                                  | `@kerfjs/ui/collapsible-panel`                                                            | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
-| Lowered content surface — `SunkenPanel`                                                                                 | A main work area or nested content group needs one visually lowered surface with a compact inset and vertical stack.                                                                                                                                                                                                                                     | Do not use it merely to add padding, as a replacement for `Pane` anatomy, or around children that already own the same outer surface.                                                                                                                                                                                                      | Compose the application-owned content as children, choose the default `rounded` shape or `square` for a flush edge-to-edge area, and pass `ariaLabel` only when the surface is a distinct named region.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Region semantics, accessible name, shape, scroll ownership, child ordering, and content.                                                                 | `@kerfjs/ui/sunken-panel`                                                                 | [SunkenPanel](./sunken-panel.md)                                                    |
+| Lowered content surface — `SunkenPanel`                                                                                 | A main work area or nested content group needs one visually lowered surface with a compact inset and vertical stack.                                                                                                                                                                                                                                     | Do not use it merely to add padding, as a replacement for `Pane` anatomy, or around children that already own the same outer surface.                                                                                                                                                                                                      | Compose the application-owned content as children, choose the default `rounded` shape or `square` for a flush edge-to-edge area, and pass `ariaLabel` only when the surface is a distinct named region. Every sunken surface carries a fine grain texture, generated once per page by the first one that renders; call `ensureSunkenTexture` only when the page paints Web Awesome `appearance="sunken"` without any Kerf sunken component, and set `--kui-sunken-texture: none` at `:root` for a flat surface.                                                                                                                                                                                                        | Region semantics, accessible name, shape, scroll ownership, child ordering, and content.                                                                 | `@kerfjs/ui/sunken-panel`                                                                 | [SunkenPanel](./sunken-panel.md)                                                    |
 | Menu composition                                                                                                        | Navigation sections need full-size rows and the same content-item geometry as every other pane.                                                                                                                                                                                                                                                          | Do not add sidebar-specific wrapper padding, shrink targets to icon size, nest an interactive trailing control in `ListItem`, or use a chevron on a row that does not disclose content. Use ordinary links for a different navigation contract.                                                                                            | Compose `ListHeader`, `ListItem`, and `ListActionRow` in `.kui-content`; use `ListHeader` toggle mode with real controlled content, and use `ContentItem` for other surfaces plus a pane footer for toolbar actions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Information architecture, disclosure content and state, responsive drawer/shell behavior, and token overrides.                                           | `@kerfjs/ui/layout.css`                                                                   | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Resizable application pane — `ResizableRegion`, `clampRegionSize`, `resizeRegionFromPointer`                            | A controlled split pane needs the Kerf separator, collapse state, pointer plus keyboard resizing, or a product-specific decorative grip.                                                                                                                                                                                                                 | Do not use it for static equal columns; use `Grid`. Use application CSS grid for static asymmetric or intrinsic tracks. Prefer it over Web Awesome `wa-split-panel` unless that component's distinct API is required. Keep `handleIcon` noninteractive.                                                                                    | Call `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` once and retain its disposer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Size signal, min/max policy, collapse policy, persistence, and optional decorative handle icon.                                                          | `@kerfjs/ui/resizable-region`                                                             | [ResizableRegion contract](./accessibility.md#resizableregion)                      |
 | One application tab — `AppTab`                                                                                          | A controlled app tab needs selection, close, drag, leading/trailing anatomy, compact/segmented/icon-only presentation, label truncation, safe domain metadata, or a product-specific close glyph.                                                                                                                                                        | Do not render it alone or use it for a small settings choice; compose in `TabBar`, or use `SegmentedControl`. Keep `closeIcon` noninteractive.                                                                                                                                                                                             | Compose in `TabBar`; let `wireTabBars` manage interaction. Put only domain `data-*` values in `rootAttributes`; use typed appearance props instead of descendant CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Tab identity, order, selection, close policy, content, domain metadata values, and outer placement.                                                      | `@kerfjs/ui/app-tab`                                                                      | [Tabs contract](./accessibility.md#tabs)                                            |
 | Application tab strip — `TabBar`, `wireTabBars`, `reorderTabs`                                                          | Tabs switch page regions and may overflow, close, reorder, fill a segmented inspector strip, sit beside a trailing action, or keep that adjacent action distinct from a far-edge end action.                                                                                                                                                             | Do not use it for a compact local view toggle; use `SegmentedControl`. Do not use it for a long choice list; use `Select`. Prefer it over Web Awesome `wa-tab-group`, `wa-tab`, and `wa-tab-panel` for Kerf app tabs.                                                                                                                      | Call `wireTabBars` once, retain the disposer, and apply `onReorder` synchronously; `reorderTabs` is the default array helper. Combine `trailingPlacement="adjacent"` with `end` for split actions; TabBar owns the shrinking/scrolling tab geometry and keeps both actions visible. Choose typed presentation/allocation props while the parent owns outer placement.                                                                                                                                                                                                                                                                                                                                                  | Ordered tabs, selection, panels, routing, closing, persistence, action content, and outer placement.                                                     | `@kerfjs/ui/tab-bar` plus `@kerfjs/ui/wire-tab-bars`                                      | [Tabs contract](./accessibility.md#tabs)                                            |
 | Panel, dialog, or page heading — `Toolbar` + `ToolbarText`                                                              | A panel, dialog, or page needs an extra-large title, optional icon, grouped trailing actions, and optional supporting copy.                                                                                                                                                                                                                              | Do not add a private heading wrapper or bespoke layout. The toolbar supplies structure, not modal behavior; use an application overlay or Web Awesome `wa-dialog` for that behavior. In a narrow peripheral rail or drawer, where xlarge would truncate at the panel's minimum size, use the default `ToolbarText` size as pane identity.  | Connect title/supporting-copy ids to the host, group controls, and delegate actions. **For a page or view title set `headingLevel` (usually `1`)** on `ToolbarText`; omit it for a dialog title referenced by `aria-labelledby`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Open state, focus lifecycle, dismissal, controls, ids, copy, and heading level.                                                                          | `@kerfjs/ui/toolbar` + `@kerfjs/ui/toolbar-text`                                          | [Toolbar headings](./accessibility.md#toolbar-headings)                             |
-| Dialog or popup geometry — `DialogSurface`, `PopupSurface`                                                              | Recurring Web Awesome dialogs need standard sizes/presentations/body/footer insets and typed modal viewport bounds, or dropdown menus need list-compatible inset ownership.                                                                                                                                                                              | Do not use these wrappers as generic layout or to replace native dialog/dropdown behavior. Avoid consumer `::part()` overrides and do not stack a dialog body inset around list-owned child geometry.                                                                                                                                      | Wrap one `wa-dialog` or `wa-dropdown`; choose the typed geometry while retaining native labeling, open state, focus, dismissal, and menu semantics. Compose a dialog body as a `List` by default, use `bodyInset="none"` when its children own list geometry, and wrap bare prose in `ListInsetText`.                                                                                                                                                                                                                                                                                                                                                                                                                  | State, focus lifecycle, dismissal, labels, content, and outer placement.                                                                                 | `@kerfjs/ui/surface-scaffold`                                                             | [Surface scaffolds](./surface-scaffold.md)                                          |
-| Key/value facts — `ValueTable`, `ValueTableRow`                                                                         | Read-only labels and values form a semantic definition list, optionally with a leading icon.                                                                                                                                                                                                                                                             | Do not use it for editable form fields or a row/column data grid; use native form or table semantics.                                                                                                                                                                                                                                      | Compose typed `ValueTableRow` entries; pass `icon` when a 24px leading icon adds useful context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Values, formatting, icon meaning, and empty/loading policy.                                                                                              | `@kerfjs/ui/value-table`                                                                  | [Component ownership](./component-contract.md#ownership-boundaries)                 |
+| Dialog or popup geometry — `DialogSurface`, `PopoverDialogSurface`, `PopupSurface`                                      | Recurring Web Awesome dialogs need standard sizes/presentations/body/footer insets, typed modal viewport bounds, a definite height, or a body one child fills; a dialog must stay non-modal and light-dismiss; or dropdown menus need list-compatible inset ownership.                                                                                   | Do not use these wrappers as generic layout or to replace native dialog/dropdown behavior. Avoid consumer `::part()` overrides and do not stack a dialog body inset around list-owned child geometry.                                                                                                                                      | Wrap one `wa-dialog` or `wa-dropdown`; choose the typed geometry while retaining native labeling, open state, focus, dismissal, and menu semantics. Compose a dialog body as a `List` by default, use `bodyInset="none"` when its children own list geometry, and wrap bare prose in `ListInsetText`. Set `height` with `bodyLayout="fill"` when one `SplitView` or `Pane` should fill the body. For a non-modal, light-dismiss dialog render `PopoverDialogSurface` (native `popover="auto"`, opened by a `popoverTarget` control or `showPopover()`), never a hand-built popover with app chrome CSS; `presentation="embedded"` shows it in flow.                                                                    | State, focus lifecycle, dismissal, labels, content, and outer placement.                                                                                 | `@kerfjs/ui/surface-scaffold`                                                             | [Surface scaffolds](./surface-scaffold.md)                                          |
+| Key/value facts — `ValueTable`, `ValueTableRow`                                                                         | Read-only labels and values form a semantic definition list, optionally with a leading icon.                                                                                                                                                                                                                                                             | Do not use it for editable form fields or a row/column data grid; use native form or table semantics.                                                                                                                                                                                                                                      | Compose typed `ValueTableRow` entries; pass `icon` when a 24px leading icon adds useful context. Set `labelWidth` for a minimum label column, `presentation="stacked"` to put each value under its label, or `stackBelow` (`compact` 512px, `narrow` 576px) to stack only while the table is that narrow; never override `--kui-value-table-row-columns` for these.                                                                                                                                                                                                                                                                                                                                                    | Values, formatting, icon meaning, and empty/loading policy.                                                                                              | `@kerfjs/ui/value-table`                                                                  | [Component ownership](./component-contract.md#ownership-boundaries)                 |
+| Framed rows of arbitrary content — `FramedList`, `FramedListRow`                                                        | Settings rows, account or source cards, or a shortcut list group several rows of copy and controls in one rounded frame with dividers between them.                                                                                                                                                                                                      | Do not use it for read-only label/value facts; use `ValueTable`. Do not use it for selectable navigation rows; use `List` with `ListItem`. Do not pad or border rows from application CSS.                                                                                                                                                 | Compose any row content (a `Row` of copy, a keycap, `IconButton`s) in each `FramedListRow`; mark the row being edited `highlighted`. Name the list with `label` when no heading does.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Row content, controls, which row is highlighted, and the list's name.                                                                                    | `@kerfjs/ui/framed-list`                                                                  | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Selectable item summaries — `SummaryRow`                                                                                | A list or board shows many items as dense, selectable summaries: an identifier and title, a timestamp, and a metadata line (tickets, tasks).                                                                                                                                                                                                             | Do not use it for navigation rows; use `ListItem`. Do not use it for free-form selectable tiles; use `ContentItem`. Do not hand-roll row chrome.                                                                                                                                                                                           | Pass `title`, optional `leading`, `trailingMeta`, and `metadata`; choose `presentation` (`row` or `card`), `rail`, `selected`, `dimmed`, `listEdge`, and `titleLines`. Put rows in a labeled `role="listbox"` and own selection and arrow-key focus in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | The listbox, selection, keyboard movement, content, rail tone, and dimming.                                                                              | `@kerfjs/ui/summary-row`                                                                  | [Feedback accessibility](./accessibility.md#shared-rules)                           |
 | Indeterminate activity — `LoadingSpinner`                                                                               | A Kerf surface needs compact, labeled or decorative indeterminate progress.                                                                                                                                                                                                                                                                              | Do not use it for known progress; use Web Awesome `wa-progress-bar` or `wa-progress-ring`. Direct Web Awesome UI may use `wa-spinner`; do not mix spinner systems within one surface.                                                                                                                                                      | Pass a label when the spinner conveys status; use size for a named icon step or positive pixel size.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Loading lifecycle and adjacent status copy.                                                                                                              | `@kerfjs/ui/loading-spinner`                                                              | [Accessibility](./accessibility.md#shared-rules)                                    |
 | Loading placeholder — `Skeleton` + a component's `placeholder` prop                                                     | A value or a whole component is still loading and should hold its space as a subtle, unanimated block, keeping the layout stable — an inspector or detail view rendering its real chrome with per-record values absent.                                                                                                                                  | Do not use it for known progress (use `LoadingSpinner`), do not animate it, and do not hand-rebuild a component's empty state — set `placeholder` on the component instead. Prefer it over `wa-skeleton`, which the pure-Kerf primitives avoid to stay Web-Awesome-free.                                                                   | Set `placeholder` on a value-bearing component (`Select`, `ListHeader`, `ListItem`, `ValueTableRow`, `SegmentedControl`, `StateBanner`, `AppTab`, `ToolbarText`, `ListActionRow`) to render skeletons in its value slots with interactivity disabled; use the standalone `Skeleton` for a custom slot.                                                                                                                                                                                                                                                                                                                                                                                                                 | Loading lifecycle, which slots are unknown, and announcing the loading region.                                                                           | `@kerfjs/ui/skeleton`                                                                     | [Accessibility](./accessibility.md#shared-rules)                                    |
 | Command menu — `PopupMenu`                                                                                              | A short list of commands sits behind one trigger, such as a toolbar sort or More menu, optionally grouped under headings and dividers with item icons.                                                                                                                                                                                                   | Do not use it to choose a persistent value; use `Select`. Do not hand-write `wa-dropdown`/`wa-dropdown-item` markup for an action menu.                                                                                                                                                                                                    | Import `@kerfjs/ui/popup-menu/register` once. Place it in a `single` `ToolbarControlGroup` with `nestedDropdown` and a `menuInset`, or wrap it in `PopupSurface` outside a toolbar. Handle item `action`s by delegation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Commands, enabled state, and reactions to opening or closing.                                                                                            | `@kerfjs/ui/popup-menu`                                                                   | [Toolbar composition](#toolbar-composition)                                         |
+| Icon-only action — `IconButton`                                                                                         | One action is clear from its icon alone and stands by itself or beside a form field, such as Browse next to a path input.                                                                                                                                                                                                                                | Do not use it inside a `ToolbarControlGroup`; the group owns control geometry, so compose a native `button` with a `LucideIcon` there. Do not use it when the action needs visible text; use `wa-button` with text. Do not override `wa-button::part(base)` to square a Lucide icon button.                                                | Pass a Lucide `icon`, its `iconName`, and a required `label` that names the button; delegate its `action`. Register `wa-button` once. Beside a field in a `ListInsetControl` it keeps its square and aligns with the field below its label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | The delegated action, accessible name, and appearance, variant, and size.                                                                                | `@kerfjs/ui/icon-button`                                                                  | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Standalone icon toggle — `IconToggleButton`                                                                             | An icon-only on/off control (show a panel or a conversation) sits in content or a pane footer, outside any Toolbar.                                                                                                                                                                                                                                      | Do not use it inside a `Toolbar`; compose a `ToolbarControlGroup` there. Do not use it for a momentary action; use `IconButton`. Do not use it for one-of-several choices; use `SegmentedControl`.                                                                                                                                         | Pass a Lucide `icon`, `iconName`, a required `label`, and the controlled `pressed` state; flip it from the delegated `action`. It has a single contained toolbar group's 44px geometry and raised pressed face, and shows its label as a help tag when help tags are registered.                                                                                                                                                                                                                                                                                                                                                                                                                                       | The pressed state, its action, and the accessible name.                                                                                                  | `@kerfjs/ui/icon-toggle-button`                                                           | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Primary action with options — `SplitButton`                                                                             | A prominent primary action has a closely related set of options chosen from an attached trigger, such as Drive with a provider menu.                                                                                                                                                                                                                     | Do not use it for a plain action; use `wa-button`. Do not use it for a toolbar command menu; use `PopupMenu`. Do not assemble one from `wa-button-group`, whose hosts do not forward names or `aria-expanded`.                                                                                                                             | Pass the primary `label` and `action`, the options trigger's `optionsLabel`, `optionsAction`, and `optionsExpanded`; pick a loud `tone`, `fill` for full width, `busy` while work runs, and `disabled`/`optionsDisabled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Both actions, the options menu and its open state, the running state and tone switch, and copy.                                                          | `@kerfjs/ui/split-button`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Choosing or dropping files — `FilePickerTrigger`, `FileDropZone`, `wireFilePickers`                                     | People attach or import files by browsing or by dropping them onto a target.                                                                                                                                                                                                                                                                             | Do not style a native file input or its label from app CSS. Do not make the drop zone the only way in; it also opens the chooser.                                                                                                                                                                                                          | Use `FilePickerTrigger` for a compact Add control and `FileDropZone` for a dashed target; set `accept`, `multiple`, `name`, and `pickerId`. Call `wireFilePickers(root, { onFiles })` once: it reports browsed and dropped files (drops filtered by `accept`, the same check `fileMatchesAccept` exposes) and marks the zone while dragging.                                                                                                                                                                                                                                                                                                                                                                           | What happens to the files, the chosen-file list, copy, and accepted types.                                                                               | `@kerfjs/ui/file-picker`, `@kerfjs/ui/wire-file-pickers`                                  | [Feedback accessibility](./accessibility.md#shared-rules)                           |
 | Value selection — `Select`                                                                                              | A controlled form, toolbar, or compact navigation value comes from a moderate or long choice list, possibly grouped, icon-bearing, icon-only when closed, or truncating. Set `multiple` with an array `value` when the person may choose any number of them; add `selectedPresentation="icon-only"` and a fixed `triggerIcon` for a toolbar filter menu. | Do not use it for commands; use `PopupMenu`. Do not use it for a small visible choice set; use `SegmentedControl`. Prefer it over direct `wa-select`, `wa-option`, or value-like `wa-dropdown`/`wa-dropdown-item` composition.                                                                                                             | Import `@kerfjs/ui/select/register` once for registration and current-request animation ownership; listen for standard input/change events. Do not add consumer popup timing or positioning repairs. Use typed presentation props rather than consumer `::part()` overrides; let the parent own placement.                                                                                                                                                                                                                                                                                                                                                                                                             | Controlled value, validation, choices, domain mapping, and outer placement.                                                                              | `@kerfjs/ui/select`                                                                       | [Web Awesome integration](../README.md#web-awesome-theme)                           |
-| Small exclusive choice — `SegmentedControl`                                                                             | A few visible choices switch a compact view or setting, with toolbar, rounded, or pill presentation.                                                                                                                                                                                                                                                     | Do not use it for tabpanel semantics; use `TabBar`. Do not use it for many choices; use `Select`. Prefer it over `wa-button-group` when the controls select one value.                                                                                                                                                                     | Delegate its action, read `data-segment-value`, update `value`, and rerender.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Controlled value, labels, action, and persistence.                                                                                                       | `@kerfjs/ui/segmented-control`                                                            | [SegmentedControl contract](./accessibility.md#segmentedcontrol)                    |
+| Pick or create a value by typing — `Combobox`, `wireComboboxes`                                                         | People type to find an existing value among many or create a new one (tags, labels, recipients).                                                                                                                                                                                                                                                         | Do not use it when only existing values are allowed; use `Select`. Do not use it for search text with removable filter tokens; use `TokenSearchField`. Do not style a native input with a datalist.                                                                                                                                        | Pass `id`, `label`, and `suggestions` (strings or `{ value, label }`), plus `placeholder`, `hint`, and `createLabel` (or `false` for suggestions only). Call `wireComboboxes(root, { onCommit })` once; it filters, moves the active option with the arrows, and reports `{ id, value, created, input }` on Enter, a comma, or a click.                                                                                                                                                                                                                                                                                                                                                                                | Suggestions, committed values, normalization, and clearing the field.                                                                                    | `@kerfjs/ui/combobox`, `@kerfjs/ui/wire-comboboxes`                                       | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Small exclusive choice — `SegmentedControl`                                                                             | A few visible choices switch a compact view or setting, with toolbar, rounded, or pill presentation.                                                                                                                                                                                                                                                     | Do not use it for tabpanel semantics; use `TabBar`. Do not use it for many choices; use `ChoiceChips` when they stay visible and wrap, or `Select` for a long list. Prefer it over `wa-button-group` when the controls select one value.                                                                                                   | Delegate its action, read `data-segment-value`, update `value`, and rerender.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Controlled value, labels, action, and persistence.                                                                                                       | `@kerfjs/ui/segmented-control`                                                            | [SegmentedControl contract](./accessibility.md#segmentedcontrol)                    |
+| Wrapping exclusive choice — `ChoiceChips`                                                                               | Several visible options, too many for one segmented track, must wrap onto more rows — a labeled color palette with swatches, a tag color, a category.                                                                                                                                                                                                    | Do not use it for a few compact choices on one track; use `SegmentedControl`. Do not use it for a long list or tight space; use `Select`. Do not use it for removable tags (`Chip`) or multiple selection. Prefer it over `wa-radio-group` with `appearance="button"` radios, which wrap as a ragged joined group.                         | Pass a form `name`, a `label` or `labelledBy`, and the controlled `value`; delegate the `action` on `change`, read the radio `value`, and rerender. Lead choices with a `swatch` (`CssColor` or `'transparent'`) or an `icon`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Controlled value, choices, swatch colors, change handling, and form submission.                                                                          | `@kerfjs/ui/choice-chips`                                                                 | [ChoiceChips contract](./accessibility.md#choicechips)                              |
 | Structured search editor — `TokenSearchField`, `readTokenSearchField`, `placeTokenSearchCaret`, `wireTokenSearchFields` | Free text and ordered, editable, removable filter tokens share one searchbox; enable `collapsible` when an empty, unfocused field should reduce to one iconic action, standalone or in a toolbar group.                                                                                                                                                  | Do not use it for ordinary text entry; use a native input or Web Awesome `wa-input`. Do not use it when filters belong in separate form controls.                                                                                                                                                                                          | Read DOM-owned text on input, empty `textContent` on clear, and use `placeTokenSearchCaret` after explicit controlled focus changes. Call `wireTokenSearchFields` from `@kerfjs/ui/wire-token-search-fields` once so Enter submits without adding a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. In `collapsible` mode it also manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse); bind the field's `expanded` to the signal on the returned handle (`handle.expanded(id)`) or adopt your own via `collapsible.signals`, and opt out per behavior only when the app must own it. | Parsing, suggestions, tokens, query execution, results, announcements, and — only if overriding the default — the collapsible `expanded` signal.         | `@kerfjs/ui/token-search-field`                                                           | [TokenSearchField contract](./accessibility.md#tokensearchfield)                    |
 | Persistent inline status — `StateBanner`                                                                                | A neutral, info, pop, success, warning, or danger message belongs next to the affected work; pop highlights featured or novel content without implying status.                                                                                                                                                                                           | Do not use pop as a success, warning, or danger substitute. Do not use StateBanner for a no-content screen; use `EmptyState`. Do not use it for transient confirmation; use a toast. Web Awesome `wa-callout` is the ecosystem alternative for Web Awesome-owned content.                                                                  | Delegate an optional action; choose alert urgency only for attention-requiring failure. Use the optional tone-tinted `badge` for a terse count or status beside the title, not as the only expression of meaning.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | State mapping, message lifetime, retry/action behavior, badge content, and copy.                                                                         | `@kerfjs/ui/state-banner`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| App-level progress in a corner — `CornerStatus`, `wireCornerStatus`                                                     | Ongoing app-wide work, such as "Loading…" or "Updating tickets… 3 of 12", needs a non-dismissible status that has no better home beside the affected work.                                                                                                                                                                                               | Do not use it for transient, dismissible confirmation; use a toast. Do not use it for status that belongs beside the affected work; place a `StateBanner` there. Do not position a `StateBanner` with fixed-position application CSS.                                                                                                      | Compose one or more `StateBanner`s with `urgency="status"`; they stack. Call `wireCornerStatus` once so each overlay host opens in the top layer as renders insert it. It never takes focus and has no close button, light dismiss, or Escape.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Status lifetime (render while the work runs, remove when it ends), banner copy and progress, and corner placement.                                       | `@kerfjs/ui/corner-status`, `@kerfjs/ui/wire-corner-status`                               | [Feedback accessibility](./accessibility.md#shared-rules)                           |
+| Ambient edge activity — `EdgeActivityIndicator`                                                                         | App-wide background activity (server work, sync) should be visible along the top edge without a modal, a banner, or a layout shift.                                                                                                                                                                                                                      | Do not use it for progress the user waits on or must read; use `CornerStatus`. Do not use it for known progress; use a progress bar. Do not make it the only record of important state.                                                                                                                                                    | Drive `busy`; pass an optional `message` for a polite status pill and a `tone`. It sits below the top safe area (or flush with `inset="none"`), takes no pointer, and only fades under reduced motion.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | The busy state, message, and tone.                                                                                                                       | `@kerfjs/ui/edge-activity-indicator`                                                      | [Feedback accessibility](./accessibility.md#shared-rules)                           |
 | Empty or busy content area — `EmptyState`                                                                               | A content region has no items, cannot proceed, or is loading and needs explanation plus an optional action.                                                                                                                                                                                                                                              | Do not use it for an inline status update; use `StateBanner`. Do not use it for transient success; use `wa-toast`/`wa-toast-item` or the application's toast system.                                                                                                                                                                       | Delegate its optional action; it composes `LoadingSpinner` when busy.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Empty/busy policy, recovery action, illustration, and copy.                                                                                              | `@kerfjs/ui/empty-state`                                                                  | [Feedback ownership](./component-contract.md#extracted-versus-application-specific) |
 
 ## Ambiguous choices
@@ -273,7 +285,19 @@ For a larger option row, use `ListItem density="spacious"`; `compact` and
 `standard` remain available. `multiline` wraps its label and aligns its icon
 to the first line; `multilineIconAlign="center"` centers the icon against the
 whole label. `divider` owns a before or after separator. Set
-`state="drag-target"` for the component's drop outline and background. Public
+`state="drag-target"` for the component's drop outline and background (a row
+that accepts dropped content). For a list the person reorders, set
+`draggable` on each `ListItem`, `ListItemLink`, or `ListActionRow` (each with
+an `itemId`) and call `wireListReorder` from `@kerfjs/ui/wire-list-reorder`
+once, retaining its disposer: it dims the dragged rows, draws the 2px brand
+insertion line on the hovered row's `before` or `after` edge, moves rows with
+Alt+Shift+ArrowUp/ArrowDown, and reports
+`{ listId, sourceIds, target: { id, position }, source }`. Dragging a selected
+or pressed row moves every selected row of its `List` (set `data-list-id` on
+the `List` to tell several lists apart). Apply the change synchronously with
+`reorderListItems`; order stays application state. Without the wiring, the
+`dragging` and `dropPosition` props render the same states from app-owned
+drag state. Public
 `--kui-list-item-*` tokens control its row, icon, label, and trailing geometry
 and color. `ListHeader` exposes `--kui-list-header-min-height`, title padding,
 title minimum height, and border-width tokens for section density.
@@ -304,13 +328,24 @@ leading and trailing zones equal tracks. `--kui-toolbar-leading-min-width`,
 `--kui-toolbar-trailing-gap`, `--kui-toolbar-trailing-justify`, and the
 `--kui-toolbar-*-padding-inline` zone tokens adjust local geometry without
 selecting toolbar anatomy from application CSS.
+For a shorter header embedded in a panel or card, pass `Toolbar
+density="compact"`: a 40px toolbar with a 34px control band and 3px block
+insets (inline insets and the zone gap stay 8px). Give its groups
+`size="compact"` so they fit the band. Composite toolbars take the same
+`density` through their `ToolbarConfig` (Workbench panel, main, and bottom
+toolbars, CollapsiblePanel, NavStack, and SplitView) and size the groups they
+compose — panel toggles, relocated toggles, the back button — to match. Pass
+`density` to `CollapsiblePanelRelocated` when its destination toolbar is
+compact.
+
 Set `--kui-toolbar-inset: 0px` on an embedded Toolbar that should have no outer
 padding while keeping its `--kui-toolbar-gap` between control zones. The token
 also reduces its minimum height by the removed inset; safe-area compensation
 still adds to the chosen inset on claimed edges.
 
 For compact dialog copy, use `Text flush lineHeight="tight"`; block Text still
-resets native margins. `ValueTable density="compact"` reduces row padding and
+resets native margins. Center short status copy with `Text align="center"`
+(`end` aligns a trailing value) instead of setting `text-align` on `.kui-text`. `ValueTable density="compact"` reduces row padding and
 gap. Its `--kui-value-table-row-columns`, `--kui-value-table-row-padding-block`,
 and `--kui-value-table-row-gap` tokens support a specific metadata layout.
 Use `ToolbarText size="xsmall"` for a dense rail heading. Use
@@ -321,7 +356,7 @@ group; set `--kui-token-search-editor-min-width` only when a wider editor is
 required.
 
 - `Toolbar` serves persistent app chrome and headings; the zone contents and accessible naming distinguish the purpose.
-- `TabBar` changes tabpanels and supports overflow/reorder; `SegmentedControl` chooses among a few compact views; `Select` handles a longer value list.
+- `TabBar` changes tabpanels and supports overflow/reorder; `SegmentedControl` chooses among a few compact views; `ChoiceChips` keeps a larger exclusive set visible as wrapping pills; `Select` handles a longer value list.
 
 Use `AppTab presentation="icon-only"` with its `name` kept as the accessible
 tab name. For segmented tabs that should show names in a wide reader and icons
@@ -368,6 +403,26 @@ action needs a separate trailing row. The default values keep both inline;
 `--kui-state-banner-copy-gap` and `--kui-state-banner-copy-row-gap` adjust the
 stacked copy's spacing at an instance boundary.
 
+For a full-width status band at a layout edge — above a workspace, below an
+app bar — use `presentation="strip"` instead of restyling the card: it is flush
+(no inline margin), square, puts its copy on the shared content-text column,
+and draws only tone-colored `dividerSides` edges (bottom by default; `''` for
+none). Keep the default `card` presentation for a banner beside the affected
+work inside a pane.
+
+For ongoing app-level progress that has no home beside the affected work, host
+the banner in `CornerStatus` rather than positioning it with fixed CSS: a
+manual popover in the top layer, at a safe-area-aware viewport corner, with no
+close button, light dismiss, or Escape. Call `wireCornerStatus` once; it opens
+each host as renders insert it, and the application removes the host when the
+work ends.
+
+A modal dialog opened while the status shows stacks above it, as it does over a
+toast. Raising the status back above the modal would only paint it there: a
+modal makes everything outside its own subtree inert, so the status could not
+be reached or announced either way. When the dialog's task depends on that
+progress, show it inside the dialog.
+
 For a compact `Select`, set `triggerWidth` to `"fit-content"`, `"max-content"`,
 or `"fill"` and cap it with `--kui-select-trigger-max-width` when needed.
 For a round icon-only toolbar trigger, set `selectedPresentation="icon-only"`
@@ -605,11 +660,18 @@ Commands still dispatch their own `data-action` once on pointer and keyboard
 selection.
 
 For a row opened by right-click, render `PopupMenu` with `context`, `label`,
-and a stable root `data-*` marker. Its trigger is an invisible anchor removed
-from the accessibility tree; a separate visible button may stay disabled. In
-the app's `contextmenu` handler, find that root, call `openPopupMenuAt` with
-the menu and `event.clientX` / `event.clientY`, and prevent the browser
-menu. Call `closePopupMenu` for programmatic dismissal. The pointer anchor
+`anchor`, and a stable root `data-*` marker. Its trigger is an invisible anchor
+removed from the accessibility tree; a separate visible button may stay
+disabled. The menu owns its anchor host: it renders out of flow with no layout
+footprint (no line box, no gap slot), so render it anywhere in the surface it
+belongs to — never inside an app wrapper with `position: fixed`, a 1px size,
+or a `z-index` (the open menu is in the browser top layer). In the app's
+`contextmenu` handler, prevent the browser menu, store
+`{ x: event.clientX, y: event.clientY }` in the signal the menu renders as
+`anchor`, and call `openPopupMenu` with the menu. Because the point is part of the
+menu's own template, it survives re-renders and a rebuilt menu, so the app
+never re-applies it. `openPopupMenuAt` still opens a menu rendered without `anchor` at a given
+point. Call `closePopupMenu` for programmatic dismissal. The pointer anchor
 retains Web Awesome's collision placement, focus management, submenu keyboard
 navigation, and outside/Escape dismissal.
 
@@ -638,6 +700,47 @@ available on hover and keyboard focus and automatically leaves it visible on
 non-hover devices. These props own presentation only—the application still
 owns labels, status meaning, action policy, selection, and domain metadata.
 
+When the trailing control is an overflow menu ("…" with Edit, Delete, …),
+pass `trailingMenu: { label, icon, items, placement?, disabled? }` instead of
+the `trailingAction*` props. The row renders a real `PopupMenu` (icon-only, no
+caret, opening `bottom-end` by default) as its sibling trailing control, and
+`trailingActionVisibility="interaction"` reveals it the same way, keeping it
+visible while the menu is open. Register `@kerfjs/ui/popup-menu/register` once.
+Items dispatch their own `data-action`s; find the row from a chosen item with
+`closest('[data-component="list-action-row"]')`. To open the same menu on a
+right-click, delegate `contextmenu` on the row's primary button, prevent the
+browser menu, and call `openPopupMenuAt` with the row's
+`[data-component="popup-menu"]` child and the pointer's `clientX` /
+`clientY`: a button-triggered menu opens `bottom-start` at the pointer for that
+opening and returns to its trigger once it closes.
+
+```tsx
+<ListActionRow
+  action="select-command"
+  itemId={command.id}
+  label={command.name}
+  trailingActionVisibility="interaction"
+  trailingMenu={{
+    label: `Actions for ${command.name}`,
+    icon: moreIcon,
+    items: [
+      { label: 'Edit', action: 'edit-command' },
+      { kind: 'divider' },
+      { label: 'Delete', action: 'delete-command', tone: 'danger' },
+    ],
+  }}
+/>;
+
+delegate(list, 'contextmenu', '[data-action="select-command"]', (event, primary) => {
+  const menu = primary.parentElement?.querySelector<PopupMenuElement>(
+    ':scope > [data-component="popup-menu"]',
+  );
+  if (!menu) return;
+  event.preventDefault();
+  openPopupMenuAt(menu, (event as MouseEvent).clientX, (event as MouseEvent).clientY);
+});
+```
+
 ## Correct composition and duplicated-markup trap
 
 Correct: let the pane stay unpadded while its children own the shared 8/1/8
@@ -713,6 +816,39 @@ requires a string label so the title cannot lose text hidden inside markup.
 </Chip>
 ```
 
+## Wrapping exclusive choices
+
+Use `ChoiceChips` when one value is chosen from a visible set that does not
+fit one segmented track: a nine-color palette in a 560px dialog, say, which
+must wrap onto several rows and still read well at phone width. Each choice is
+a separate pill backed by a native radio, so the group is one Tab stop, arrow
+keys move the selection, and the checked radio is the form value under `name`.
+The pills wrap with the standard 8px control gap; never wrap a
+`SegmentedControl` or button-appearance `wa-radio` set instead — their joined
+borders turn ragged across rows.
+
+Lead a choice with `swatch` for a color (a `CssColor` from `uiColor()`,
+`colorVar()`, or `foregroundColor()`), `swatch: 'transparent'` for the
+no-color option (an outlined dot struck through diagonally), or a decorative
+`icon`. Keep every label visible: the swatch and the selected tint are
+supplementary. Name the group with `label`, or with `labelledBy` pointing at a
+visible `FieldLabel`.
+
+```tsx
+<FieldLabel id="command-color-label">Color</FieldLabel>
+<ChoiceChips
+  name="color"
+  labelledBy="command-color-label"
+  value={command.color}
+  action="select-command-color"
+  choices={[
+    { value: 'transparent', label: 'Transparent', swatch: 'transparent' },
+    { value: 'blue', label: 'Blue', swatch: foregroundColor('#3b82f6') },
+    { value: 'green', label: 'Green', swatch: foregroundColor('#22c55e') },
+  ]}
+/>
+```
+
 ## Web Awesome overlap policy
 
 Web Awesome catalog coverage means supported and themed, not preferred. Import

package/docs/design/templates/choice-chips/color-palette-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 136" width="600" height="136"><defs><clipPath id="cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Transparent</text></g></g><g clip-path="url(#ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(250,250,255,0.32)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(255, 105, 108)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp14)"><g clip-path="url(#ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp20)"><g clip-path="url(#ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp23)"><g clip-path="url(#ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp26)"><g clip-path="url(#ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Gray</text></g></g></svg>

package/docs/design/templates/choice-chips/color-palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 136" width="600" height="136"><defs><clipPath id="cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Transparent</text></g></g><g clip-path="url(#ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(0,0,13,0.318)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(194, 11, 32)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp14)"><g clip-path="url(#ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp20)"><g clip-path="url(#ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp23)"><g clip-path="url(#ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp26)"><g clip-path="url(#ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Gray</text></g></g></svg>

package/docs/design/templates/choice-chips/compact-icons-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80" width="600" height="80"><defs><clipPath id="ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#cp1)"><g color="rgb(138, 203, 255)"><clipPath id="svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(28,28,30)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text></g></g></svg>

package/docs/design/templates/choice-chips/compact-icons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80" width="600" height="80"><defs><clipPath id="ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp1)"><g color="rgb(26, 93, 207)"><clipPath id="svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(255,255,255)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text></g></g></svg>