@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.103` and `kerfjs@5.0.0-beta.103`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.105` and `kerfjs@5.0.0-beta.105`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -518,9 +518,9 @@ interface PopupMenuItem {
     label: string;
     /** Delegated `data-action` the app handles when the item is chosen. */
     action?: string;
-    /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */
+    /** The item's value, reported in the menu's `kui-menu-select` event. */
     value?: string;
-    /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */
+    /** Leading icon, typically a `LucideIcon`, before the label. */
     icon?: SafeHtml;
     /** A checkbox choice, including nested choices; omit for a plain command. */
     checked?: boolean;
@@ -550,13 +550,30 @@ type PopupMenuTriggerName = {
     /** Visible trigger text, which is also its accessible name. */
     text: string;
     label?: never;
+    triggerContent?: never;
 } | {
     text?: never;
     /**
      * Accessible name of an icon-only trigger, rendered as visually hidden
-     * slotted text (a Web Awesome button takes its name from its content).
+     * text inside the trigger button.
      */
     label: string;
+    triggerContent?: never;
+} | {
+    text?: never;
+    /**
+     * The trigger's accessible name ("Status: Started"); the visible
+     * content is hidden from assistive technology.
+     */
+    label: string;
+    /**
+     * Visible content that is the whole trigger, such as a `Badge` showing
+     * the current status. Kerf owns the bare button around it (no chrome,
+     * a pill focus ring, the pointer cursor, `aria-haspopup`), and the
+     * caret is off unless `caret` is set.
+     */
+    triggerContent: KerfUiContent;
+    icon?: never;
 };
 /** A context PopupMenu's viewport anchor point. */
 interface PopupMenuAnchor {
@@ -569,6 +586,7 @@ type PopupMenuTrigger = (PopupMenuTriggerName & {
 }) | {
     context: true;
     label: string;
+    triggerContent?: never;
     /**
      * The viewport point (CSS pixels, as in `MouseEvent.clientX/Y`) the
      * menu opens from. Rendered into the menu itself, so it survives
@@ -594,37 +612,37 @@ type PopupMenuProps = PopupMenuTrigger & {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 };
-/** A rendered context PopupMenu with Web Awesome's controlled open state. */
-type PopupMenuElement = HTMLElement & {
-    open: boolean;
-};
+/** A rendered PopupMenu root, the element the open and close helpers take. */
+type PopupMenuElement = HTMLElement;
 /**
  * Open a PopupMenu at viewport pointer coordinates. A `context` menu rendered
  * without `anchor` moves its invisible anchor there (a menu rendered with
- * `anchor` opens with `openPopupMenu` instead). A button-triggered menu (such as a `ListActionRow`
- * trailing menu) anchors its popup at the point, opening `bottom-start` like a
- * context menu, for this opening only; once the menu has closed it returns to
- * its trigger and placement. Before Web Awesome upgrades it, the menu opens at
- * its trigger.
+ * `anchor` opens with `openPopupMenu` instead). A button-triggered menu (such
+ * as a `ListActionRow` trailing menu) opens `bottom-start` from the point,
+ * like a context menu, for this opening only; its next opening returns to its
+ * trigger and placement. Needs the `/register` entry.
  */
 declare function openPopupMenuAt(menu: PopupMenuElement, x: number, y: number): void;
 /**
- * Open a context PopupMenu at the `anchor` it was rendered with (or the
- * point a previous `openPopupMenuAt` set).
+ * Open a PopupMenu from its trigger, or a context PopupMenu at the `anchor`
+ * it was rendered with (or the point a previous `openPopupMenuAt` set).
+ * Needs the `/register` entry.
  */
 declare function openPopupMenu(menu: PopupMenuElement): void;
-/** Close a programmatically opened PopupMenu. */
+/** Close an open PopupMenu, and any submenu it shows. */
 declare function closePopupMenu(menu: PopupMenuElement): void;
 /**
- * An action menu: a trigger button that opens a list of commands. Renders the
- * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with
- * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items
- * dispatch through delegated `data-action`s; the app owns the commands and any
- * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register
- * the Web Awesome elements. At viewport widths up to 480px, submenus appear
- * above or below their parent menu so their rows do not cover the parent list.
+ * An action menu: a trigger button that opens a list of commands in the top
+ * layer. A `single` `ToolbarControlGroup` (with `nestedDropdown`) or a
+ * `PopupSurface` sizes and insets it as usual. Items dispatch through
+ * delegated `data-action`s, and the root reports each choice as a bubbling
+ * `kui-menu-select` event; the app owns the commands and any open-state reaction.
+ * Import `@kerfjs/ui/popup-menu/register` once to wire opening, keyboard
+ * navigation, submenus, and dismissal. At viewport widths up to 480px,
+ * submenus appear above or below their parent menu so their rows do not cover
+ * the parent list.
  */
-declare function PopupMenu({ text, label, icon, items, placement, caret, disabled, rootAttributes, slot, context, anchor, }: PopupMenuProps): SafeHtml;
+declare function PopupMenu({ text, label, icon, triggerContent, items, placement, caret, disabled, rootAttributes, slot, context, anchor, }: PopupMenuProps): SafeHtml;
 
 export { PopupMenu, type PopupMenuAnchor, type PopupMenuDivider, type PopupMenuElement, type PopupMenuEntry, type PopupMenuHeading, type PopupMenuItem, type PopupMenuPlacement, type PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt };
 ```
@@ -757,6 +775,8 @@ type ListRootAttributes = StructuralRootAttributes & Readonly<{
     'data-frame'?: never;
     'data-surface'?: never;
     'data-inset'?: never;
+    'data-content-width'?: never;
+    'data-content-align'?: never;
     'data-text-insets'?: never;
     'data-control-insets'?: never;
 }>;
@@ -772,6 +792,12 @@ type ListSurface = 'base' | 'raised';
  * 16px inline below 576px. It replaces any `textInsets`/`controlInsets`.
  */
 type ListInset = 'document';
+/**
+ * A readable measure for a page's content column: `compact` 440px, `medium`
+ * 640px, or `wide` 864px of content, the same steps as a catalog example's
+ * `contentWidth`.
+ */
+type ListContentWidth = 'compact' | 'medium' | 'wide';
 interface ListProps {
     children?: KerfUiContent;
     /** Make this list a labeled multi-select grid for `ContentItem selectionMode="multiple"` rows. */
@@ -837,6 +863,13 @@ interface ListProps {
     /** Physical divider edges in canonical top/right/bottom/left order. */
     dividerSides?: Sides;
     /** A preset four-sided inset; see `ListInset`. */
+    /**
+     * Cap the list's content at a readable measure, plus its insets, so a page
+     * column needs no application CSS. Composes with `inset="document"`.
+     */
+    contentWidth?: ListContentWidth;
+    /** Where a `contentWidth` column sits: `center` (default) or `start`. */
+    contentAlign?: 'start' | 'center';
     inset?: ListInset;
     /** Physical sides that receive the standard 17px text inset. */
     textInsets?: Sides;
@@ -860,9 +893,9 @@ interface ListProps {
  */
 type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
 /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
-declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListContentWidth, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };
 ```
 
 ## `@kerfjs/ui/list-action-row`
@@ -1152,12 +1185,14 @@ type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | unde
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
+    'data-grid-row'?: never;
 }>;
 type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
+    'data-grid-row'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-interactive'?: never;
@@ -1219,6 +1254,14 @@ type ContentItemProps = ContentItemBaseProps & ({
     disabled?: never;
     /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */
     tabIndex?: 0 | -1;
+    /**
+     * A non-selectable row of a multi-select `List` or `Grid`: renders
+     * `role="row"` around a `gridcell`, with no `aria-selected` and no
+     * Tab stop of its own, for content between selectable rows (an
+     * activity group, a "messages skipped" divider). Its controls stay
+     * reachable by Tab; arrow keys skip it.
+     */
+    gridRow?: boolean;
     /** Existing static `data-*` metadata remains available. */
     rootAttributes?: ContentItemRootAttributes;
 } | {
@@ -1231,6 +1274,8 @@ type ContentItemProps = ContentItemBaseProps & ({
     selected?: boolean;
     disabled?: boolean;
     tabIndex?: never;
+    /** An interactive item is already a row in a multi-select grid. */
+    gridRow?: never;
     /** Safe app metadata; interaction attributes are component-owned. */
     rootAttributes?: ContentItemInteractiveRootAttributes;
 });
@@ -1239,7 +1284,7 @@ type ContentItemProps = ContentItemBaseProps & ({
  * border (transparent unless `framed`), 8px padding, and a rounded or pill
  * radius. It owns that whole geometry, so wrappers must not add more.
  */
-declare function ContentItem({ appearance, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+declare function ContentItem({ appearance, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
 
 export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };
 ```
@@ -1295,13 +1340,13 @@ declare function ValueTable({ label, density, labelWidth, presentation, stackBel
 export { ValueTable, type ValueTablePresentation, type ValueTableProps, ValueTableRow, type ValueTableRowProps, type ValueTableStackBelow };
 ```
 
-## `@kerfjs/ui/app-tab`
+## `@kerfjs/ui/tab-bar-item`
 
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type TabBarItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-tab-id'?: never;
@@ -1313,10 +1358,10 @@ type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined
     'data-name-overflow'?: never;
     'data-pinned'?: never;
 }>;
-type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';
-type AppTabSize = 'default' | 'compact';
-type AppTabNameOverflow = 'ellipsis' | 'visible';
-interface AppTabProps {
+type TabBarItemPresentation = 'pill' | 'segmented' | 'icon-only';
+type TabBarItemSize = 'default' | 'compact';
+type TabBarItemNameOverflow = 'ellipsis' | 'visible';
+interface TabBarItemProps {
     id: string;
     name: string;
     selected?: boolean;
@@ -1331,13 +1376,13 @@ interface AppTabProps {
     leading?: KerfUiContent;
     trailing?: KerfUiContent;
     /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */
-    presentation?: AppTabPresentation;
+    presentation?: TabBarItemPresentation;
     /** Compact tabs use the 32px application-rail height. */
-    size?: AppTabSize;
+    size?: TabBarItemSize;
     /** Maximum visible label width in CSS pixels before ellipsis. */
     labelMaxWidth?: number;
     /** Keep the full name visible for an inline loading treatment. */
-    nameOverflow?: AppTabNameOverflow;
+    nameOverflow?: TabBarItemNameOverflow;
     /** Decorative dormant content for the close button. Must not contain interactive descendants. */
     closeIcon?: SafeHtml;
     selectAction?: string;
@@ -1356,13 +1401,13 @@ interface AppTabProps {
      * `placeholder` wins when both are set.
      */
     pending?: boolean;
-    rootAttributes?: AppTabRootAttributes;
+    rootAttributes?: TabBarItemRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function AppTab({ id, name, selected, attention, dropTarget, pinned, closable, draggable, leading, trailing, presentation, size, labelMaxWidth, nameOverflow, closeIcon, selectAction, closeAction, className, placeholder, pending, rootAttributes, slot, }: AppTabProps): SafeHtml;
+declare function TabBarItem({ id, name, selected, attention, dropTarget, pinned, closable, draggable, leading, trailing, presentation, size, labelMaxWidth, nameOverflow, closeIcon, selectAction, closeAction, className, placeholder, pending, rootAttributes, slot, }: TabBarItemProps): SafeHtml;
 
-export { AppTab, type AppTabNameOverflow, type AppTabPresentation, type AppTabProps, type AppTabSize };
+export { TabBarItem, type TabBarItemNameOverflow, type TabBarItemPresentation, type TabBarItemProps, type TabBarItemSize };
 ```
 
 ## `@kerfjs/ui/tab-bar`
@@ -1375,7 +1420,7 @@ type TabActivation = 'automatic' | 'manual';
 type TabBarAllocation = 'intrinsic' | 'fill';
 type TabBarPresentation = 'rail' | 'segmented' | 'inspector';
 type TabBarTrailingPlacement = 'separate' | 'adjacent';
-/** Tablist width where segmented AppTabs switch to icon-only. */
+/** Tablist width where segmented TabBarItems switch to icon-only. */
 type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';
 interface TabBarProps {
     id: string;
@@ -1398,11 +1443,11 @@ interface TabBarProps {
      * selects with Enter / Space / click — use it when selecting a tab is a heavy action.
      */
     activation?: TabActivation;
-    /** How available strip width is allocated across child AppTabs. */
+    /** How available strip width is allocated across child TabBarItems. */
     allocation?: TabBarAllocation;
     /** Named strip chrome for application rails, segmented tabs, or inspectors. */
     presentation?: TabBarPresentation;
-    /** Switch segmented AppTabs to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */
+    /** Switch segmented TabBarItems to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */
     iconOnlyAt?: TabBarIconOnlyAt;
     /** Keep a trailing action beside the final tab or at the far edge of the bar. */
     trailingPlacement?: TabBarTrailingPlacement;
@@ -1715,8 +1760,11 @@ interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'h
     min: number;
     max: number;
 }
-/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */
-type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar'>;
+/**
+ * One compact view's top- and bottom-toolbar content and pinned footer (see
+ * `NavStackView`).
+ */
+type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar' | 'footer'>;
 /**
  * The compact `NavStack`'s configuration: its toolbar configuration, back
  * control, persistent bottom toolbar, chrome dividers, and chrome and
@@ -1859,9 +1907,27 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-scroll-edge'?: never;
     'data-scroll-edge-distance'?: never;
     'data-header-overlay'?: never;
+    'data-compact-header'?: never;
+    'data-compact-footer'?: never;
+    'data-compact-header-open'?: never;
+    'data-compact-footer-open'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * How a header or footer behaves when the pane's container presents
+ * compactly (a `NavStack` view, a `TabNavigator` scene, a full-screen dialog,
+ * or a compact `Workbench`): `fixed` stays docked and shrinks the content
+ * area; `scroll` sits inline with the content (a footer settles at the end
+ * and scrolls past when the content is longer); `overlay` lies over the
+ * content on the chrome material, shown only while the app opens it.
+ */
+type PaneCompactChrome = 'fixed' | 'scroll' | 'overlay';
+/** The compact chrome policy for a Pane's header and footer. */
+interface PaneCompactChromePolicy {
+    header?: PaneCompactChrome;
+    footer?: PaneCompactChrome;
+}
 /**
  * When a Pane draws the divider between its pinned header or footer and its
  * scrolling content: `scroll` while content is scrolled away beneath that
@@ -1922,6 +1988,21 @@ interface PaneProps {
      * text in the normal text color: quiet text can fall below AA over the
      * content passing beneath it.
      */
+    /**
+     * What the header and footer do when the pane's container presents
+     * compactly (default `fixed`); roomy containers ignore it. The container
+     * interprets it, so set it on panes inside a `NavStack`, `TabNavigator`,
+     * full-screen dialog, or `Workbench`.
+     */
+    compactChrome?: PaneCompactChromePolicy;
+    /**
+     * Which `overlay` compact chrome is showing. The app owns it and flips it
+     * from a control the person can reach while the chrome is hidden.
+     */
+    compactChromeOpen?: {
+        header?: boolean;
+        footer?: boolean;
+    };
     headerPresentation?: PaneHeaderPresentation;
     /**
      * With `headerPresentation="clear"`, `material` fades the chrome material
@@ -2005,16 +2086,16 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'compactChrome' | 'compactChromeOpen' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
 ```
 
 ## `@kerfjs/ui/workbench`
@@ -2064,6 +2145,11 @@ interface WorkbenchMainToolbar extends ToolbarConfig {
     center?: KerfUiContent;
     /** Groups at the trailing edge, before a collapsed right rail's groups. */
     trailing?: KerfUiContent;
+    /**
+     * Groups after a collapsed right rail's groups, so they stay outermost,
+     * such as a dialog's close control.
+     */
+    end?: KerfUiContent;
 }
 /**
  * The work area's bottom toolbar; a collapsed drawer adds its groups to it.
@@ -2964,8 +3050,8 @@ export { DEFAULT_BREAKPOINTS, type DeviceBreakpoints, type DeviceClass, type Dev
 ```ts
 import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
-import { b as CatalogProps } from './types-CVgIwSdq.js';
-export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
+import { b as CatalogProps } from './types-DmHWkSd6.js';
+export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogTagFilter, k as CatalogUxReview } from './types-DmHWkSd6.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import './toolbar.js';
 import './sides-BPSWde0A.js';
@@ -2992,7 +3078,7 @@ import './resizable-region.js';
  * An entry's `settings` render in a right-rail settings pane beside the stage,
  * with the same toggle relocation and small-screen overlay.
  */
-declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSecondaryFilterAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
 
 /** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';
@@ -3119,7 +3205,7 @@ export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleP
 ## `@kerfjs/ui/catalog-resources`
 
 ```ts
-import { C as CatalogResource } from './types-CVgIwSdq.js';
+import { C as CatalogResource } from './types-DmHWkSd6.js';
 import './toolbar.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
@@ -3175,7 +3261,7 @@ export { type CatalogGuidanceKind, type CatalogResourceKind, type CatalogResourc
 
 ```ts
 import { Signal } from 'kerfjs';
-import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
+import { a as CatalogBackgroundStyle } from './types-DmHWkSd6.js';
 import './toolbar.js';
 import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
@@ -3213,6 +3299,11 @@ interface WireCatalogOptions {
     onToggleSettings?: () => void;
     /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
     onToggleSecondary?: () => void;
+    /**
+     * Invoked with the switch's new state when the secondary group's tag-filter
+     * switch changes; the app updates `tagFilter.show`.
+     */
+    onToggleSecondaryFilter?: (show: boolean) => void;
     /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
     urlParam?: string;
     /**
@@ -3227,6 +3318,7 @@ interface WireCatalogOptions {
     toggleMotionAction?: string;
     selectBackgroundAction?: string;
     toggleSecondaryAction?: string;
+    toggleSecondaryFilterAction?: string;
     toggleSettingsAction?: string;
     /**
      * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
@@ -3303,7 +3395,7 @@ declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inli
  * catalog's panes and every example in it show their chrome dividers only
  * while scrolled. Returns a disposer.
  */
-declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSecondaryFilter, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSecondaryFilterAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
 
 export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };
 ```
@@ -3350,9 +3442,15 @@ export { SegmentedControl, type SegmentedControlAppearance, type SegmentedContro
 
 ```ts
 import { SafeHtml } from 'kerfjs';
-import { CssColor } from './css-values.js';
+import { CssColor, CssLength } from './css-values.js';
 
 type ChoiceChipsSize = 'default' | 'compact';
+/**
+ * `chips` (default) are labeled pills; `icons` are square 36px icon-only
+ * choices (an icon picker), each named by its hidden label, which is also
+ * its hover title.
+ */
+type ChoiceChipsPresentation = 'chips' | 'icons';
 /**
  * A leading color dot: a {@link CssColor} from `uiColor()`, `colorVar()`, or
  * `fillColor()`, or `'transparent'` for the no-color swatch (an outlined
@@ -3373,14 +3471,23 @@ interface ChoiceChipsChoice<Value extends string = string> {
 }
 interface ChoiceChipsCommonProps<Value extends string> {
     /**
-     * Native input `name`: the form field the selected value (or, with
-     * `multiple`, every checked value) submits under.
+     * Form field name: the selected value (or, with `multiple`, every selected
+     * value) submits under it.
      */
     name: string;
     choices: readonly ChoiceChipsChoice<Value>[];
-    /** Delegated `data-action` on every input; listen for `change`. */
+    /**
+     * Delegated `data-action`; listen for `change`. It sits on every native
+     * input, or for `multiple: true` on the group, which `wireChoiceChips`
+     * fires `change` on.
+     */
     action?: string;
     size?: ChoiceChipsSize;
+    presentation?: ChoiceChipsPresentation;
+    /**
+     * Cap the group's height; past it the group scrolls (a long icon grid).
+     */
+    maxHeight?: CssLength;
     /** Disable the whole group. */
     disabled?: boolean;
     /** Associate the inputs with a form outside their ancestor chain. */
@@ -3400,18 +3507,34 @@ interface ChoiceChipsSingleProps<Value extends string = string> {
 }
 /**
  * Any number of values, backed by native checkboxes: each pill is its own Tab
- * stop, Space toggles it, and every checked value submits under `name`.
+ * stop, a click or Space toggles it alone, and every checked value submits
+ * under `name`.
  */
-interface ChoiceChipsMultipleProps<Value extends string = string> {
-    multiple: true;
+interface ChoiceChipsToggleProps<Value extends string = string> {
+    multiple: 'toggle';
     /** The checked values. Omit (or pass `[]`) for none. */
     value?: readonly NoInfer<Value>[];
     /**
-     * Native `required` on a checkbox demands that one box, so a multiple group
+     * Native `required` on a checkbox demands that one box, so a toggle group
      * has no "at least one" requirement; validate the checked set in the app.
      */
     required?: never;
 }
+/**
+ * Any number of values with the conventional desktop selection model, as an
+ * ARIA multi-select listbox: a click selects one chip, Cmd (Apple) or Ctrl
+ * (elsewhere) toggles one, and Shift extends a range. The group is one Tab
+ * stop; arrows move the selection, Shift+arrows extend it, Cmd/Ctrl+arrows
+ * move focus alone, Space toggles, and Cmd/Ctrl+A selects all. Hidden inputs
+ * submit every selected value under `name`. Requires `wireChoiceChips`.
+ */
+interface ChoiceChipsMultipleProps<Value extends string = string> {
+    multiple: true;
+    /** The selected values. Omit (or pass `[]`) for none. */
+    value?: readonly NoInfer<Value>[];
+    /** Validate the selected set in the app; a listbox has no native `required`. */
+    required?: never;
+}
 /** A group is named either by a string or by a visible heading's id. */
 type ChoiceChipsNaming = {
     label: string;
@@ -3420,31 +3543,34 @@ type ChoiceChipsNaming = {
     labelledBy: string;
     label?: never;
 };
-type ChoiceChipsProps<Value extends string = string> = ChoiceChipsCommonProps<Value> & (ChoiceChipsSingleProps<Value> | ChoiceChipsMultipleProps<Value>) & ChoiceChipsNaming;
+type ChoiceChipsProps<Value extends string = string> = ChoiceChipsCommonProps<Value> & (ChoiceChipsSingleProps<Value> | ChoiceChipsToggleProps<Value> | ChoiceChipsMultipleProps<Value>) & ChoiceChipsNaming;
+/** Which selection model a ChoiceChips group renders. */
+type ChoiceChipsSelectionMode = 'single' | 'toggle' | 'multiple';
 /**
- * A wrapping set of pill chips backed by native inputs. By default it is an
- * exclusive radio group: one Tab stop, arrow-key selection, and a real form
- * value. With `multiple` it is a checkbox group: each pill toggles on its own
- * and every checked value submits. Each choice may lead with a color swatch
- * (including a struck-through transparent swatch) or an icon.
+ * A wrapping set of pill chips. By default it is an exclusive radio group:
+ * one Tab stop, arrow-key selection, and a real form value. With
+ * `multiple: 'toggle'` it is a checkbox group: each pill toggles on its own.
+ * With `multiple: true` it is a multi-select listbox with modifier-key
+ * selection (wire it with `wireChoiceChips`). Each choice may lead with a
+ * color swatch (including a struck-through transparent swatch) or an icon.
  */
 declare function ChoiceChips<Value extends string>(props: ChoiceChipsProps<Value>): SafeHtml;
 
-export { ChoiceChips, type ChoiceChipsChoice, type ChoiceChipsMultipleProps, type ChoiceChipsNaming, type ChoiceChipsProps, type ChoiceChipsSingleProps, type ChoiceChipsSize, type ChoiceChipsSwatch };
+export { ChoiceChips, type ChoiceChipsChoice, type ChoiceChipsMultipleProps, type ChoiceChipsNaming, type ChoiceChipsPresentation, type ChoiceChipsProps, type ChoiceChipsSelectionMode, type ChoiceChipsSingleProps, type ChoiceChipsSize, type ChoiceChipsSwatch, type ChoiceChipsToggleProps };
 ```
 
-## `@kerfjs/ui/composer`
+## `@kerfjs/ui/message-composer`
 
 ```ts
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /**
- * Application `data-*` identity on the Composer root, such as `data-key`;
+ * Application `data-*` identity on the MessageComposer root, such as `data-key`;
  * the composer's own configuration attributes stay protected.
  */
-type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
-interface ComposerProps {
+type MessageComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface MessageComposerProps {
     /** The message field's accessible name, in title style ("Message"). */
     label: string;
     /** Native textarea `name`: the form field the message submits under. */
@@ -3468,14 +3594,22 @@ interface ComposerProps {
      * `minRows`.
      */
     maxRows?: number;
-    /** Quiet, sentence-style supporting copy at the start of the action row. */
+    /**
+     * Quiet, sentence-style supporting copy in the action row's leading zone,
+     * after any `leading` controls.
+     */
     hint?: string;
+    /**
+     * Controls at the start of the action row, such as an attach button or a
+     * model `Select`, normally in a `ToolbarControlGroup`.
+     */
+    leading?: KerfUiContent;
     /** Trailing controls in the action row, normally one brand Send button. */
-    actions: KerfUiContent;
+    trailing: KerfUiContent;
     /** Disable the field; the app disables its own actions. */
     disabled?: boolean;
     /**
-     * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
+     * Opt in to Enter-to-send: with `wireMessageComposers` running over an ancestor,
      * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
      * action, Shift+Enter inserts a newline, and an Enter that commits an IME
      * composition or meets an empty message does not send. The field announces
@@ -3483,7 +3617,7 @@ interface ComposerProps {
      */
     submitOnEnter?: boolean;
     /** Safe `data-*` identity on the root. */
-    rootAttributes?: ComposerRootAttributes;
+    rootAttributes?: MessageComposerRootAttributes;
     className?: string;
     /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
     slot?: string;
@@ -3491,45 +3625,63 @@ interface ComposerProps {
 /**
  * A chat or prompt composer: a raised frame whose border turns brand while
  * focus is within, holding a borderless message field that grows with its
- * content between `minRows` and `maxRows` lines, above an action row with an
- * optional hint and trailing actions. The app owns the value and sending;
- * `submitOnEnter` with `wireComposers` adds Enter-to-send.
+ * content between `minRows` and `maxRows` lines, above a compact `Toolbar`
+ * action row: optional `leading` controls and `hint`, then `trailing` actions. The app owns the value and sending;
+ * `submitOnEnter` with `wireMessageComposers` adds Enter-to-send.
  */
-declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
+declare function MessageComposer({ label, name, id, value, placeholder, minRows, maxRows, hint, leading, trailing, disabled, submitOnEnter, rootAttributes, className, slot, }: MessageComposerProps): kerfjs.SafeHtml;
 
-export { Composer, type ComposerProps, type ComposerRootAttributes };
+export { MessageComposer, type MessageComposerProps, type MessageComposerRootAttributes };
 ```
 
-## `@kerfjs/ui/wire-composers`
+## `@kerfjs/ui/wire-message-composers`
 
 ```ts
 type Root = HTMLElement | Document;
 /**
- * Enter-to-send for every `Composer` rendered with `submitOnEnter` below
+ * Enter-to-send for every `MessageComposer` rendered with `submitOnEnter` below
  * root. In its field, Enter (alone or with Cmd or Ctrl) activates the
  * composer's first trailing action, so a keyboard send runs the same
  * delegated handler as a click. Shift+Enter and Alt+Enter insert a newline.
  * Nothing is sent, and no newline is inserted, when the message is empty or
  * whitespace-only, the key is auto-repeating, or the first action is
- * disabled, loading, or `aria-disabled`. An Enter that commits an IME
+ * disabled, loading (a busy `Button` reports `aria-busy`), or
+ * `aria-disabled`. An Enter that commits an IME
  * composition (`isComposing`, keyCode 229, or between `compositionstart` and
  * `compositionend`) is left to the input method. Dispose with the owning
  * application.
  */
-declare function wireComposers(root: Root): () => void;
+declare function wireMessageComposers(root: Root): () => void;
 
-export { wireComposers };
+export { wireMessageComposers };
 ```
 
 ## `@kerfjs/ui/select`
 
 ```ts
 import { SafeHtml } from 'kerfjs';
+import { KerfCustomElement } from 'kerfjs/jsx-runtime';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { CssForegroundColor } from './css-values.js';
+import { CssForegroundColor, CssLength } from './css-values.js';
 import { LucideNode } from './lucide-icon.js';
 import 'lucide';
 
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            /** The Select root: a light-DOM form control defined by `select/register`. */
+            'kui-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                value?: string;
+                multiple?: boolean;
+                disabled?: boolean;
+                style?: string;
+                slot?: string;
+            };
+        }
+    }
+}
 interface SelectChoice<Value extends string = string> {
     value: Value;
     label: string;
@@ -3571,9 +3723,9 @@ interface SelectBaseProps<Value extends string = string> {
     name: string;
     choices: readonly SelectChoice<Value>[];
     className?: string;
-    /** Empty-value hint text shown in the closed control (the native select placeholder). */
+    /** Empty-value hint text shown in the closed control. */
     placeholderText?: string;
-    /** Supporting text shown below the control and associated with its combobox. */
+    /** Supporting text shown below the control and announced as its description. */
     hint?: string;
     disabled?: boolean;
     /** Match menu width to the trigger; default menus grow to content within viewport gutters. */
@@ -3585,6 +3737,13 @@ interface SelectBaseProps<Value extends string = string> {
     size?: SelectSize;
     /** Closed trigger width; omit to keep the presentation's default. */
     triggerWidth?: SelectTriggerWidth;
+    /**
+     * The widest the closed trigger grows, under any presentation; its value
+     * (or `renderSelected` content) ellipsizes inside it and the caret stays.
+     */
+    maxTriggerWidth?: CssLength;
+    /** The narrowest the closed trigger gets. */
+    minTriggerWidth?: CssLength;
     /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */
     caret?: boolean;
     /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
@@ -3609,8 +3768,8 @@ interface SelectSingleValueProps<Value extends string = string> {
 }
 /**
  * Any number of chosen values. The popup stays open while the person toggles
- * choices and closes on an outside click, Escape, or focus leaving; the closed
- * control summarizes the chosen labels in choice order.
+ * choices and closes on an outside press, Escape, or Tab; the closed control
+ * summarizes the chosen labels in choice order.
  */
 interface SelectMultipleLabelProps<Value extends string = string> {
     multiple: true;
@@ -3627,7 +3786,7 @@ interface SelectMultipleLabelProps<Value extends string = string> {
  * A multiple Select drawn as an icon-only toolbar trigger, such as a
  * "Filter by label" funnel. No single choice is selected, so the trigger shows
  * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen
- * a count badge sits beside it, and the combobox's accessible name ends with
+ * a count badge sits beside it, and the trigger's accessible name ends with
  * the chosen labels in choice order.
  */
 interface SelectMultipleIconProps<Value extends string = string> {
@@ -3833,27 +3992,27 @@ declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, tabIndex,
 export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape, ensureSunkenTexture };
 ```
 
-## `@kerfjs/ui/token-search-field`
+## `@kerfjs/ui/search-field`
 
 ```ts
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, l as TokenSearchTrailingActionAttributes, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-aYR0YAei.js';
+export { S as SearchField, a as SearchFieldEditorAttributes, d as SearchFieldProps, j as SearchFieldToken, k as SearchFieldTrailingAction, l as SearchFieldTrailingActionAttributes, m as SearchFieldValue, p as placeSearchFieldCaret, r as readSearchField } from './search-field-CrGTN5sa.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 ```
 
-## `@kerfjs/ui/wire-token-search-fields`
+## `@kerfjs/ui/wire-search-fields`
 
 ```ts
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-model-aYR0YAei.js';
+import { b as SearchFieldModel } from './search-field-CrGTN5sa.js';
 import './semantic-content-BbzjvSu9.js';
 
-interface TokenSearchSubmit {
+interface SearchFieldSubmit {
     id: string;
     editor: HTMLElement;
 }
-/** Reported to {@link WireTokenSearchFieldsOptions.onEdit} on every editor input. */
-interface TokenSearchEdit extends TokenSearchSubmit {
+/** Reported to {@link WireSearchFieldsOptions.onEdit} on every editor input. */
+interface SearchFieldEdit extends SearchFieldSubmit {
     /**
      * The `InputEvent` that mutated the editor — read `event.inputType` / `event.data`
      * to gate commit behavior (e.g. only parse a chip on whitespace-terminated input)
@@ -3862,7 +4021,7 @@ interface TokenSearchEdit extends TokenSearchSubmit {
     event: InputEvent;
 }
 /** Reported when adjacent-token keyboard deletion asks the app to drop a chip. */
-interface TokenSearchTokenRemoval {
+interface SearchFieldTokenRemoval {
     id: string;
     /** The `data-token-value` of the token the app should remove from its state. */
     value: string;
@@ -3873,11 +4032,11 @@ interface TokenSearchTokenRemoval {
 /**
  * Opt-in keyboard behavior for the atomic token chips. Off unless `keyboard` is
  * set; each piece defaults on once opted in. The helper never mutates app state:
- * a removal is reported through {@link TokenSearchKeyboardOptions.onRemoveToken}
+ * a removal is reported through {@link SearchFieldKeyboardOptions.onRemoveToken}
  * for the caller to apply, while caret movement past a chip is a pure ephemeral
  * mechanic the helper performs itself.
  */
-interface TokenSearchKeyboardBaseOptions {
+interface SearchFieldKeyboardBaseOptions {
     /**
      * From a collapsed caret with no selection, Backspace removes the token
      * immediately before it and Delete the token immediately after — reported via
@@ -3889,20 +4048,20 @@ interface TokenSearchKeyboardBaseOptions {
      */
     moveCaretPastToken?: boolean;
 }
-type TokenSearchKeyboardOptions = TokenSearchKeyboardBaseOptions & ({
+type SearchFieldKeyboardOptions = SearchFieldKeyboardBaseOptions & ({
     removeAdjacentToken?: true;
     /** Apply the reported removal to your controlled state, then re-render. */
-    onRemoveToken: (removal: TokenSearchTokenRemoval) => void;
+    onRemoveToken: (removal: SearchFieldTokenRemoval) => void;
 } | {
     removeAdjacentToken: false;
     onRemoveToken?: never;
 });
 /**
- * Managed collapsible behavior for the iconic TokenSearchField. Every piece is on
+ * Managed collapsible behavior for the iconic SearchField. Every piece is on
  * by default; disable a specific one to own it in the app. Provide `signals` to
  * drive app-owned `expanded` signals per field id instead of helper-created ones.
  */
-interface TokenSearchCollapsibleOptions {
+interface SearchFieldCollapsibleOptions {
     /** Expand the field and focus its editor when the iconic trigger is activated. Default: true. */
     expandOnActivate?: boolean;
     /** Collapse the field when focus leaves it while it is empty. Default: true. */
@@ -3915,7 +4074,7 @@ interface TokenSearchCollapsibleOptions {
      * Keep an empty field expanded when focus moves to a caller-owned surface
      * rendered outside the field — a suggestions dropdown, date picker, or help
      * popover shown beside it. Return true for any focus target that must NOT
-     * trigger collapse-on-empty-blur. An element carrying `data-token-search-keep-open`
+     * trigger collapse-on-empty-blur. An element carrying `data-search-field-keep-open`
      * (or any node inside one) is always exempt, so this predicate is only needed
      * for surfaces you cannot mark declaratively.
      */
@@ -3923,24 +4082,24 @@ interface TokenSearchCollapsibleOptions {
     /** App-owned `expanded` signals keyed by field id; adopted instead of helper-created. */
     signals?: Readonly<Record<string, Signal<boolean>>>;
 }
-interface WireTokenSearchFieldsOptions {
-    /** Optional automatic grammar/suggestion models, keyed by TokenSearchField id. */
-    models?: Readonly<Record<string, TokenSearchModel>>;
-    onSubmit?: (submission: TokenSearchSubmit) => void;
+interface WireSearchFieldsOptions {
+    /** Optional automatic grammar/suggestion models, keyed by SearchField id. */
+    models?: Readonly<Record<string, SearchFieldModel>>;
+    onSubmit?: (submission: SearchFieldSubmit) => void;
     /** Fired on every editor `input`, after the browser mutates it, so a caller can drop its own `input` listener. */
-    onEdit?: (edit: TokenSearchEdit) => void;
+    onEdit?: (edit: SearchFieldEdit) => void;
     /** Managed collapsible transient behavior. `true`/omitted = on with defaults; `false` = fully off. */
-    collapsible?: boolean | TokenSearchCollapsibleOptions;
+    collapsible?: boolean | SearchFieldCollapsibleOptions;
     /** Opt-in atomic-chip keyboard behavior (off by default). */
-    keyboard?: false | TokenSearchKeyboardOptions;
+    keyboard?: false | SearchFieldKeyboardOptions;
 }
 /**
- * The value returned from {@link wireTokenSearchFields}: call it (or `dispose()`) to
+ * The value returned from {@link wireSearchFields}: call it (or `dispose()`) to
  * tear down. When collapsible behavior is managed, it also exposes the transient
  * `expanded` state per field id so the app can read it in render, hand in its own
  * signal, or drive it imperatively.
  */
-interface TokenSearchFieldsHandle {
+interface SearchFieldsHandle {
     (): void;
     dispose(): void;
     /** The managed `expanded` signal for a field id (adopted or helper-created); undefined when unmanaged. */
@@ -3951,14 +4110,14 @@ interface TokenSearchFieldsHandle {
     close(id: string): void;
 }
 /**
- * Wire every TokenSearchField under `root`: submit on Enter, preserve the caret across
+ * Wire every SearchField under `root`: submit on Enter, preserve the caret across
  * controlled token deletion, and (by default) manage the collapsible field's transient
- * expand/collapse/focus. Returns a {@link TokenSearchFieldsHandle} — a disposer that also
+ * expand/collapse/focus. Returns a {@link SearchFieldsHandle} — a disposer that also
  * exposes the managed `expanded` state per field id.
  */
-declare function wireTokenSearchFields(root: HTMLElement, { models, onSubmit, onEdit, collapsible, keyboard, }?: WireTokenSearchFieldsOptions): TokenSearchFieldsHandle;
+declare function wireSearchFields(root: HTMLElement, { models, onSubmit, onEdit, collapsible, keyboard, }?: WireSearchFieldsOptions): SearchFieldsHandle;
 
-export { type TokenSearchCollapsibleOptions, type TokenSearchEdit, type TokenSearchFieldsHandle, type TokenSearchKeyboardOptions, type TokenSearchSubmit, type TokenSearchTokenRemoval, type WireTokenSearchFieldsOptions, wireTokenSearchFields };
+export { type SearchFieldCollapsibleOptions, type SearchFieldEdit, type SearchFieldKeyboardOptions, type SearchFieldSubmit, type SearchFieldTokenRemoval, type SearchFieldsHandle, type WireSearchFieldsOptions, wireSearchFields };
 ```
 
 ## `kerfjs/actions`
@@ -4060,9 +4219,17 @@ type BadgeRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-size'?: never;
     'data-has-icon'?: never;
     'data-truncate'?: never;
+    'data-placement'?: never;
 }>;
+/**
+ * `inline` (default) flows with its content; `corner` pins the badge to the
+ * top-trailing corner of the control it sits in (an icon-only `Button`, or a
+ * button in a `ToolbarControlGroup`), out of the pointer's way.
+ */
+type BadgePlacement = 'inline' | 'corner';
 interface BadgeCommonProps {
     tone?: SemanticTone;
+    placement?: BadgePlacement;
     /** Native tooltip text that explains the badge on hover. */
     title?: string;
     /** Safe `data-*` identity, such as a status band, on the badge root. */
@@ -4123,7 +4290,7 @@ type BadgeProps = BadgeTextProps | BadgeDotProps;
 /** Compact, non-interactive metadata whose tone, emphasis, and shape are configured by props. */
 declare function Badge(props: BadgeProps): SafeHtml;
 
-export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgeProps, type BadgeRootAttributes, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone, SemanticTone };
+export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgePlacement, type BadgeProps, type BadgeRootAttributes, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone, SemanticTone };
 ```
 
 ## `@kerfjs/ui/chip`
@@ -4249,14 +4416,22 @@ interface LucideIconProps {
     color?: CssForegroundColor;
     /** Flow with surrounding text instead of occupying a block. */
     inline?: boolean;
+    /** The icon's accessible name; without it the icon is decorative. */
     label?: string;
+    /**
+     * Hover text, as an SVG `<title>`: a status icon's explanation ("Session
+     * halted"). With `label`, the label stays the accessible name; alone, the
+     * title also names the icon. The whole icon box shows it, not just its
+     * strokes.
+     */
+    title?: string;
     /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
     size?: LucideIconSize;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, appearance, className, color, inline, label, size, slot, }: LucideIconProps): SafeHtml;
+declare function LucideIcon({ icon, name, appearance, className, color, inline, label, title, size, slot, }: LucideIconProps): SafeHtml;
 
 export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };
 ```
@@ -4423,6 +4598,27 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { CssLength } from './css-values.js';
 
+/** What asked an open DialogSurface to close. */
+type DialogCloseSource = 'close-button' | 'escape' | 'backdrop';
+/** The detail of a DialogSurface's cancelable `kui-request-close` event. */
+interface DialogRequestCloseDetail {
+    readonly source: DialogCloseSource;
+}
+/**
+ * Open a DialogSurface as a modal dialog: in the top layer, the rest of the
+ * page inert, focus on its `autofocus` element or else the panel. It plays
+ * its enter motion and, with the controller installed here, keeps its
+ * measured chrome, sheet height, and keyboard clearance across application
+ * re-renders. Opening an open dialog does nothing.
+ */
+declare function openDialog(dialog: HTMLDialogElement): void;
+/**
+ * Close an open DialogSurface after its exit motion. The application's own
+ * close is never refused: no `kui-request-close` is dispatched. The native
+ * `close` event fires once it has closed.
+ */
+declare function closeDialog(dialog: HTMLDialogElement): void;
+
 type DialogSurfaceSize = 'small' | 'medium' | 'large';
 /**
  * How the dialog is presented: `modal` (default) centered on the screen,
@@ -4433,7 +4629,7 @@ type DialogSurfaceSize = 'small' | 'medium' | 'large';
 type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';
 /**
  * How a bottom sheet appears or leaves: `slide` (default) moves the panel in
- * from, or out to, the bottom edge; `standard` keeps Web Awesome's
+ * from, or out to, the bottom edge; `standard` keeps the dialog's
  * scale-and-fade. Both honor `prefers-reduced-motion`.
  */
 type DialogSurfaceSheetMotion = 'slide' | 'standard';
@@ -4467,8 +4663,42 @@ type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
  * `data-key`; the surface's own configuration attributes stay protected.
  */
 type DialogSurfaceRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
-interface DialogSurfaceProps {
+/**
+ * The dialog's accessible name: its `label` text (also the default title), or
+ * the id of an element that names it, such as a `heading` ToolbarText.
+ */
+type DialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;
+interface DialogSurfaceOptions {
+    /** The dialog's id, for `openDialog(document.getElementById(id))`. */
+    id?: string;
+    /** The body content. */
     children: KerfUiContent;
+    /**
+     * Header title content in place of the `label` text, such as an xl
+     * `ToolbarText` with a description. The dialog keeps its `label` (or
+     * `labelledBy`) name.
+     */
+    heading?: KerfUiContent;
+    /** Controls before the close button in the header. */
+    headerActions?: KerfUiContent;
+    /** The footer, below the body (or floating over it); usually its buttons. */
+    footer?: KerfUiContent;
+    /**
+     * Render no header: no title and no close button. The content then owns its
+     * heading and a way to close (an element with `data-dialog-close`).
+     */
+    withoutHeader?: boolean;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** The close button's accessible name (default `Close`). */
+    closeLabel?: string;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
     /** Modal preferred width. Takes precedence over size, within the viewport cap. */
@@ -4553,8 +4783,16 @@ interface DialogSurfaceProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+/**
+ * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer
+ * chrome, sized and presented by its props. Render it closed, then open it
+ * with `openDialog()` and close it with `closeDialog()`, the close button, an
+ * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press
+ * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the
+ * floating header and footer measurement, the bottom sheet's keyboard
+ * clearance and grabber, and re-render resilience while open.
+ */
+declare function DialogSurface({ id, label, labelledBy, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
 /** Where a PopoverDialogSurface appears: the top layer, or in flow. */
 type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
 /** Application `data-*` metadata on the surface root. */
@@ -4606,8 +4844,8 @@ type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {
  * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,
  * viewport-bounded size, and single-child fill without application CSS.
  * Open it with a `popovertarget` control or `showPopover()`; it light
- * dismisses and leaves the page interactive. Use `DialogSurface` with
- * `wa-dialog` when the task must block the page.
+ * dismisses and leaves the page interactive. Use `DialogSurface` when the
+ * task must block the page.
  */
 declare function PopoverDialogSurface({ id, children, label, labelledBy, describedBy, presentation, size, preferredWidth, height, maxHeight, viewportGutter, bodyLayout, rootAttributes, className, slot, }: PopoverDialogSurfaceProps): kerfjs.SafeHtml;
 type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
@@ -4621,7 +4859,231 @@ interface PopupSurfaceProps {
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
 declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
 
-export { DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };
+export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };
+```
+
+## `@kerfjs/ui/list-detail-dialog`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+import { SplitViewListWidth } from './split-view.js';
+import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
+export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
+import './nav-stack-CU_0dKtI.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
+/** The list column: a secondary title, its own controls, and the list. */
+interface ListDetailDialogList {
+    /**
+     * The column's title, at the default toolbar size so it reads as pane
+     * identity beside the detail's primary title. On compact devices it titles
+     * the root view.
+     */
+    title: string;
+    /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */
+    toolbar?: KerfUiContent;
+    /** The list, usually a `List` of selectable `ListItem`s. */
+    content: KerfUiContent;
+    /** Content pinned below the list, such as an add control. */
+    footer?: KerfUiContent;
+    /**
+     * The column's width on roomy devices (default 280px, at most 40% of the
+     * dialog's width).
+     */
+    width?: SplitViewListWidth;
+}
+/** The detail column: the dialog's primary title, actions, and close control. */
+interface ListDetailDialogDetail {
+    /**
+     * The dialog's primary title: an xl heading at the top of the detail
+     * column on roomy devices, and the pushed view's title on compact devices.
+     */
+    title: string;
+    /** A short supporting line under the roomy title. */
+    description?: string;
+    /**
+     * Header controls before the close control, such as a
+     * `ToolbarControlGroup`. Primary record actions usually go in `footer`.
+     */
+    actions?: KerfUiContent;
+    /** The selected item's detail. */
+    content: KerfUiContent;
+    /** Content pinned below the detail, usually its buttons. */
+    footer?: KerfUiContent;
+}
+/**
+ * Application `data-*` identity on the dialog root, such as `data-key`; the
+ * dialog's own configuration attributes stay protected.
+ */
+type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;
+interface ListDetailDialogProps {
+    /**
+     * The dialog's id, for `openDialog(document.getElementById(id))`. Also
+     * prefixes the ids of the split and the detail title.
+     */
+    id: string;
+    /** The dialog's accessible name. */
+    label: string;
+    list: ListDetailDialogList;
+    detail: ListDetailDialogDetail;
+    /**
+     * One pane at a time: derive from `deviceClass().value.compact`. The dialog
+     * fills the screen and drills from the list into the detail as a
+     * `NavStack`; every view keeps the close control.
+     */
+    compact?: boolean;
+    /** On compact devices, whether the detail is pushed over the list. */
+    detailActive?: boolean;
+    /** The compact back control's accessible name (default `Back`). */
+    backLabel?: string;
+    /** The close control's accessible name (default `Close`). */
+    closeLabel?: string;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** Roomy preferred width preset (default `large`). */
+    size?: DialogSurfaceSize;
+    /** Roomy preferred width; takes precedence over `size`. */
+    preferredWidth?: CssLength;
+    /** Roomy definite height (default 560px), bounded by the viewport. */
+    height?: DialogSurfaceHeight;
+    /** Roomy height cap in place of a definite height. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Roomy edge clearance from the viewport. */
+    viewportGutter?: CssLength;
+    rootAttributes?: ListDetailDialogRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A list-detail dialog: a modal whose list column and detail column each run
+ * its full height. The list column carries a secondary title and its own
+ * controls; the detail column carries the dialog's primary title, its
+ * actions, and the close control, so the divider between them runs from top
+ * to bottom. On compact devices it fills the screen and becomes a `NavStack`
+ * that drills from the list into the detail. Open it with `openDialog()`;
+ * the app owns the selection and, on compact devices, `detailActive` (the
+ * stack's back control dispatches `nav-back`). Built from `DialogSurface`,
+ * `SplitView`, and `Pane`.
+ */
+declare function ListDetailDialog({ id, label, list, detail, compact, detailActive, backLabel, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, rootAttributes, className, slot, }: ListDetailDialogProps): kerfjs.SafeHtml;
+
+export { ListDetailDialog, type ListDetailDialogDetail, type ListDetailDialogList, type ListDetailDialogProps, type ListDetailDialogRootAttributes };
+```
+
+## `@kerfjs/ui/workbench-dialog`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
+import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
+export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
+import './nav-stack-CU_0dKtI.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
+/**
+ * Application `data-*` identity on the dialog root, such as `data-key`; the
+ * dialog's own configuration attributes stay protected.
+ */
+type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;
+interface WorkbenchDialogProps {
+    /**
+     * The dialog's id, for `openDialog(document.getElementById(id))`. The
+     * Workbench inside is `<id>-workbench`, so its rails are
+     * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.
+     */
+    id: string;
+    /** The dialog's accessible name. */
+    label: string;
+    /** The dialog's primary title: an xl heading in the work area's toolbar. */
+    title: string;
+    /** A short supporting line under the title. */
+    description?: string;
+    /** Groups after the title in the work area's toolbar. */
+    leading?: KerfUiContent;
+    /** Header controls before the close control, such as a `ToolbarControlGroup`. */
+    actions?: KerfUiContent;
+    /** The work area. */
+    main: KerfUiContent;
+    /** Fixed content over the work area's bottom toolbar, such as a status line. */
+    mainFooter?: KerfUiContent;
+    /** The work area's bottom toolbar, usually the dialog's buttons. */
+    mainBottomToolbar?: WorkbenchMainBottomToolbar;
+    /**
+     * Side rails with their own toolbars. On compact devices each presents as
+     * an overlay over the work area; the app starts it collapsed and its
+     * `toolbar.toggle` shows it.
+     */
+    leftRail?: WorkbenchPanel;
+    rightRail?: WorkbenchPanel;
+    /** A bottom drawer under the work area. */
+    bottomDrawer?: WorkbenchPanel;
+    /**
+     * Fill the screen with the rails as overlays: derive from
+     * `deviceClass().value.compact`.
+     */
+    compact?: boolean;
+    /** The close control's accessible name (default `Close`). */
+    closeLabel?: string;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** Roomy preferred width preset (default `large`). */
+    size?: DialogSurfaceSize;
+    /** Roomy preferred width; takes precedence over `size`. */
+    preferredWidth?: CssLength;
+    /** Roomy definite height (default 560px), bounded by the viewport. */
+    height?: DialogSurfaceHeight;
+    /** Roomy height cap in place of a definite height. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Roomy edge clearance from the viewport. */
+    viewportGutter?: CssLength;
+    /** Minimum work-area width beside inline rails, in px (Workbench default 320). */
+    mainMinSize?: number;
+    rootAttributes?: WorkbenchDialogRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A workbench dialog: a modal whose body is a `Workbench`. The work area's
+ * toolbar carries the dialog's primary title, its actions, and the close
+ * control; side rails keep their own toolbars and run the dialog's full
+ * height. On compact devices it fills the screen and its rails become
+ * overlays over the work area, shown by their toolbar toggles, so the work
+ * area keeps its width. Open it with `openDialog()`; the app owns each
+ * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on
+ * Escape or a press outside it before the dialog sees the Escape. Built from
+ * `DialogSurface` and `Workbench`.
+ */
+declare function WorkbenchDialog({ id, label, title, description, leading, actions, main, mainFooter, mainBottomToolbar, leftRail, rightRail, bottomDrawer, compact, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, mainMinSize, rootAttributes, className, slot, }: WorkbenchDialogProps): kerfjs.SafeHtml;
+
+export { WorkbenchDialog, type WorkbenchDialogProps, type WorkbenchDialogRootAttributes };
 ```
 
 ## `@kerfjs/ui/text`
@@ -4643,7 +5105,12 @@ declare function FieldLabel({ children, class: classValue, className, ...attribu
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 type TextTone = 'default' | 'quiet' | 'danger';
-type TextSize = 'compact' | 'default' | 'large' | 'xlarge';
+/**
+ * `compact` (xs), `default` (the element's own size), `medium` (the 16px
+ * body size, for a heading such as an in-list group title), `large`, or
+ * `xlarge`.
+ */
+type TextSize = 'compact' | 'default' | 'medium' | 'large' | 'xlarge';
 type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
@@ -5069,57 +5536,794 @@ declare function Spacer({ flex, width, height, className, slot, }: SpacerProps):
 export { CssLength, Spacer, type SpacerProps, UiSpaceName };
 ```
 
-## `@kerfjs/ui/token-search-model`
+## `@kerfjs/ui/selection`
 
 ```ts
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, m as createTokenSearchModel } from './token-search-model-aYR0YAei.js';
-import 'kerfjs';
-import './semantic-content-BbzjvSu9.js';
+/**
+ * What a pointer or key activation does to a multi-selection:
+ * - `replace`: select only the target (a plain click or Enter);
+ * - `toggle`: add or remove the target, keeping the rest (Cmd on Apple
+ *   platforms, Ctrl elsewhere);
+ * - `extend`: select the range from the anchor to the target (Shift).
+ */
+type SelectionGesture = 'replace' | 'toggle' | 'extend';
+/** The modifier state of a `MouseEvent` or `KeyboardEvent`. */
+interface SelectionModifiers {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}
+/** True on macOS, iOS, and iPadOS, where Cmd (not Ctrl) toggles one item. */
+declare function isApplePlatform(navigatorLike?: Pick<Navigator, 'platform' | 'userAgent'> | undefined): boolean;
+/**
+ * Map an activation's modifiers to a {@link SelectionGesture}, normalized for
+ * the host platform: Shift extends; Cmd on Apple platforms, Ctrl elsewhere,
+ * toggles; anything else replaces.
+ */
+declare function selectionGesture(modifiers: SelectionModifiers, apple?: boolean): SelectionGesture;
+interface ApplySelectionOptions<Id> {
+    /** Every selectable id, in display order (leave out disabled items). */
+    readonly items: readonly Id[];
+    /** The current selection. */
+    readonly selected: readonly Id[];
+    /**
+     * The last replaced or toggled item; a Shift range starts here. Without
+     * one, the range starts at the first selected item, then at the target.
+     */
+    readonly anchor?: Id;
+    /** The activated item. */
+    readonly target: Id;
+    readonly gesture: SelectionGesture;
+}
+interface SelectionResult<Id> {
+    /** The new selection, in display order. */
+    readonly selected: Id[];
+    /** The anchor for the next Shift range. */
+    readonly anchor: Id;
+}
+/**
+ * Apply one selection gesture to a multi-selection, the conventional desktop
+ * list model: `replace` selects only the target, `toggle` flips it and keeps
+ * the rest, and `extend` selects the range from the anchor (the first
+ * selected item when there is none, else the target) to the target. The anchor moves to the target on
+ * `replace` and `toggle` and stays put on `extend`, so successive Shift
+ * activations pivot around one item. A target missing from `items` (such as a
+ * disabled item) leaves the selection unchanged.
+ */
+declare function applySelection<Id>({ items, selected, anchor, target, gesture, }: ApplySelectionOptions<Id>): SelectionResult<Id>;
+
+export { type ApplySelectionOptions, type SelectionGesture, type SelectionModifiers, type SelectionResult, applySelection, isApplePlatform, selectionGesture };
 ```
 
-## `@kerfjs/ui/combobox`
+## `@kerfjs/ui/disclosure`
 
 ```ts
 import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-/** A suggestion: a plain string, or a value with a distinct visible label. */
-type ComboboxSuggestion = string | {
-    value: string;
-    label: string;
-};
-interface ComboboxProps {
-    /** Unique id; it also identifies the field in `wireComboboxes` reports. */
-    id: string;
-    /** Visible field label. */
-    label: string;
-    /** Suggestions to filter as the person types. */
-    suggestions: readonly ComboboxSuggestion[];
-    /** Initial text; the field owns its text while the person types. */
-    value?: string;
-    placeholder?: string;
-    /** Optional hint below the field, such as "Press Enter to add". */
-    hint?: string;
-    /** Form field name. */
+/**
+ * The Disclosure's surface: `plain` (default) on the surrounding surface,
+ * `framed` with the standard neutral border, or `sunken` on the lowered,
+ * textured work surface with a border.
+ */
+type DisclosureAppearance = 'plain' | 'framed' | 'sunken';
+/**
+ * Application `data-*` identity on the `<details>` root, such as `data-key`;
+ * the Disclosure's own configuration attributes stay protected.
+ */
+type DisclosureRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface DisclosureProps {
+    /** The always-visible summary: a short title for the hidden content. */
+    title: KerfUiContent | string;
+    /** A quiet line after the title in the summary, such as a count. */
+    detail?: KerfUiContent | string;
+    /** The content shown while open. */
+    children: KerfUiContent | string;
+    /**
+     * Render it open. The open state belongs to the native `<details>` once it
+     * is on the page: a person toggles it, a re-render that passes `open` opens
+     * it, and a re-render never closes it (kerf's morph leaves a `<details>`
+     * element's live `open` alone). Close it from code with `element.open = false`.
+     */
+    open?: boolean;
+    /**
+     * An exclusive group: Disclosures sharing a `name` behave as an accordion,
+     * where opening one closes the others (the native `<details name>`).
+     */
     name?: string;
+    appearance?: DisclosureAppearance;
     /**
-     * Offer to create the typed text when it matches no suggestion; the option
-     * reads `createLabel` with `{value}` replaced. Omit to only allow
-     * suggestions. Default `Create “{value}”`.
+     * A `data-action` value on the `<details>` root, for a delegated listener of
+     * the native `toggle` event (it does not bubble: listen in the capture phase,
+     * for example with `delegateCapture`). `event.newState` is `open` or `closed`.
      */
-    createLabel?: string | false;
-    disabled?: boolean;
+    toggleAction?: string;
+    id?: string;
+    rootAttributes?: DisclosureRootAttributes;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
- * A free-text field with a filtered suggestion list that can also create a new
- * value: the ARIA combobox pattern on a native input with the themed Web
- * Awesome field chrome. `wireComboboxes` filters, moves the active option,
- * and reports commits (Enter, comma, or a click). Use `Select` when only
- * existing values are allowed and nothing is typed.
+ * Content a person shows and hides under a summary row: a native `<details>`
+ * with a `<summary>` that carries a `DisclosureArrow` and the title, on the
+ * shared content-item geometry (8px inline margin, a 1px border, 8px
+ * padding, the rounded radius). Keyboard and screen-reader behavior is the
+ * platform's: the summary is a button that Enter and Space toggle, and it
+ * reports its expanded state. Disclosures sharing a `name` form an accordion.
  */
-declare function Combobox({ id, label, suggestions, value, placeholder, hint, name, createLabel, disabled, className, }: ComboboxProps): kerfjs.SafeHtml;
+declare function Disclosure({ title, detail, children, open, name, appearance, toggleAction, id, rootAttributes, className, slot, }: DisclosureProps): kerfjs.SafeHtml;
 
-export { Combobox, type ComboboxProps, type ComboboxSuggestion };
+export { Disclosure, type DisclosureAppearance, type DisclosureProps, type DisclosureRootAttributes };
+```
+
+## `@kerfjs/ui/wire-choice-chips`
+
+```ts
+/** The selected values of a `multiple: true` ChoiceChips group, in choice order. */
+declare function readChoiceChips(group: Element): string[];
+/**
+ * Give every `multiple: true` ChoiceChips group under `root` its listbox
+ * behavior: a click selects one chip, Cmd (Apple platforms) or Ctrl
+ * (elsewhere) toggles one, and Shift extends a range from the last plain or
+ * toggled chip. On the keyboard the group is one Tab stop: arrows, Home, and
+ * End move the selection, Shift with them extends it, Cmd/Ctrl with them
+ * moves focus alone, Space toggles the focused chip (Shift+Space extends to
+ * it), and Cmd/Ctrl+A selects every chip. Disabled chips keep their state.
+ * Each change updates `aria-selected` and the hidden form inputs, then fires
+ * a bubbling `change` on the group, whose `data-action` is the group's
+ * `action`; read the new set with `readChoiceChips`. Returns a disposer.
+ */
+declare function wireChoiceChips(root: HTMLElement | Document): () => void;
+
+export { readChoiceChips, wireChoiceChips };
+```
+
+## `@kerfjs/ui/color-swatches`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { CssColor } from './css-values.js';
+
+/** `default` is a 24px swatch; `compact` is 20px. */
+type ColorSwatchesSize = 'default' | 'compact';
+/** One color in the palette. */
+interface ColorSwatch {
+    /** The submitted value, such as `#0a84ff` or `blue`. */
+    value: string;
+    /** The color's name: the swatch's accessible name and its hover hint. */
+    label: string;
+    /**
+     * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or
+     * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the
+     * no-color swatch, drawn outlined and struck through.
+     */
+    color: CssColor | 'transparent';
+}
+/** Application `data-*` metadata; the group's own markers stay protected. */
+type ColorSwatchesRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorSwatchesProps = {
+    /** The radio group name the chosen value submits under. */
+    name: string;
+    swatches: readonly ColorSwatch[];
+    /** The chosen swatch's value. */
+    value?: string;
+    size?: ColorSwatchesSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on each radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The group's id. */
+    id?: string;
+    className?: string;
+    rootAttributes?: ColorSwatchesRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A fixed palette: a group of round color swatches with no visible text, one
+ * of which is chosen. It is a native radio group, so arrow keys move the
+ * choice, Tab reaches it once, and the chosen value submits under `name`.
+ * Each swatch is named by its color's label (also its hover hint), and the
+ * chosen one wears a ring that does not rely on its hue. A `'transparent'`
+ * swatch offers "no color".
+ */
+declare function ColorSwatches({ name, swatches, value, label, ariaLabel, size, disabled, action, form, id, className, rootAttributes, slot, }: ColorSwatchesProps): kerfjs.SafeHtml;
+
+export { type ColorSwatch, ColorSwatches, type ColorSwatchesProps, type ColorSwatchesRootAttributes, type ColorSwatchesSize };
+```
+
+## `@kerfjs/ui/color-picker`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { ColorSwatch } from './color-swatches.js';
+import './css-values.js';
+
+/** Hue 0–360, saturation and value (brightness) 0–1, and alpha 0–1. */
+interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+
+/** The channel fields the picker shows: RGB, HSL, HSB (HSV), or one gray level. */
+type ColorPickerMode = 'rgb' | 'hsl' | 'hsb' | 'gray';
+/** A titled group of app-owned colors, such as "Document Colors". */
+interface ColorPickerSamples {
+    title: string;
+    swatches: readonly ColorSwatch[];
+}
+/** Application `data-*` metadata; the picker's own markers stay protected. */
+type ColorPickerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/** The delegated action every preset and sample swatch carries. */
+declare const COLOR_PICKER_SWATCH_ACTION = "kui-color-picker-swatch";
+interface ColorPickerProps {
+    /** The picker's id; it also prefixes its inner ids. */
+    id: string;
+    /** The picker's accessible name. */
+    label: string;
+    /**
+     * The color, as CSS color text (`#rrggbb[aa]`, `rgb()`, `hsl()`); invalid
+     * text shows black. The picker reports `#rrggbb`, or `#rrggbbaa` below
+     * full opacity.
+     */
+    value: string;
+    /** The channel fields shown (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity: an alpha slider and field (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /**
+     * Offer a button that samples a color from the screen, where the browser
+     * provides the EyeDropper API (default true; hidden elsewhere).
+     */
+    eyedropper?: boolean;
+    /** A preset row of swatches under the controls. */
+    presets?: readonly ColorSwatch[];
+    /** Titled groups of app-owned colors under the presets. */
+    samples?: readonly ColorPickerSamples[];
+    /**
+     * A `data-action` for an "Add to Samples" button in the controls row; the
+     * app reads the picker's current value and adds it to its samples.
+     */
+    addSampleAction?: string;
+    disabled?: boolean;
+    className?: string;
+    rootAttributes?: ColorPickerRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** The labels, accessible names, and maximum of each channel field per mode. */
+declare const COLOR_PICKER_CHANNELS: Record<ColorPickerMode, readonly {
+    short: string;
+    name: string;
+    max: number;
+}[]>;
+/** The rounded channel values a mode shows for an HSV color. */
+declare function colorPickerChannels(mode: ColorPickerMode, hsv: Hsva): number[];
+/** The area's spoken value. */
+declare function colorPickerAreaText(hsv: Hsva): string;
+/** The CSS custom properties that place the thumbs and paint the tracks. */
+declare function colorPickerStyle(hsv: Hsva): string;
+/**
+ * A full color picker panel: a saturation and brightness area, a hue slider,
+ * an optional opacity slider on a checkerboard, a color-model menu (RGB, HSL,
+ * HSB, Grayscale) with its channel fields, a hex field (8 digits below full
+ * opacity) and an opacity field, an optional screen sampler (EyeDropper), and
+ * optional preset and sample swatches. The controlled `value` renders it;
+ * wire `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` to make it
+ * interactive. The interactive surface belongs to that wiring after the first
+ * render, so a drag never fights a re-render; a new `value` from the app
+ * resynchronizes it.
+ */
+declare function ColorPicker({ id, label, value, mode, alpha, name, form, eyedropper, presets, samples, addSampleAction, disabled, className, rootAttributes, slot, }: ColorPickerProps): kerfjs.SafeHtml;
+
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, colorPickerAreaText, colorPickerChannels, colorPickerStyle };
+```
+
+## `@kerfjs/ui/color-field`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { ColorPickerMode } from './color-picker.js';
+import './color-swatches.js';
+import './css-values.js';
+
+/** `default` matches TextField's box; `compact` its compact size. */
+type ColorFieldSize = 'default' | 'compact';
+/** Application `data-*` metadata; the field's own markers stay protected. */
+type ColorFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorFieldProps = {
+    /** The trigger's id; it also prefixes the hint and error ids. */
+    id: string;
+    /** CSS color text; invalid text shows black. */
+    value: string;
+    /** The picker's model when it opens (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity in the picker (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /** Supporting text below the field, also its description. */
+    hint?: string;
+    /** An error below the field that marks it invalid. */
+    error?: string;
+    size?: ColorFieldSize;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    rootAttributes?: ColorFieldRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A form field for a color: a label above a trigger that shows the current
+ * color as a swatch and its hex value. Pressing it opens a ColorPicker in an
+ * AnchoredSurface anchored to the field; Escape or a press outside closes it
+ * and focus returns to the trigger. Wire `wireColorFields` from
+ * `@kerfjs/ui/wire-color-fields`; it previews edits on the trigger, reports
+ * them, and the app re-renders with the new value.
+ */
+declare function ColorField({ id, value, mode, alpha, name, form, label, ariaLabel, hint, error, size, disabled, required, className, rootAttributes, slot, }: ColorFieldProps): kerfjs.SafeHtml;
+
+export { ColorField, type ColorFieldProps, type ColorFieldRootAttributes, type ColorFieldSize };
+```
+
+## `@kerfjs/ui/search-field-model`
+
+```ts
+export { b as SearchFieldModel, c as SearchFieldModelOptions, e as SearchFieldResolvedToken, f as SearchFieldRule, g as SearchFieldState, h as SearchFieldStructure, i as SearchFieldSuggestion, n as createSearchFieldModel } from './search-field-CrGTN5sa.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
+```
+
+## `@kerfjs/ui/tag-field`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** The delegated actions a TagField's controls carry; `wireTagFields` handles them. */
+declare const tagFieldActions: {
+    readonly edit: "edit-tag-field-tag";
+    readonly remove: "remove-tag-field-tag";
+    readonly clear: "clear-tag-field";
+};
+interface TagFieldProps {
+    /** The field's id: the editor's identity and the prefix of its label and hint ids. */
+    id: string;
+    /** The visible label, which also names the field. */
+    label: string;
+    /** The tags, in order. Each is submitted as its own `name` value. */
+    tags: readonly string[];
+    /** The form field name each tag submits under. */
+    name?: string;
+    /** Associate the hidden inputs with a form outside their ancestor chain. */
+    form?: string;
+    /** Placeholder while the field is empty (default `Add tag…`). */
+    placeholder?: string;
+    /** Placeholder after the last tag (default `Add another…`). */
+    morePlaceholder?: string;
+    /** Supporting text below the field, also its description. */
+    hint?: string;
+    /** An error that replaces the hint and marks the field invalid. */
+    error?: string;
+    /** The most tags it accepts; `wireTagFields` refuses more. */
+    max?: number;
+    required?: boolean;
+    disabled?: boolean;
+    /** The leading glyph (default a Lucide `tag`). */
+    icon?: KerfUiContent;
+    /** The clear button's accessible name (default `Clear Tags`). */
+    clearLabel?: string;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A form field that collects short values as removable tags: SearchField's
+ * token editor in its `form-field` presentation, with each tag a chip and a
+ * hidden input that submits it under `name`. Typing then Enter (or a
+ * delimiter such as a comma) adds a tag; Backspace at the start removes the
+ * last one; each chip's label edits it and its × removes it. The app owns
+ * the tag list: wire `wireTagFields` from `@kerfjs/ui/wire-tag-fields` and
+ * re-render with the list its `onChange` reports.
+ */
+declare function TagField({ id, label, tags, name, form, placeholder, morePlaceholder, hint, error, max, required, disabled, icon, clearLabel, className, slot, }: TagFieldProps): kerfjs.SafeHtml;
+
+export { TagField, type TagFieldProps, tagFieldActions };
+```
+
+## `@kerfjs/ui/combobox`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+/** A suggestion: a plain string, or a value with a distinct visible label. */
+type ComboboxSuggestion = string | {
+    value: string;
+    label: string;
+};
+interface ComboboxProps {
+    /** Unique id; it also identifies the field in `wireComboboxes` reports. */
+    id: string;
+    /** Visible field label. */
+    label: string;
+    /** Suggestions to filter as the person types. */
+    suggestions: readonly ComboboxSuggestion[];
+    /** Initial text; the field owns its text while the person types. */
+    value?: string;
+    placeholder?: string;
+    /** Optional hint below the field, such as "Press Enter to add". */
+    hint?: string;
+    /** Form field name. */
+    name?: string;
+    /**
+     * Offer to create the typed text when it matches no suggestion; the option
+     * reads `createLabel` with `{value}` replaced. Omit to only allow
+     * suggestions. Default `Create “{value}”`.
+     */
+    createLabel?: string | false;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A free-text field with a filtered suggestion list that can also create a new
+ * value: the ARIA combobox pattern on a native input with the themed Web
+ * Awesome field chrome. `wireComboboxes` filters, moves the active option,
+ * and reports commits (Enter, comma, or a click). Use `Select` when only
+ * existing values are allowed and nothing is typed.
+ */
+declare function Combobox({ id, label, suggestions, value, placeholder, hint, name, createLabel, disabled, className, }: ComboboxProps): kerfjs.SafeHtml;
+
+export { Combobox, type ComboboxProps, type ComboboxSuggestion };
+```
+
+## `@kerfjs/ui/text-field`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** `default` is the 44px control height; `compact` is 33px with smaller text. */
+type TextFieldSize = 'default' | 'compact';
+/** The kinds of single-line value a TextField takes. */
+type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number';
+/** Application `data-*` metadata; the TextField's own markers stay protected. */
+type TextFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/**
+ * The field's accessible name: a visible `label`, or `ariaLabel` when the
+ * surrounding content already names it.
+ */
+type TextFieldName = {
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+};
+type TextFieldProps = TextFieldName & TextFieldOptions;
+interface TextFieldOptions {
+    /** The controlled value. */
+    value?: string;
+    name?: string;
+    placeholder?: string;
+    /** Supporting text below the field, also its accessible description. */
+    hint?: string;
+    /**
+     * A validation message: shown below the field in the danger color, added
+     * to its description, and marking it `aria-invalid`.
+     */
+    error?: string;
+    size?: TextFieldSize;
+    /** A leading decorative icon, such as a `LucideIcon` (single-line only). */
+    icon?: KerfUiContent;
+    /**
+     * A clear button while the field has a value (single-line only). Needs
+     * `wireTextFields(root)`, which clears the field and announces `input`.
+     */
+    clearable?: boolean;
+    /** The clear button's accessible name (default `Clear`). */
+    clearLabel?: string;
+    /** The most characters the field accepts (native `maxlength`). */
+    maxLength?: number;
+    /**
+     * Show a live `count / maxLength` below the field. Needs `maxLength` and
+     * `wireTextFields(root)`, which updates it as people type.
+     */
+    showCount?: boolean;
+    /** Single-line value kind (default `text`). */
+    type?: TextFieldType;
+    /** A multi-line field: a `<textarea>`. */
+    multiline?: boolean;
+    /** A multi-line field's height in lines (default 3). */
+    rows?: number;
+    /**
+     * Grow a multi-line field with its content from `rows` up to this many
+     * lines, then scroll.
+     */
+    maxRows?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autocomplete?: string;
+    /** The input's id, for an external label or form. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: TextFieldRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A text input with its label above, an optional leading icon and clear
+ * button, and supporting or error text below, at the 44px control height or
+ * compact. `multiline` makes it a textarea that can grow with its content.
+ * The whole field is one `<label>`, so clicking anywhere on it focuses the
+ * input; the input is named by `label` (or `ariaLabel`) directly.
+ */
+declare function TextField({ label, ariaLabel, value, name, placeholder, hint, error, size, icon, clearable, clearLabel, maxLength, showCount, type, multiline, rows, maxRows, disabled, readOnly, required, autocomplete, id, className, rootAttributes, slot, }: TextFieldProps): kerfjs.SafeHtml;
+
+export { TextField, type TextFieldName, type TextFieldOptions, type TextFieldProps, type TextFieldRootAttributes, type TextFieldSize, type TextFieldType };
+```
+
+## `@kerfjs/ui/checkbox`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+/** `default` is a 20px box beside 16px text; `compact` an 18px box and 14px text. */
+type CheckboxSize = 'default' | 'compact';
+/** Application `data-*` metadata; the Checkbox's own markers stay protected. */
+type CheckboxRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface CheckboxProps {
+    /** The visible label, which is also the checkbox's accessible name. */
+    label: string;
+    checked?: boolean;
+    /**
+     * A mixed state, such as a parent of partly checked children. Needs
+     * `wireCheckboxes(root)`, which sets the native `indeterminate` property.
+     */
+    indeterminate?: boolean;
+    name?: string;
+    /** The value submitted while checked (native default `on`). */
+    value?: string;
+    /** Supporting text below the label, also the checkbox's description. */
+    hint?: string;
+    /** A validation message: shown in the danger color and marking it invalid. */
+    error?: string;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    required?: boolean;
+    /** Delegated `data-action` on the input; listen for `change`. */
+    action?: string;
+    /** Associate the input with a form outside its ancestor chain. */
+    form?: string;
+    /** The input's id. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: CheckboxRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A native checkbox drawn as a Kerf box beside its label, with optional hint
+ * and error text aligned under the label, a mixed (indeterminate) state, and
+ * native form participation.
+ */
+declare function Checkbox({ label, checked, indeterminate, name, value, hint, error, size, disabled, required, action, form, id, className, rootAttributes, slot, }: CheckboxProps): kerfjs.SafeHtml;
+
+export { Checkbox, type CheckboxProps, type CheckboxRootAttributes, type CheckboxSize };
+```
+
+## `@kerfjs/ui/radio-group`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+/** `default` is a 20px circle beside 16px text; `compact` 18px and 14px. */
+type RadioGroupSize = 'default' | 'compact';
+/** `vertical` stacks the choices; `horizontal` lines them up and wraps. */
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+/** Application `data-*` metadata; the RadioGroup's own markers stay protected. */
+type RadioGroupRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface RadioGroupChoice<Value extends string = string> {
+    value: Value;
+    /** Visible label; it is also the radio's accessible name. */
+    label: string;
+    /** Supporting text under this choice's label, also its description. */
+    hint?: string;
+    disabled?: boolean;
+}
+/** A group is named by a visible `label` (its legend) or by `ariaLabel`. */
+type RadioGroupName = {
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+};
+interface RadioGroupOptions<Value extends string = string> {
+    /** Native input `name`: the form field the selected value submits under. */
+    name: string;
+    choices: readonly RadioGroupChoice<Value>[];
+    /** The selected value. Omit for no selection. */
+    value?: NoInfer<Value>;
+    /** Supporting text below the choices, also the group's description. */
+    hint?: string;
+    /** A validation message: shown in the danger color and marking it invalid. */
+    error?: string;
+    size?: RadioGroupSize;
+    orientation?: RadioGroupOrientation;
+    /** Require a selection for native form validation. */
+    required?: boolean;
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Delegated `data-action` on every radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The fieldset's id. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: RadioGroupRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type RadioGroupProps<Value extends string = string> = RadioGroupName & RadioGroupOptions<Value>;
+/**
+ * One exclusive choice among a few visible options: a native fieldset of
+ * radios, each drawn as a Kerf circle beside its label, with the group label
+ * above and hint and error text below. The browser owns the interaction: one
+ * Tab stop, arrow keys move and select, and the checked value submits.
+ */
+declare function RadioGroup<Value extends string>({ label, ariaLabel, name, choices, value, hint, error, size, orientation, required, disabled, action, form, id, className, rootAttributes, slot, }: RadioGroupProps<Value>): kerfjs.SafeHtml;
+
+export { RadioGroup, type RadioGroupChoice, type RadioGroupName, type RadioGroupOptions, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupRootAttributes, type RadioGroupSize };
+```
+
+## `@kerfjs/ui/switch`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+/** `default` is a 35×20 track beside 16px text; `compact` 31.5×18 and 14px. */
+type SwitchSize = 'default' | 'compact';
+/** Application `data-*` metadata; the Switch's own markers stay protected. */
+type SwitchRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface SwitchProps {
+    /** The visible label, which is also the switch's accessible name. */
+    label: string;
+    /** Whether the setting is on. */
+    checked?: boolean;
+    name?: string;
+    /** The value submitted while on (native default `on`). */
+    value?: string;
+    /** Supporting text below the label, also the switch's description. */
+    hint?: string;
+    size?: SwitchSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on the input; listen for `change`. */
+    action?: string;
+    /** Associate the input with a form outside its ancestor chain. */
+    form?: string;
+    /** The input's id. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: SwitchRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * An on/off setting that applies immediately: a native checkbox with
+ * `role="switch"`, drawn as a track and thumb beside its label, with an
+ * optional hint aligned under the label.
+ */
+declare function Switch({ label, checked, name, value, hint, size, disabled, action, form, id, className, rootAttributes, slot, }: SwitchProps): kerfjs.SafeHtml;
+
+export { Switch, type SwitchProps, type SwitchRootAttributes, type SwitchSize };
+```
+
+## `@kerfjs/ui/slider`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { CssLength } from './css-values.js';
+
+/** `default` is a 4px track with a 20px thumb at 16px text; `compact` 3px, 16px, and 14px. */
+type SliderSize = 'default' | 'compact';
+/** `horizontal` (default), or `vertical` with its minimum at the bottom. */
+type SliderOrientation = 'horizontal' | 'vertical';
+/**
+ * A labeled stop under the track: a value and the text shown for it. The
+ * labels are visual; the input still reports its value to assistive
+ * technology. (No `<datalist>`: Chromium shrinks a styled range's track when
+ * the input has a `list`.)
+ */
+interface SliderTick {
+    value: number;
+    label?: string;
+}
+/** Application `data-*` metadata; the Slider's own markers stay protected. */
+type SliderRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type SliderProps = {
+    /** The input's id; it also derives the readout, hint, and tick ids. */
+    id: string;
+    /** The current value (default the midpoint of `min` and `max`, snapped to `step`). */
+    value?: number;
+    /** The lowest value (default 0). */
+    min?: number;
+    /** The highest value (default 100). */
+    max?: number;
+    /** The step between values (default 1). */
+    step?: number;
+    name?: string;
+    /** Show the current value at the end of the label row, live while dragging. */
+    showValue?: boolean;
+    /** Text after the readout's number, such as `%` or ` px`. */
+    unit?: string;
+    /** Supporting text below the slider, also its description. */
+    hint?: string;
+    /** Labeled stops under the track. */
+    ticks?: readonly SliderTick[];
+    /**
+     * `vertical` stands the slider up (a volume control in a popup), minimum at
+     * the bottom, `length` tall; it takes no `ticks`.
+     */
+    orientation?: SliderOrientation;
+    /** A vertical slider's length (default 160px). */
+    length?: CssLength;
+    size?: SliderSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on the input; listen for `input` or `change`. */
+    action?: string;
+    /** Associate the input with a form outside its ancestor chain. */
+    form?: string;
+    className?: string;
+    rootAttributes?: SliderRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A value on a continuous or stepped range: a native `<input type="range">`
+ * drawn as a track, a brand fill up to the value, and a thumb, with a label
+ * row, an optional live readout (`<output>`), labeled tick stops, and a hint.
+ * Keyboard, pointer, and screen-reader behavior are the platform's. Wire
+ * `wireSliders` from `@kerfjs/ui/wire-sliders` above it so the fill and the
+ * readout follow a drag before the app re-renders.
+ */
+declare function Slider({ id, value, min, max, step, name, label, ariaLabel, showValue, unit, hint, ticks, size, orientation, length, disabled, action, form, className, rootAttributes, slot, }: SliderProps): kerfjs.SafeHtml;
+
+export { Slider, type SliderOrientation, type SliderProps, type SliderRootAttributes, type SliderSize, type SliderTick };
 ```
 
 ## `@kerfjs/ui/anchored-surface`
@@ -5196,102 +6400,117 @@ declare function openAnchoredSurfaceAt(point: AnchoredSurfacePoint, content: Ove
 export { type AnchoredSurfaceOptions, type AnchoredSurfacePoint, type AnchoredSurfaceTone, openAnchoredSurface, openAnchoredSurfaceAt };
 ```
 
-## `@kerfjs/ui/icon-button`
+## `@kerfjs/ui/button`
 
 ```ts
 import * as kerfjs from 'kerfjs';
-import { LucideNode } from './lucide-icon.js';
-import 'lucide';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { BadgeTone } from './badge.js';
 import './css-values.js';
+import './semantic-tone-CdW013KF.js';
 
-type IconButtonAppearance = 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain';
-type IconButtonVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
-type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
-type IconButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-component'?: never;
-    'data-action'?: never;
-}>;
-interface IconButtonProps {
-    /** The Lucide-compatible icon node shown alone in the button. */
-    icon: LucideNode;
-    /** The icon's stable name, as `LucideIcon` takes it. */
-    iconName: string;
-    /** Accessible name; the button has no visible text, so it is required. */
-    label: string;
-    /** Delegated `data-action` the application handles. */
-    action?: string;
-    /** Web Awesome appearance; defaults to Web Awesome's own. */
-    appearance?: IconButtonAppearance;
-    /** Web Awesome semantic variant; defaults to Web Awesome's own. */
-    variant?: IconButtonVariant;
-    /** Web Awesome control size; the square follows its control height. */
-    size?: IconButtonSize;
-    type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-    id?: string;
-    className?: string;
-    /** Safe `data-*` metadata; `data-component` and `data-action` stay owned. */
-    rootAttributes?: IconButtonRootAttributes;
-    /** Native named-slot assignment when composed inside a web component. */
-    slot?: string;
-}
+/** The color family: `neutral` (default), `brand` for the main action, `danger` for a destructive one. */
+type ButtonTone = 'neutral' | 'brand' | 'danger';
 /**
- * An icon-only Web Awesome button with a `LucideIcon`: square, one form
- * control height on each side, so it matches an adjacent `wa-input` or
- * `Select`. Web Awesome squares a button only for a lone `wa-icon`; this is
- * the Kerf form for Lucide icons. Register `wa-button` once
- * (`@awesome.me/webawesome/dist/components/button/button.js`).
+ * How loudly it asks: `primary` (default) fills the button, `secondary`
+ * outlines it, and `plain` shows only its text until hovered.
  */
-declare function IconButton({ icon, iconName, label, action, appearance, variant, size, type, disabled, id, className, rootAttributes, slot, }: IconButtonProps): kerfjs.SafeHtml;
-
-export { IconButton, type IconButtonAppearance, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
-```
-
-## `@kerfjs/ui/icon-toggle-button`
-
-```ts
-import * as kerfjs from 'kerfjs';
-import { LucideNode } from './lucide-icon.js';
-import 'lucide';
-import './css-values.js';
-
-/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */
-type IconToggleButtonShape = 'pill' | 'rounded';
-type IconToggleButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-component'?: never;
-    'data-action'?: never;
-    'data-shape'?: never;
-}>;
-interface IconToggleButtonProps {
-    /** The Lucide-compatible icon node. */
-    icon: LucideNode;
-    /** The icon's stable name, as `LucideIcon` takes it. */
-    iconName: string;
-    /** Accessible name and hover help tag; required because no text is shown. */
-    label: string;
-    /** Pressed state, exposed as `aria-pressed`; the application owns it. */
-    pressed: boolean;
-    /** Delegated `data-action` the application handles to flip `pressed`. */
-    action?: string;
-    shape?: IconToggleButtonShape;
+type ButtonEmphasis = 'primary' | 'secondary' | 'plain';
+/** `default` is the 44px control height; `compact` is 33px with smaller text. */
+type ButtonSize = 'default' | 'compact';
+/** Corner shape: the shared `rounded` control radius (default) or a full `pill`. */
+type ButtonShape = 'rounded' | 'pill';
+/** What a form button does: `button` (default), `submit`, or `reset`. */
+type ButtonType = 'button' | 'submit' | 'reset';
+/** Application `data-*` metadata; the Button's own markers stay protected. */
+type ButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/** A Button's visible label: text or rendered content, never empty. */
+type ButtonLabel = string | Exclude<KerfUiContent, null | undefined | boolean>;
+/**
+ * A labeled button (its label names it; `ariaLabel` only when the label is
+ * not enough), or an icon-only square named by `ariaLabel`.
+ */
+type ButtonContent = {
+    /** The label. */
+    children: ButtonLabel;
+    /** A leading icon, such as a `LucideIcon`; it is decorative. */
+    icon?: KerfUiContent;
+    ariaLabel?: string;
+} | {
+    children?: undefined;
+    /** The icon of an icon-only square button. */
+    icon: KerfUiContent;
+    /** The accessible name an icon-only button needs. */
+    ariaLabel: string;
+};
+type ButtonProps = ButtonContent & ButtonOptions;
+interface ButtonOptions {
+    tone?: ButtonTone;
+    emphasis?: ButtonEmphasis;
+    size?: ButtonSize;
+    /** Corner shape (default `rounded`). */
+    shape?: ButtonShape;
+    /**
+     * Make it a toggle: `aria-pressed` reports the state, and a pressed look is
+     * drawn on top of the tone and emphasis. The application owns the state and
+     * flips it in its `action` handler. A link (`href`) cannot be a toggle.
+     */
+    pressed?: boolean;
+    /**
+     * Busy: a spinner replaces the label (which still names it) and the button
+     * reports `aria-busy`. Presses still reach it; the application decides
+     * what a press does while it is busy.
+     */
+    loading?: boolean;
     disabled?: boolean;
+    /** A form button's behavior (default `button`, which never submits). */
+    type?: ButtonType;
+    name?: string;
+    value?: string;
+    /** The id of the form it belongs to, when it sits outside that form. */
+    form?: string;
+    /** Render a link with button styling instead of a `<button>`. */
+    href?: string;
+    /** Where a link opens. */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Delegated `data-action` the application handles. */
+    action?: string;
+    /**
+     * A count, short text, or `true` for a text-free dot over the button's
+     * top-trailing corner, such as how many items a filter hides. It stays out
+     * of the accessible name unless `badgeLabel` names it.
+     */
+    badge?: number | string | true;
+    /** Words for the badge ("3 hidden"), added to the button's name. */
+    badgeLabel?: string;
+    /** The badge's tone (default `danger`). */
+    badgeTone?: BadgeTone;
+    /**
+     * Native hover text that says more than the name, such as "More Actions
+     * for report.pdf". An icon-only Button already gets a help tag with its
+     * `ariaLabel` (with `@kerfjs/ui/help-tags-register`); a `title` replaces
+     * that tag.
+     */
+    title?: string;
     id?: string;
     className?: string;
-    /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */
-    rootAttributes?: IconToggleButtonRootAttributes;
+    /** Safe `data-*` metadata (a `data-key`, `data-dialog-close`). */
+    rootAttributes?: ButtonRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /**
- * A standalone, icon-only toggle: a native `<button aria-pressed>` with the
- * geometry and pressed chrome of a single contained `ToolbarControlGroup`
- * (44px, a 2px-inset face that rises when pressed), for content and pane
- * footers where no `Toolbar` belongs. Inside a toolbar, use a
- * `ToolbarControlGroup` instead.
+ * A standalone action button: a native `<button>` (or a link with `href`)
+ * in one of three tones and three emphases, at the 44px control height or
+ * compact, with a label or as an icon-only square, rounded or pill-shaped,
+ * and optionally a `pressed` toggle. Inside a
+ * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use
+ * Button for a dialog footer, a form, or a standalone action beside other
+ * content.
  */
-declare function IconToggleButton({ icon, iconName, label, pressed, action, shape, disabled, id, className, rootAttributes, slot, }: IconToggleButtonProps): kerfjs.SafeHtml;
+declare function Button({ children, tone, emphasis, size, shape, pressed, icon, loading, disabled, type, name, value, form, href, target, action, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
 
-export { IconToggleButton, type IconToggleButtonProps, type IconToggleButtonShape };
+export { Button, type ButtonContent, type ButtonEmphasis, type ButtonLabel, type ButtonOptions, type ButtonProps, type ButtonRootAttributes, type ButtonShape, type ButtonSize, type ButtonTone, type ButtonType };
 ```
 
 ## `@kerfjs/ui/split-button`
@@ -5390,6 +6609,13 @@ interface FileDropZoneProps extends FileInputProps {
     icon?: SafeHtml;
     /** Accessible name of the file input when it should say more than `title`. */
     accessibleLabel?: string;
+    /**
+     * A selector for an enclosing element (the zone's ancestor) that also
+     * takes drops, such as an attachments panel: while files are dragged over
+     * any part of it the zone is highlighted, and files dropped there are
+     * reported for this zone (`via: 'drop'`).
+     */
+    dropScope?: string;
 }
 /**
  * A compact, link-toned trigger that opens the native file chooser: a label
@@ -5481,3 +6707,109 @@ declare function EdgeActivityIndicator({ busy, message, tone, inset, className,
 
 export { EdgeActivityIndicator, type EdgeActivityIndicatorProps };
 ```
+
+## `@kerfjs/ui/progress-bar`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+/** The fill color: `brand` (default), or a status tone. */
+type ProgressTone = 'brand' | 'success' | 'warning' | 'danger';
+/** `default` is a 6px track; `compact` is 4px, for a row or table cell. */
+type ProgressBarSize = 'default' | 'compact';
+/**
+ * Application `data-*` identity on the ProgressBar root, such as `data-key`;
+ * its own configuration attributes stay protected.
+ */
+type ProgressBarRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ProgressBarProps = {
+    /**
+     * Work done so far, from 0 to `max`. Omit it for indeterminate progress
+     * (work whose size is unknown), which animates instead.
+     */
+    value?: number;
+    /** The amount that means done (default 1). */
+    max?: number;
+    /**
+     * Spoken progress in place of the percentage, such as "3 of 12 files". With
+     * `showValue` it is also the visible text.
+     */
+    valueText?: string;
+    /** Show the value (or `valueText`) at the end of the label row. */
+    showValue?: boolean;
+    tone?: ProgressTone;
+    size?: ProgressBarSize;
+    id?: string;
+    rootAttributes?: ProgressBarRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    /** A visible label above the bar that also names it. */
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    /** The bar's accessible name when it shows no visible label. */
+    ariaLabel: string;
+});
+/**
+ * A linear progress indicator on the native `<progress>` element: determinate
+ * (`value` of `max`) or indeterminate (no `value`, an animated sweep), named
+ * by a visible `label` or an `ariaLabel`, toned, and in two track sizes. The
+ * native element carries the progressbar role and its value to assistive
+ * technology; `valueText` replaces the spoken percentage.
+ */
+declare function ProgressBar({ value, max, valueText, showValue, label, ariaLabel, tone, size, id, rootAttributes, className, slot, }: ProgressBarProps): kerfjs.SafeHtml;
+
+export { ProgressBar, type ProgressBarProps, type ProgressBarRootAttributes, type ProgressBarSize, type ProgressTone };
+```
+
+## `@kerfjs/ui/progress-ring`
+
+```ts
+import * as kerfjs from 'kerfjs';
+import { ProgressTone } from './progress-bar.js';
+
+/**
+ * The ring's diameter: `small` (16px) sits in a line of text, `medium` (24px,
+ * the default) beside an icon in a row or toolbar, and `large` (40px) on its
+ * own.
+ */
+type ProgressRingSize = 'small' | 'medium' | 'large';
+/**
+ * Application `data-*` identity on the ProgressRing root, such as `data-key`;
+ * its own configuration attributes stay protected.
+ */
+type ProgressRingRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface ProgressRingProps {
+    /**
+     * Work done so far, from 0 to `max`. Omit it for indeterminate progress,
+     * which spins a short arc instead.
+     */
+    value?: number;
+    /** The amount that means done (default 1). */
+    max?: number;
+    /** The ring's accessible name, such as "Claim time remaining". */
+    label: string;
+    /** Spoken progress in place of the percentage, such as "12 minutes left". */
+    valueText?: string;
+    tone?: ProgressTone;
+    size?: ProgressRingSize;
+    id?: string;
+    rootAttributes?: ProgressRingRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A circular progress indicator: an SVG track and arc, determinate (`value`
+ * of `max`, filling clockwise from the top) or indeterminate (no `value`, a
+ * spinning arc), sized to sit inline in text, a row, or a toolbar. It is a
+ * `role="progressbar"` named by `label`, with `aria-valuenow` (as a
+ * percentage) or `valueText`.
+ */
+declare function ProgressRing({ value, max, label, valueText, tone, size, id, rootAttributes, className, slot, }: ProgressRingProps): kerfjs.SafeHtml;
+
+export { ProgressRing, type ProgressRingProps, type ProgressRingRootAttributes, type ProgressRingSize, ProgressTone };
+```