@uxelle/skills 0.2.3 → 0.2.4

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/manifest.generated.ts
 var manifest = {
   "schemaVersion": 1,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "skills": [
     {
       "name": "uxelle-components",
@@ -249,8 +249,8 @@ var manifest = {
         },
         {
           "path": "Navigation.md",
-          "size": 2626,
-          "hash": "sha256:ed38f63fc2728c5de857bcc891807c628103e30b7381e4b4b3e7576980b672e4"
+          "size": 3749,
+          "hash": "sha256:d51bf6f799deda23afae3b13a60e38d90b8a8069be1eedd05c5c6ec5d6d806ad"
         },
         {
           "path": "NavigationSide.md",
@@ -274,8 +274,8 @@ var manifest = {
         },
         {
           "path": "NavLink.md",
-          "size": 2567,
-          "hash": "sha256:46d020ef5c1a46874e8fb89df9af5c96b0a2cc9b778fe8d64ceaaa1522df8047"
+          "size": 2765,
+          "hash": "sha256:6d8d696c1066b536cb3a36a145f316968bef40879b265a8d5fac06fbeaf9d69b"
         },
         {
           "path": "NotificationBadge.md",
@@ -436,12 +436,12 @@ var manifest = {
         {
           "path": "how-to-host.md",
           "size": 2856,
-          "hash": "sha256:05187f27fb791bc18c613354635d5d68a044454c166dfce0925116adca3a6cba"
+          "hash": "sha256:dab3dc61a74b069600d56940f4b2b5e9210f2899ab5688613fbbbfdc035c60ba"
         },
         {
           "path": "how-to-page-layout.md",
-          "size": 10962,
-          "hash": "sha256:b01626a0661950a5bbb9a7def38e82b6b3ce9ded32a328edd72aa5c256588a84"
+          "size": 11126,
+          "hash": "sha256:2d06c39afbe035eb13bace7c744f7d19a2130248eb574a8b11f2bf179f83fa67"
         },
         {
           "path": "principles.md",
@@ -450,8 +450,8 @@ var manifest = {
         },
         {
           "path": "recipe-app-chrome.md",
-          "size": 10042,
-          "hash": "sha256:225ebbfabfa65538c9275744c4cc6e5cc7798a36ab496643b41283efae3ea1a3"
+          "size": 12052,
+          "hash": "sha256:f4a1380400b4ea54a70dd8d77bb800d37fdf90240e1aaecd5aafad67730730bb"
         },
         {
           "path": "recipe-card-grid.md",
@@ -508,6 +508,11 @@ var manifest = {
           "size": 3876,
           "hash": "sha256:351069ddf1e5d085d9f1a89caa47c368874b5d15d4cb9a53e9e1691c3df44a14"
         },
+        {
+          "path": "recipe-navigation.md",
+          "size": 17612,
+          "hash": "sha256:37dde1f17bb34f12b9e53a930f336a7beafbb4ae9fc237bcff02a2b37018f922"
+        },
         {
           "path": "recipe-page-header.md",
           "size": 4161,
@@ -565,8 +570,8 @@ var manifest = {
         },
         {
           "path": "SKILL.md",
-          "size": 10810,
-          "hash": "sha256:096a85cb85d2fe413bc5f2abb241c45ea6e59dfc3b9547a00b639c7739fc014e"
+          "size": 11032,
+          "hash": "sha256:75b96a393abccffd6c6292a22bbaf88f402fc68edbcd9326f7d099ea0d575d48"
         },
         {
           "path": "spacing-steps.md",

package/index.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "skills": [
     {
       "name": "uxelle-components",
@@ -248,8 +248,8 @@
         },
         {
           "path": "Navigation.md",
-          "size": 2626,
-          "hash": "sha256:ed38f63fc2728c5de857bcc891807c628103e30b7381e4b4b3e7576980b672e4"
+          "size": 3749,
+          "hash": "sha256:d51bf6f799deda23afae3b13a60e38d90b8a8069be1eedd05c5c6ec5d6d806ad"
         },
         {
           "path": "NavigationSide.md",
@@ -273,8 +273,8 @@
         },
         {
           "path": "NavLink.md",
-          "size": 2567,
-          "hash": "sha256:46d020ef5c1a46874e8fb89df9af5c96b0a2cc9b778fe8d64ceaaa1522df8047"
+          "size": 2765,
+          "hash": "sha256:6d8d696c1066b536cb3a36a145f316968bef40879b265a8d5fac06fbeaf9d69b"
         },
         {
           "path": "NotificationBadge.md",
@@ -435,12 +435,12 @@
         {
           "path": "how-to-host.md",
           "size": 2856,
-          "hash": "sha256:05187f27fb791bc18c613354635d5d68a044454c166dfce0925116adca3a6cba"
+          "hash": "sha256:dab3dc61a74b069600d56940f4b2b5e9210f2899ab5688613fbbbfdc035c60ba"
         },
         {
           "path": "how-to-page-layout.md",
-          "size": 10962,
-          "hash": "sha256:b01626a0661950a5bbb9a7def38e82b6b3ce9ded32a328edd72aa5c256588a84"
+          "size": 11126,
+          "hash": "sha256:2d06c39afbe035eb13bace7c744f7d19a2130248eb574a8b11f2bf179f83fa67"
         },
         {
           "path": "principles.md",
@@ -449,8 +449,8 @@
         },
         {
           "path": "recipe-app-chrome.md",
-          "size": 10042,
-          "hash": "sha256:225ebbfabfa65538c9275744c4cc6e5cc7798a36ab496643b41283efae3ea1a3"
+          "size": 12052,
+          "hash": "sha256:f4a1380400b4ea54a70dd8d77bb800d37fdf90240e1aaecd5aafad67730730bb"
         },
         {
           "path": "recipe-card-grid.md",
@@ -507,6 +507,11 @@
           "size": 3876,
           "hash": "sha256:351069ddf1e5d085d9f1a89caa47c368874b5d15d4cb9a53e9e1691c3df44a14"
         },
+        {
+          "path": "recipe-navigation.md",
+          "size": 17612,
+          "hash": "sha256:37dde1f17bb34f12b9e53a930f336a7beafbb4ae9fc237bcff02a2b37018f922"
+        },
         {
           "path": "recipe-page-header.md",
           "size": 4161,
@@ -564,8 +569,8 @@
         },
         {
           "path": "SKILL.md",
-          "size": 10810,
-          "hash": "sha256:096a85cb85d2fe413bc5f2abb241c45ea6e59dfc3b9547a00b639c7739fc014e"
+          "size": 11032,
+          "hash": "sha256:75b96a393abccffd6c6292a22bbaf88f402fc68edbcd9326f7d099ea0d575d48"
         },
         {
           "path": "spacing-steps.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxelle/skills",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "uxElle generate-UI agent skills: component API reference and design harness, as versioned markdown with a machine-readable manifest",
   "type": "module",
   "repository": {

package/skills/uxelle-components/NavLink.md

@@ -17,7 +17,7 @@ Primary or secondary navigation item with Navigation Link typography.
 | trailingIconName | `string` | `"keyboard_arrow_down"` | Material Symbol name for the trailing icon. Ignored when `trailingIcon` is false, and overridden by the menu chevron when `withMenu` is true. |
 | iconVariant | `"sharpUnfilled" \| "sharpFilled"` | `"sharpUnfilled"` | Fill style shared by both icons: `sharpUnfilled` for the outline glyph, `sharpFilled` for the solid one. |
 | navigationLevel | `"Primary" \| "Secondary"` | `"Primary"` | Which `Navigation` band the link sits in, so its colors match that surface: `Primary` for the main bar, `Secondary` for the sub-navigation bar. |
-| withMenu | `boolean` | `false` | Wraps the link in a `Menu` that opens `children` as a dropdown panel. The trigger stays a button (so `href` is ignored) and always shows a trailing `keyboard_arrow_down` that rotates 180° when open. |
+| withMenu | `boolean` | `false` | Wraps the link in a `Menu` (`pattern="menu"`, Tab dismisses) for overflow labeled More — not destination panels (`Menu` `pattern="disclosure"` with a `NavLink` trigger instead). The trigger stays a button (so `href` is ignored) and always shows a trailing `keyboard_arrow_down` that rotates 180° when open. |
 | href | `string` | `undefined` | Destination URL, which renders the link as an anchor instead of a button. Ignored when `withMenu` is true. |
 | children | `ReactNode` | `undefined` | Dropdown panel content — typically a `List` of `ListItem`s — shown when `withMenu` is true. Ignored otherwise; the visible text comes from `label`. |
 | className | `string` | `—` |  |
@@ -40,5 +40,5 @@ Primary or secondary navigation item with Navigation Link typography.
 ## Notes
 
 - Renders as an anchor when `href` is set; otherwise a button.
-- Set `withMenu` and pass panel `children` for dropdown overflow items. `href` is ignored while `withMenu` is true so the trigger stays a button. A trailing `keyboard_arrow_down` icon is shown and rotates 180° when open.
+- Set `withMenu` for overflow items labeled More. Destination panels use `Menu` `pattern="disclosure"` with a `NavLink` trigger (no `href`) so Tab walks links. `href` is ignored while `withMenu` is true so the trigger stays a button. A trailing `keyboard_arrow_down` icon is shown and rotates 180° when open.
 - Use `navigationLevel="Secondary"` in the secondary nav band so colors follow that surface.

package/skills/uxelle-components/Navigation.md

@@ -10,10 +10,10 @@ Two-tier navigation bar for enterprise applications.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| leadingSlot | `ReactNode \| null` | `undefined` | Start of the primary bar, typically a menu `IconButton`, a **Logo**, and a title lockup. Pass `null` to drop the region; omit to render the built-in placeholder branding. |
-| centerSlot | `ReactNode \| null` | `undefined` | Middle of the primary bar between the leading and trailing regions — typically a row of `NavLink`s. Pass `null` to drop the region; omit to render placeholder links. |
-| trailingSlot | `ReactNode \| null` | `undefined` | End of the primary bar, for utilities such as a search `IconButton`, a `LanguageSelector`, and a log-in `Button`. Pass `null` to drop the region; omit for the built-in utility set. |
-| bottomSlot | `ReactNode \| null` | `undefined` | Contents of the secondary bar below the primary bar, typically `NavLink`s with `navigationLevel="Secondary"`. Pass `null` to drop the secondary bar entirely; omit to render placeholder links. |
+| leadingSlot | `ReactNode \| null` | `undefined` | Start of the primary bar. Slots are open — any node is valid. Generation default: a **Logo** home control plus a two-line lockup (`Text` Condensed Alt for the site name, optional Condensed for location or a short descriptor). The compact (below-desktop) menu `IconButton` does not belong here unless asked. Pass `null` to drop the region; omit to render the built-in placeholder branding. |
+| centerSlot | `ReactNode \| null` | `undefined` | Middle of the primary bar. Slots are open. Generation default: `null` (destinations live in a trailing **Sheet**). Fill from desktop up with **Menu** `pattern="disclosure"` category triggers when the IA is two or more levels deep (`NavLink withMenu` is overflow More only). Pass `null` to leave the middle empty (blank space between leading and trailing); omit to render placeholder links. |
+| trailingSlot | `ReactNode \| null` | `undefined` | End of the primary bar. Slots are open. Generation default: utilities (search, session) plus, below desktop, the menu `IconButton` that opens a **Sheet** from this side. Pass `null` to drop the region; omit for the built-in utility set. |
+| bottomSlot | `ReactNode \| null` | `undefined` | Contents of the secondary bar. Generation default: `null` unless a persistent L2 module bar is needed (`NavLink`s with `navigationLevel="Secondary"`). Pass `null` to drop the secondary bar entirely; omit to render placeholder links. |
 
 <!-- prettier-ignore-end -->
 
@@ -22,40 +22,50 @@ Extends `HTMLAttributes` — supports standard HTML attributes.
 ## Usage
 
 ```tsx
+const [menuOpen, setMenuOpen] = useState(false);
+
 <Navigation
   leadingSlot={
     <>
-      <IconButton emphasis="low" size="medium" iconName="menu" iconVariant="sharpUnfilled" />
-      <Logo name="generic" className="uxl-navigation__logo" width={48} aria-hidden />
-      <Text type="Condensed Alt" truncation>Votre espace dédié</Text>
-    </>
-  }
-  centerSlot={
-    <>
-      <NavLink label="Menu Link" href="#" />
-      <NavLink label="Menu Link" href="#" />
+      <a href="/" aria-label="Home">
+        <Logo name="generic" width={48} interactive aria-hidden />
+      </a>
+      <Layout display="flex" flexDirection="column" gap={0}>
+        <Text type="Condensed Alt" truncation width={false}>Crop Science</Text>
+        <Text type="Condensed" truncation width={false}>United States</Text>
+      </Layout>
     </>
   }
+  centerSlot={null}
   trailingSlot={
     <>
       <IconButton iconName="search" aria-label="Search" emphasis="low" size="small" />
       <LanguageSelector value="EN" />
-      <Divider orientation="vertical" emphasis="low" />
-      <Button emphasis="low" size="small" trailingIcon trailingIconName="keyboard_arrow_down" trailingIconVariant="sharpUnfilled">Log In</Button>
-    </>
-  }
-  bottomSlot={
-    <>
-      <NavLink label="Menu Link" href="#" navigationLevel="Secondary" />
-      <NavLink label="Menu Link" href="#" navigationLevel="Secondary" />
+      <Button emphasis="low" size="small">Log In</Button>
+      <Sheet
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        direction="Right"
+        title=""
+        aria-label="Menu"
+        trigger={
+          <IconButton emphasis="low" size="small" iconName="menu" iconVariant="sharpUnfilled" aria-label="Menu" />
+        }
+      >
+        <List>
+          <ListItem interactive href="/about" centerText="About" bottomText="" onClick={() => setMenuOpen(false)} />
+        </List>
+      </Sheet>
     </>
   }
+  bottomSlot={null}
 />
 ```
 
 
 ## Notes
 
-- **Primary nav**: Leading, center, and trailing regions. Use slots for branding, main links, and utilities.
+- **Slots are open**: any node may go in `leadingSlot`, `centerSlot`, `trailingSlot`, or `bottomSlot`.
+- **Generation defaults** (overridable): lockup in leading (Logo as home, Condensed Alt name, optional Condensed location or descriptor), `centerSlot` `null` unless the IA is two or more levels deep, compact menu `IconButton` in `trailingSlot` below desktop opening a **Sheet** from that same side (`open` / `onOpenChange` to close after a leaf). Omit a slot for the built-in placeholder. Pass `null` to drop leading, trailing, or the secondary bar; `centerSlot={null}` leaves blank space between leading and trailing.
+- **Primary nav**: Leading, center, and trailing regions.
 - **Secondary nav**: Optional bottom bar for sub-navigation.
-- **Slots**: Pass `leadingSlot`, `centerSlot`, `trailingSlot`, and `bottomSlot` to customize each region. Omit a slot for the built-in placeholder; pass `null` to drop that region.

package/skills/uxelle-design-harness/SKILL.md

@@ -77,6 +77,7 @@ palette. The full mapping of principles to uxElle mechanisms lives in
   card row -> [recipe-card-grid.md](recipe-card-grid.md);
   metrics -> [recipe-stat-callouts.md](recipe-stat-callouts.md);
   empty/loading/error -> [recipe-states.md](recipe-states.md);
+  header navigation -> [recipe-navigation.md](recipe-navigation.md);
   page footer -> [recipe-footer.md](recipe-footer.md);
   hero -> [recipe-hero.md](recipe-hero.md); feature -> [recipe-feature-section.md](recipe-feature-section.md);
   trust bar -> [recipe-logo-wall.md](recipe-logo-wall.md); testimonial -> [recipe-testimonial.md](recipe-testimonial.md);
@@ -136,7 +137,9 @@ Every generated screen must pass this. It is the definition of done.
   a type (an `h1` and `h2` both on `Display Extra Small` flatten the page), and
   headings inside a `Card` step down one stop ([density.md](density.md)).
 - **Responsive**: reflows mobile -> up with no px literals; clusters stack, `Table`
-  scrolls, nav collapses; touch targets stay >= 24 CSS px.
+  scrolls, compact header menu sits in `Navigation` `trailingSlot` and opens a
+  `Sheet` from that side (panel interior matches IA depth); touch targets stay
+  >= 24 CSS px.
 - **Color discipline**: at most one dominant brand band per view; status palettes
   only for semantic status, never color-alone (paired with text or icon).
 - **Accessibility**: skip link + one `main`; landmarks named; focus visible; every
@@ -164,7 +167,8 @@ Marketing: [landing-page](recipe-landing-page.md).
 [form-section](recipe-form-section.md) · [query-bar](recipe-query-bar.md) ·
 [card-grid](recipe-card-grid.md) · [summary-list](recipe-summary-list.md) ·
 [states](recipe-states.md) · [stat-callouts](recipe-stat-callouts.md) ·
-[logo-wall](recipe-logo-wall.md) · [footer](recipe-footer.md). Marketing: [hero](recipe-hero.md) ·
+[logo-wall](recipe-logo-wall.md) · [navigation](recipe-navigation.md) ·
+[footer](recipe-footer.md). Marketing: [hero](recipe-hero.md) ·
 [feature-section](recipe-feature-section.md) · [testimonial](recipe-testimonial.md) ·
 [pricing](recipe-pricing.md) · [cta-band](recipe-cta-band.md).
 

package/skills/uxelle-design-harness/how-to-host.md

@@ -78,7 +78,7 @@ First focusable node in the DOM, targeting `id="main-content"` on `<main>`:
   <a className="uxl-skip-link" href="#main-content">
     Skip to main content
   </a>
-  {/* Navigation — recipe-app-chrome.md */}
+  {/* Navigation — recipe-navigation.md */}
   <main id="main-content" tabIndex={-1} style={{ flexGrow: 1, minHeight: 0, overflow: "auto" }}>
     {/* page column — how-to-page-layout.md */}
     {/* Footer — inside this scrollport; recipe-app-chrome.md */}

package/skills/uxelle-design-harness/how-to-page-layout.md

@@ -184,8 +184,10 @@ Bands: `tablet` (from `--uxl-theme-layout-tablet-screen-width-min`), `desktop`,
   when a component needs an explicit count.
 - **Header / query clusters**: title over actions, search full-width with
   filters/export below, when narrow; one row when wide (see below).
-- **Navigation**: collapse to an `IconButton` menu opening a `Sheet` / `Menu`
-  drawer when narrow; verify `Navigation`'s built-in behavior first.
+- **Navigation**: below desktop the menu `IconButton` defaults to `Navigation`
+  `trailingSlot` and opens a `Sheet` from that same side (`useBreakpointUp("desktop")`,
+  not the tablet band). From desktop up it may live in any slot. Destinations
+  follow IA depth ([recipe-navigation.md](recipe-navigation.md)).
 - **Tables**: `Table` scrolls horizontally when narrow (no stacked-row API); use
   `PaginationSimple` where full `Pagination` is too wide.
 - **Hero / media**: `Hero` `contentDirection` handles narrow stacking; related-field

package/skills/uxelle-design-harness/recipe-app-chrome.md

@@ -2,7 +2,10 @@
 
 ## When
 
-React app frame: skip link, [`Navigation`](../uxelle-components/Navigation.md), scrolling `<main>`, optional [`Footer`](../uxelle-components/Footer.md). Serves both product and marketing shells.
+React app frame: skip link, [`Navigation`](../uxelle-components/Navigation.md)
+(composition in [recipe-navigation.md](recipe-navigation.md)), scrolling `<main>`,
+optional [`Footer`](../uxelle-components/Footer.md). Serves both product and
+marketing shells.
 
 ## When not
 
@@ -17,7 +20,11 @@ React app frame: skip link, [`Navigation`](../uxelle-components/Navigation.md),
 
 ## Regions
 
-skip link → `Navigation` (header) and/or `NavigationSide` (side rail wrapping `NavigationSideGroup` rows) → `<main id="main-content">` → *the experience's* content column ([how-to-page-layout.md](how-to-page-layout.md#who-owns-the-content-column)) → optional `Footer` **inside that same `<main>`**
+skip link → optional [`BannerAnnouncement`](../uxelle-components/BannerAnnouncement.md) → `Navigation` (header) and/or `NavigationSide` (side rail wrapping `NavigationSideGroup` rows) → `<main id="main-content">` → *the experience's* content column ([how-to-page-layout.md](how-to-page-layout.md#who-owns-the-content-column)) → optional `Footer` **inside that same `<main>`**
+
+Pick the **chrome pattern** before filling header slots (marketing header, signed-in
+side rail, hybrid portal, or focused lockup-only) —
+[recipe-navigation.md](recipe-navigation.md#chrome-pattern).
 
 ## Spacing
 
@@ -29,10 +36,20 @@ Do not wrap `Footer` in extra `Layout` padding. Band padding is catalog-owned: t
 
 ## A11y
 
-[how-to-accessibility.md](how-to-accessibility.md) and skip-link CSS in [how-to-host.md](how-to-host.md). One `main`. `aria-current="page"` on the current `NavLink` or `NavigationSideItem` / `NavigationSideSubItem` (`activated`). Decorative `Logo` / `Icon` beside a visible product name: `aria-hidden`.
+[how-to-accessibility.md](how-to-accessibility.md) and skip-link CSS in [how-to-host.md](how-to-host.md). One `main`. `aria-current="page"` on the current `NavLink` or `NavigationSideItem` / `NavigationSideSubItem` (`activated`). Decorative `Logo` beside a visible product name: `aria-hidden`; name the home control on the wrapping `<a>` (`aria-label="Home"`).
 
 `NavLink` in `Navigation` is **header** page navigation. `NavigationSide` is the side-rail **chrome** (`<aside>`, or a `<header>` when `mobile`). `NavigationSideGroup` is the **side** navigation landmark for the experience (a named `<nav>` of destination rows) and belongs in `NavigationSide` `centerSlotContent`. Do not wrap `NavigationSide` or `NavigationSideGroup` in another `nav`. Pass `aria-label` when more than one group is on the page. Accordion parents are not destinations — put section landing pages on `NavigationSideSubItem` children. Tabs that only change which rows appear in a table are **data** navigation — put them on the table ([recipe-data-table-page.md](recipe-data-table-page.md)), not in `centerSlot` and not as a second nav under the page title.
 
+## Navigation
+
+Header slot architecture — lockup (Logo as home, Condensed Alt name / Condensed
+location or descriptor), empty `centerSlot` unless the IA is two or more levels
+deep, compact hamburger in `trailingSlot` below desktop (omit it when
+`NavigationSide` already owns the compact menu), Sheet `open` / `onOpenChange`
+and `direction` matching the menu side, trailing search/session cluster,
+IA-depth interiors — lives in [recipe-navigation.md](recipe-navigation.md). Pass
+every slot explicitly (`null` to drop a region). Do not pass `false`.
+
 ## Side rail
 
 Compose `NavigationSide` with `centerSlotContent` of `NavigationSideGroup` + `NavigationSideItem` (optional `accordion` with `NavigationSideSubItem` children). Set `expanded={false}` on `NavigationSide` for the icon-only rail (groups inherit collapsed layout). SSR hosts must pass `mobile={true}` or `mobile={false}` so server and client markup match. Omit `mobile` only in client-only surfaces to follow the theme mobile range. Do not hard-code viewport widths. Trailing slot content on destination rows must be non-interactive. When the mobile layout is shown, the menu control opens a right `Sheet` with the same `centerSlotContent` and `bottomSlotContent` as the rail (labeled rows). Use `menuOpen` / `onMenuOpenChange` to close it after navigation.
@@ -47,6 +64,12 @@ Footer content architecture — the brand block, categorized link columns, the l
 
 Import from `@uxelle/components`. Put skip-link CSS in the host stylesheet.
 
+Signed-in default: identity + utilities, **no header hamburger**. Destinations
+and the compact menu live on `NavigationSide` ([Side rail](#side-rail)). Public
+marketing chrome with a trailing Sheet is in
+[recipe-navigation.md](recipe-navigation.md) and
+[Help and marketing chrome](#help-and-marketing-chrome).
+
 ```tsx
 <Layout
   display="flex"
@@ -64,16 +87,25 @@ Import from `@uxelle/components`. Put skip-link CSS in the host stylesheet.
     <Navigation
       bottomSlot={null}
       leadingSlot={
-        <Text type="Condensed Alt" truncation width={false}>
-          Product name
-        </Text>
-      }
-      centerSlot={
         <>
-          <NavLink label="Home" href="/" aria-current="page" />
-          <NavLink label="Settings" href="/settings" />
+          <a href="/" aria-label="Home">
+            <Logo name="generic" width={48} interactive aria-hidden />
+          </a>
+          <Layout
+            display="flex"
+            flexDirection="column"
+            gap={0}
+          >
+            <Text type="Condensed Alt" truncation width={false}>
+              Product name
+            </Text>
+            <Text type="Condensed" truncation width={false}>
+              Short descriptor
+            </Text>
+          </Layout>
         </>
       }
+      centerSlot={null}
       trailingSlot={
         <IconButton emphasis="low" size="small" iconName="search" aria-label="Search" />
       }
@@ -102,44 +134,89 @@ Import from `@uxelle/components`. Put skip-link CSS in the host stylesheet.
 
 ## Responsive
 
-- **Primary nav collapses on mobile.** Below tablet, swap the center [`NavLink`](../uxelle-components/NavLink.md) set for an [`IconButton`](../uxelle-components/IconButton.md) (`iconName="menu"`, `aria-label="Menu"`) in `trailingSlot` that opens a [`Sheet`](../uxelle-components/Sheet.md) (or [`Menu`](../uxelle-components/Menu.md)) holding the same destinations as a `List` of `NavLink`s. Confirm `Navigation`'s built-in behavior first and only add the drawer for what it does not handle; switch with `useBreakpointUp("tablet")` ([how-to-page-layout.md](how-to-page-layout.md#responsiveness)).
-- **Trailing utilities stay a row** at every width (search, language, Log in / Register) — [how-to-page-layout.md](how-to-page-layout.md#action-clusters).
+- **Header navigation** — [recipe-navigation.md](recipe-navigation.md): below
+  desktop the visible menu control defaults to `trailingSlot` and opens a `Sheet`
+  from that same side. From desktop up the hamburger may live in any slot; omit
+  it when `centerSlot` is visible or when `NavigationSide` owns the compact menu.
+  When `centerSlot` holds category disclosures (two- or three-level IA), hide that
+  row below desktop (`useBreakpointUp("desktop")`). Trailing utilities stay a **row**
+  at every width — [how-to-page-layout.md](how-to-page-layout.md#action-clusters).
 - **Footer** columns wrap intrinsically ([recipe-footer.md](recipe-footer.md)); band padding is catalog-owned. **Content column** reflows through the chrome tokens with nothing to set per breakpoint.
 
 ## A2UI
 
-When-not for this recipe. Host owns chrome (skip link, viewport shell, html `data-*`). Catalog adapters: `A2uiNavigation`, `A2uiFooter`, `A2uiBannerAnnouncement` if the surface needs them — no `getUxelleRecipe("app-chrome")`. For the side rail only, `getUxelleRecipe("navigation-side")` from `@uxelle/a2ui`: trailing badges are `A2uiLabelBadge` with `"emphasis": "high"`; the account row is `A2uiList` + `A2uiListItem`. See [a2ui.md](a2ui.md).
+When-not for this recipe. Host owns chrome (skip link, viewport shell, html `data-*`). Catalog adapters: `A2uiNavigation`, `A2uiFooter`, `A2uiBannerAnnouncement` if the surface needs them — no `getUxelleRecipe("app-chrome")`. Header slot defaults for `A2uiNavigation`: [recipe-navigation.md](recipe-navigation.md). For the side rail only, `getUxelleRecipe("navigation-side")` from `@uxelle/a2ui`: trailing badges are `A2uiLabelBadge` with `"emphasis": "high"`; the account row is `A2uiList` + `A2uiListItem`. See [a2ui.md](a2ui.md).
 
 ## Help and marketing chrome
 
-Use the same `Navigation` when there are **no** primary app links (help center, marketing). Pass `bottomSlot={null}` to hide the secondary bar. Unused **primary** slots must not be omitted — an omitted (`undefined`) `leadingSlot` / `centerSlot` / `trailingSlot` fills catalog demo content. Pass **`null`** to drop a slot entirely (`centerSlot={null}` when there is no center nav) — the same pattern as `bottomSlot={null}`. Do not pass `false`: it clears the content but still renders an empty slot wrapper in the flex row.
-
-Nav trailing (search, language, Log in / Register) stays a **row** at every width — [how-to-page-layout.md](how-to-page-layout.md#action-clusters). Do not stack those controls on mobile.
+Use the same `Navigation` slot defaults as [recipe-navigation.md](recipe-navigation.md)
+(help center, marketing). Pass `bottomSlot={null}` unless there is a persistent L2
+bar. Unused **primary** slots must not be omitted — an omitted (`undefined`)
+`leadingSlot` / `centerSlot` / `trailingSlot` fills catalog demo content. Pass
+**`null`** to drop a slot. Do not pass `false`.
 
 `Breadcrumbs` belong in the **page column**, not in `Navigation`. Related articles are an in-page `Link` list under the article, not nav or crumbs.
 
+Control the header Sheet with `open` / `onOpenChange` and close it from each leaf
+`onClick` ([recipe-navigation.md](recipe-navigation.md)).
+
 ```tsx
+const [menuOpen, setMenuOpen] = useState(false);
+
 <Navigation
   bottomSlot={null}
   leadingSlot={
-    <a href="/" aria-label="Home">
-      <Logo name="generic" width={40} interactive aria-hidden />
-    </a>
+    <>
+      <a href="/" aria-label="Home">
+        <Logo name="generic" width={48} interactive aria-hidden />
+      </a>
+      <Layout
+        display="flex"
+        flexDirection="column"
+        gap={0}
+      >
+        <Text type="Condensed Alt" truncation width={false}>
+          Help center
+        </Text>
+      </Layout>
+    </>
   }
   centerSlot={null}
   trailingSlot={
     <>
       <LanguageSelector value="EN" />
       <Button emphasis="low" size="small">
-        <Text type="Button" width>
-          Log in
-        </Text>
+        Log in
       </Button>
       <Button emphasis="high" size="small">
-        <Text type="Button" width>
-          Register
-        </Text>
+        Register
       </Button>
+      <Sheet
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        direction="Right"
+        title=""
+        aria-label="Menu"
+        trigger={
+          <IconButton
+            emphasis="low"
+            size="small"
+            iconName="menu"
+            iconVariant="sharpUnfilled"
+            aria-label="Menu"
+          />
+        }
+      >
+        <List>
+          <ListItem
+            interactive
+            href="/help"
+            centerText="Articles"
+            bottomText=""
+            onClick={() => setMenuOpen(false)}
+          />
+        </List>
+      </Sheet>
     </>
   }
 />

package/skills/uxelle-design-harness/recipe-navigation.md

@@ -0,0 +1,433 @@
+# Recipe: navigation
+
+A shared **piece**: the header bar — brand lockup, optional category disclosures,
+utilities, and a compact menu [`Sheet`](../uxelle-components/Sheet.md). Used by
+[app-chrome](recipe-app-chrome.md) (product and marketing).
+
+Composes [`Navigation`](../uxelle-components/Navigation.md),
+[`Logo`](../uxelle-components/Logo.md), [`Text`](../uxelle-components/Text.md),
+[`NavLink`](../uxelle-components/NavLink.md),
+[`IconButton`](../uxelle-components/IconButton.md),
+[`Sheet`](../uxelle-components/Sheet.md), [`Menu`](../uxelle-components/Menu.md),
+[`List`](../uxelle-components/List.md), [`ListItem`](../uxelle-components/ListItem.md),
+[`Layout`](../uxelle-components/Layout.md), [`Button`](../uxelle-components/Button.md),
+and optionally [`Textfield`](../uxelle-components/Textfield.md),
+[`LanguageSelector`](../uxelle-components/LanguageSelector.md),
+[`Accordion`](../uxelle-components/Accordion.md),
+[`NotificationBadge`](../uxelle-components/NotificationBadge.md), and
+[`BannerAnnouncement`](../uxelle-components/BannerAnnouncement.md).
+
+Slots are **open** — any node may live in any region. The defaults below are
+generation defaults; a prompt may override them.
+
+## When
+
+The top-of-page wayfinding for an experience that uses header `Navigation`. Place
+it in the app frame above `<main>` ([app-chrome](recipe-app-chrome.md)).
+
+## When not
+
+- Not an `AppChrome` / `NavigationBar` component to export from the customer app.
+- Signed-in product destinations belong on
+  [`NavigationSide`](../uxelle-components/NavigationSide.md) — do not also put the
+  full IA in a header mega menu or a second hamburger. The header then holds
+  identity + utilities only.
+- Focused flows (login, checkout, wizard): lockup only — no hamburger, no center
+  row, no footer.
+- Breadcrumbs, table search, and data tabs stay in the **page column**
+  ([recipe-data-table-page.md](recipe-data-table-page.md)), not in `Navigation`.
+- A zip / region / “add store” strip above the bar is `BannerAnnouncement`, not a
+  fourth Navigation slot.
+- Pass real slot content; omitting a slot (`undefined`) fills catalog demo
+  content. Pass **`null`** to drop a region. Do not pass `false` (empty wrapper
+  remains).
+
+## Chrome pattern
+
+Choose a frame **before** filling slots. Stacking every pattern is the usual miss.
+
+- **Marketing / public** — header `Navigation` only (lockup + Sheet or mega menu).
+  This recipe’s default.
+- **Signed-in product** — `NavigationSide` owns destinations; the header is
+  identity + utilities (search, account).
+- **Hybrid portal** — lockup + hamburger Sheet, little or no center row, even on
+  desktop.
+- **Focused flow** — lockup only; `centerSlot={null}`, no menu control.
+
+## Regions
+
+`leadingSlot` (brand lockup) · `centerSlot` (desktop category disclosures when
+the IA is two or more levels deep; otherwise `null`, which leaves blank space
+between leading and trailing) · `trailingSlot` (utilities + compact hamburger) ·
+`bottomSlot` (`null` unless a persistent L2 module bar).
+
+Optional `BannerAnnouncement` sits **above** `Navigation`, not in a slot.
+
+## Lockup (`leadingSlot`)
+
+- [`Logo`](../uxelle-components/Logo.md) when the experience has a mark
+  (`width={48}`). **Home is the mark**, not the whole lockup: wrap only `Logo` in
+  a plain `<a href="/" aria-label="Home">` and set `interactive`. Keep the mark
+  `aria-hidden` when title text is present.
+- Two-line type — **no extra gap** (`gap={0}`). Condensed line boxes already
+  separate the lines; do not add Tight / `micro-2` between them
+  ([recipe-data-table-page.md](recipe-data-table-page.md) identity cells):
+  - Top — `Text type="Condensed Alt"` `truncation`: the **site or experience
+    name**.
+  - Bottom — `Text type="Condensed"`: **location or a short descriptor**. Omit
+    the second line when there is nothing to say.
+- Do not use Display or Body types in the lockup.
+- Do **not** wrap the lockup in [`Link`](../uxelle-components/Link.md) or nest the
+  title in `<a>` / `uxl-link`. `Link` underlines at rest — that underline on
+  Condensed lockup text looks wrong.
+- No mark → do not turn the title into a link just to get a home control.
+- Do not also add a “Home” `NavLink` or Sheet row when the logo already goes home.
+- The lockup is not the page `h1`.
+
+## Center and overflow
+
+- **One-level IA:** `centerSlot={null}`. Destinations live in the Sheet.
+- **Two or more levels, from desktop up:** fill `centerSlot` with top-level
+  category controls that **click** open a disclosure panel (see
+  [IA depth](#ia-depth-what-is-inside-the-menu)). Hide that row below desktop.
+  Never show `centerSlot` and the compact hamburger together.
+- About five to seven L1 items, then a `NavLink withMenu` labeled More
+  (overflow only). Do not wrap an unbounded row of categories.
+
+## Menu control and Sheet
+
+[`IconButton`](../uxelle-components/IconButton.md) `iconName="menu"`
+`iconVariant="sharpUnfilled"` `emphasis="low"` `aria-label="Menu"` opens a
+`Sheet` whose body is the destination tree.
+
+Control the Sheet with `open` / `onOpenChange` (same idea as `NavigationSide`
+`menuOpen` / `onMenuOpenChange`). Close it after a leaf: `onClick={() =>
+setMenuOpen(false)}` on each destination `ListItem`. An uncontrolled Sheet
+stays open after in-app navigation.
+
+- **From desktop up:** the menu control may live in **any slot**. For two- and
+  three-level IA, omit it while `centerSlot` is visible — the compact control
+  is for below desktop.
+- **Below desktop:** the **visible** menu control defaults to **`trailingSlot`**
+  (right edge). If a desktop menu is in `leadingSlot`, hide that instance below
+  desktop and show a trailing one — one visible hamburger per breakpoint, not
+  two. Switch with `useBreakpointUp("desktop")` (the band catalog chrome uses).
+  Do not use the tablet band for this — tablet would keep L1 links and the
+  hamburger on screen together.
+- Do not leave only a leading hamburger glued to the title at compact widths.
+- Do not add a header hamburger when the frame already uses `NavigationSide`
+  (it already owns the compact menu + right Sheet).
+
+**Sheet `direction` follows the menu.** Open the panel from the same side as the
+visible control:
+
+- Menu on the **right** (`trailingSlot`) → `direction="Right"`.
+- Menu on the **left** (`leadingSlot`) → `direction="Left"`.
+- Ambiguous (e.g. center) → `Right`.
+- Desktop leading + below-desktop trailing: switch `direction` with the same
+  breakpoint as the visible trigger (`useBreakpointUp("desktop")`), or use one
+  Sheet per visible trigger.
+
+Leave the Sheet header empty except the close control: `title=""` and
+`aria-label="Menu"` (same as `NavigationSide`). Do not put a visible “Menu”
+heading before the close button. Use the `trigger` slot for the `IconButton`.
+
+## Trailing utilities
+
+Stay a **row** at every width
+([how-to-page-layout.md](how-to-page-layout.md#action-clusters)). Typical
+cluster, left to right: search → language (if needed) → session → compact
+hamburger.
+
+- **Search** — marketing/catalog: visible [`Textfield`](../uxelle-components/Textfield.md)
+  (`label={false}`, `aria-label="Search"`) in a [`Layout`](../uxelle-components/Layout.md)
+  `width="16rem"` `flexShrink={0}`. Dense product: search `IconButton`. Table/query
+  search stays on the page, not here.
+- **Session** — logged out: Log in + optional Register (one high-emphasis CTA).
+  Logged in: account `IconButton` + `Menu` (profile, settings, log out), optional
+  `NotificationBadge`. Do not keep Register when the user is signed in.
+- Do not bury Log in / search in the Sheet.
+
+## Secondary bar (`bottomSlot`)
+
+`null` unless there is a persistent **L2 module bar** under the primary bar
+(app section switcher). `NavLink`s there use `navigationLevel="Secondary"`. Not
+breadcrumbs, not in-page tabs, not a dump for extra links.
+
+## IA depth: what is inside the menu
+
+Treat depth of the information architecture as the switch. Compose existing
+pieces; do not invent a mega-menu component.
+
+**Open on click, not hover.** Destination panels are `Menu` `pattern="disclosure"`
+with a `NavLink` trigger (no `href`, `trailingIcon`) so Tab walks links.
+`NavLink withMenu` is overflow labeled More only (`pattern="menu"`, Tab
+dismisses). `keyboard_arrow_down` on a category trigger signals a disclosure.
+`chevron_right` on a row means **another column / level**, not outbound.
+
+### One level (flat site)
+
+Destinations are peers. `centerSlot={null}`. The Sheet holds a `List` of
+interactive `ListItem`s with `href` — **no chevrons**. Example: About, Contact.
+Pass `bottomText=""` so the catalog demo line does not show.
+
+### Two levels
+
+Top-level groups, each with a flat list of leaves.
+
+- **From desktop up:** `centerSlot` is `Menu` `pattern="disclosure"` per group
+  (`NavLink` trigger, no `href`, `trailingIcon`). Panel is one column of leaf
+  `ListItem`s (`href`, no chevron). Optional short group intro above the list.
+  Overflow labeled More uses `NavLink withMenu`.
+- **Below desktop:** hide `centerSlot`. Sheet lists the groups as
+  [`Accordion`](../uxelle-components/Accordion.md) (omit `headingLevel` — these
+  are not page headings). Each panel is the leaf list. Leaves have no chevron.
+  Close the Sheet from each leaf `onClick`.
+
+### Three levels
+
+Top-level areas → categories → leaves. Chevron means another column / level.
+
+- **From desktop up:** `centerSlot` uses `Menu` `pattern="disclosure"` with a
+  `NavLink` trigger (no `href`, `trailingIcon`). The panel is a **wide**
+  `Layout` row, not a skinny dropdown:
+  1. **Intro column** — area title (`Text`), one-line descriptor, `Link` to the
+     area landing. Quieter surface; not a list.
+  2. **Category column** — interactive `ListItem`s. Rows with children get
+     `trailingSlot` + `trailingIconName="chevron_right"`. Hold the selected
+     category in state and set `activated` from that state (it drives the next
+     column). A row with no children is a leaf (no chevron).
+  3. **Leaf column** — map the selected category to `ListItem` `href` rows with
+     **no** chevron. Optional “View all {category}” at the bottom of this
+     column only.
+- **Below desktop:** do **not** lay out three columns in the Sheet. Same tree as
+  a **drill-down**: Accordion (or nested Accordion) so one extra level expands in
+  place; leaves are `href` rows. One visible extra level at a time.
+
+Selecting a category in the desktop panel **updates the next column in place**
+(does not navigate away). Only leaf rows and “Explore …” / “View all …”
+navigate. Close the panel or Sheet after a leaf navigation (`onOpenChange` /
+`setMenuOpen(false)`).
+
+## Responsive
+
+- One-level: hamburger may sit in `trailingSlot` at every width (valid on
+  desktop and below desktop).
+- Two- and three-level: show `centerSlot` from desktop up; below desktop set
+  `centerSlot={null}` and put the menu `IconButton` + Sheet in `trailingSlot`.
+  Switch with `useBreakpointUp("desktop")`
+  ([how-to-page-layout.md](how-to-page-layout.md#responsiveness)). Never
+  hard-code breakpoint px. Do not use the tablet band for this chrome switch.
+- Trailing utilities stay a row at every width.
+
+## Spacing
+
+`Navigation` is **density-invariant** chrome (its own tokens). Do not wrap it in
+extra `p` / `gap`. Lockup lines use `gap={0}` — not the Tight step. Slot content
+inherits the host experience’s density mode ([density.md](density.md)).
+
+## A11y
+
+[how-to-accessibility.md](how-to-accessibility.md). `Navigation` already exposes
+named `nav` landmarks. Name the home control on the Logo’s wrapping `<a>`
+(`aria-label="Home"`); keep the mark decorative. Name the menu `IconButton`.
+`aria-current="page"` on the current leaf `NavLink` / `ListItem` `href`.
+`activated` on the selected mega-menu category (not a leaf). Name the Sheet with
+`aria-label="Menu"` and `title=""` so the header is only the close control.
+Every `IconButton` has an `aria-label`.
+
+## Color
+
+`Navigation` owns each band’s surface — style slot content with role tokens; do
+not hardcode color ([how-to-color.md](how-to-color.md)). Secondary-bar
+`NavLink`s use `navigationLevel="Secondary"` so they follow that band.
+
+## React
+
+Import from `@uxelle/components`. One-level marketing/public default (lockup +
+trailing hamburger Sheet). Control the Sheet with `open` / `onOpenChange` and
+close it from each leaf `onClick`. `desktopUp` is unused here because the menu
+stays in `trailingSlot` at every width.
+
+```tsx
+const [menuOpen, setMenuOpen] = useState(false);
+
+<Navigation
+  bottomSlot={null}
+  leadingSlot={
+    <>
+      <a href="/" aria-label="Home">
+        <Logo name="generic" width={48} interactive aria-hidden />
+      </a>
+      <Layout
+        display="flex"
+        flexDirection="column"
+        gap={0}
+      >
+        <Text type="Condensed Alt" truncation width={false}>
+          Crop Science
+        </Text>
+        <Text type="Condensed" truncation width={false}>
+          United States
+        </Text>
+      </Layout>
+    </>
+  }
+  centerSlot={null}
+  trailingSlot={
+    <>
+      <LanguageSelector value="EN" />
+      <Button emphasis="low" size="small">
+        Log in
+      </Button>
+      <Button emphasis="high" size="small">
+        Register
+      </Button>
+      <Sheet
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        direction="Right"
+        title=""
+        aria-label="Menu"
+        trigger={
+          <IconButton
+            emphasis="low"
+            size="small"
+            iconName="menu"
+            iconVariant="sharpUnfilled"
+            aria-label="Menu"
+          />
+        }
+      >
+        <List>
+          <ListItem
+            interactive
+            href="/about"
+            centerText="About"
+            bottomText=""
+            onClick={() => setMenuOpen(false)}
+          />
+          <ListItem
+            interactive
+            href="/contact"
+            centerText="Contact"
+            bottomText=""
+            onClick={() => setMenuOpen(false)}
+          />
+        </List>
+      </Sheet>
+    </>
+  }
+/>
+```
+
+Two-level desktop `centerSlot` (hide below desktop; overflow More uses
+`withMenu`; Sheet in trailing carries the same tree):
+
+```tsx
+<Menu
+  pattern="disclosure"
+  direction="Bottom Left"
+  trigger={<NavLink label="Crop Protection" trailingIcon />}
+>
+  <List>
+    <ListItem interactive href="/crop-protection/fungicides" centerText="Fungicides" bottomText="" />
+    <ListItem interactive href="/crop-protection/herbicides" centerText="Herbicides" bottomText="" />
+    <ListItem interactive href="/crop-protection/trial-data" centerText="Trial Data" bottomText="" />
+  </List>
+</Menu>
+<NavLink label="More" withMenu trailingIcon>
+  <List>
+    <ListItem interactive href="/seeds" centerText="Seeds" bottomText="" />
+  </List>
+</NavLink>
+```
+
+Three-level desktop `centerSlot` — selected category in state fills the next
+column; close the panel from each leaf:
+
+```tsx
+const [panelOpen, setPanelOpen] = useState(false);
+const [category, setCategory] = useState<"fungicides" | "herbicides">("fungicides");
+
+const leaves = {
+  fungicides: [
+    { href: "/products/delaro", label: "Delaro" },
+    { href: "/products/luna", label: "Luna Family" },
+    { href: "/crop-protection/fungicides", label: "View all Fungicides" },
+  ],
+  herbicides: [
+    { href: "/products/roundup", label: "Roundup" },
+    { href: "/crop-protection/herbicides", label: "View all Herbicides" },
+  ],
+} as const;
+
+<Menu
+  pattern="disclosure"
+  direction="Bottom Left"
+  open={panelOpen}
+  onOpenChange={setPanelOpen}
+  trigger={<NavLink label="Crop Protection" trailingIcon />}
+>
+  <Layout display="flex" gap="var(--uxl-theme-layout-spacing-small-4)">
+    <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-2)">
+      <Text type="Condensed Alt" width={false}>
+        Crop Protection
+      </Text>
+      <Text type="Condensed" width={false}>
+        Innovation to help farmers protect their harvests.
+      </Text>
+      <Link href="/crop-protection">Explore Crop Protection</Link>
+    </Layout>
+    <List>
+      <ListItem
+        interactive
+        activated={category === "fungicides"}
+        trailingSlot
+        trailingIconName="chevron_right"
+        centerText="Fungicides"
+        bottomText=""
+        onClick={() => setCategory("fungicides")}
+      />
+      <ListItem
+        interactive
+        activated={category === "herbicides"}
+        trailingSlot
+        trailingIconName="chevron_right"
+        centerText="Herbicides"
+        bottomText=""
+        onClick={() => setCategory("herbicides")}
+      />
+      <ListItem
+        interactive
+        href="/crop-protection/trial-data"
+        centerText="Trial Data"
+        bottomText=""
+        onClick={() => setPanelOpen(false)}
+      />
+    </List>
+    <List>
+      {leaves[category].map((item) => (
+        <ListItem
+          key={item.href}
+          interactive
+          href={item.href}
+          centerText={item.label}
+          bottomText=""
+          onClick={() => setPanelOpen(false)}
+        />
+      ))}
+    </List>
+  </Layout>
+</Menu>
+```
+
+## A2UI
+
+No `getUxelleRecipe("navigation")`. Hosts often own chrome; when the surface
+already has `A2uiNavigation`, use the same slot assignment. Runtime chat has no
+`matchMedia` — default to one-level (lockup + trailing `A2uiSheet` `direction`
+`"Right"`). Empty or omitted child lists become catalog placeholders (the adapter
+maps them to `undefined`); prefer host-owned chrome when a region must be absent.
+Compose `A2uiLogo`, `A2uiText`, `A2uiNavLink`, `A2uiList` / `A2uiListItem`,
+`A2uiIconButton`, `A2uiSheet`. See [a2ui.md](a2ui.md).