@kerfjs/ui 5.0.0-beta.65 → 5.0.0-beta.66

package/dist/chunk-VY6YRCTV.js

@@ -0,0 +1,123 @@
+import { ToolbarText } from './chunk-V3DX3K65.js';
+import { ToolbarControlGroup } from './chunk-NXWE5S57.js';
+import { Toolbar } from './chunk-RGS4WX2M.js';
+import { LucideIcon } from './chunk-MOSIE4Z2.js';
+import { ChevronLeft } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_SAFE_AREA_EDGES = [
+  "block-start",
+  "inline-start",
+  "inline-end"
+];
+function NavStack({
+  id,
+  label,
+  views,
+  backLabel = "Back",
+  backIcon,
+  backText,
+  toolbarConfig = {},
+  panelToggle,
+  hideToolbar = false,
+  bottomToolbar,
+  chromeDividers = "scroll",
+  className = "",
+  slot
+}) {
+  const topIndex = views.length - 1;
+  const top = views[topIndex];
+  const canPop = views.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-nav-stack ${className}`.trim(),
+      id,
+      "data-component": "nav-stack",
+      "data-nav-stack-id": id,
+      "data-depth": String(views.length),
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "aria-label": label,
+      slot,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsxs("div", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: [
+          /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              label: toolbarConfig.label,
+              dividerSides: toolbarConfig.dividerSides,
+              centerAlign: toolbarConfig.centerAlign,
+              responsive: toolbarConfig.responsive,
+              responsiveAt: toolbarConfig.responsiveAt,
+              safeAreaEdges: toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES,
+              leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+                canPop && /* @__PURE__ */ jsx(
+                  ToolbarControlGroup,
+                  {
+                    appearance: "borderless",
+                    shape: "rounded",
+                    content: backText ? "mixed" : "icon",
+                    single: true,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        class: "kui-nav-stack__back",
+                        "data-nav-back": true,
+                        "aria-label": backText ? void 0 : backLabel,
+                        children: [
+                          backIcon ?? /* @__PURE__ */ jsx(
+                            LucideIcon,
+                            {
+                              icon: ChevronLeft,
+                              name: "chevron-left",
+                              className: "kui-nav-stack__back-icon"
+                            }
+                          ),
+                          backText ? /* @__PURE__ */ jsx("span", { children: backText }) : null
+                        ]
+                      }
+                    )
+                  }
+                ),
+                top?.leading,
+                /* @__PURE__ */ jsx(
+                  ToolbarText,
+                  {
+                    text: top?.title ?? "",
+                    size: toolbarConfig.titleSize ?? "large",
+                    headingLevel: toolbarConfig.headingLevel,
+                    fill: true
+                  }
+                )
+              ] }),
+              center: top?.center,
+              trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+                top?.toolbar,
+                panelToggle
+              ] })
+            }
+          ),
+          top?.header && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__header", "data-nav-stack-header": true, children: top.header })
+        ] }),
+        /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
+          "article",
+          {
+            class: "kui-nav-stack__view",
+            "data-key": view.key,
+            "data-nav-key": view.key,
+            "data-nav-active": String(index === topIndex),
+            "data-appearance": view.appearance === "sunken" ? "sunken" : void 0,
+            "aria-hidden": String(index !== topIndex),
+            children: view.content
+          }
+        )) }),
+        (top?.bottomToolbar ?? bottomToolbar) && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: top?.bottomToolbar ?? bottomToolbar })
+      ]
+    }
+  );
+}
+
+export { NavStack };
+
+//# sourceMappingURL=chunk-VY6YRCTV.js.map

package/dist/chunk-VY6YRCTV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-VY6YRCTV.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { PaneAppearance } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarConfig } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n  content: KerfUiContent;\n  /** Background of this view's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Title shown in the top toolbar for this view. */\n  title?: string;\n  /** Leading groups for this view's top toolbar, after the back control and before the title. */\n  leading?: KerfUiContent;\n  /** Center content for this view's top toolbar (placed per `toolbarConfig.centerAlign`). */\n  center?: KerfUiContent;\n  /** Trailing actions for this view's top toolbar. */\n  toolbar?: KerfUiContent;\n  /** Fixed chrome below this view's toolbar, above its scrolling content. */\n  header?: KerfUiContent;\n  /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */\n  bottomToolbar?: KerfUiContent;\n}\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /** Size of the view title's `ToolbarText` (default `large`). */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: KerfUiContent;\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `leading` / `center` / `toolbar`\n * content fills the zones, and `toolbarConfig` configures it. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const canPop = views.length > 1;\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={toolbarConfig.label}\n            dividerSides={toolbarConfig.dividerSides}\n            centerAlign={toolbarConfig.centerAlign}\n            responsive={toolbarConfig.responsive}\n            responsiveAt={toolbarConfig.responsiveAt}\n            safeAreaEdges={\n              toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    appearance=\"borderless\"\n                    shape=\"rounded\"\n                    content={backText ? 'mixed' : 'icon'}\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {top?.leading}\n                <ToolbarText\n                  text={top?.title ?? ''}\n                  size={toolbarConfig.titleSize ?? 'large'}\n                  headingLevel={toolbarConfig.headingLevel}\n                  fill\n                />\n              </>\n            }\n            center={top?.center}\n            trailing={\n              <>\n                {top?.toolbar}\n                {panelToggle}\n              </>\n            }\n          />\n          {top?.header && (\n            <div class=\"kui-nav-stack__header\" data-nav-stack-header>\n              {top.header}\n            </div>\n          )}\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            data-appearance={\n              view.appearance === 'sunken' ? 'sunken' : undefined\n            }\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.content}\n          </article>\n        ))}\n      </div>\n      {(top?.bottomToolbar ?? bottomToolbar) && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          {top?.bottomToolbar ?? bottomToolbar}\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/collapsible-panel.js

@@ -1,5 +1,5 @@
-import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-FJSZYEBM.js';
-export { collapsiblePanelToggleIcon } from './chunk-FJSZYEBM.js';
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-C74LITXE.js';
+export { collapsiblePanelToggleIcon } from './chunk-C74LITXE.js';
 
 
 

package/dist/grid.d.ts

@@ -12,6 +12,10 @@ type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
 }>;
 interface GridCommonProps {
     children?: KerfUiContent;
+    /** Make this a labeled multi-select grid for `ContentItem selectionMode="multiple"` tiles. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
     /** A named UI spacing token or typed CSS length. Defaults to xs. */
     gap?: UiSpaceName | CssLength;
     /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
@@ -41,6 +45,6 @@ type GridProps = GridCommonProps & ({
     autoFill?: boolean;
 });
 /** Render equal tracks with a fixed count or a responsive minimum width. */
-declare function Grid({ children, columns, minColumnWidth, autoFill, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
+declare function Grid({ children, selectionMode, ariaLabel, columns, minColumnWidth, autoFill, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, UiSpaceName };

package/dist/grid.js

@@ -1,4 +1,4 @@
-export { Grid } from './chunk-2EKHENQK.js';
+export { Grid } from './chunk-B2ZMR7NY.js';
 
 
 

package/dist/index.js

@@ -15,7 +15,7 @@ export { SegmentedControl } from './chunk-X5QSICJ3.js';
 export { Select } from './chunk-F7OCOBTG.js';
 export { ListInsetControl } from './chunk-5I7QGQVT.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
-export { Grid } from './chunk-2EKHENQK.js';
+export { Grid } from './chunk-B2ZMR7NY.js';
 export { ListActionRow } from './chunk-IAOAZUOO.js';
 export { AppTab } from './chunk-Q6YU3BT7.js';
 export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-J3KGJ6P6.js';

package/dist/nav-stack.d.ts

@@ -23,6 +23,8 @@ interface NavStackView {
     center?: KerfUiContent;
     /** Trailing actions for this view's top toolbar. */
     toolbar?: KerfUiContent;
+    /** Fixed chrome below this view's toolbar, above its scrolling content. */
+    header?: KerfUiContent;
     /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
     bottomToolbar?: KerfUiContent;
 }
@@ -57,6 +59,8 @@ interface NavStackProps {
     backText?: string;
     /** The top toolbar's configuration, forwarded to its `Toolbar`. */
     toolbarConfig?: NavStackToolbarConfig;
+    /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
+    panelToggle?: KerfUiContent;
     /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
     hideToolbar?: boolean;
     /** Optional persistent bottom toolbar used when the active view does not provide one. */
@@ -85,6 +89,6 @@ interface NavStackProps {
  * content fills the zones, and `toolbarConfig` configures it. A single-pane
  * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
 export { NavStack, type NavStackProps, type NavStackToolbarConfig, type NavStackView };

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-HXCMWANP.js';
+export { NavStack } from './chunk-VY6YRCTV.js';
 
 
 

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-HXCMWANP.js';
+import { NavStack } from './chunk-VY6YRCTV.js';
 import { ResizableRegion } from './chunk-KLJKU6ZL.js';
 
 

package/dist/styles/nav-stack.css

@@ -69,6 +69,10 @@
   background: var(--kui-color-surface);
 }
 
+.kui-nav-stack__header {
+  min-width: 0;
+}
+
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);

package/dist/styles/token-search-field.css

@@ -16,8 +16,8 @@
 }
 
 .kui-token-search__field-required {
-  margin-inline-start: 0.15em;
-  color: var(--wa-color-danger-on-normal, currentColor);
+  margin-inline-start: var(--wa-form-control-required-content-offset, 0.1em);
+  color: var(--wa-form-control-required-content-color, inherit);
 }
 
 .kui-token-search__field-hint {
@@ -56,6 +56,13 @@
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
+.kui-token-search[data-presentation="form-field"] {
+  border-radius: var(
+    --wa-form-control-border-radius,
+    var(--wa-border-radius-m)
+  );
+}
+
 .kui-token-search[data-disabled="true"] {
   opacity: 0.55;
 }

package/dist/styles/toolbar.css

@@ -191,7 +191,11 @@
     var(--kui-toolbar-zone-padding-inline, 0px)
   );
   grid-column: 1;
-  overflow: hidden;
+  /* Keep a shrinking title clipped while letting the 3px focus outline plus
+     its 1px offset paint past the zone edge. `hidden` cropped the ring of the
+     first control in this zone. */
+  overflow: clip;
+  overflow-clip-margin: 4px;
 }
 
 .kui-toolbar__center {

package/dist/wire-content-items.js

@@ -1,6 +1,26 @@
 // src/wire-content-items.ts
 var ITEM_SELECTOR = '[data-component="content-item"][data-interactive="true"]';
 var NESTED_CONTROL_SELECTOR = 'button, a[href], input, select, textarea, [contenteditable="true"], [role="button"]';
+var MULTI_GRID_SELECTOR = '[role="grid"][aria-multiselectable="true"]';
+function nextTile(item, rows, key) {
+  const current = item.getBoundingClientRect();
+  const centerX = current.left + current.width / 2;
+  const candidates = rows.filter((row) => row !== item).map((row) => {
+    const rect = row.getBoundingClientRect();
+    return { row, x: rect.left + rect.width / 2, y: rect.top };
+  });
+  const sameLine = (y) => Math.abs(y - current.top) < 1;
+  const directed = candidates.filter(
+    ({ x, y }) => key === "ArrowLeft" ? sameLine(y) && x < centerX : key === "ArrowRight" ? sameLine(y) && x > centerX : key === "ArrowUp" ? y < current.top - 1 : y > current.top + 1
+  );
+  directed.sort((a, b) => {
+    if (key === "ArrowLeft") return b.x - a.x;
+    if (key === "ArrowRight") return a.x - b.x;
+    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);
+    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);
+  });
+  return directed[0]?.row;
+}
 function actionItem(root, event) {
   const target = event.target;
   if (!(target instanceof Element)) return null;
@@ -28,17 +48,25 @@ function wireContentItems(root) {
       return;
     const item = actionItem(root, event);
     if (!item) return;
-    if (item.dataset.selectionMode === "multiple" && ["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      const grid = item.closest('[role="grid"][aria-multiselectable="true"]');
+    if (item.dataset.selectionMode === "multiple" && [
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      const grid = item.closest(MULTI_GRID_SELECTOR);
       if (!grid) return;
       const rows = Array.from(
         grid.querySelectorAll(
           `${ITEM_SELECTOR}[data-selection-mode="multiple"]:not([data-disabled="true"])`
         )
-      );
+      ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);
       const index = rows.indexOf(item);
       if (index < 0) return;
-      const next = event.key === "Home" ? rows[0] : event.key === "End" ? rows[rows.length - 1] : rows[index + (event.key === "ArrowDown" ? 1 : -1)];
+      const isTileGrid = grid.getAttribute("data-component") === "grid";
+      const next = event.key === "Home" ? rows[0] : event.key === "End" ? rows[rows.length - 1] : isTileGrid ? nextTile(item, rows, event.key) : event.key === "ArrowDown" || event.key === "ArrowUp" ? rows[index + (event.key === "ArrowDown" ? 1 : -1)] : void 0;
       if (next) {
         event.preventDefault();
         next.focus();

package/dist/wire-content-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  let pendingSpace: HTMLElement | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey\n    )\n      return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    if (\n      item.dataset.selectionMode === 'multiple' &&\n      ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)\n    ) {\n      const grid = item.closest('[role=\"grid\"][aria-multiselectable=\"true\"]');\n      if (!grid) return;\n      const rows = Array.from(\n        grid.querySelectorAll<HTMLElement>(\n          `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]:not([data-disabled=\"true\"])`,\n        ),\n      );\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const next =\n        event.key === 'Home'\n          ? rows[0]\n          : event.key === 'End'\n            ? rows[rows.length - 1]\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      item.click();\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = item;\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    const item = pendingSpace;\n    if (!item) return;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      item.click();\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  return () => {\n    clearSpace();\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}
+{"version":3,"sources":["../src/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) =>\n    key === 'ArrowLeft'\n      ? sameLine(y) && x < centerX\n      : key === 'ArrowRight'\n        ? sameLine(y) && x > centerX\n        : key === 'ArrowUp'\n          ? y < current.top - 1\n          : y > current.top + 1,\n  );\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  let pendingSpace: HTMLElement | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey\n    )\n      return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    if (\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = Array.from(\n        grid.querySelectorAll<HTMLElement>(\n          `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]:not([data-disabled=\"true\"])`,\n        ),\n      ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      const next =\n        event.key === 'Home'\n          ? rows[0]\n          : event.key === 'End'\n            ? rows[rows.length - 1]\n            : isTileGrid\n              ? nextTile(item, rows, event.key)\n              : event.key === 'ArrowDown' || event.key === 'ArrowUp'\n                ? rows[index + (event.key === 'ArrowDown' ? 1 : -1)]\n                : undefined;\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      item.click();\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = item;\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    const item = pendingSpace;\n    if (!item) return;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      item.click();\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  return () => {\n    clearSpace();\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}

package/dist/workbench.d.ts

@@ -1,13 +1,15 @@
 import { SafeHtml } from 'kerfjs';
 import { ListConfig } from './list.js';
+import { NavStackProps } from './nav-stack.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-DDKh4uKd.js';
 import { ToolbarConfig } from './toolbar.js';
+import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-DDKh4uKd.js';
 import './css-values.js';
 import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
+import './toolbar-text.js';
 import './lucide-icon.js';
 import 'lucide';
 
@@ -80,37 +82,8 @@ interface WorkbenchPanelResizable {
     /** Largest size (default 480). */
     max?: number;
 }
-/** A collapsible Workbench panel — a side rail or the bottom drawer. */
-interface WorkbenchPanel {
-    content: KerfUiContent;
-    /**
-     * The panel's top toolbar, composed by the Workbench: its marked groups
-     * and standard `toggle` move to the work area's toolbar while the panel is
-     * collapsed. With it, `content` renders in a `Pane` below the toolbar.
-     */
-    toolbar?: WorkbenchPanelToolbar;
-    /** Fixed content below a toolbar panel's top toolbar, above its scroll region. */
-    header?: KerfUiContent;
-    /** List layout for `header`; omitted fields keep List defaults. */
-    headerList?: ListConfig;
-    /** Placement of the top toolbar and header together; default `fixed`. */
-    headerPlacement?: WorkbenchChromePlacement;
-    /** Fixed content above a toolbar panel's bottom toolbar. */
-    footer?: KerfUiContent;
-    /** List layout for `footer`; omitted fields keep List defaults. */
-    footerList?: ListConfig;
-    /** Fixed toolbar below `footer`, using footer semantics. */
-    bottomToolbar?: WorkbenchPanelBottomToolbar;
-    /** Placement of the footer and bottom toolbar together; default `fixed`. */
-    footerPlacement?: WorkbenchChromePlacement;
-    /**
-     * Configuration for a `toolbar` panel's `Pane` (`contentElement`,
-     * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example
-     * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation
-     * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored
-     * without a `toolbar`, where `content` renders as given.
-     */
-    pane?: PaneConfig;
+/** Region sizing, collapse, and presentation shared by either panel body. */
+interface WorkbenchPanelBase {
     /** Whether the panel is currently collapsed (the app owns this). */
     collapsed?: boolean;
     /**
@@ -157,6 +130,41 @@ interface WorkbenchPanel {
     restoreControl?: SafeHtml;
     restorePosition?: ResizableRegionRestorePosition;
 }
+/** The original static panel body: one toolbar, optional fixed chrome, and one Pane. */
+interface WorkbenchStaticPanel extends WorkbenchPanelBase {
+    content: KerfUiContent;
+    /** The composed toolbar; marked groups and its toggle relocate on collapse. */
+    toolbar?: WorkbenchPanelToolbar;
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    headerPlacement?: WorkbenchChromePlacement;
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: WorkbenchPanelBottomToolbar;
+    footerPlacement?: WorkbenchChromePlacement;
+    /** Configuration for the static toolbar panel's Pane. */
+    pane?: PaneConfig;
+    navStack?: never;
+}
+/** A panel whose active NavStack view supplies the toolbar, fixed header, and scroll body. */
+interface WorkbenchNavigationPanel extends WorkbenchPanelBase {
+    navStack: Omit<NavStackProps, 'panelToggle' | 'hideToolbar' | 'className' | 'slot'>;
+    /** Supplies the standard toggle; active view groups precede it and may relocate on collapse. */
+    toolbar: Omit<WorkbenchPanelToolbar, 'title' | 'leading' | 'center' | 'trailing'> & {
+        toggle: NonNullable<WorkbenchPanelToolbar['toggle']>;
+    };
+    content?: never;
+    header?: never;
+    headerList?: never;
+    headerPlacement?: never;
+    footer?: never;
+    footerList?: never;
+    bottomToolbar?: never;
+    footerPlacement?: never;
+    pane?: never;
+}
+/** A collapsible Workbench side rail or bottom drawer. */
+type WorkbenchPanel = WorkbenchStaticPanel | WorkbenchNavigationPanel;
 interface WorkbenchProps {
     /**
      * The Workbench's `id`. Each panel's `id` derives from it —
@@ -257,4 +265,4 @@ interface WorkbenchProps {
  */
 declare function Workbench({ id, label, main, leftRail, rightRail, bottomDrawer, mainToolbar, mainHeader, mainFooter, mainBottomToolbar, mainHeaderPlacement, mainFooterPlacement, mainPane, mainHeaderList, mainFooterList, mainMinSize, mainMinHeight, overlayBackdrop, className, slot, }: WorkbenchProps): SafeHtml;
 
-export { Workbench, type WorkbenchChromePlacement, type WorkbenchCompactOverlay, type WorkbenchMainBottomToolbar, type WorkbenchMainToolbar, type WorkbenchPanel, type WorkbenchPanelBottomToolbar, type WorkbenchPanelResizable, type WorkbenchPanelToggle, type WorkbenchPanelToolbar, type WorkbenchProps, type WorkbenchResponsiveOverlayAt };
+export { Workbench, type WorkbenchChromePlacement, type WorkbenchCompactOverlay, type WorkbenchMainBottomToolbar, type WorkbenchMainToolbar, type WorkbenchNavigationPanel, type WorkbenchPanel, type WorkbenchPanelBottomToolbar, type WorkbenchPanelResizable, type WorkbenchPanelToggle, type WorkbenchPanelToolbar, type WorkbenchProps, type WorkbenchResponsiveOverlayAt, type WorkbenchStaticPanel };

package/dist/workbench.js

@@ -1,4 +1,7 @@
-export { Workbench } from './chunk-PWQAVNON.js';
+export { Workbench } from './chunk-TGM424PI.js';
+
+
+
 
 
 

package/docs/accessibility.md

@@ -15,7 +15,7 @@ These are normative contracts for package components and consuming applications.
 - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
 - A busy `ToolbarControlGroup` makes its controls inert and exposes `aria-busy`; its `busyLabel` is announced by an adjacent status node outside the inert group. Clear `busy` when the operation finishes so the controls rejoin the focus order.
 - A bottom `Toolbar` uses `position="footer"` for footer semantics; top toolbars keep the default `header`. Workbench's main bottom toolbar sets this automatically.
-- Interactive `ContentItem` cards are keyboard reachable. Set `selectionMode="toggle"` for a pressed button, `selectionMode="single"` for an option inside a listbox, or `selectionMode="multiple"` for a selectable row with a gridcell that can contain native controls. Place multiple-mode rows inside a labeled `List selectionMode="multiple"` grid; the app owns the selection set and range gestures. Wire `wireContentItems` once so Enter and Space on the card activate its delegated action without activating it from a nested control. Disabled cards expose `aria-disabled` and leave the Tab order.
+- Interactive `ContentItem` cards are keyboard reachable. Set `selectionMode="toggle"` for a pressed button, `selectionMode="single"` for an option inside a listbox, or `selectionMode="multiple"` for a selectable row with a gridcell that can contain native controls. Place multiple-mode rows inside a labeled `List` or `Grid` with `selectionMode="multiple"`; the app owns the selection set and range gestures. Wire `wireContentItems` once so Enter and Space on the card activate its delegated action without activating it from a nested control. Disabled cards expose `aria-disabled` and leave the Tab order.
 - An unlabeled `Skeleton` (including the value slots a component's `placeholder` prop renders) is decorative loading chrome: it is `aria-hidden`, conveys no information a user needs to act on, and is deliberately exempt from the WCAG 3:1 non-text-contrast target. Inside a solid `Badge` it stays subtle (about 2.1–4.4:1 in light, 2.4–2.8:1 in dark, depending on tone); `tests/browser/tone-contrast.spec.ts` holds those values as a regression floor rather than an accessibility threshold. Announce loading through a labeled `Skeleton`, `LoadingSpinner`, or `aria-busy` on the owning region, never through the skeleton's visibility.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure. Its optional `badge` is persistent inline status/count content beside the title and is announced as part of the banner; keep it terse and do not rely on color alone for its meaning.
 - A removable `Chip` has a native button with a specific `removeLabel`, such as "Remove Urgent tag". The button is absent for a plain chip and disabled for a disabled chip. Its leading `icon` is decorative; the visible label names the tag. `truncate` retains the full plain-text label as a native tooltip. Tag text remains visible because tone does not convey meaning alone.
@@ -23,10 +23,15 @@ These are normative contracts for package components and consuming applications.
 - `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
 - `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may resize it with the typed `size` prop without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.
 - `List` is layout-only by default and adds no `list` role. With `selectionMode="multiple"` and a required `ariaLabel`, it becomes a multi-select grid for `ContentItem` rows. Give a scrollable List a bounded block size, avoid nested scroll owners, and keep focused children visible while scrolling.
+- `Grid` is layout-only by default. With `selectionMode="multiple"` and a required `ariaLabel`, it becomes a multi-select grid for `ContentItem` tiles; each tile remains a row with a gridcell, including when the CSS grid wraps.
 
 In a multi-select ContentItem grid, `wireContentItems` moves focus between
 enabled rows on Up/Down and to the first/last enabled row on Home/End. Native
-controls inside a row retain those keys; the application changes selection
+controls inside a row retain those keys. In a `Grid`, Left/Right moves between
+tiles on the same rendered line and Up/Down moves to the nearest tile in the
+adjacent rendered line; Home/End reaches the first/last enabled tile. The
+navigation reads live geometry, so responsive column changes need no rewiring.
+The application changes selection
 on card activation and handles its own Shift/Cmd range gestures.
 With delegated click actions, use `isContentItemActivation(event, card)` in the
 card's selection handler so a nested menu trigger or other control does not
@@ -413,6 +418,8 @@ searchbox references the label and hint with `aria-labelledby` and
 validates the value before submission. `wireTokenSearchFields()` also moves
 focus to the editor when the visible label is clicked. The field stands outside
 a Toolbar and fills the same inline space as a neighboring `wa-input`.
+Its control radius and required-marker color and offset follow Web Awesome's
+form-control tokens, so the two controls read as one form.
 
 `TokenSearchField` exposes the editable surface as a named `searchbox`. Each
 chip is atomic (`contenteditable="false"`) and contains separately named edit

package/docs/component-selection.md

@@ -334,6 +334,9 @@ In a form, use `TokenSearchField presentation="form-field"` with its `label`,
 optional `hint`, and `required` state. It renders a full-width control beside
 `wa-input` without a Toolbar or extra inline inset. The app validates required
 search content before saving.
+The form-field corners and required marker use the same Web Awesome
+form-control radius, marker color, and offset tokens as a neighboring
+`wa-input`.
 `TokenSearchRule.suggest(input, state)` receives the unfinished value and current committed tokens, so a rule can omit values already selected. Existing one-argument suggestion callbacks continue to work.
 For a sibling date picker or other app helper, call `model.commit(value)` while a `name:` prefix is active. It parses and commits that value for the active rule even when it is absent from suggestions, replacing the unfinished prefix text. Invalid values and calls without an active prefix leave the query unchanged; `choose(value)` remains restricted to suggested tokens.
 To apply a saved search or restore a query programmatically, call `model.replace({ query, tokens })`. It publishes parsed state and rebuilds the DOM-owned editor text even when no chip changed. For a field without a model, change the field's `revision` prop when setting `query` yourself.
@@ -509,6 +512,10 @@ For a multi-select card containing its own controls, place
 `selectionMode="multiple"` ContentItems inside a labeled
 `List selectionMode="multiple"`; the app supplies each card's `selected`
 state and handles range gestures.
+For wrapped document tiles, use `Grid minColumnWidth={px(160)}` with
+`selectionMode="multiple"` and `ariaLabel`. The same ContentItem row/gridcell
+contract applies, while `wireContentItems` follows the rendered tile layout
+with all four arrow keys.
 
 Incorrect: duplicating component-like rows and compensating for nested padding
 forks the package anatomy and spacing contract.

package/docs/layout.md

@@ -289,6 +289,9 @@ item no taller than the band is centered in it by its own size, and a taller
 item (a wrapped title, a second trailing row) starts at the band's top and
 grows down, so it never moves the other controls. A wrapped `ToolbarText`
 centers its first line in the band.
+The leading zone clips a shrinking title but reserves 4px of paint overflow
+for the focus outline of a control at its edge. Focus rings in all three zones
+remain visible at narrow and wide widths.
 Trailing icon actions share one axis: a toolbar control centers its glyph in
 that 44px slot at the 8px inline margin, and a `ListHeader` action centers its
 fitted 36px square in a slot of the same size (a transparent hit layer extends
@@ -448,7 +451,12 @@ their shared track width rather than expanding across an otherwise empty row.
 It requires `minColumnWidth`; the default `auto-fit` keeps the existing form
 behavior. When Grid is a direct child of a flex-owned `ListInsetControl`, pass
 `flex` so the Grid takes the available row width instead of shrink-wrapping.
-Grid is layout-only and adds no ARIA grid role. The application owns child
+Grid is layout-only by default and adds no ARIA grid role. With
+`selectionMode="multiple"` and a required `ariaLabel`, it supplies a labeled
+multi-select grid for `ContentItem selectionMode="multiple"` tiles. Their
+row/gridcell structure can contain independent controls, while
+`wireContentItems` follows the rendered tile positions with arrow keys.
+The application owns child
 semantics.
 Use application-owned CSS grid for intrinsic, asymmetric, spanning, or masonry
 tracks, and use `ResizableRegion` when people must adjust a boundary.

package/docs/nav-stack.md

@@ -57,6 +57,9 @@ mounted (so their DOM state survives) but hidden. Each entry carries a
 `leading`, `center`, and trailing `toolbar` groups for the top toolbar, and an
 optional per-view `bottomToolbar`. The component-level
 `bottomToolbar` remains a persistent fallback for views that do not provide one.
+Each view can also provide `header`, pinned below its top toolbar and above
+that view's single scroll area. A fixed heading, notice, or section selector
+can therefore change with the active screen without adding another scroller.
 The back control appears automatically once the stack has more than one entry;
 `wireNavStack`'s `onBack` is where the app pops its own signal.
 
@@ -103,6 +106,10 @@ Configure the toolbar with `toolbarConfig` instead of styling it:
   text beside it (for example, the previous view's title); visible text names
   the control, so `backLabel` applies only to the icon-only control.
 
+`panelToggle` supplies a persistent final group in the trailing zone of every
+view's top toolbar. `Workbench` uses it for a navigation panel's standard
+collapse toggle; the active view still owns the preceding toolbar groups.
+
 The catalog's **Configured toolbar** example shows these together: a level-2
 heading title over a bottom divider, leading and center groups on the root
 view, a trailing group on the pushed view, and `backText` set to the previous

package/docs/webawesome-theme.md

@@ -364,6 +364,12 @@ smallest subtree that needs a different identity:
 }
 ```
 
+`TokenSearchField` with `presentation="form-field"` uses
+`--wa-form-control-border-radius` for its control corners and
+`--wa-form-control-required-content-color` and
+`--wa-form-control-required-content-offset` for its required marker. These
+tokens keep it aligned with a neighboring `wa-input` when a form theme changes.
+
 The shipped theme pairs every `--wa-color-{variant}-fill-loud` with an
 `--wa-color-{variant}-on-loud` that clears WCAG AA (4.5:1) in both color
 schemes. When you override a loud fill, set its `on-loud` alongside it, in the