@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.6

package/README.md

@@ -8,7 +8,7 @@ For connective application patterns, use the seven [production composition
 recipes](./docs/recipes.md). Each has a stable catalog route, runnable state,
 public-subpath source, semantic layout ownership, and explicit application
 customization boundaries. The composer recipe demonstrates one coherent form
-surface with `DialogHeader` hierarchy and field/action controls aligned to the
+surface with `PanelHeader` hierarchy and field/action controls aligned to the
 shared 8px gutter; only persistent feedback adds a nested semantic
 `StateBanner` surface.
 
@@ -108,7 +108,6 @@ as a `New` marker.
 | `AppTab` | `@kerfjs/ui/app-tab` | `@kerfjs/ui/app-tab.css` |
 | `TabBar` | `@kerfjs/ui/tab-bar` | `@kerfjs/ui/tab-bar.css` |
 | `wireTabBars`, `reorderTabs` | `@kerfjs/ui/wire-tab-bars` | — |
-| `PageHeader` | `@kerfjs/ui/page-header` | `@kerfjs/ui/page-header.css` |
 | `LoadingSpinner` | `@kerfjs/ui/loading-spinner` | `@kerfjs/ui/loading-spinner.css` |
 | `Select` | `@kerfjs/ui/select` | `@kerfjs/ui/select.css` |
 | `SegmentedControl` | `@kerfjs/ui/segmented-control` | `@kerfjs/ui/segmented-control.css` |
@@ -116,14 +115,15 @@ as a `New` marker.
 | `wireTokenSearchFields` | `@kerfjs/ui/wire-token-search-fields` | — |
 | `StateBanner` | `@kerfjs/ui/state-banner` | `@kerfjs/ui/state-banner.css` |
 | `EmptyState` | `@kerfjs/ui/empty-state` | `@kerfjs/ui/empty-state.css` |
-| `DialogHeader` | `@kerfjs/ui/dialog-header` | `@kerfjs/ui/dialog-header.css` |
+| `PanelHeader` | `@kerfjs/ui/panel-header` | `@kerfjs/ui/panel-header.css` |
 | `ValueTable`, `ValueTableRow` | `@kerfjs/ui/value-table` | `@kerfjs/ui/value-table.css` |
 
-`DialogHeader` puts its 24px icon in a 34px circular background and aligns that
-identity group with its automatically grouped action children in a real top
-toolbar. Its optional summary stays on a separate row below the title. Pass a
-localized `actionsLabel` when the action group needs an accessible name; new
-callers pass action children directly rather than pre-wrapping groups.
+`PanelHeader` is a plain `Toolbar` used as a panel, dialog, or page heading: an
+optional icon control group (given a brand fill with a matching border), the
+title as extra-large `ToolbarText`, the app's trailing action controls, and an
+optional subtitle on a separate row below the title. It overrides no toolbar
+styles — the app passes its own trailing controls (typically a
+`ToolbarControlGroup`).
 
 `DisclosureArrow` defaults to an 18px root-scaled decorative visual. Override
 `--kui-disclosure-arrow-size` at the narrowest useful scope when a consumer

package/ai/component-catalog.json

@@ -328,11 +328,7 @@
       ],
       "alternatives": [
         {
-          "id": "page-header",
-          "relationship": "nearest"
-        },
-        {
-          "id": "dialog-header",
+          "id": "panel-header",
           "relationship": "nearest"
         }
       ],
@@ -478,7 +474,7 @@
       ],
       "alternatives": [
         {
-          "id": "page-header",
+          "id": "panel-header",
           "relationship": "nearest"
         }
       ],
@@ -524,8 +520,7 @@
       "source": "kerf",
       "description": "Page, dialog, and definition-list hierarchy.",
       "uses": [
-        "page-header",
-        "dialog-header",
+        "panel-header",
         "value-table"
       ],
       "purpose": "Page, dialog, and definition-list hierarchy.",
@@ -542,11 +537,7 @@
           "relationship": "nearest"
         },
         {
-          "id": "page-header",
-          "relationship": "nearest"
-        },
-        {
-          "id": "dialog-header",
+          "id": "panel-header",
           "relationship": "nearest"
         }
       ],
@@ -578,96 +569,31 @@
       }
     },
     {
-      "id": "page-header",
-      "name": "PageHeader",
+      "id": "panel-header",
+      "name": "PanelHeader",
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "Page identity with an optional trailing action.",
-      "uses": [],
-      "purpose": "Page identity with an optional trailing action.",
-      "publicExports": [
-        "PageHeader"
-      ],
-      "useWhen": [
-        "Identify a page with its primary heading and optional trailing action."
-      ],
-      "avoidWhen": [
-        "Do not use for persistent app chrome or a modal task."
-      ],
-      "alternatives": [
-        {
-          "id": "toolbar",
-          "relationship": "nearest"
-        },
-        {
-          "id": "dialog-header",
-          "relationship": "nearest"
-        }
-      ],
-      "appOwns": [
-        "title",
-        "action",
-        "responsive placement"
-      ],
-      "variants": [
-        "title",
-        "title with action"
-      ],
-      "accessibility": [
-        "Use once for the page primary heading."
-      ],
-      "delivery": {
-        "browserImport": "@kerfjs/ui/page-header",
-        "manualCssImport": "@kerfjs/ui/page-header.css",
-        "sideEffects": [
-          "browser-condition-css"
-        ]
-      },
-      "wiring": [],
-      "publicClasses": [
-        "kui-page-header",
-        "kui-page-header__action"
-      ],
-      "publicTokens": [
-        "--kui-color-text",
-        "--kui-font-2xl",
-        "--kui-font-l",
-        "--kui-page-header-background",
-        "--kui-page-header-border",
-        "--kui-page-header-foreground"
-      ],
-      "links": {
-        "catalogRoute": "?component=page-header",
-        "documentation": "docs/component-selection.md",
-        "recipe": "docs/component-selection.md#ambiguous-choices"
-      }
-    },
-    {
-      "id": "dialog-header",
-      "name": "DialogHeader",
-      "category": "Structure",
-      "kind": "component",
-      "source": "kerf",
-      "description": "Dialog toolbar with aligned icon, title, grouped actions, and a subtitle row.",
+      "description": "A plain Toolbar as a panel, dialog, or page heading: optional icon group, an extra-large title, trailing actions, and an optional subtitle row.",
       "uses": [
         "lucide-icon",
         "toolbar",
-        "toolbar-control-group"
+        "toolbar-control-group",
+        "toolbar-text"
       ],
-      "purpose": "Dialog toolbar with aligned icon, title, grouped actions, and a subtitle row.",
+      "purpose": "A plain Toolbar as a panel, dialog, or page heading: optional icon group, an extra-large title, trailing actions, and an optional subtitle row.",
       "publicExports": [
-        "DialogHeader"
+        "PanelHeader"
       ],
       "useWhen": [
-        "Label a focused dialog task with a toolbar-aligned title, icon, actions, and subtitle."
+        "Give a panel, dialog, or page a heading with an extra-large title, optional icon and subtitle, and trailing actions."
       ],
       "avoidWhen": [
-        "Do not use as the page heading or as a replacement for modal behavior."
+        "Do not use it as persistent application chrome; use Toolbar. It supplies header structure, not modal behavior."
       ],
       "alternatives": [
         {
-          "id": "page-header",
+          "id": "toolbar",
           "relationship": "nearest"
         },
         {
@@ -680,49 +606,41 @@
         "focus lifecycle",
         "dismissal",
         "copy",
-        "localized action-group label"
+        "the trailing action controls"
       ],
       "variants": [
         "title",
         "optional summary",
         "icon",
-        "actions",
-        "actionsLabel"
+        "actions"
       ],
       "accessibility": [
-        "Connect the title id and any provided summary id to the dialog host.",
-        "Pass a localized actionsLabel when the automatic action group needs an accessible name."
+        "Connect the title id and any provided summary id to the dialog or panel host.",
+        "Pass the trailing actions as a labeled ToolbarControlGroup when the group needs an accessible name."
       ],
       "delivery": {
-        "browserImport": "@kerfjs/ui/dialog-header",
-        "manualCssImport": "@kerfjs/ui/dialog-header.css",
+        "browserImport": "@kerfjs/ui/panel-header",
+        "manualCssImport": "@kerfjs/ui/panel-header.css",
         "sideEffects": [
           "browser-condition-css"
         ]
       },
       "wiring": [],
       "publicClasses": [
-        "kui-dialog-header",
-        "kui-dialog-header__actions",
-        "kui-dialog-header__copy",
-        "kui-dialog-header__icon",
-        "kui-dialog-header__identity",
-        "kui-dialog-header__summary",
-        "kui-dialog-header__toolbar"
+        "kui-panel-header",
+        "kui-panel-header__icon",
+        "kui-panel-header__summary"
       ],
       "publicTokens": [
         "--kui-color-brand-fill-quiet",
         "--kui-color-brand-on-quiet",
-        "--kui-color-text",
         "--kui-color-text-quiet",
-        "--kui-dialog-header-border",
-        "--kui-dialog-header-icon-background",
-        "--kui-dialog-header-icon-foreground",
-        "--kui-font-l",
-        "--kui-radius-circle"
+        "--kui-panel-header-icon-background",
+        "--kui-panel-header-icon-border",
+        "--kui-panel-header-icon-foreground"
       ],
       "links": {
-        "catalogRoute": "?component=dialog-header",
+        "catalogRoute": "?component=panel-header",
         "documentation": "docs/component-selection.md",
         "recipe": "docs/component-selection.md#ambiguous-choices"
       }
@@ -881,11 +799,7 @@
       ],
       "alternatives": [
         {
-          "id": "page-header",
-          "relationship": "nearest"
-        },
-        {
-          "id": "dialog-header",
+          "id": "panel-header",
           "relationship": "nearest"
         }
       ],
@@ -1433,7 +1347,7 @@
         "tokens",
         "query execution",
         "results",
-        "transient focused/open state and focus transfer"
+        "optional override of the collapsible expand/collapse/focus, which wireTokenSearchFields manages by default (adopt an app expanded signal, opt out per behavior, or drive it via the returned handle)"
       ],
       "variants": [
         "tokens",
@@ -1445,7 +1359,7 @@
         "Announce result changes when useful and keep tokens atomic during editing.",
         "Keep leading and trailing controls aligned to the first text line while content wraps.",
         "Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion; visual wrapping remains available.",
-        "In collapsible mode, transfer focus from the named trigger into the revealed searchbox and clear expanded only after focus leaves the component."
+        "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out."
       ],
       "delivery": {
         "browserImport": "@kerfjs/ui/token-search-field",
@@ -4371,13 +4285,42 @@
       "kind": "recipe",
       "source": "kerf",
       "purpose": "Toolbar, navigation, content, and inspector shell with controlled resizing and explicit pane scroll owners.",
-      "uses": ["toolbar", "toolbar-text", "toolbar-control-group", "menu-header", "menu-item", "page-header", "resize", "value-table", "layout"],
-      "useWhen": ["A desktop workspace needs persistent chrome and user-adjustable navigation or inspector panes."],
-      "avoidWhen": ["Use ordinary CSS grid when panes are static or the product does not need a user-operable separator."],
-      "appOwns": ["routing", "pane visibility", "pane sizes and persistence", "workspace data"],
-      "accessibility": ["Each pane has one scroll owner and each resize handle keeps its separator keyboard contract."],
-      "delivery": { "sideEffects": ["lazy-recipe-css"] },
-      "links": { "catalogRoute": "?component=recipe-app-shell", "documentation": "docs/recipes.md#desktop-application-shell", "recipe": "docs/recipes.md#desktop-application-shell" }
+      "uses": [
+        "toolbar",
+        "toolbar-text",
+        "toolbar-control-group",
+        "menu-header",
+        "menu-item",
+        "panel-header",
+        "resize",
+        "value-table",
+        "layout"
+      ],
+      "useWhen": [
+        "A desktop workspace needs persistent chrome and user-adjustable navigation or inspector panes."
+      ],
+      "avoidWhen": [
+        "Use ordinary CSS grid when panes are static or the product does not need a user-operable separator."
+      ],
+      "appOwns": [
+        "routing",
+        "pane visibility",
+        "pane sizes and persistence",
+        "workspace data"
+      ],
+      "accessibility": [
+        "Each pane has one scroll owner and each resize handle keeps its separator keyboard contract."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-app-shell",
+        "documentation": "docs/recipes.md#desktop-application-shell",
+        "recipe": "docs/recipes.md#desktop-application-shell"
+      }
     },
     {
       "id": "recipe-navigation-sidebar",
@@ -4386,13 +4329,37 @@
       "kind": "recipe",
       "source": "kerf",
       "purpose": "Navigation sections with icon and iconless rows, a content-item surface, disclosure, and pane footer actions.",
-      "uses": ["menu-header", "menu-item", "toolbar", "toolbar-control-group"],
-      "useWhen": ["A workspace sidebar needs the shared toolbar/content/footer pane model, 24px major section rhythm, and 44px row and utility-action targets."],
-      "avoidWhen": ["Use ordinary links when menu selection, section, and sidebar anatomy do not apply."],
-      "appOwns": ["information architecture", "routing", "permissions", "disclosure state"],
-      "accessibility": ["Native buttons retain names, current state, sequential focus, and disclosure state; rows and standalone footer actions remain at least 44px tall."],
-      "delivery": { "sideEffects": ["lazy-recipe-css"] },
-      "links": { "catalogRoute": "?component=recipe-navigation-sidebar", "documentation": "docs/recipes.md#navigation-sidebar", "recipe": "docs/recipes.md#navigation-sidebar" }
+      "uses": [
+        "menu-header",
+        "menu-item",
+        "toolbar",
+        "toolbar-control-group"
+      ],
+      "useWhen": [
+        "A workspace sidebar needs the shared toolbar/content/footer pane model, 24px major section rhythm, and 44px row and utility-action targets."
+      ],
+      "avoidWhen": [
+        "Use ordinary links when menu selection, section, and sidebar anatomy do not apply."
+      ],
+      "appOwns": [
+        "information architecture",
+        "routing",
+        "permissions",
+        "disclosure state"
+      ],
+      "accessibility": [
+        "Native buttons retain names, current state, sequential focus, and disclosure state; rows and standalone footer actions remain at least 44px tall."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-navigation-sidebar",
+        "documentation": "docs/recipes.md#navigation-sidebar",
+        "recipe": "docs/recipes.md#navigation-sidebar"
+      }
     },
     {
       "id": "recipe-workspace-header",
@@ -4401,13 +4368,36 @@
       "kind": "recipe",
       "source": "kerf",
       "purpose": "Page identity with primary, secondary, and overflow actions that relocate at narrow widths.",
-      "uses": ["page-header", "state-banner", "layout"],
-      "useWhen": ["A workspace page needs one primary heading and a small prioritized action set."],
-      "avoidWhen": ["Use Toolbar for persistent application chrome or DialogHeader for a focused modal task."],
-      "appOwns": ["authorization", "command behavior", "breadcrumbs", "product copy"],
-      "accessibility": ["Heading order and action focus order remain stable when controls wrap."],
-      "delivery": { "sideEffects": ["lazy-recipe-css"] },
-      "links": { "catalogRoute": "?component=recipe-workspace-header", "documentation": "docs/recipes.md#workspace-header", "recipe": "docs/recipes.md#workspace-header" }
+      "uses": [
+        "panel-header",
+        "state-banner",
+        "layout"
+      ],
+      "useWhen": [
+        "A workspace page needs one primary heading and a small prioritized action set."
+      ],
+      "avoidWhen": [
+        "Use Toolbar for persistent application chrome or PanelHeader for a focused modal task."
+      ],
+      "appOwns": [
+        "authorization",
+        "command behavior",
+        "breadcrumbs",
+        "product copy"
+      ],
+      "accessibility": [
+        "Heading order and action focus order remain stable when controls wrap."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-workspace-header",
+        "documentation": "docs/recipes.md#workspace-header",
+        "recipe": "docs/recipes.md#workspace-header"
+      }
     },
     {
       "id": "recipe-master-detail-dialog",
@@ -4415,14 +4405,41 @@
       "category": "Recipes",
       "kind": "recipe",
       "source": "kerf",
-      "purpose": "Production modal containing a DialogHeader, navigable record master list, and ValueTable detail.",
-      "uses": ["dialog-header", "menu-header", "menu-item", "value-table", "wa-dialog", "wa-button"],
-      "useWhen": ["A focused task compares several records without leaving the current workspace."],
-      "avoidWhen": ["Use a page when the task needs a durable route or substantially more working space."],
-      "appOwns": ["open state", "selected record", "dismiss policy", "record actions"],
-      "accessibility": ["Web Awesome owns modal focus and Escape; the application adapter restores the invoking control after hide, and DialogHeader supplies the visible hierarchy."],
-      "delivery": { "sideEffects": ["lazy-recipe-css", "individual-custom-element-registration"] },
-      "links": { "catalogRoute": "?component=recipe-master-detail-dialog", "documentation": "docs/recipes.md#master-detail-dialog", "recipe": "docs/recipes.md#master-detail-dialog" }
+      "purpose": "Production modal containing a PanelHeader, navigable record master list, and ValueTable detail.",
+      "uses": [
+        "panel-header",
+        "menu-header",
+        "menu-item",
+        "value-table",
+        "wa-dialog",
+        "wa-button"
+      ],
+      "useWhen": [
+        "A focused task compares several records without leaving the current workspace."
+      ],
+      "avoidWhen": [
+        "Use a page when the task needs a durable route or substantially more working space."
+      ],
+      "appOwns": [
+        "open state",
+        "selected record",
+        "dismiss policy",
+        "record actions"
+      ],
+      "accessibility": [
+        "Web Awesome owns modal focus and Escape; the application adapter restores the invoking control after hide, and PanelHeader supplies the visible hierarchy."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css",
+          "individual-custom-element-registration"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-master-detail-dialog",
+        "documentation": "docs/recipes.md#master-detail-dialog",
+        "recipe": "docs/recipes.md#master-detail-dialog"
+      }
     },
     {
       "id": "recipe-composer-form",
@@ -4430,14 +4447,42 @@
       "category": "Recipes",
       "kind": "recipe",
       "source": "kerf",
-      "purpose": "One visible publishing-form surface with DialogHeader hierarchy, fields and actions on the shared 8px control gutter, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface.",
-      "uses": ["dialog-header", "select", "state-banner", "wa-input", "wa-textarea", "wa-button", "layout"],
-      "useWhen": ["A short form needs one coherent surface, consistent field/action rhythm, and persistent validation feedback."],
-      "avoidWhen": ["Do not turn each form section into another visible card or use the recipe as a generic form engine or transport abstraction."],
-      "appOwns": ["validation rules", "draft persistence", "permissions", "transport"],
-      "accessibility": ["The form references DialogHeader's title and summary ids; production fields own labels and help; invalid submission creates an assertive persistent StateBanner while successful submission creates a polite persistent banner."],
-      "delivery": { "sideEffects": ["lazy-recipe-css", "individual-custom-element-registration"] },
-      "links": { "catalogRoute": "?component=recipe-composer-form", "documentation": "docs/recipes.md#composer-form", "recipe": "docs/recipes.md#composer-form" }
+      "purpose": "One visible publishing-form surface with PanelHeader hierarchy, fields and actions on the shared 8px control gutter, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface.",
+      "uses": [
+        "panel-header",
+        "select",
+        "state-banner",
+        "wa-input",
+        "wa-textarea",
+        "wa-button",
+        "layout"
+      ],
+      "useWhen": [
+        "A short form needs one coherent surface, consistent field/action rhythm, and persistent validation feedback."
+      ],
+      "avoidWhen": [
+        "Do not turn each form section into another visible card or use the recipe as a generic form engine or transport abstraction."
+      ],
+      "appOwns": [
+        "validation rules",
+        "draft persistence",
+        "permissions",
+        "transport"
+      ],
+      "accessibility": [
+        "The form references PanelHeader's title and summary ids; production fields own labels and help; invalid submission creates an assertive persistent StateBanner while successful submission creates a polite persistent banner."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css",
+          "individual-custom-element-registration"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-composer-form",
+        "documentation": "docs/recipes.md#composer-form",
+        "recipe": "docs/recipes.md#composer-form"
+      }
     },
     {
       "id": "recipe-list-workspace-states",
@@ -4446,13 +4491,38 @@
       "kind": "recipe",
       "source": "kerf",
       "purpose": "Deterministic loading, empty, populated, stale refresh, and error states around one stable list workspace.",
-      "uses": ["page-header", "state-banner", "empty-state", "loading-spinner", "layout"],
-      "useWhen": ["A list surface must communicate initial load, absence, background refresh, failure, and recovery."],
-      "avoidWhen": ["Do not replace domain rows with a generic component or use transient toasts as the only error record."],
-      "appOwns": ["fetching", "cache age", "retry policy", "domain rows"],
-      "accessibility": ["Busy, polite, and assertive states use the appropriate production feedback semantics."],
-      "delivery": { "sideEffects": ["lazy-recipe-css"] },
-      "links": { "catalogRoute": "?component=recipe-list-workspace-states", "documentation": "docs/recipes.md#list-workspace-states", "recipe": "docs/recipes.md#list-workspace-states" }
+      "uses": [
+        "panel-header",
+        "state-banner",
+        "empty-state",
+        "loading-spinner",
+        "layout"
+      ],
+      "useWhen": [
+        "A list surface must communicate initial load, absence, background refresh, failure, and recovery."
+      ],
+      "avoidWhen": [
+        "Do not replace domain rows with a generic component or use transient toasts as the only error record."
+      ],
+      "appOwns": [
+        "fetching",
+        "cache age",
+        "retry policy",
+        "domain rows"
+      ],
+      "accessibility": [
+        "Busy, polite, and assertive states use the appropriate production feedback semantics."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-list-workspace-states",
+        "documentation": "docs/recipes.md#list-workspace-states",
+        "recipe": "docs/recipes.md#list-workspace-states"
+      }
     },
     {
       "id": "recipe-compact-toolbar",
@@ -4461,13 +4531,79 @@
       "kind": "recipe",
       "source": "kerf",
       "purpose": "A compact toolbar that distinguishes grouped commands, a visible exclusive choice, a longer Select, and one ordinary action.",
-      "uses": ["toolbar", "toolbar-text", "toolbar-control-group", "segmented-control", "select", "lucide-icon"],
-      "useWhen": ["A dense workspace toolbar mixes a few distinct control semantics."],
-      "avoidWhen": ["Do not group unrelated actions or use buttons to imitate selection controls."],
-      "appOwns": ["controlled values", "actions", "persistence", "responsive priority"],
-      "accessibility": ["Each control retains its own native name, pressed/value state, and keyboard contract."],
-      "delivery": { "sideEffects": ["lazy-recipe-css", "individual-custom-element-registration"] },
-      "links": { "catalogRoute": "?component=recipe-compact-toolbar", "documentation": "docs/recipes.md#compact-toolbar-choices-and-actions", "recipe": "docs/recipes.md#compact-toolbar-choices-and-actions" }
+      "uses": [
+        "toolbar",
+        "toolbar-text",
+        "toolbar-control-group",
+        "segmented-control",
+        "select",
+        "lucide-icon"
+      ],
+      "useWhen": [
+        "A dense workspace toolbar mixes a few distinct control semantics."
+      ],
+      "avoidWhen": [
+        "Do not group unrelated actions or use buttons to imitate selection controls."
+      ],
+      "appOwns": [
+        "controlled values",
+        "actions",
+        "persistence",
+        "responsive priority"
+      ],
+      "accessibility": [
+        "Each control retains its own native name, pressed/value state, and keyboard contract."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css",
+          "individual-custom-element-registration"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-compact-toolbar",
+        "documentation": "docs/recipes.md#compact-toolbar-choices-and-actions",
+        "recipe": "docs/recipes.md#compact-toolbar-choices-and-actions"
+      }
+    },
+    {
+      "id": "recipe-navigation-stack",
+      "name": "Navigation stack",
+      "category": "Recipes",
+      "kind": "recipe",
+      "source": "kerf",
+      "purpose": "A push/pop navigation stack drill-down with animated slides and a live device class.",
+      "uses": [
+        "menu-header",
+        "menu-item",
+        "lucide-icon",
+        "layout"
+      ],
+      "useWhen": [
+        "A flow drills from a list into detail and back on one pane, at any device size or inside a dialog."
+      ],
+      "avoidWhen": [
+        "Use SplitView when a list and its detail should show together on roomy classes."
+      ],
+      "appOwns": [
+        "the stack (a signal of views)",
+        "selection",
+        "routing",
+        "data"
+      ],
+      "accessibility": [
+        "The back control is a real button; reduced motion collapses the slide to instant."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-navigation-stack",
+        "documentation": "docs/recipes.md#navigation-stack",
+        "recipe": "docs/recipes.md#navigation-stack"
+      }
     }
   ]
 }