@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

package/doctor/eslint-diagnostics.mjs

@@ -5,3 +5,20 @@ export function isForeignRuleDefinitionDiagnostic(item) {
     item.message === `Definition for rule '${item.ruleId}' was not found.`
   );
 }
+
+export function projectConsumerCoreConfig(config, file) {
+  const rules = Object.fromEntries(
+    Object.entries(config?.rules ?? {}).filter(
+      ([ruleId]) => !ruleId.includes('/'),
+    ),
+  );
+  const linterOptions = config?.linterOptions
+    ? { ...config.linterOptions }
+    : undefined;
+  if (Object.keys(rules).length === 0 && !linterOptions) return undefined;
+  return {
+    files: [file],
+    ...(Object.keys(rules).length > 0 ? { rules } : {}),
+    ...(linterOptions ? { linterOptions } : {}),
+  };
+}

package/doctor/index.mjs

@@ -23,8 +23,14 @@ import { createRequire } from 'node:module';
 import { loadApplicationUiProfile } from '../ai/application-ui-profile.mjs';
 import { analyzeUiProject, UI_ANALYSIS_RULES } from '../analyzer/index.mjs';
 import { evaluateUi, UI_EVALUATION_RULES } from '../evaluator/index.mjs';
-import { isForeignRuleDefinitionDiagnostic } from './eslint-diagnostics.mjs';
-import { isUiTraversalExcluded } from '../traversal-exclusions.mjs';
+import {
+  isForeignRuleDefinitionDiagnostic,
+  projectConsumerCoreConfig,
+} from './eslint-diagnostics.mjs';
+import {
+  isUiTraversalExcluded,
+  UI_TRAVERSAL_ESLINT_IGNORES,
+} from '../traversal-exclusions.mjs';
 
 export const UI_DOCTOR_SCHEMA_VERSION = 1;
 export const UI_DOCTOR_EXIT = Object.freeze({
@@ -847,7 +853,7 @@ async function runEslint({
       },
     },
   };
-  const configs = [{ ignores: ['**/.claude/worktrees/**'] }, base];
+  const configs = [{ ignores: UI_TRAVERSAL_ESLINT_IGNORES }, base];
   if (usesTypeScript) {
     const parserModule = await importFrom(
       packageRoot,
@@ -866,6 +872,18 @@ async function runEslint({
     });
   }
   configs.push(preset);
+  const consumerEslint = new ESLint({ cwd: packageRoot });
+  if (await consumerEslint.findConfigFile()) {
+    const consumerCoreConfigs = await Promise.all(
+      inputs.map(async (file) =>
+        projectConsumerCoreConfig(
+          await consumerEslint.calculateConfigForFile(file),
+          portablePath(packageRoot, file),
+        ),
+      ),
+    );
+    configs.push(...consumerCoreConfigs.filter(Boolean));
+  }
   const eslint = new ESLint({
     cwd: packageRoot,
     overrideConfigFile: true,

package/llms.txt

@@ -52,7 +52,9 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
 6. **Before calling an integration complete**, run
    [`kerf-ui-doctor`](./docs/ui-doctor.md). Its portable JSON report merges
    profile/catalog, TypeScript, Kerf ESLint, and static analyzer diagnostics;
-   repair source-located errors until exit 0. Use full mode for release gates.
+   repair source-located errors until exit 0. Use full mode for release gates;
+   generated `dist`/`coverage`, dependency, cache, evidence, and nested-worktree
+   directories are excluded consistently from every static stage.
    [`kerf-ui-analyze`](./docs/ui-analyzer.md) remains available when only static
    layout diagnostics are wanted; its review findings are a bounded human/AI
    review queue rather than an objective aesthetic score.
@@ -76,12 +78,18 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   own the geometry (8px inline margin + 1px border + 8px padding). Do not add a
   container padding on top of a content-item's own margin — pick one owner. Use
   `.kui-content` for 24px major vertical rhythm.
+- **Use `List` for vertical layout.** It supplies a stretch-aligned column plus
+  optional standard/custom `gap`, `flex`, vertical scrolling, and canonical
+  `dividerSides` (`t`/`r`/`b`/`l` order). It adds no list semantics; children own
+  those, and only one bounded region should own scrolling.
 - **Keep Web Awesome on the shared inset tiers.** `webawesome.css` uses
   `--kui-wa-control-inset` (8px controls/items) and
   `--kui-wa-surface-margin` / `--kui-wa-surface-inset` (8px around/inside
   Accordion, Card, Details, Callout, and Include), while
-  `--kui-wa-container-inset` keeps Tab Panel at 16px. Override the tier at the
-  narrowest useful scope instead of restyling individual shadow parts.
+  `--kui-wa-container-inset` keeps Tab Panel at 16px. Dialog body and footer use
+  the surface (8px) and container (16px) tiers respectively, independent of the
+  dialog's shared `--spacing`. Override the tier at the narrowest useful scope
+  instead of restyling individual shadow parts.
   Checkbox and Radio Group option regions also receive the shared 8px inline
   outer inset because those groups have no bordered field shell. The Color
   Picker trigger receives the same inset for the same unbordered geometry.
@@ -91,6 +99,11 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   with field values at the shared 9px border-plus-padding inset. OTP Input's
   label uses the same uppercase xs/650 treatment and its label and hint share
   that 9px alignment.
+- `Select` requires a visible `label` or an `ariaLabel` for a visually hidden
+  accessible name. The package names the internal combobox, including custom
+  selected content; consumers do not need shadow-DOM naming workarounds.
+  Use `hint` for supporting text below the control and `placeholderText` only
+  for the empty value inside it; loading placeholders retain the visible hint.
 - **Trust the defaults.** Render a control at its natural size and color (a
   `LucideIcon` is 24px); if it looks wrong, fix the surrounding layout, not the
   control. Never force a component's width/height to size it — that leaves a halo
@@ -105,10 +118,11 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   popup menu. A toolbar popup menu is a `single` `ToolbarControlGroup` around a
   `wa-dropdown` (its `slot="trigger"` `wa-button` is the toolbar button, kept under
   `data-morph-skip-children`).
-- **`PanelHeader` is _the_ panel/dialog/page heading.** A plain toolbar with an
-  optional bordered icon group, an extra-large `ToolbarText` title, the trailing
-  controls you pass, and an optional subtitle below — do not hand-build a heading
-  row or restyle a toolbar into one.
+- **Use one direct toolbar composition for panel/dialog/page headings.** Put an
+  optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
+  in the leading zone, and actions in a trailing group. Supporting copy is
+  app-owned content below. Do not create a private heading wrapper or restyle the
+  toolbar.
 - **Space by the five-step scale, by relationship not by eye.** `0`
   `--kui-space-none`, `4px` `--kui-space-2xs`, `8px` `--kui-space-xs` (inside a
   group), `16px` `--kui-space-m`, `24px` `--kui-space-l` (between major differing
@@ -127,9 +141,13 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   navigation stacks, tab selection and order, pane sizes, and `collapsed`/`expanded`
   disclosure flags in the app — they are data or persisted layout, and the app reads
   them to render. The `wire…` helpers own the _ephemeral_ parts: `wireNavStack` the
-  push/pop animation, `wireTabBars` the overflow autoscroll and drag preview,
+  push/pop animation, `wireTabBars` the overflow autoscroll, drag preview, and
+  replacement focus after controlled automatic tab activation,
   `wireResizableRegions` the live drag preview; they report committed changes via
-  callbacks. The one richer case is `wireTokenSearchFields`, which manages the
+  callbacks. Managed TokenSearchField clear also preserves open state and replacement
+  editor focus for continued typing. Select All deletion does the same; deletion
+  restoration finishes before the next keystroke rather than on a delayed frame.
+  Persist both query and remaining tokens read from an edited field. The one richer case is `wireTokenSearchFields`, which manages the
   collapsible field's expand/collapse/focus by default (on, per-behavior opt-out) and
   exposes the `expanded` signal on its handle — bind it in render or hand in your own
   via `collapsible.signals`. Do not hand-roll open/collapse/focus that helper
@@ -143,18 +161,22 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   boilerplate while still owning parsing and controlled token state.
 - **Placeholder loading state, don't rebuild it.** For a value or component that is
   still loading, set `placeholder` on the component (`Select`, `ListHeader`,
-  `ListItem`, `ValueTableRow`, `PanelHeader`, `SegmentedControl`, `StateBanner`,
+  `ListItem`, `ValueTableRow`, `SegmentedControl`, `StateBanner`,
   `AppTab`, `ToolbarText`, `ListActionRow`): it renders its real chrome with value
   slots as subtle **unanimated** skeleton blocks and interactivity disabled, so a
   parent composes a faithful loading view (e.g. an inspector) without hand-rebuilding
   markup. Use the standalone `Skeleton` for a custom slot. Prefer it over `wa-skeleton`
   (the pure-Kerf primitives avoid Web Awesome), and never animate it — use
   `LoadingSpinner` for known busy activity instead.
+- **Use a StateBanner badge only for compact supporting status.** Pass the
+  optional string `badge` for a terse count or status beside the title. It
+  inherits the banner tone and is announced with the banner, so keep its text
+  meaningful and never rely on color alone.
 
 ## Public exports
 
 `LucideIcon`, `DisclosureArrow`, `Toolbar`, `ToolbarControlGroup`, `FloatingToolbar`, `ToolbarText`,
-`PanelHeader`, `ListItem`, `ListActionRow`, `ListHeader`, `ListInsetControl`,
+`ListItem`, `ListActionRow`, `ListHeader`, `ListInsetControl`,
 `ListInsetText`, `SegmentedControl`,
 `Select`, `TokenSearchField` (+ `readTokenSearchField`, `placeTokenSearchCaret`,
 `wireTokenSearchFields`), `AppTab`, `TabBar` (+ `wireTabBars`, `reorderTabs`),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.23",
+  "version": "5.0.0-beta.25",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -64,6 +64,11 @@
       "browser": "./dist/browser/toolbar-control-group.js",
       "import": "./dist/toolbar-control-group.js"
     },
+    "./surface-scaffold": {
+      "types": "./dist/surface-scaffold.d.ts",
+      "browser": "./dist/browser/surface-scaffold.js",
+      "import": "./dist/surface-scaffold.js"
+    },
     "./floating-toolbar": {
       "types": "./dist/floating-toolbar.d.ts",
       "browser": "./dist/browser/floating-toolbar.js",
@@ -74,6 +79,11 @@
       "browser": "./dist/browser/toolbar-text.js",
       "import": "./dist/toolbar-text.js"
     },
+    "./list": {
+      "types": "./dist/list.d.ts",
+      "browser": "./dist/browser/list.js",
+      "import": "./dist/list.js"
+    },
     "./list-action-row": {
       "types": "./dist/list-action-row.d.ts",
       "browser": "./dist/browser/list-action-row.js",
@@ -243,11 +253,6 @@
       "browser": "./dist/browser/empty-state.js",
       "import": "./dist/empty-state.js"
     },
-    "./panel-header": {
-      "types": "./dist/panel-header.d.ts",
-      "browser": "./dist/browser/panel-header.js",
-      "import": "./dist/panel-header.js"
-    },
     "./value-table": {
       "types": "./dist/value-table.d.ts",
       "browser": "./dist/browser/value-table.js",
@@ -265,8 +270,10 @@
     "./disclosure-arrow.css": "./dist/styles/disclosure-arrow.css",
     "./toolbar.css": "./dist/styles/toolbar.css",
     "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",
+    "./surface-scaffold.css": "./dist/styles/surface-scaffold.css",
     "./floating-toolbar.css": "./dist/styles/floating-toolbar.css",
     "./toolbar-text.css": "./dist/styles/toolbar-text.css",
+    "./list.css": "./dist/styles/list.css",
     "./list-action-row.css": "./dist/styles/list-action-row.css",
     "./list-item.css": "./dist/styles/list-item.css",
     "./list-header.css": "./dist/styles/list-header.css",
@@ -290,7 +297,6 @@
     "./token-search-field.css": "./dist/styles/token-search-field.css",
     "./state-banner.css": "./dist/styles/state-banner.css",
     "./empty-state.css": "./dist/styles/empty-state.css",
-    "./panel-header.css": "./dist/styles/panel-header.css",
     "./value-table.css": "./dist/styles/value-table.css",
     "./ai/*": "./ai/*",
     "./docs/*": "./docs/*"
@@ -377,7 +383,7 @@
     "@typescript-eslint/eslint-plugin": "^8.65.0",
     "@typescript-eslint/parser": "^8.65.0",
     "@vitest/coverage-v8": "4.1.11",
-    "domotion-svg": "^0.29.0",
+    "domotion-svg": "^0.30.1",
     "esbuild": "^0.25.0",
     "eslint": "^10.8.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",

package/traversal-exclusions.mjs

@@ -1,6 +1,6 @@
 import { relative, sep } from 'node:path';
 
-const ignoredDirectoryNames = new Set([
+export const UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES = Object.freeze([
   '.git',
   '.kerf-cache',
   'coverage',
@@ -8,6 +8,12 @@ const ignoredDirectoryNames = new Set([
   'kerf-ui-evidence',
   'node_modules',
 ]);
+const ignoredDirectoryNames = new Set(UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES);
+
+export const UI_TRAVERSAL_ESLINT_IGNORES = Object.freeze([
+  ...UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES.map((name) => `**/${name}/**`),
+  '**/.claude/worktrees/**',
+]);
 
 export function isUiTraversalExcluded(root, candidate) {
   const segments = relative(root, candidate).split(sep);

package/ux-demo/recipes/app-shell.tsx

@@ -4,7 +4,6 @@ import './recipes.css';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { ResizableRegion } from '@kerfjs/ui/resizable-region';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
@@ -30,11 +29,7 @@ export const createRecipe: RecipeFactory = (announce) => {
     >
       <Toolbar
         label="Atlas workspace"
-        leading={
-          <ToolbarControlGroup appearance="borderless" single>
-            <ToolbarText text="Atlas" />
-          </ToolbarControlGroup>
-        }
+        leading={<ToolbarText text="Atlas" />}
         trailing={
           <div class="recipe-shell__toolbar-actions">
             <ToolbarControlGroup
@@ -134,21 +129,32 @@ export const createRecipe: RecipeFactory = (announce) => {
           </ResizableRegion>
         </div>
         <main id="recipe-shell-content" class="recipe-shell__main kui-pane">
-          <PanelHeader
-            title={
-              selected.value === 'inbox' ? 'Inbox triage' : 'Active projects'
+          <Toolbar
+            label="Current workspace view"
+            dividerSides=""
+            leading={
+              <ToolbarText
+                text={
+                  selected.value === 'inbox'
+                    ? 'Inbox triage'
+                    : 'Active projects'
+                }
+                size="xlarge"
+                id="recipe-shell-main-title"
+              />
             }
-            titleId="recipe-shell-main-title"
-            actions={
-              <button
-                class="kui-recipe__button"
-                data-primary="true"
-                type="button"
-                data-action="recipe-action"
-                data-recipe-command="new"
-              >
-                New task
-              </button>
+            trailing={
+              <ToolbarControlGroup appearance="borderless" single>
+                <button
+                  class="kui-recipe__button"
+                  data-primary="true"
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="new"
+                >
+                  New task
+                </button>
+              </ToolbarControlGroup>
             }
           />
           <div class="recipe-shell__main-body kui-pane__content kui-content">
@@ -183,9 +189,16 @@ export const createRecipe: RecipeFactory = (announce) => {
             edge="start"
           >
             <aside class="recipe-shell__inspector kui-pane">
-              <PanelHeader
-                title="Inspector"
-                titleId="recipe-shell-inspector-title"
+              <Toolbar
+                label="Inspector"
+                dividerSides=""
+                leading={
+                  <ToolbarText
+                    text="Inspector"
+                    size="xlarge"
+                    id="recipe-shell-inspector-title"
+                  />
+                }
               />
               <div class="recipe-shell__inspector-body kui-pane__content kui-content">
                 <ValueTable label="Selected task">

package/ux-demo/recipes/collapsible-sidebar.tsx

@@ -10,7 +10,6 @@ import { deviceClass } from '@kerfjs/ui/device-class';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
@@ -119,17 +118,28 @@ export const createRecipe: RecipeFactory = (announce) => {
         </nav>
       </CollapsiblePanel>
       <main class="recipe-collapsible-sidebar__main kui-pane">
-        <PanelHeader
-          title={
-            selected.value === 'projects'
-              ? 'Projects'
-              : selected.value === 'shared'
-                ? 'Shared with me'
-                : 'Inbox'
+        <Toolbar
+          label="Current navigation view"
+          dividerSides=""
+          leading={
+            <>
+              <ToolbarControlGroup appearance="borderless" single>
+                {railToggle(false)}
+              </ToolbarControlGroup>
+              <ToolbarText
+                text={
+                  selected.value === 'projects'
+                    ? 'Projects'
+                    : selected.value === 'shared'
+                      ? 'Shared with me'
+                      : 'Inbox'
+                }
+                size="xlarge"
+                id="recipe-collapsible-main-title"
+              />
+            </>
           }
-          titleId="recipe-collapsible-main-title"
-          icon={railToggle(false)}
-          actions={
+          trailing={
             <ToolbarControlGroup appearance="borderless" single>
               {drawerToggle()}
             </ToolbarControlGroup>
@@ -160,12 +170,8 @@ export const createRecipe: RecipeFactory = (announce) => {
       >
         <Toolbar
           label="Activity"
-          divider
-          leading={
-            <ToolbarControlGroup appearance="borderless" single>
-              <ToolbarText text="Activity" size="small" />
-            </ToolbarControlGroup>
-          }
+          dividerSides="b"
+          leading={<ToolbarText text="Activity" size="small" />}
           trailing={
             <ToolbarControlGroup appearance="borderless" single>
               {drawerToggle()}

package/ux-demo/recipes/composer-form.tsx

@@ -6,9 +6,10 @@ import '@awesome.me/webawesome/dist/components/input/input.js';
 import '@awesome.me/webawesome/dist/components/textarea/textarea.js';
 import './recipes.css';
 
-import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { Select } from '@kerfjs/ui/select';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 
 import type { RecipeFactory } from './types.js';
@@ -44,12 +45,20 @@ export const createRecipe: RecipeFactory = (announce) => {
       aria-describedby="recipe-composer-summary"
       noValidate
     >
-      <PanelHeader
-        title="Publish workspace update"
-        titleId="recipe-composer-title"
-        summary="Share a concise, actionable update with collaborators."
-        summaryId="recipe-composer-summary"
+      <Toolbar
+        label="Publish workspace update"
+        dividerSides=""
+        leading={
+          <ToolbarText
+            text="Publish workspace update"
+            size="xlarge"
+            id="recipe-composer-title"
+          />
+        }
       />
+      <p class="kui-recipe__heading-summary" id="recipe-composer-summary">
+        Share a concise, actionable update with collaborators.
+      </p>
       {status.value === 'error' && (
         <StateBanner
           title="Add a title before publishing"

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -7,7 +7,9 @@ import './recipes.css';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { FileText } from 'lucide';
@@ -89,22 +91,36 @@ export const createRecipe: RecipeFactory = (announce) => {
               </div>
             </nav>
             <section class="recipe-list-detail__detail kui-pane">
-              <PanelHeader
-                title="Project details"
-                titleId="recipe-dialog-title"
-                summary="Compare delivery state without leaving the workspace."
-                summaryId="recipe-dialog-summary"
-                icon={<LucideIcon icon={FileText} name="file-text" />}
-                actions={
-                  <wa-button
-                    appearance="plain"
-                    data-action="recipe-action"
-                    data-recipe-command="close"
-                  >
-                    Close
-                  </wa-button>
+              <Toolbar
+                label="Project details"
+                dividerSides=""
+                leading={
+                  <>
+                    <ToolbarControlGroup appearance="borderless" single>
+                      <LucideIcon icon={FileText} name="file-text" />
+                    </ToolbarControlGroup>
+                    <ToolbarText
+                      text="Project details"
+                      size="xlarge"
+                      id="recipe-dialog-title"
+                    />
+                  </>
+                }
+                trailing={
+                  <ToolbarControlGroup appearance="borderless" single>
+                    <wa-button
+                      appearance="plain"
+                      data-action="recipe-action"
+                      data-recipe-command="close"
+                    >
+                      Close
+                    </wa-button>
+                  </ToolbarControlGroup>
                 }
               />
+              <p class="kui-recipe__heading-summary" id="recipe-dialog-summary">
+                Compare delivery state without leaving the workspace.
+              </p>
               <div
                 class="recipe-list-detail__body kui-pane__content kui-content"
                 aria-live="polite"

package/ux-demo/recipes/list-workspace-states.tsx

@@ -3,8 +3,10 @@ import './recipes.css';
 
 import { EmptyState } from '@kerfjs/ui/empty-state';
 import { LoadingSpinner } from '@kerfjs/ui/loading-spinner';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 
 import type { RecipeFactory } from './types.js';
@@ -122,11 +124,18 @@ export const createRecipe: RecipeFactory = (announce) => {
       data-recipe="recipe-list-workspace-states"
       data-list-state={state.value}
     >
-      <PanelHeader
-        title="Release tasks"
-        titleId="recipe-list-title"
-        actions={
-          <div class="kui-control-cluster">
+      <Toolbar
+        label="Release tasks"
+        dividerSides=""
+        leading={
+          <ToolbarText
+            text="Release tasks"
+            size="xlarge"
+            id="recipe-list-title"
+          />
+        }
+        trailing={
+          <ToolbarControlGroup appearance="borderless">
             <button
               class="kui-recipe__button"
               type="button"
@@ -152,7 +161,7 @@ export const createRecipe: RecipeFactory = (announce) => {
             >
               Refresh
             </button>
-          </div>
+          </ToolbarControlGroup>
         }
       />
       <div class="recipe-list__body kui-pane__content kui-content">

package/ux-demo/recipes/loading-inspector.tsx

@@ -4,10 +4,13 @@ import './recipes.css';
 
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { SegmentedControl } from '@kerfjs/ui/segmented-control';
 import { Select } from '@kerfjs/ui/select';
+import { Skeleton } from '@kerfjs/ui/skeleton';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { Columns3, FileText, Inbox, List } from 'lucide';
@@ -35,25 +38,43 @@ export const createRecipe: RecipeFactory = (announce) => {
         data-recipe="recipe-loading-inspector"
         data-inspector-loading={String(p)}
       >
-        <PanelHeader
-          title="Ticket · KF-2048"
-          titleId="recipe-inspector-title"
-          summary="Restore keyboard focus after a dialog closes"
-          summaryId="recipe-inspector-summary"
-          icon={icon(FileText, 'file-text')}
-          placeholder={p}
-          actions={
-            <button
-              class="kui-recipe__button"
-              data-primary="true"
-              type="button"
-              data-action="recipe-action"
-              data-recipe-command="toggle"
-            >
-              {p ? 'Show loaded' : 'Show loading'}
-            </button>
+        <Toolbar
+          label="Ticket inspector"
+          dividerSides=""
+          leading={
+            <>
+              <ToolbarControlGroup appearance="borderless" single>
+                {icon(FileText, 'file-text')}
+              </ToolbarControlGroup>
+              <ToolbarText
+                text="Ticket · KF-2048"
+                size="xlarge"
+                id="recipe-inspector-title"
+                placeholder={p}
+              />
+            </>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                class="kui-recipe__button"
+                data-primary="true"
+                type="button"
+                data-action="recipe-action"
+                data-recipe-command="toggle"
+              >
+                {p ? 'Show loaded' : 'Show loading'}
+              </button>
+            </ToolbarControlGroup>
           }
         />
+        <p class="kui-recipe__heading-summary" id="recipe-inspector-summary">
+          {p ? (
+            <Skeleton width="18em" />
+          ) : (
+            'Restore keyboard focus after a dialog closes'
+          )}
+        </p>
         <div class="recipe-inspector__body kui-pane__content kui-content">
           <section>
             <ValueTable label="Ticket details">

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -92,7 +92,7 @@ export const createRecipe: RecipeFactory = (announce) => {
       <footer class="recipe-sidebar__footer kui-pane__footer">
         <Toolbar
           label="Sidebar actions"
-          divider={false}
+          dividerSides=""
           leading={
             <ToolbarControlGroup appearance="borderless" single>
               <button