@uxelle/skills 0.2.2 → 0.2.4

package/skills/uxelle-components/StatTile.md

@@ -10,11 +10,11 @@ Card-styled readout for a headline figure with a label, optional qualifier, info
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| order | `"labelFirst" \| "valueFirst"` | `"labelFirst" as StatTileOrder` | Vertical order of the label row and the value row. |
-| label | `ReactNode` | `—` | Label in the label row. Occupies remaining width beside the info control. Pass a `string` (or `number`) to render with the default label typography (`Text type="Body Medium"`), or pass a `ReactNode` for full control. When you pass a `ReactNode` you own its accessibility: use meaningful text (not color or icon alone) and keep it non-interactive so it can name the group. |
-| value | `ReactNode` | `—` | Headline figure in the value row. Pass a `string` (or `number`) to render with the default value typography (`Text type="Display Medium"` as `<p>`), or pass a `ReactNode` for full control. A library `Text` node is rendered as `<p>` so a grid of StatTiles does not become a heading outline. When you pass any other `ReactNode`, make sure the figure reads as text and is not conveyed through color or an icon alone (WCAG 1.4.1). |
+| order | `"labelFirst" \| "valueFirst"` | `"labelFirst"` | Vertical order of the label row and the value row. |
+| label | `ReactNode` | `—` | Label in the label row. Occupies remaining width beside the info control and stays on one line: overflow ellipsizes. Hover or focus a truncated label to read the full name in a tooltip. A string (or number) is wrapped in **Text** with `type="Body Medium"`; pass a `Text` node for a different type (truncation is still applied). When you pass a `Text` or other `ReactNode` you own its accessibility: use meaningful text (not color or icon alone) and keep it non-interactive so it can name the group. |
+| value | `ReactNode` | `—` | Headline figure in the value row. A string (or number) is wrapped in **Text** with `type="Display Small"` as `<p>`; pass a `Text` node for a different type. A `Text` keeps its `type` and is rendered as `<p>` so a grid of StatTiles does not become a heading outline. Any other `ReactNode` is allowed; make sure the figure reads as text and is not conveyed through color or an icon alone (WCAG 1.4.1). |
 | qualifier | `boolean` | `true` | When true, allows the qualifier to render when content is present. |
-| qualifierContent | `ReactNode` | `—` | Qualifier beside the value. Pass a `string` (or `number`) to render with the default qualifier typography (`Text type="Body Medium"`), or a `ReactNode` for full control. Only rendered when `qualifier` is true and content is present. When you pass a `ReactNode`, ensure it reads as text; do not rely on color alone to distinguish comparison periods. |
+| qualifierContent | `ReactNode` | `—` | Qualifier beside the value. A string (or number) is wrapped in **Text** with `type="Body Medium"`; pass a `Text` node for a different type. Only rendered when `qualifier` is true and content is present. When you pass a `Text` or other `ReactNode`, ensure it reads as text; do not rely on color alone to distinguish comparison periods. |
 | tooltipSlot | `boolean` | `true` | When true, allows the tooltip slot to render when content is present. |
 | tooltipContent | `ReactNode` | `—` | Info control at the end of the label row (typically `Tooltip` wrapping `IconButton`). Only rendered when `tooltipSlot` is true and content is present. Icon-only triggers within this slot must carry an accessible name via `aria-label` on the interactive element (e.g. `<IconButton aria-label="More information" />`). |
 | trailingSlot | `boolean` | `false` | When true, allows the trailing region to render when content is present. The slot accepts any content. |
@@ -70,7 +70,7 @@ Card-styled readout for a headline figure with a label, optional qualifier, info
 // ReactNode override — caller owns accessibility (semantic element, text)
 <StatTile
   label={<Text type="Body Medium" width={false}>Fill rate</Text>}
-  value={<Text type="Display Medium" as="p">94%</Text>}
+  value={<Text type="Display Small" as="p">94%</Text>}
 />
 ```
 
@@ -78,7 +78,7 @@ Card-styled readout for a headline figure with a label, optional qualifier, info
 // Polling dashboard — aria-live on the value announces only the change
 <StatTile
   label="Active sessions"
-  value={<Text type="Display Medium" as="p" aria-live="polite">{count}</Text>}
+  value={<Text type="Display Small" as="p" aria-live="polite">{count}</Text>}
 />
 ```
 
@@ -111,40 +111,11 @@ Card-styled readout for a headline figure with a label, optional qualifier, info
 
 ## Notes
 
-- Pass a `string` (or `number`) to `label`, `value`, and `qualifierContent` to
-- render with each region's default typography — no `Text` wrapper needed. Pass
-- a `ReactNode` instead when you need full control (e.g. truncation, a custom
-- element); in that case you own its accessibility (see each prop). A library
-- `Text` passed as `value` is rendered as `<p>`.
-- Pass a library `Tooltip` (typically wrapping `IconButton`) through
-- `tooltipContent`. Toggle regions with `qualifier`, `tooltipSlot`, and
-- `trailingSlot`; empty content is not rendered. `trailingSlotContent` is an
-- open slot — any content is allowed. Surface, elevation, radius, and
-- padding come from `Card`. StatTile is a standalone tile: place it next to
-- other StatTiles in a grid. Do not wrap it in `Card`. A figure inside a chart
-- card or table cell is a different surface — compose `Text` there.
-- **Accessibility.** The root is a `role="group"` region. It is named
-- automatically from `label` (via `aria-labelledby`), so the group is announced
-- with context in both orders — including `"valueFirst"`, where the value
-- precedes the label in the DOM. Supply your own `aria-label` or
-- `aria-labelledby` to override the derived name; this is **required** when
-- there is no `label` (e.g. `aria-label="Median first response time, 1 day 12
-- hours"`) so the figure is not announced without context. In development,
-- StatTile warns when content is present but the group has no name. The trailing
-- slot is open, so its accessibility is the caller's responsibility — see
-- `trailingSlotContent`.
-- **Navigation.** Do not put `onClick` on StatTile — the root is a named group,
-- not a control, and a wrapped link would nest interactives when a tooltip is
-- present. Put the destination in `trailingSlotContent` as a `Link` or
-- `IconButton`.
+- `label`, `value`, and `qualifierContent` each accept a string (or number) or a **Text** node. A string is wrapped in that region's default `Text` type — no wrapper needed. Pass a `Text` when you need a different `type` or a live region. A `Text` passed as `value` keeps its `type` and is rendered as `<p>`. The label always truncates to one line so a row of tiles stays scannable; hover or focus a truncated label to read the full name (`Text` Body Small). This overflow tooltip is separate from `tooltipContent` (the info control).
+- Pass a library `Tooltip` (typically wrapping `IconButton`) through `tooltipContent`. Toggle regions with `qualifier`, `tooltipSlot`, and `trailingSlot`; empty content is not rendered. `trailingSlotContent` is an open slot — any content is allowed. Surface, elevation, radius, and padding come from `Card`. StatTile is a standalone tile: place it next to other StatTiles in a grid. Do not wrap it in `Card`. A figure inside a chart card or table cell is a different surface — compose `Text` there.
+- **Accessibility.** The root is a `role="group"` region. It is named automatically from `label` (via `aria-labelledby`), so the group is announced with context in both orders — including `"valueFirst"`, where the value precedes the label in the DOM. Supply your own `aria-label` or `aria-labelledby` to override the derived name; this is **required** when there is no `label` (e.g. `aria-label="Median first response time, 1 day 12 hours"`) so the figure is not announced without context. In development, StatTile warns when content is present but the group has no name. The trailing slot is open, so its accessibility is the caller's responsibility — see `trailingSlotContent`.
+- **Navigation.** Do not put `onClick` on StatTile — the root is a named group, not a control, and a wrapped link would nest interactives when a tooltip is present. Put the destination in `trailingSlotContent` as a `Link` or `IconButton`.
 - Set `order` to `"valueFirst"` to put the value row above the label row.
-- The root fills its parent by default (`fullWidth`). Set `fullWidth={false}`
-- to hug contents. Long label, value, and qualifier copy wrap inside the tile.
-- While data is loading, replace the tile with a `Skeleton` sized to the card
-- (full-width rectangle) inside `SkeletonGroup`. Do not pass a skeleton as
-- `value`.
-- For polling dashboards where the value updates in place, prefer putting
-- `aria-live="polite"` on the **value** node so only the changing figure is
-- announced (a root-level `aria-live` also works but re-announces the whole
-- group). When using a `string` `value`, wrap it yourself to place the live
-- region precisely.
+- The root fills its parent by default (`fullWidth`). Set `fullWidth={false}` to hug contents. Long value and qualifier copy wrap inside the tile; the label ellipsizes instead of wrapping.
+- While data is loading, replace the tile with a `Skeleton` sized to the card (full-width rectangle) inside `SkeletonGroup`. Do not pass a skeleton as `value`.
+- For polling dashboards where the value updates in place, prefer putting `aria-live="polite"` on the **value** node so only the changing figure is announced (a root-level `aria-live` also works but re-announces the whole group). When using a `string` `value`, wrap it yourself to place the live region precisely.

package/skills/uxelle-components/getting-started.md

@@ -12,10 +12,11 @@ Peer dependencies: React 18 or 19.
 npm install @uxelle/components @uxelle/themes
 ```
 
+Import the two stylesheets:
+
 ```tsx
-import "@uxelle/components/styles.css";
-import "@uxelle/components/index.css";
-import "@uxelle/themes/themes/open-source/open-source.css";
+import "@uxelle/components/base.css";
+import "@uxelle/themes/open-source.css";
 
 import { Button } from "@uxelle/components";
 
@@ -24,22 +25,52 @@ function App() {
 }
 ```
 
-`styles.css` loads Material Symbols and the global baseline. `index.css` ships the bundled component rules. Load both stylesheets in the host app — the package JS does not import CSS automatically.
+Then set the theme attributes on `<html>`:
+
+```html
+<html data-open-source="light" data-color-switcher="default"></html>
+```
+
+Both attributes are required. Every `--uxl-*` token is declared under
+`[data-open-source="light"]` or `[data-open-source="dark"]`, so components render
+unstyled without them. See [Themes](#themes) to switch modes at runtime.
+
+`base.css` is the single component stylesheet. `@uxelle/components/styles.css`
+(global baseline) and `@uxelle/components/index.css` (component rules)
+stay exported if you need to load them separately.
 
 ### Next.js / SSR
 
-- Import the three stylesheets in `app/layout.tsx` (or a top-level provider). JS side effects will not style App Router.
+- Import both stylesheets in `app/layout.tsx` (or a top-level provider). JS side effects will not style App Router.
 - Published `@uxelle/components` JS is prefixed with `"use client"`. Importing any component places that file in the client graph.
 - Pass `mobile={true}` or `mobile={false}` on `NavigationSide` so server and client markup match. Omit `mobile` only in client-only surfaces.
 
 Optional: for an agent-driven UI surface, also install `@uxelle/a2ui`.
 
+### Icons
+
+`@uxelle/components` ships GPF chrome glyphs (`close`, `chevron_*`, `check`, and other names the library itself uses). For any other Material Symbol Sharp name, install `@uxelle/icons` and register once before the first `Icon` render:
+
+```bash
+npm install @uxelle/icons
+```
+
+```tsx
+import "@uxelle/icons/register";
+```
+
+`@uxelle/a2ui` registers the full catalog when you import it. Unknown names render no glyph (an empty span). Development warns; production is silent, so an icon-only control with `aria-label` can still pass a11y tests while showing nothing. Register `@uxelle/icons` before the first render, or type names with `UxelleIconName` from `@uxelle/icons`.
+
 ## Themes
 
-Theme CSS is published as `@uxelle/themes` and generated from design tokens. Apply a theme by importing one CSS file. Set `data-open-source="light"` or `data-open-source="dark"` on `<html>`, plus `data-color-switcher="default"`. Optional: wrap the app with `UXelleThemeProvider` so those attributes stay in sync.
+Theme CSS is published as `@uxelle/themes` and generated from design tokens. Quick Start covers the import and the two required attributes; this section covers changing them.
+
+- `data-open-source` — `"light"` or `"dark"`
+- `data-color-switcher` — `"default"`, `"default-subtle"`, `"success"`, `"warning"`, `"danger"`, or `"info"`
+
+To drive both from React instead of hardcoding them, wrap the app with `UXelleThemeProvider`, which sets the attributes on `document.documentElement`:
 
 ```tsx
-import "@uxelle/themes/themes/open-source/open-source.css";
 import { UXelleThemeProvider } from "@uxelle/themes/react";
 
 function AppShell({ children }: { children: React.ReactNode }) {

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/a2ui.md

@@ -13,6 +13,10 @@ Hosts inject `uxelleCatalogSchema` (and optionally a recipe's messages) into the
 agent prompt and render the result. Do not open package source to "discover" props —
 use the catalog schema the host provides.
 
+Importing `@uxelle/a2ui` registers the full Material Symbols Sharp catalog. React
+hosts that do not use A2UI must `import "@uxelle/icons/register"` themselves if
+generated UI uses icon names beyond GPF chrome.
+
 ## Hard constraints
 
 - **Catalog adapters only.** No raw HTML, no custom components.
@@ -70,6 +74,11 @@ chips; a chip wider than its container ellipsizes so dismiss stays visible.
 Exclusive `A2uiChoiceChip` selection is one checked value in host state (toggles,
 not radios). Use `A2uiRadioGroup` or `A2uiSegmentedControl` for radio semantics.
 
+`A2uiStatTile` labels stay on one line and ellipsize; hover or focus a truncated
+label to read the full name. Pass `label` as a string — do not wrap it in
+`A2uiText` or set truncation. Value and qualifier copy wrap. The overflow tooltip
+is automatic and separate from `tooltipContent`.
+
 Known gaps — substitute rather than invent:
 
 | React | A2UI |

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

@@ -26,7 +26,7 @@ This file covers **composition**: landmarks, heading ranks, names, and live regi
 - `aria-describedby` — extra help, not the name (`fieldDescription`, instructions).
 - `aria-hidden="true"` — decorative / redundant graphics (default `Icon`).
 - `aria-live="polite"` — status that appears without moving focus. `assertive` only for urgent interruptions.
-- `aria-current="page"` — current item in nav (`NavLink`, or `activated` on `NavigationSideItem` / `NavigationSideSubItem` destinations — not accordion parents).
+- `aria-current="page"` — current item in nav (`NavLink`, or `activated` on `NavigationSideItem` / `NavigationSideSubItem` destinations — not accordion parents). When the side rail is collapsed, an accordion parent of an activated nested row still shows the selected appearance so the current section remains visible on the icon-only rail.
 - `aria-expanded` — only on a real disclosure control, not on every section.
 - `aria-pressed` — toggle buttons (`IconButton` `activated`); `Switch` uses `checked` instead.
 

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

@@ -14,6 +14,10 @@ Load component and theme CSS as in
 [getting-started.md](../uxelle-components/getting-started.md). Do not set
 `font-family` in app CSS — `Text` uses theme tokens.
 
+If generated UI uses Material Symbol names beyond GPF chrome (`home`, `mail`,
+`campaign`, …), add `import "@uxelle/icons/register"` once at the app entry.
+`@uxelle/a2ui` already registers the full catalog.
+
 On `<html>`:
 
 - Theme mode (host-owned): `data-open-source="light" | "dark"` (other themes use
@@ -74,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-dashboard-overview.md

@@ -32,7 +32,8 @@ sections
 
 KPI and card grids reflow with `auto-fit` / `minmax` (no JS); the header stacks and
 its actions go `fullWidth` below tablet; the primary `Table` scrolls horizontally
-when narrow. See [how-to-page-layout.md](how-to-page-layout.md#responsiveness).
+when narrow. StatTile labels ellipsize on one line so a KPI row stays scannable.
+See [how-to-page-layout.md](how-to-page-layout.md#responsiveness).
 
 ## Spacing
 
@@ -49,7 +50,8 @@ KPIs rather than a dense monitoring surface — but pick one mode and hold it.
 ## A11y
 
 One `main`, one `h1`. Name each region (KPIs `aria-label="Key metrics"`, the primary
-surface by its heading). KPI deltas pair color with a sign or word. Loading and empty
+surface by its heading). KPI deltas pair color with a sign or word. Truncated KPI
+labels keep the full name on the group; hover or focus reveals it. Loading and empty
 for the primary surface follow [states](recipe-states.md). See
 [how-to-accessibility.md](how-to-accessibility.md).