@kerfjs/ui 5.0.0-beta.77 → 5.0.0-beta.79

package/docs/component-selection.md

@@ -171,10 +171,10 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Inset bare text — `ListInsetText`                                                                                       | A plain string or inline content with no margin, border, or padding of its own must sit in a `.kui-content` list with its text edge aligned to the bordered items around it.                                                                                                                                                                             | Do not use it to wrap a component that already owns content-item geometry (`ListItem`, `StateBanner`, a `.kui-content-item`) — that double-insets it. Do not hand-roll the 8px margin / 1px border / 8px padding.                                                                                                                          | Pass the text or inline `SafeHtml` as children; it supplies the 8px inline margin, 1px transparent border, and 8px padding so the text edge lands at the standard 17px inset. Pass `sides="rl"` to keep that horizontal inset but drop the vertical margin, border, and padding for tight text layout.                                                                                                                                                                                                                                                                                                                                                                                                                 | The text, copy, and localization.                                                                                                                        | `@kerfjs/ui/list-inset-text`                                                              | [Pane geometry](../README.md#component-subpaths)                                    |
 | Self-contained content child — `ContentItem`                                                                            | An ordinary surface-like child of a `Pane` or `.kui-content` stack needs the shared 8px margin / 1px border / 8px padding geometry; pass `frame="framed"` only when it marks a real distinction, `appearance="surface"` or a semantic appearance for coordinated surface colors, and `shape="pill"` for the 22px radius.                                 | Do not wrap a component that already owns content-item geometry (`ListItem`, `ListHeader`, `StateBanner`, `Toolbar`, `ValueTable`) or pad around it — that double-insets. Do not frame an item only to make it look contained. Use `SunkenPanel` for a lowered inset stack and `ListInsetText` for bare text that only needs to align.     | Pass the item content as children; choose `appearance` (`transparent` default, `surface`, or a semantic status), `frame`, and `shape` instead of writing CSS. Put safe `data-*` metadata in `rootAttributes`; `ariaLabel` names a distinct region and `focusTarget` makes it a programmatic focus target.                                                                                                                                                                                                                                                                                                                                                                                                              | The content, surface or status appearance, and whether it marks a distinction worth a visible frame.                                                     | `@kerfjs/ui/content-item`                                                                 | [Content items](./layout.md#content-items)                                          |
 | Application column — `Pane`                                                                                             | A sidebar, main area, inspector, or dialog needs shared vertical header/content/footer organization, one scroll owner, and optional edge separators.                                                                                                                                                                                                     | Do not pad the pane shell, wrap child-owned geometry in competing insets, invent unrelated centered measures, or leave an icon-only rail for a hidden pane.                                                                                                                                                                                | Import `Pane`, use `children` for its homogeneous primary content and the named `SafeHtml` prop slots `header`/`footer` for optional fixed chrome, then opt into only the needed logical-edge separators; add `ContentItem` children as needed. A visible pane owns collapse in its toolbar; move a hidden inline-start pane's restore control to the main toolbar leading edge and an inline-end pane's restore control to its trailing edge.                                                                                                                                                                                                                                                                         | Layout hierarchy, reading width, responsive relocation, pane visibility state, slot semantics, labels, and separator placement.                          | `@kerfjs/ui/pane`                                                                         | [Pane anatomy](./layout.md#anatomy)                                                 |
-| Scroll dividers — `wireScrollDividers`                                                                                  | Pinned chrome (a `Pane` header or footer, a `NavStack` top chrome or bottom toolbar, a `TabScaffold` bar, the sides of a `TabBar` strip, or app-owned chrome around a scroller) needs a divider only while content is scrolled away beneath it.                                                                                                          | Do not keep a static toolbar divider to fake it or write a border onto another component; each component draws its own line from the wiring's state.                                                                                                                                                                                       | Call `wireScrollDividers` once at the app root and retain the disposer; it covers every `Pane`, `NavStack`, `TabScaffold`, and `TabBar` below it. Name app-owned arrangements in `targets` by id; a `Toolbar` or `List` named as chrome draws its facing side. Configure a pane with `chromeDividers` (`scroll` default, `always`, `none`).                                                                                                                                                                                                                                                                                                                                                                            | Which panes follow the scroll, app-owned targets, and the disposer.                                                                                      | `@kerfjs/ui/wire-scroll-dividers`                                                         | [Scroll dividers](./layout.md#scroll-dividers)                                      |
-| One-pane navigation — `NavStack`                                                                                        | A compact flow pushes into details while keeping earlier views mounted, or a single-pane screen needs the same stable layout contract.                                                                                                                                                                                                                   | Do not use it when list and detail should remain visible together; use `SplitView`. Do not use it alone for co-equal top-level destinations; use one stack per `TabScaffold` tab.                                                                                                                                                          | Keep the ordered view array controlled, put view-specific bottom chrome on each view (or use the component fallback), import its CSS explicitly, and call `wireNavStack` for back delegation, content-slide/chrome-cross-fade transitions, and focus move/restore. Mark a preferred initial target with `data-nav-focus` when DOM order is insufficient.                                                                                                                                                                                                                                                                                                                                                               | View keys/content/titles, push and pop actions, preferred initial focus targets, and per-view or persistent bottom toolbar content.                      | `@kerfjs/ui/nav-stack`                                                                    | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
+| Scroll dividers — `wireScrollDividers`                                                                                  | Pinned chrome (a `Pane` header or footer, a `NavStack` top chrome or bottom toolbar, a `TabNavigator` bar, the sides of a `TabBar` strip, or app-owned chrome around a scroller) needs a divider only while content is scrolled away beneath it.                                                                                                         | Do not keep a static toolbar divider to fake it or write a border onto another component; each component draws its own line from the wiring's state.                                                                                                                                                                                       | Call `wireScrollDividers` once at the app root and retain the disposer; it covers every `Pane`, `NavStack`, `TabNavigator`, and `TabBar` below it. Name app-owned arrangements in `targets` by id; a `Toolbar` or `List` named as chrome draws its facing side. Configure a pane with `chromeDividers` (`scroll` default, `always`, `none`).                                                                                                                                                                                                                                                                                                                                                                           | Which panes follow the scroll, app-owned targets, and the disposer.                                                                                      | `@kerfjs/ui/wire-scroll-dividers`                                                         | [Scroll dividers](./layout.md#scroll-dividers)                                      |
+| One-pane navigation — `NavStack`                                                                                        | A compact flow pushes into details while keeping earlier views mounted, or a single-pane screen needs the same stable layout contract.                                                                                                                                                                                                                   | Do not use it when list and detail should remain visible together; use `SplitView`. Do not use it alone for co-equal top-level destinations; use one stack per `TabNavigator` tab.                                                                                                                                                         | Keep the ordered view array controlled, put view-specific bottom chrome on each view (or use the component fallback), import its CSS explicitly, and call `wireNavStack` for back delegation, content-slide/chrome-cross-fade transitions, and focus move/restore. Mark a preferred initial target with `data-nav-focus` when DOM order is insufficient.                                                                                                                                                                                                                                                                                                                                                               | View keys/content/titles, push and pop actions, preferred initial focus targets, and per-view or persistent bottom toolbar content.                      | `@kerfjs/ui/nav-stack`                                                                    | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
 | Responsive list-detail — `SplitView`                                                                                    | A primary list and related detail belong together on roomy devices but become a one-pane drill-down on compact devices.                                                                                                                                                                                                                                  | Do not use it for a single linear flow or a multi-panel editor shell.                                                                                                                                                                                                                                                                      | Provide controlled selection/detail state and device class; opt into resize wiring only when the separator is user adjustable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Selection, detail content, compact back action, device policy, and optional persisted width.                                                             | `@kerfjs/ui/split-view`                                                                   | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
-| Compact top-level destinations — `TabScaffold`                                                                          | 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 `wireTabScaffold`; commonly place one `NavStack` in each tab scene.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Destination definitions, active id, routing, persistence, and roomy-device replacement.                                                                  | `@kerfjs/ui/tab-scaffold`                                                                 | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
+| 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)                                                    |
@@ -183,7 +183,7 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | 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, 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)                                          |
+| 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)                 |
 | 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)                                    |
@@ -405,22 +405,24 @@ A `FloatingToolbar` accepts `ToolbarControlGroup` directly as its children in
 both floating and inline placement. Name the toolbar with `label`; group its
 controls as you would in a `Toolbar` zone.
 
-A `Toolbar` has three zones — `leading`, `center`, and `trailing`. The direct
-zone children are `ToolbarText` (identity/title text) and `ToolbarControlGroup`
-(a control or cluster of controls). The `trailing` zone also accepts one
-standalone `wa-button` for the application's primary action. It keeps its own
-Web Awesome brand, danger, size, and hover chrome, while Toolbar aligns it in
-the control band and wraps it with other trailing items when space is tight.
+A `Toolbar` has three zones — `leading`, `center`, and `trailing`. Each accepts
+`KerfUiContent` directly, including a status `Chip`, a native control, or
+application markup. `ToolbarText` is the standard identity/title; use
+`ToolbarControlGroup` when related controls should share its chrome, sizing,
+hover treatment, or overflow behavior. A standalone primary `wa-button` keeps
+its own Web Awesome chrome and fits naturally in the trailing zone. Bare
+controls retain their own styling and accessibility responsibilities; the
+toolbar only positions them within the zone.
 For a title that opens an editor, set `action` on a direct `ToolbarText`: it
 renders a native button that keeps its content width when possible and
 ellipsizes before an adjacent status chip when the leading zone narrows. The
 application handles the delegated action and replaces it with its own input
 while editing. Use a separate heading landmark if the view needs one.
-Do not drop other bare buttons, inputs, links, or arbitrary markup straight
-into a zone; wrap controls in a `ToolbarControlGroup` so they get the shared
-toolbar geometry, hover/pressed treatment, and grouping. `SegmentedControl`,
-`Select`, a collapsible `TokenSearchField`, and other Web Awesome controls live
-**inside** a `ToolbarControlGroup`. For a page, panel, or
+For a search or cluster that needs shared toolbar geometry, place
+`SegmentedControl`, `Select`, or `TokenSearchField` inside a
+`ToolbarControlGroup`. The ToolbarText catalog's actionable-title example
+places its status `Chip` directly beside the title while the search uses a
+group. For a page, panel, or
 dialog heading, put an extra-large `ToolbarText` directly in the leading zone,
 optionally preceded by a grouped icon, and group trailing actions. Keep supporting
 copy below as app-owned content. Size the title to its track: a narrow

package/docs/design/templates/token-search-field/empty-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 100" width="560" height="100"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 100" width="560" height="100"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments" role="img" aria-label="Search tickets"><g/><g transform="translate(53 46.547)"><text x="0" y="0" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174, 174, 178)">Search tickets</text></g></g><g clip-path="url(#cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/token-search-field/empty.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 100" width="560" height="100"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 100" width="560" height="100"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments" role="img" aria-label="Search tickets"><g/><g transform="translate(53 46.547)"><text x="0" y="0" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110, 110, 115)">Search tickets</text></g></g><g clip-path="url(#cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/token-search-field-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 292" width="592" height="292"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="100"/></clipPath><clipPath id="cp1"><rect x="16" y="176" width="560" height="100"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="560" height="100" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="154" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="176" width="560" height="100" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="292" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Text with atomic tokens</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="560" height="100"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4ct2"><rect x="53" y="32.5" width="66.8" height="17"/></clipPath><clipPath id="svgimg4ct3"><rect x="129" y="33.9" width="41.1" height="18"/></clipPath><clipPath id="svgimg4cp4"><rect x="175" y="37" width="11.3" height="11.5"/></clipPath><clipPath id="svgimg4ct6"><rect x="191.7" y="32.5" width="50.7" height="17"/></clipPath><clipPath id="svgimg4cp7"><rect x="512" y="35" width="14" height="14"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg4svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">payments </text><rect x="121.8" y="33.9" width="67.9" height="18" rx="9" fill="rgb(40,57,66)"/><text x="129" y="46.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(138,203,255)">is:open</text><g clip-path="url(#svgimg4cp4)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg4svgic5"><rect x="175.1" y="37.3" width="11.2" height="11.2"/></clipPath><g clip-path="url(#svgimg4svgic5)"><g transform="translate(175.094 37.266)scale(.46615)"><path d="M18 6 6 18" 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="m6 6 12 12" 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><text x="191.69" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">is:open </text><g clip-path="url(#svgimg4cp7)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg4svgic8"><rect x="512.2" y="35.2" width="13.6" height="13.6"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(512.203 35.203)scale(.5664)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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></g></g></g><text x="16" y="166" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Empty, expanded</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="176" width="560" height="100"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 176)"><defs><clipPath id="svgimg7cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg7svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 292" width="592" height="292"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="100"/></clipPath><clipPath id="cp1"><rect x="16" y="176" width="560" height="100"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="560" height="100" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="154" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="176" width="560" height="100" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="292" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Text with atomic tokens</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="560" height="100"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4ct2"><rect x="53" y="32.5" width="66.8" height="17"/></clipPath><clipPath id="svgimg4ct3"><rect x="129" y="33.9" width="41.1" height="18"/></clipPath><clipPath id="svgimg4cp4"><rect x="175" y="37" width="11.3" height="11.5"/></clipPath><clipPath id="svgimg4ct6"><rect x="191.7" y="32.5" width="50.7" height="17"/></clipPath><clipPath id="svgimg4cp7"><rect x="512" y="35" width="14" height="14"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg4svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">payments </text><rect x="121.8" y="33.9" width="67.9" height="18" rx="9" fill="rgb(40,57,66)"/><text x="129" y="46.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(138,203,255)">is:open</text><g clip-path="url(#svgimg4cp4)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg4svgic5"><rect x="175.1" y="37.3" width="11.2" height="11.2"/></clipPath><g clip-path="url(#svgimg4svgic5)"><g transform="translate(175.094 37.266)scale(.46615)"><path d="M18 6 6 18" 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="m6 6 12 12" 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><text x="191.69" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">is:open </text><g clip-path="url(#svgimg4cp7)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg4svgic8"><rect x="512.2" y="35.2" width="13.6" height="13.6"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(512.203 35.203)scale(.5664)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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></g></g></g><text x="16" y="166" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Empty, expanded</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="176" width="560" height="100"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 176)"><defs><clipPath id="svgimg7cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments" role="img" aria-label="Search tickets"><g/><g transform="translate(53 46.547)"><text x="0" y="0" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174, 174, 178)">Search tickets</text></g></g><g clip-path="url(#svgimg7cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg7svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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></g></g></g></svg>

package/docs/design/templates/token-search-field.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 292" width="592" height="292"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="100"/></clipPath><clipPath id="cp1"><rect x="16" y="176" width="560" height="100"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="560" height="100" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="154" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="176" width="560" height="100" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="292" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Text with atomic tokens</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="560" height="100"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4ct2"><rect x="53" y="32.5" width="66.8" height="17"/></clipPath><clipPath id="svgimg4ct3"><rect x="129" y="33.9" width="41.1" height="18"/></clipPath><clipPath id="svgimg4cp4"><rect x="175" y="37" width="11.3" height="11.5"/></clipPath><clipPath id="svgimg4ct6"><rect x="191.7" y="32.5" width="50.7" height="17"/></clipPath><clipPath id="svgimg4cp7"><rect x="512" y="35" width="14" height="14"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg4svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">payments </text><rect x="121.8" y="33.9" width="67.9" height="18" rx="9" fill="rgb(214,233,249)"/><text x="129" y="46.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(12,98,243)">is:open</text><g clip-path="url(#svgimg4cp4)"><g color="rgb(12, 98, 243)"><clipPath id="svgimg4svgic5"><rect x="175.1" y="37.3" width="11.2" height="11.2"/></clipPath><g clip-path="url(#svgimg4svgic5)"><g transform="translate(175.094 37.266)scale(.46615)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="191.69" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">is:open </text><g clip-path="url(#svgimg4cp7)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg4svgic8"><rect x="512.2" y="35.2" width="13.6" height="13.6"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(512.203 35.203)scale(.5664)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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></g></g></g><text x="16" y="166" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Empty, expanded</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="176" width="560" height="100"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 176)"><defs><clipPath id="svgimg7cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg7svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 292" width="592" height="292"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="100"/></clipPath><clipPath id="cp1"><rect x="16" y="176" width="560" height="100"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="560" height="100" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="154" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="176" width="560" height="100" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="292" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Text with atomic tokens</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="560" height="100"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4ct2"><rect x="53" y="32.5" width="66.8" height="17"/></clipPath><clipPath id="svgimg4ct3"><rect x="129" y="33.9" width="41.1" height="18"/></clipPath><clipPath id="svgimg4cp4"><rect x="175" y="37" width="11.3" height="11.5"/></clipPath><clipPath id="svgimg4ct6"><rect x="191.7" y="32.5" width="50.7" height="17"/></clipPath><clipPath id="svgimg4cp7"><rect x="512" y="35" width="14" height="14"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg4svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">payments </text><rect x="121.8" y="33.9" width="67.9" height="18" rx="9" fill="rgb(214,233,249)"/><text x="129" y="46.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(12,98,243)">is:open</text><g clip-path="url(#svgimg4cp4)"><g color="rgb(12, 98, 243)"><clipPath id="svgimg4svgic5"><rect x="175.1" y="37.3" width="11.2" height="11.2"/></clipPath><g clip-path="url(#svgimg4svgic5)"><g transform="translate(175.094 37.266)scale(.46615)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="191.69" y="46.55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">is:open </text><g clip-path="url(#svgimg4cp7)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg4svgic8"><rect x="512.2" y="35.2" width="13.6" height="13.6"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(512.203 35.203)scale(.5664)"><path d="M18 6 6 18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m6 6 12 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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></g></g></g><text x="16" y="166" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Empty, expanded</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="176" width="560" height="100"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 176)"><defs><clipPath id="svgimg7cp0"><rect x="29" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="520" height="44" rx="22" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="519" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments" role="img" aria-label="Search tickets"><g/><g transform="translate(53 46.547)"><text x="0" y="0" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110, 110, 115)">Search tickets</text></g></g><g clip-path="url(#svgimg7cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg7svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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></g></g></g></svg>

package/docs/design/templates.md

@@ -19,7 +19,7 @@ picture): `Select` renders a Web Awesome custom element that needs its runtime
 registered, so it has no faithful static capture; `LucideIcon` and
 `DisclosureArrow` are decorative primitives best seen inside the components that
 use them; `ResizableRegion` and the whole-screen layouts (`NavStack`,
-`SplitView`, `Workbench`, `TabScaffold`) and the `Catalog` shell are
+`SplitView`, `Workbench`, `TabNavigator`) and the `Catalog` shell are
 interaction-/viewport-driven screens rather than component cards — the live UX
 catalog and the app-layouts docs cover those.
 

package/docs/examples/application-ui-profile.json

@@ -51,10 +51,10 @@
   },
   "exceptions": [
     {
-      "id": "legacy-report-grid",
-      "rules": ["KUI-C101"],
-      "target": "src/features/legacy-report/report-grid.tsx",
-      "rationale": "The embedded report engine owns this isolated toolbar-compatible control row."
+      "id": "legacy-list-header",
+      "rules": ["KUI-C103"],
+      "target": "src/features/legacy-report/report-list-header.tsx",
+      "rationale": "The legacy report adapter owns disclosure content and its expanded state."
     }
   ]
 }

package/docs/layout.md

@@ -36,6 +36,26 @@ size) tall, and below that lets the whole pane scroll as one column, header,
 content, and footer together, so the content keeps its natural height. The
 default `fixed` always pins them.
 
+### Deep content inset
+
+Set `deepInset` on a `Pane` to add one 8px inline gutter to its scrolling
+content. A `ContentItem` or `ListItem` that normally sits 8px from the pane
+edge then sits 16px from it. The default is `false`. This extra gutter adds
+to any device safe-area inset, while the pane's header, footer, background,
+and separators still reach their usual edges.
+
+```tsx
+<Pane deepInset>
+  <ContentItem>Project Atlas</ContentItem>
+</Pane>
+```
+
+The pane leaves `--kui-layout-inline-margin` at its normal 8px value. Nested
+`Row`, `List`, and `Grid` therefore keep their usual item spacing; they do
+not inherit a doubled margin. `PaneConfig.deepInset` forwards through
+Workbench `mainPane`, panel `pane`, CollapsiblePanel `pane`, and a
+`NavStackView.pane`.
+
 ### Lowered work surfaces
 
 Set `appearance="sunken"` when the work area itself should use the lowered
@@ -60,7 +80,7 @@ on the Pane; it defaults to `--kui-color-surface`.
 `PaneConfig.appearance` forwards through Workbench `mainPane`, panel `pane`,
 and CollapsiblePanel `pane`. Workbench also applies that choice to its main or
 panel region when it renders no Pane chrome. Set `appearance: "sunken"` on a
-`NavStackView` or `TabScaffoldTab` when its view or scene owns scrolling.
+`NavStackView` or `TabNavigatorTab` when its view or scene owns scrolling.
 For a `SplitView`, put a `Pane` in the list or detail region and set its
 appearance; SplitView only arranges the regions and does not own their scroll.
 Choose the innermost owner when composing layouts.
@@ -102,7 +122,7 @@ and the footer's top line, whatever the chrome holds — a `Toolbar`, a
 whose tabs are scrolled out of view). That includes the panes a `Workbench`,
 `CollapsiblePanel`, or `Catalog` renders; `wireCatalog` installs it for its
 own root. It also covers every `NavStack` (the top chrome's bottom line and the
-bottom toolbar's top line, around the active view) and every `TabScaffold`
+bottom toolbar's top line, around the active view) and every `TabNavigator`
 (the bar's top line, over the active scene). The layout keys on whichever
 element actually scrolls there: the view or scene itself, or, through a sole
 child with no chrome of its own on that edge, a `Pane`'s content or a nested
@@ -120,7 +140,7 @@ for a root already has scroll dividers there and does not need another call.
 The wiring only reports state; every component draws its own line. It writes
 `data-scroll-overflow` (the edges with content hidden beyond them, in canonical
 `t`/`r`/`b`/`l` order) on each scroller and `data-scroll-divider` (the sides to
-draw) on each piece of chrome, and the Pane, NavStack, TabScaffold, TabBar,
+draw) on each piece of chrome, and the Pane, NavStack, TabNavigator, TabBar,
 Toolbar, and List stylesheets draw from those. The line is an inset shadow or a pseudo-element
 inside the component, so no state ever moves the chrome, the content, or a tab.
 Never write a border onto a component to show one.
@@ -130,7 +150,7 @@ the scroll state and draws nothing until the wiring runs; `always` (the sunken
 pane default) keeps both lines; `none` drops them. Explicit values override
 either default. Layouts forward it through `PaneConfig`
 (`mainPane.chromeDividers`, a panel's `pane.chromeDividers`). A `NavStack` and a
-`TabScaffold` take the same `chromeDividers` for their own chrome (the stack's
+`TabNavigator` take the same `chromeDividers` for their own chrome (the stack's
 top chrome and bottom toolbar, the scaffold's bar), and a `SplitView` forwards
 it to its compact stack through `compactStack`.
 
@@ -295,10 +315,13 @@ inset. Most interactive rows and toolbar groups are 44px tall.
 Toolbar groups reserve a real 1px outer border around a 42px inner area, even
 when their border and background are transparent.
 A `Toolbar` lays its zones out against one 44px control band at its top: an
-item no taller than the band is centered in it by its own size, and a taller
-item (a wrapped title, a second trailing row) starts at the band's top and
-grows down, so it never moves the other controls. A wrapped `ToolbarText`
-centers its first line in the band.
+ordinary `ToolbarText`, `ToolbarControlGroup`, or standalone trailing
+`wa-button` no taller than the band is centered in it by its own size, and a
+taller one (a wrapped title, a second trailing row) starts at the band's top
+and grows down, so it never moves the other controls. A wrapped `ToolbarText`
+centers its first line in the band. Other direct zone content centers against
+the zone's full height by default, including when a sibling makes that zone
+taller than the control band.
 The leading zone clips a shrinking title but reserves 4px of paint overflow
 for the focus outline of a control at its edge. Focus rings in all three zones
 remain visible at narrow and wide widths.

package/docs/nav-stack.md

@@ -15,7 +15,7 @@ import { wireNavStack } from "@kerfjs/ui/wire-nav-stack";
 In a browser bundler that honors the `browser` export condition (Vite, esbuild, and
 webpack do by default), the import above also
 loads NavStack's stylesheet and those of the components it renders internally
-(`Toolbar`, `ToolbarControlGroup`, `ToolbarText`, `LucideIcon`). Without that condition, import the manual stylesheets instead:
+(`Toolbar`, `ToolbarControlGroup`, `ToolbarText`, `Pane`, `List`, `LucideIcon`). Without that condition, import the manual stylesheets instead:
 `@kerfjs/ui/nav-stack.css` plus those components' CSS, or `@kerfjs/ui/styles.css`.
 
 ## State lives in the app
@@ -28,9 +28,12 @@ stack as a `signal<NavStackView[]>`, `NavStack({ views })` renders it, and
 const views = signal<NavStackView[]>([
   {
     key: "inbox",
-    title: "Inbox",
+    toolbar: { title: "Inbox" },
     content: <InboxView />,
-    bottomToolbar: <InboxStatus />,
+    bottomToolbar: {
+      label: "Inbox status",
+      leading: <InboxStatus />,
+    },
   },
 ]);
 
@@ -47,35 +50,39 @@ const dispose = wireNavStack(root, {
 // push / pop by editing the signal:
 views.value = [
   ...views.value,
-  { key: id, title: "Message", content: <MessageView id={id} /> },
+  { key: id, toolbar: { title: "Message" }, content: <MessageView id={id} /> },
 ];
 ```
 
 `NavStack` renders every entry stacked, the last one active and the rest kept
 mounted (so their DOM state survives) but hidden. Each entry carries a
-`key` (stable identity), `content`, an optional `title`, optional per-view
-`leading`, `center`, and trailing `toolbar` groups for the top toolbar, and an
-optional per-view `bottomToolbar`. The component-level
+`key` (stable identity), `content`, an optional `toolbar` object with `title`,
+`leading`, `center`, and `trailing` groups, and an optional structured
+`bottomToolbar`. The component-level structured
 `bottomToolbar` remains a persistent fallback for views that do not provide one.
-Each view can also provide `header`, pinned below its top toolbar and above
-that view's single scroll area. A fixed heading, notice, or section selector
-can therefore change with the active screen without adding another scroller.
+Each view can also provide `header`, `footer`, `headerList`, `footerList`, and
+`pane` configuration, as a `WorkbenchStaticPanel` does. With any of these,
+the view renders a `Pane`: its header and footer stay pinned around the view's
+scrolling content, and slide with that view during navigation. The header and
+footer list configuration forwards to their `List`s; `pane` forwards
+`contentElement`, `contentLabel`, `separators`, `safeAreaEdges`,
+`chromeDividers`, and `appearance` to the Pane. Without those fields, the view
+keeps its simple direct scroll area. Use `pane: { appearance: "sunken" }` for a
+lowered scrolling work surface.
 The back control appears automatically once the stack has more than one entry;
 `wireNavStack`'s `onBack` is where the app pops its own signal.
 
-Set a view's `appearance: "sunken"` to paint its scroll viewport with the
-shared lowered-surface color, including space after short content. When the
-view holds a `Pane` as its only child, set the appearance on the Pane instead
-if its content owns scrolling. See [Lowered work surfaces](layout.md#lowered-work-surfaces).
+See [Lowered work surfaces](layout.md#lowered-work-surfaces) for nested Pane
+and layout content.
 
 ## The top toolbar
 
 The top chrome is a real `Toolbar`, so it follows the same zone,
 group, and responsive rules as every other toolbar. Its leading zone holds the
 back control (a borderless `ToolbarControlGroup`, shown once the stack has
-depth), then the active view's `leading` groups, then the view's `title` as a
-`ToolbarText`. The view's `center` fills the center zone and its `toolbar`
-fills the trailing zone. Give each zone `ToolbarControlGroup`s or `ToolbarText`,
+depth), then `toolbar.leading`, then `toolbar.title` as a `ToolbarText`.
+`toolbar.center` fills the center zone and `toolbar.trailing` fills the
+trailing zone. Give each zone `ToolbarControlGroup`s or `ToolbarText`,
 as in any toolbar.
 
 Configure the toolbar with `toolbarConfig` instead of styling it:
@@ -95,7 +102,12 @@ Configure the toolbar with `toolbarConfig` instead of styling it:
 />
 ```
 
-- `toolbarConfig` forwards the `Toolbar` configuration (`dividerSides`,
+- Each view's `toolbar` can forward the `Toolbar` configuration (`dividerSides`,
+  `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`) and its `label`,
+  `titleSize`, and `headingLevel`. A view value overrides the corresponding
+  `toolbarConfig` default. Its `bottomToolbar` forwards the same `Toolbar`
+  configuration and has a required accessible `label`.
+- `toolbarConfig` supplies stack-wide defaults (`dividerSides`,
   `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`) and adds
   `label` (the toolbar's accessible name), `titleSize` (the title's
   `ToolbarText` size, default `large`), and `headingLevel` (expose the title as

package/docs/recipes.md

@@ -88,7 +88,11 @@ its label still names the modal — and the close button uses
 `data-dialog="close"`. Web Awesome keeps modal focus and Escape, and the thin
 recipe adapter restores the invoking control after the hide event.
 `DialogSurface` chooses the large modal with no body inset, because the panes
-own their geometry. On compact devices the dialog becomes a full-screen sheet
+own their geometry. Its explicit 16px `viewportGutter` and `maxHeight="viewport"`
+bound the roomy modal to the dynamic viewport; the compact fullscreen
+presentation retains its existing geometry. Application render state chooses
+the presentation and can likewise choose gutter/cap values for a compact modal.
+On compact devices the dialog becomes a full-screen sheet
 with its own labeled header and footer actions, and `SplitView` becomes a
 `NavStack` drill-down whose back control the application pops. The
 application owns open state, selection, the pushed detail, dismissal policy,
@@ -146,7 +150,7 @@ pushes/pops it, `NavStack` renders it, and `wireNavStack` slides the content and
 settles the chrome (reduced motion collapses the slide to instant). See the
 layout guide
 [`app-layouts.md`](app-layouts.md) for choosing among `NavStack`, `SplitView`,
-`Workbench`, and `TabScaffold`.
+`Workbench`, and `TabNavigator`.
 
 ## Loading inspector
 

package/docs/split-view.md

@@ -86,15 +86,18 @@ resizable={{
 
 `compactStack` configures the compact `NavStack`: `toolbarConfig`, `backIcon`,
 `backText`, `hideToolbar`, the persistent `bottomToolbar`, and `chromeDividers`
-forward to the stack, and `list` / `detail` give each view its own top-toolbar groups
-(`leading`, `center`, trailing `toolbar`) and `bottomToolbar`:
+forward to the stack, and `list` / `detail` give each view its own structured
+top `toolbar` (`leading`, `center`, `trailing`) and `bottomToolbar`:
 
 ```tsx
 compactStack={{
   backText: "Threads",
   toolbarConfig: { headingLevel: 1 },
-  list: { toolbar: <ComposeGroup /> },
-  detail: { toolbar: <ReplyGroup />, bottomToolbar: <MessageActions /> },
+  list: { toolbar: { trailing: <ComposeGroup /> } },
+  detail: {
+    toolbar: { trailing: <ReplyGroup /> },
+    bottomToolbar: { label: "Message actions", leading: <MessageActions /> },
+  },
 }}
 ```
 

package/docs/surface-scaffold.md

@@ -12,6 +12,50 @@ Wrap one `wa-dialog` with `DialogSurface`. Choose `size` (`small`, `medium`, or
 `bodyInset` / `footerInset` (`none`, `compact`, or `comfortable`). The defaults
 match Kerf's medium modal, 8px body, and 16px footer rhythm.
 
+The modal size presets have preferred widths of 400px, 560px, and 800px,
+respectively, before the viewport width cap. Set `preferredWidth` to a branded
+`CssLength` when the desktop shell needs another width. It takes precedence over
+`size`, while the viewport cap still applies. For example, 832px and 480px
+desktop preferences can share the same responsive dialog without changing its
+resource tracks or preview aspect sizing.
+
+### Modal viewport bounds
+
+`viewportGutter` accepts a branded `CssLength` from `@kerfjs/ui/css-values`.
+It sets the minimum horizontal clearance; `preferredWidth` overrides the `size`
+preset when supplied. `maxHeight` accepts a branded length or `"viewport"`; explicit caps are
+clamped to the dynamic viewport height minus twice the gutter (16px per edge
+when the gutter is omitted). Negative gutters/caps clamp to zero. Omitting
+both options preserves Web Awesome's existing width and phone height caps.
+These options apply only to `presentation="modal"`; side sheets and fullscreen
+surfaces keep their own geometry.
+
+```tsx
+import '@kerfjs/ui/surface-scaffold/register';
+import { remify } from '@kerfjs/ui/css-values';
+import { DialogSurface } from '@kerfjs/ui/surface-scaffold';
+
+<DialogSurface preferredWidth={remify(832)} viewportGutter={remify(8)} maxHeight="viewport" bodyInset="none">
+  <wa-dialog label="Close workspace">{/* Application-owned content and footer */}</wa-dialog>
+</DialogSurface>;
+```
+
+This gives a desktop modal an 832px preferred width and a phone modal an 8px edge gutter with a `calc(100dvh - 16px)` height
+cap without application selectors on Kerf roots or Web Awesome parts. A cap
+is not a fixed height: short content stays naturally sized, and taller content
+scrolls in Web Awesome's body while its header/footer remain outside that
+scroll owner. Choosing a larger cap cannot guarantee that arbitrary content
+fits without scrolling; preview tracks, canvas aspect ratios and content sizing
+remain application-owned.
+
+Responsive policy is explicit application state: read `deviceClass()` during
+the render to choose the gutter, cap or presentation. For example use
+`viewportGutter={remify(device.value.handset ? 8 : 16)}` with `maxHeight="viewport"`.
+The scaffold introduces no hidden breakpoint or automatic fullscreen switch.
+An application can configure device-class breakpoints when its phone policy
+differs from the default. Prefer a typed cap such as `maxHeight={remify(640)}`
+when the modal should stop growing before the viewport bound.
+
 Treat a dialog body as a `List` by default. When its rows or sections own their
 standard list geometry, set `bodyInset="none"` so the dialog does not add a
 second inset. Bare prose is still a list child: wrap it in `ListInsetText` so its
@@ -26,3 +70,5 @@ padding for a child that already owns row insets, `compact` uses 4px, and
 preserve `data-morph-skip-children` when its upgraded light-DOM items must retain
 identity across Kerf rerenders. Import `@kerfjs/ui/popup-menu/register` once for
 the focus handoff fix when wrapping a raw `wa-dropdown`.
+
+Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.