@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.99

package/llms.txt

@@ -28,7 +28,11 @@ For arbitrary interactive help or popup content, use `openAnchoredSurface` or
 `openAnchoredSurfaceAt` from `@kerfjs/ui/anchored-surface`; see
 [AnchoredSurface](./docs/anchored-surface.md). The app owns content and actions.
 Inside a native `<dialog>`, `wa-dialog`, or `wa-drawer`, the surface stays
-interactive and closes with the dialog.
+interactive and closes with the dialog. It keeps an 8px viewport gutter
+(`viewportMargin`) and fits its height to the room beside the anchor, scrolling
+its content, so do not add media queries or `max-height` overrides.
+`tone: 'dark'` gives a popup anchored to dark media chrome the inverse tone of a
+`ToolbarControlGroup tone="dark"`; its content inherits the matching colors.
 For a public subpath containing several visual components, use a folder with one
 component per source file and one owned stylesheet per visual component. Keep its
 compatibility entrypoints implementation-free: JavaScript/TypeScript only re-exports
@@ -141,7 +145,9 @@ explains when to reuse, compose, extend, or use native HTML.
    Use its component/composition/recipe taxonomy and functional-group,
    importance, alphabetical-tie, and recipes-last ordering policy. Focused
    demos and recipes use public components plus `CatalogExample.viewport`,
-   never local stylesheets, inline styles, or styling-only classes.
+   never local stylesheets, inline styles, or styling-only classes. A frame
+   that a top-layer specimen anchors to takes `viewport.anchorName`, and a
+   centered column takes `viewport.contentWidth` + `contentAlign`.
 5. **Apply the rules below and in** [skill.md](./ai/skill.md).
 6. **Before calling an integration complete**, run
    [`kerf-ui-doctor`](./docs/ui-doctor.md). Its portable JSON report merges
@@ -182,6 +188,23 @@ the cursor; the cursor alone cannot explain an interaction. See
 [accessibility contracts](./docs/accessibility.md) and
 [interaction principles](./docs/apple-hig.md#interaction).
 
+## Interface copy capitalization
+
+Follow Apple's split, the package default: **names are title style;
+descriptions are sentence style.** Title style: buttons, menu items and menu
+headings, popup-menu triggers, segments, `Select` choices, tabs,
+page/view/pane/dialog/toolbar titles, back labels, `ListHeader` and column
+headings, field labels, icon-only control names, and fragment
+`EmptyState`/`StateBanner` titles ("Save Draft", "Back to Inbox"). Sentence
+style: body copy, descriptions, details, messages, tooltips, placeholders,
+checkbox/switch/radio option text, and status lines ("Saved just now"). Title
+style capitalizes the first and last word and phrasal-verb particles ("Log
+In"); it lowercases articles, coordinating conjunctions, `to` in infinitives,
+`as`, and prepositions of four letters or fewer elsewhere. Keep brand spellings
+and user data as written. `kerf-ui-doctor` reports violations in known
+title-style labels as `KUI-D040`. See
+[Writing interface copy](./docs/writing.md#capitalization).
+
 ## Core rules (do the right thing)
 
 - **Prefer a Kerf UI component over a Web Awesome component over a raw HTML
@@ -245,6 +268,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   main, and bottom toolbars, CollapsiblePanel, NavStack, SplitView) and size
   the groups they compose (panel toggles, the back button) to match; pass
   `density` to `CollapsiblePanelRelocated` when its toolbar is compact.
+- **Name panel toggles in title style.** A panel toolbar's
+  `toggle: { action, name }` uses `name` as the toggle group's accessible name
+  and in the default "Show …" / "Hide …" label, so pass a title-style panel
+  name (`name: "Navigator"` gives "Show Navigator"); it is never recapitalized.
 - **Position region restore controls declaratively.** A ResizableRegion has a
   background token, `contentOverflow="visible"` for an anchored popup,
   top/bottom `restorePosition`, typed `restoreInset`, and
@@ -263,7 +290,11 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   the before/after insertion line, supports Alt+Shift+ArrowUp/ArrowDown, and
   reports `{ listId, sourceIds, target: { id, position }, source }` for
   `reorderListItems`. The `dragging` / `dropPosition` props render the same
-  states from app-owned drag state. Public ListItem tokens set row, icon, label, and trailing geometry;
+  states from app-owned drag state. For keyboard row navigation in a
+  `scrollable` List, call `wireListFocusScroll` (from
+  `@kerfjs/ui/wire-list-focus-scroll`) once: it scrolls a keyboard-focused row
+  whose focus ring crosses the clip into view in Firefox and Safari too.
+  Public ListItem tokens set row, icon, label, and trailing geometry;
   ListHeader `size="xs|sm|m|l|xl"` sets label scale independently of
   `headingLevel` (`sm` keeps the current FieldLabel-sized uppercase style;
   `m`/`l`/`xl` match themed h5/h4/h3). Its height, title padding, and border
@@ -275,6 +306,12 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   `--kui-list-item-hover-background`, `--kui-list-item-hover-border`,
   `--kui-list-item-selected-background`, `--kui-list-item-selected-color`,
   and `--kui-list-item-selected-border` at the list or row boundary.
+  To align `ListItem` and `ListActionRow` rows in one list on a custom
+  leading inset, set `--kui-list-row-padding-inline` on the `List` (never
+  `--kui-list-item-padding-inline`, which moves only `ListItem` rows). Both
+  row kinds draw an 18px untiled leading icon by default, so their labels
+  align; resize both with `--kui-list-row-icon-size` on the `List` (never
+  `--kui-list-item-icon-size`, which resizes only `ListItem` icons).
 - **Use `Row` for horizontal and `List` for vertical layout.** Both expose
   physical `hAlign`/`vAlign` props and typed gaps. Row defaults to left/full,
   an `xs` gap, and no wrapping; List retains full/top and zero-gap defaults.
@@ -291,7 +328,9 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   for List flex, typed lengths for Skeleton geometry, and
   foreground colors for choice icons and `LucideIcon.color`: `uiColor()` with an `*-on-*`/text token,
   `foregroundColorVar()`, or `foregroundColor()` for a custom CSS color; fill tokens such as `uiColor('success-fill-quiet')` do not
-  type-check. These brands are intentionally
+  type-check. Fills (a `ChoiceChips` swatch, a row `iconTile` color) take a
+  plain `CssColor`: `fillColor('#3b82f6')` for a custom CSS color, `uiColor()`,
+  or `colorVar()`; never `foregroundColor()` for a fill. These brands are intentionally
   not interchangeable; rows use classes/tokens/props rather than raw `style`.
   Set `LucideIcon.inline` for an icon in `Text` or prose; it changes the SVG
   from block to inline-block without changing its inherited 1em size.
@@ -437,6 +476,7 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   Text supports `controlMargins` with canonical physical Sides for an exterior 8px control gutter; it preserves border/padding and avoids an isolated Row wrapper. Avoid stacking it with parent insets. Inline spans retain native inline margin behavior.
 
   `ToolbarControlGroup.tileTone` selects `neutral`, `brand`, `success`, `warning`, or `danger` quiet fill, matching quiet border, and on-quiet foreground for a non-interactive icon tile. Compose a contained `single` group whose only child is a direct decorative LucideIcon (`aria-hidden="true"`). Omission preserves the normal group palette. The prop does not recolor interactive, mixed, multi-control, or borderless groups; keep real actions in controls with their existing focus/hover/pressed treatments.
+  `ListItem`, `ListItemLink`, and `ListActionRow` take `iconTile` to present their leading `icon` in a filled 32px rounded tile holding an 18px glyph, for settings or command rows that identify each entry by color. Pass a tone (`neutral`, `brand`, `success`, `warning`, or `danger`) for the same quiet fill, matching quiet border, and on-quiet foreground as `ToolbarControlGroup.tileTone`, or `{ color, foreground? }` for an application color: `color` is a `CssColor` (`uiColor()`, `colorVar()`, or `fillColor('#e5484d')`) and `foreground` a `CssForegroundColor`; without one, the glyph is black or white, whichever contrasts with the fill. The tile sits 6px clear of a standard 44px row (a compact row is at least 42px tall), moves the label to the tile's edge, and keeps its colors when the row is hovered or selected. Never wrap the icon in your own tile or resize the row's icon slot.
   Toolbar zones accept `KerfUiContent` directly. Use `ToolbarText` for identity and `ToolbarControlGroup` for related controls that need its shared chrome; a bare control keeps its own styling and accessibility responsibilities.
   Expanded search groups accept `expandedOverflow="visible"` to anchor app-owned suggestion/date/help surfaces below their relative root; collapsed/default groups retain existing clipping. Apps own surface placement/dismissal and use `data-token-search-keep-open` or `collapsible.keepOpenOn` for focus.
 
@@ -485,6 +525,26 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   bar's top edge beside a sunken active scene or nested Pane even when content
   fits; hidden suppresses that edge, including scroll dividers.
   Never add a border, or a permanent `dividerSides`, to fake one.
+  For a header that floats over its scrolling content, set
+  `headerPresentation="overlay"` on the `Pane` (or in `PaneConfig`). It paints
+  the translucent chrome material (`--kui-chrome-material`, opaque under
+  reduced transparency, increased contrast, and forced colors). The same
+  `wireScrollDividers` call measures the header and publishes its height as
+  block-start scroll clearance, which the content clears automatically. Keep
+  overlay-header text in the normal text color.
+  For a translucent stack bar laid over the active view, set
+  `chromePresentation="overlay"` on the `NavStack`. `wireNavStack` measures
+  the top chrome and hands its height (top safe area included) to the views
+  as their block-start inset, so a plain view or a sole `Pane` clears it
+  automatically. Keep its text in the normal text color. For a translucent
+  bottom toolbar, set `bottomToolbarPresentation="overlay"` (separate from
+  `chromePresentation`); `wireNavStack` hands its height (bottom safe area
+  included) to the views as their block-end inset, so the last item rests
+  just above it. Its `ToolbarText` and default-tone `ToolbarControlGroup`
+  controls lift themselves to AA. For a translucent tab bar, set
+  `barPresentation="overlay"` on the `TabNavigator`; `wireTabNavigator`
+  measures the bar and the scenes hand its height to their content as the
+  block-end inset. Its tab labels lift themselves to AA.
   While a side overlay is open (a Workbench rail overlay, a `wireSidebar` compact
   overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`), the
   layout hides the covered work area's `FloatingToolbar`s and restore corners
@@ -567,8 +627,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   inherits the banner tone and is announced with the banner, so keep its text
   meaningful and never rely on color alone.
 - **Configure StateBanner copy and action placement.** `copyLayout="stacked"`
-  puts detail below the title and badge; `actionPlacement="below"` gives the
-  action a separate trailing row. The inline defaults remain compact.
+  puts detail below the title and badge; `actionPlacement="below"` always
+  gives the action a separate trailing row. The default trailing action stays
+  beside the copy while it has room and wraps onto its own trailing row on a
+  narrow banner, so do not switch placement per breakpoint.
   `presentation="strip"` renders a flush, square, full-width band for a
   layout edge with tone-colored `dividerSides` (bottom by default) instead of
   the inset rounded card; never restyle a card into a strip.
@@ -598,6 +660,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   one rounded frame with dividers between them (settings, account cards,
   shortcut lists), compose `FramedListRow`s; `ValueTable` is the same frame for
   label/value facts. Never hand-roll a `ul` with borders and row padding.
+- **Bound a result picker with a framed `List`.** For a bordered, scrolling
+  list of `ListItem` rows (search results, duplicate candidates), use
+  `<List scrollable frame maxHeight={rem(14)} minHeight={rem(4.25)}>`:
+  `frame` draws a 1px neutral border, the control radius, and a 4px inset
+  that keeps the first and last rows' focus rings inside the clip, and the
+  typed `CssLength` bounds need no flex-column ancestor. Never wrap a List in
+  an app div with `max-height`, `overflow`, and a border.
 - **Square an icon-only button with `IconButton`.** Web Awesome squares a
   `wa-button` only for a lone `wa-icon`; with a `LucideIcon` use
   `IconButton({ icon, iconName, label })` (label required) instead of
@@ -667,20 +736,44 @@ created, input }`. Never use a hand-styled `<input list>` + `<datalist>`.
   `removeAction` and a specific `removeLabel`; the application updates the tag
   list. `itemId` identifies the chip to the action handler. `size="compact"`
   gives a 20px chip and 16px remove button; `disabled` disables removal.
+- **Use a link `Chip` for downloadable files and short links.** `href` renders a
+  native `<a>` with chip geometry; `download` (`true` or a file name) and
+  `external` (new tab, safe rel, announced) are optional, and a link chip has
+  no remove button. Inside a ContentItem bubble set `tone="inherit"` so it
+  follows the bubble's foreground instead of styling an anchor yourself.
 - **Use `ChoiceChips` for a wrapping exclusive choice.** When one value comes
   from a visible set too large for a `SegmentedControl` track (a nine-color
   palette in a 560px dialog), render separate pills backed by native radios:
   one Tab stop, arrow-key selection, and a real form value under `name`. Name
   the group with `label` or `labelledBy`, lead choices with a `swatch`
-  (`CssColor`, or `'transparent'` for the struck-through no-color dot) or an
+  (`CssColor` such as `fillColor('#3b82f6')`, or `'transparent'` for the struck-through no-color dot) or an
   `icon`, and handle the delegated `action` on `change`. Never wrap a
-  `SegmentedControl` or button-appearance `wa-radio` set instead.
+  `SegmentedControl` or button-appearance `wa-radio` set instead. Set
+  `multiple` (with a `readonly Value[]` `value`) when any number may be on:
+  the same pills become native checkboxes in a `role="group"`, each a Tab stop
+  that Space toggles, and every checked value submits under `name`. On dark
+  inverse chrome, place the chips in a dark appearance scope (`.wa-dark`)
+  instead of restyling them.
+
+- **Use `Composer` for a chat or prompt composer.** `@kerfjs/ui/composer`
+  renders a raised frame (standard border, large radius, `shadow-l`) whose
+  border turns brand while focus is within, a borderless textarea that grows
+  between `minRows` (default 1) and `maxRows` (default 8) lines and then
+  scrolls, and an action row with an optional quiet `hint` and the trailing
+  `actions` (a brand Send button). Name it with a title-style `label`; give it
+  an `id` so the hint describes the field. Slot it into a `DialogSurface`
+  floating footer (`footerInset="none"`) over a transcript. Never rebuild
+  composer chrome around a `wa-textarea` with app CSS. For Enter-to-send, set
+  `submitOnEnter` and call `wireComposers(root)` from
+  `@kerfjs/ui/wire-composers` once: Enter or Cmd/Ctrl+Enter clicks the first
+  trailing action, Shift+Enter inserts a newline, and an IME composition
+  commit or an empty message never sends. Never hand-roll that handler.
 
 ## Public exports
 
 `Badge`, `LucideIcon`, `DisclosureArrow`, `Toolbar`, `ToolbarControlGroup`, `ToolbarActionLink`, `FloatingToolbar`, `ToolbarText`, `Text`,
-`ListItem`, `ListActionRow` (+ `wireListReorder`, `reorderListItems`), `ListHeader`, `ListInsetControl`,
-`ListInsetText`, `SegmentedControl`, `ChoiceChips`,
+`ListItem`, `ListActionRow` (+ `wireListReorder`, `reorderListItems`), `wireListFocusScroll`, `ListHeader`, `ListInsetControl`,
+`ListInsetText`, `SegmentedControl`, `ChoiceChips`, `Composer`,
 `Select`, `TokenSearchField` (+ `readTokenSearchField`, `placeTokenSearchCaret`,
 `wireTokenSearchFields`), `AppTab`, `TabBar` (+ `wireTabBars`, `reorderTabs`),
 `wireScrollDividers` (scroll-state dividers for every `Pane`, `NavStack`,
@@ -716,6 +809,7 @@ shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelTogg
 
 - [skill.md](./ai/skill.md): the full rule set + a common-mistakes table (the shipped AI skill).
 - [design-philosophy.md](./docs/design-philosophy.md): why kerf UI is shaped this way — the decision principles behind the rules above.
+- [writing.md](./docs/writing.md): interface copy — the title-style vs. sentence-style capitalization rule per element, from Apple's guidance.
 - [layout.md](./docs/layout.md): the pane/content-item geometry, public roles/tokens, and the spacing scale.
 - [component-contract.md](./docs/component-contract.md): what a component owns vs. what the app owns.
 - [accessibility.md](./docs/accessibility.md): keyboard and ARIA contracts per component.
@@ -750,7 +844,7 @@ details.
 
 Select menus use native viewport shifting with 10px gutters: default menus grow to content (up to 20rem), while `fitMenu` matches trigger width and long labels wrap. Keep popup sizing and position repairs out of consumer CSS.
 
-Key sibling `DialogSurface`s that render conditionally with `rootAttributes={{ "data-key": "…" }}` so a re-render morphs each dialog into itself; never wrap one in a keyed app `div`. Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned. `height` sets a definite bounded modal size and `bodyLayout="fill"` lets one child fill the body. `PopoverDialogSurface` is the non-modal, light-dismiss counterpart on the native Popover API, with the same size props and an `embedded` in-flow presentation.
+Key sibling `DialogSurface`s that render conditionally with `rootAttributes={{ "data-key": "…" }}` so a re-render morphs each dialog into itself; never wrap one in a keyed app `div`. Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned. `height` sets a definite bounded modal size and `bodyLayout="fill"` lets one child fill the body; `bodyLayout="fill-last"` keeps leading rows at their height above one filling last child, and `footerPresentation="floating"` (with a typed `footerOffset`) floats a chat composer over the body while the body reserves its measured height; give the transcript `scrollClearance="block-end"` (a `scrollable` `List` or a `Pane`) to let it scroll beneath the composer, with the last message still resting above it, through the published `--kui-scroll-clearance-block-end` context (overlaying chrome publishes `--kui-scroll-clearance-block-start` / `-end`; one scroller per covered edge opts in; a composed Pane opts in through `PaneConfig.scrollClearance` on a Workbench `mainPane` or panel `pane`, a `CollapsiblePanel` `pane`, or a `NavStack` view's `pane`). `headerPresentation="floating"` lays the title bar over the body on the translucent `--kui-chrome-material-raised` (opaque under reduced transparency, increased contrast, and forced colors); the register measures it and the body reserves it, and a `fill` body's only child with `scrollClearance="both"` scrolls beneath both the title bar and a floating composer through the published `--kui-scroll-clearance-block-start`. `PopoverDialogSurface` is the non-modal, light-dismiss counterpart on the native Popover API, with the same size props and an `embedded` in-flow presentation; `describedBy` sets its `aria-describedby` (usually a title `ToolbarText`'s `descriptionId`).
 
 Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. A host that is itself an explicit dialog (`role="dialog"` or `"alertdialog"` with its own name) keeps that name alone: the native panel is left unnamed, so one dialog carries the name. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.97",
+  "version": "5.0.0-beta.99",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -228,6 +228,10 @@
       "types": "./dist/wire-list-reorder.d.ts",
       "import": "./dist/wire-list-reorder.js"
     },
+    "./wire-list-focus-scroll": {
+      "types": "./dist/wire-list-focus-scroll.d.ts",
+      "import": "./dist/wire-list-focus-scroll.js"
+    },
     "./wire-toolbar-visibility": {
       "types": "./dist/wire-toolbar-visibility.d.ts",
       "import": "./dist/wire-toolbar-visibility.js"
@@ -312,6 +316,15 @@
       "browser": "./dist/browser/choice-chips.js",
       "import": "./dist/choice-chips.js"
     },
+    "./composer": {
+      "types": "./dist/composer.d.ts",
+      "browser": "./dist/browser/composer.js",
+      "import": "./dist/composer.js"
+    },
+    "./wire-composers": {
+      "types": "./dist/wire-composers.d.ts",
+      "import": "./dist/wire-composers.js"
+    },
     "./token-search-field": {
       "types": "./dist/token-search-field.d.ts",
       "browser": "./dist/browser/token-search-field.js",
@@ -480,6 +493,7 @@
     "./sunken-panel.css": "./dist/styles/sunken-panel.css",
     "./segmented-control.css": "./dist/styles/segmented-control.css",
     "./choice-chips.css": "./dist/styles/choice-chips.css",
+    "./composer.css": "./dist/styles/composer.css",
     "./token-search-field.css": "./dist/styles/token-search-field.css",
     "./state-banner.css": "./dist/styles/state-banner.css",
     "./corner-status.css": "./dist/styles/corner-status.css",

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

@@ -57,7 +57,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         <ListItem
           action="recipe-action"
           itemId="projects"
-          label="Projects with a deliberately wrapping title"
+          label="Projects with a Deliberately Wrapping Title"
           icon={<LucideIcon icon={Folder} name="folder" />}
           selected={selected.value === 'projects'}
           multiline
@@ -69,14 +69,14 @@ export const createRecipe: RecipeFactory = (announce) => {
   const render = () => (
     <List fill rootAttributes={{ 'data-recipe': 'recipe-app-shell' }}>
       <Toolbar
-        label="Atlas workspace"
+        label="Atlas Workspace"
         safeAreaEdges={['block-start', 'inline-start', 'inline-end']}
         dividerSides="b"
         leading={<ToolbarText text="Atlas" />}
         trailing={
           <ToolbarControlGroup
             appearance="borderless"
-            label="Workspace controls"
+            label="Workspace Controls"
           >
             <button
               type="button"
@@ -100,7 +100,7 @@ export const createRecipe: RecipeFactory = (announce) => {
       <List flex>
         <Workbench
           id="recipe-shell"
-          label="Atlas workspace panes"
+          label="Atlas Workspace Panes"
           leftRail={{
             label: 'Navigation',
             size: navigationSize.value,
@@ -109,18 +109,18 @@ export const createRecipe: RecipeFactory = (announce) => {
             toolbar: {
               label: 'Navigation',
               title: <ToolbarText text="Workspace" />,
-              toggle: { action: NAVIGATION_ACTION, name: 'navigation' },
+              toggle: { action: NAVIGATION_ACTION, name: 'Navigation' },
             },
             content: navigation(),
           }}
           mainToolbar={{
-            label: 'Current workspace view',
+            label: 'Current Workspace View',
             title: (
               <ToolbarText
                 text={
                   selected.value === 'inbox'
-                    ? 'Inbox triage'
-                    : 'Active projects'
+                    ? 'Inbox Triage'
+                    : 'Active Projects'
                 }
                 size="xlarge"
                 id="recipe-shell-main-title"
@@ -138,7 +138,7 @@ export const createRecipe: RecipeFactory = (announce) => {
                   data-action="recipe-action"
                   data-recipe-command="new"
                 >
-                  New task
+                  New Task
                 </button>
               </ToolbarControlGroup>
             ),
@@ -164,10 +164,10 @@ export const createRecipe: RecipeFactory = (announce) => {
             toolbar: {
               label: 'Inspector',
               title: <ToolbarText text="Inspector" />,
-              toggle: { action: INSPECTOR_ACTION, name: 'inspector' },
+              toggle: { action: INSPECTOR_ACTION, name: 'Inspector' },
             },
             content: (
-              <ValueTable label="Selected task">
+              <ValueTable label="Selected Task">
                 <ValueTableRow label="Status" value="In review" />
                 <ValueTableRow label="Owner" value="Mara Chen" />
                 <ValueTableRow label="Priority" value="High" />

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

@@ -79,14 +79,14 @@ export const createRecipe: RecipeFactory = (announce) => {
   // rail's leads the main toolbar, the drawer's floats in its container's
   // bottom-end corner. wireSidebar hands focus between the two positions.
   const railToolbar: CollapsiblePanelToolbar = {
-    label: 'Workspace navigation',
+    label: 'Workspace Navigation',
     title: <ToolbarText text="Atlas" />,
-    toggle: { action: RAIL_ACTION, name: 'navigation' },
+    toggle: { action: RAIL_ACTION, name: 'Navigation' },
   };
   const drawerToolbar: CollapsiblePanelToolbar = {
     label: 'Activity',
     title: <ToolbarText text="Activity" size="small" />,
-    toggle: { action: DRAWER_ACTION, name: 'activity' },
+    toggle: { action: DRAWER_ACTION, name: 'Activity' },
   };
 
   const rail = () => (
@@ -95,7 +95,7 @@ export const createRecipe: RecipeFactory = (announce) => {
       side="left"
       size={232}
       collapsed={railCollapsed.value}
-      label="Workspace navigation"
+      label="Workspace Navigation"
       toolbar={railToolbar}
     >
       <nav aria-label="Workspace">
@@ -119,7 +119,7 @@ export const createRecipe: RecipeFactory = (announce) => {
           <ListItem
             action="recipe-action"
             itemId="shared"
-            label="Shared with me"
+            label="Shared with Me"
             icon={<LucideIcon icon={Users} name="users" />}
             selected={selected.value === 'shared'}
           />
@@ -133,7 +133,7 @@ export const createRecipe: RecipeFactory = (announce) => {
       element="main"
       header={
         <Toolbar
-          label="Current navigation view"
+          label="Current Navigation View"
           leading={
             <>
               <CollapsiblePanelRelocated
@@ -155,11 +155,12 @@ export const createRecipe: RecipeFactory = (announce) => {
       <ContentItem>
         <List gap="2xs">
           <Text variant="span">
-            <strong>Narrow the window to a compact width</strong>
+            <strong>Compact Width</strong>
           </Text>
           <Text variant="span" tone="quiet" size="compact">
-            The rail and drawer start closed and open as a dismissable overlay:
-            a backdrop, Escape, and a trapped Tab ring, all managed by the wire.
+            Narrow the window to a compact width: the rail and drawer start
+            closed and open as a dismissable overlay, with a backdrop, Escape,
+            and a trapped Tab ring, all managed by the wire.
           </Text>
         </List>
       </ContentItem>
@@ -175,7 +176,7 @@ export const createRecipe: RecipeFactory = (announce) => {
       label="Activity"
       toolbar={drawerToolbar}
       restoreControl={
-        <FloatingToolbar label="Activity drawer">
+        <FloatingToolbar label="Activity Drawer">
           <CollapsiblePanelRelocated
             panelId="sidebar-console"
             side="bottom"
@@ -185,7 +186,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         </FloatingToolbar>
       }
     >
-      <ValueTable label="Recent activity">
+      <ValueTable label="Recent Activity">
         <ValueTableRow
           label="Deploy finished"
           value="2m ago"

package/ux-demo/recipes/compact-toolbar.tsx

@@ -41,10 +41,10 @@ export const createRecipe: RecipeFactory = (announce) => {
   const filtered = signal(false);
   const device = deviceClass();
   const render = () => (
-    <section data-recipe="recipe-compact-toolbar" aria-label="Task workspace">
+    <section data-recipe="recipe-compact-toolbar" aria-label="Task Workspace">
       <List gap="l" controlInsets="b">
         <Toolbar
-          label="Task workspace controls"
+          label="Task Workspace Controls"
           responsive="stack"
           responsiveAt="compact"
           leading={<ToolbarText text="Tasks" size="small" />}
@@ -72,23 +72,23 @@ export const createRecipe: RecipeFactory = (announce) => {
                 <Select<string>
                   name="recipe-sort"
                   value={sort.value}
-                  ariaLabel="Sort tasks"
+                  ariaLabel="Sort Tasks"
                   fitMenu
                   presentation="toolbar-borderless"
                   size="compact"
                   focusRingOwner="group"
                   choices={[
-                    { value: 'updated', label: 'Recently updated' },
+                    { value: 'updated', label: 'Recently Updated' },
                     { value: 'priority', label: 'Priority' },
                     { value: 'owner', label: 'Owner' },
-                    { value: 'created', label: 'Created date' },
+                    { value: 'created', label: 'Created Date' },
                   ]}
                 />
               </ToolbarControlGroup>
-              <ToolbarControlGroup label="Task actions" buttonAppearance="push">
+              <ToolbarControlGroup label="Task Actions" buttonAppearance="push">
                 <button
                   type="button"
-                  aria-label="Toggle filters"
+                  aria-label="Toggle Filters"
                   aria-pressed={String(filtered.value)}
                   data-action="recipe-action"
                   data-recipe-command="filter"
@@ -97,17 +97,17 @@ export const createRecipe: RecipeFactory = (announce) => {
                 </button>
                 <button
                   type="button"
-                  aria-label="Refresh tasks"
+                  aria-label="Refresh Tasks"
                   data-action="recipe-action"
                   data-recipe-command="refresh"
                 >
                   <LucideIcon icon={RefreshCw} name="refresh-cw" />
                 </button>
               </ToolbarControlGroup>
-              <ToolbarControlGroup label="More task actions" single>
+              <ToolbarControlGroup label="More Task Actions" single>
                 <button
                   type="button"
-                  aria-label="More task actions"
+                  aria-label="More Task Actions"
                   data-action="recipe-action"
                   data-recipe-command="more"
                 >

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

@@ -63,10 +63,10 @@ export const createRecipe: RecipeFactory = (announce) => {
         {/* The title and its supporting line are one heading unit. */}
         <List>
           <Toolbar
-            label="Publish workspace update"
+            label="Publish Workspace Update"
             leading={
               <ToolbarText
-                text="Publish workspace update"
+                text="Publish Workspace Update"
                 size="xlarge"
                 id="recipe-composer-title"
               />
@@ -80,7 +80,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         </List>
         {status.value === 'error' && (
           <StateBanner
-            title="Add a title before publishing"
+            title="Add a Title Before Publishing"
             detail="The update body and audience are preserved."
             tone="danger"
             urgency="alert"
@@ -88,7 +88,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         )}
         {status.value === 'saved' && (
           <StateBanner
-            title="Update published"
+            title="Update Published"
             detail="The team audience can now read it."
             tone="success"
           />
@@ -96,7 +96,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         <List gap="xs" controlInsets="rl">
           <wa-input
             name="recipe-title"
-            label="Update title"
+            label="Update Title"
             hint="Summarize the outcome in one line."
             required
             value={title.value}
@@ -115,9 +115,9 @@ export const createRecipe: RecipeFactory = (announce) => {
             value={audience.value}
             label="Audience"
             choices={[
-              { value: 'team', label: 'Workspace team' },
+              { value: 'team', label: 'Workspace Team' },
               { value: 'reviewers', label: 'Reviewers' },
-              { value: 'organization', label: 'Entire organization' },
+              { value: 'organization', label: 'Entire Organization' },
             ]}
           />
         </List>
@@ -136,7 +136,7 @@ export const createRecipe: RecipeFactory = (announce) => {
             data-action="recipe-action"
             data-recipe-command="submit"
           >
-            Publish update
+            Publish Update
           </wa-button>
         </Row>
       </List>

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

@@ -102,7 +102,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         data-action="recipe-action"
         data-recipe-command="open-record"
       >
-        Open project
+        Open Project
       </wa-button>
     </Row>
   );
@@ -112,11 +112,11 @@ export const createRecipe: RecipeFactory = (announce) => {
   // control, and the record actions, and runs the full dialog height too.
   const sidebar = () => (
     <Pane
-      label="Recent projects"
+      label="Recent Projects"
       header={
         <Toolbar
-          label="Recent projects"
-          leading={<ToolbarText text="Recent projects" />}
+          label="Recent Projects"
+          leading={<ToolbarText text="Recent Projects" />}
         />
       }
     >
@@ -131,7 +131,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         label={record.name}
         header={
           <Toolbar
-            label="Project details"
+            label="Project Details"
             leading={
               <ToolbarText
                 text={record.name}
@@ -152,7 +152,7 @@ export const createRecipe: RecipeFactory = (announce) => {
         footer={recordActions()}
       >
         <List controlInsets="tb">
-          <ValueTable label="Project details">
+          <ValueTable label="Project Details">
             <ValueTableRow label="Owner" value={record.owner} />
             <ValueTableRow label="Status" value={record.state} />
             <ValueTableRow label="Updated" value={record.updated} />
@@ -166,7 +166,7 @@ export const createRecipe: RecipeFactory = (announce) => {
     const record = records[selected.value];
     return (
       <List>
-        <ValueTable label="Project details">
+        <ValueTable label="Project Details">
           <ValueTableRow label="Owner" value={record.owner} />
           <ValueTableRow label="Status" value={record.state} />
           <ValueTableRow label="Updated" value={record.updated} />
@@ -180,7 +180,7 @@ export const createRecipe: RecipeFactory = (announce) => {
     return (
       <section
         data-recipe="recipe-list-detail-dialog"
-        aria-label="Project details dialog"
+        aria-label="Project Details Dialog"
       >
         <Row hAlign="center">
           <DialogSurface
@@ -197,10 +197,10 @@ export const createRecipe: RecipeFactory = (announce) => {
               data-action="recipe-action"
               data-recipe-command="open"
             >
-              Open project details
+              Open Project Details
             </wa-button>
             {compact ? (
-              <wa-dialog label="Project details" open={open.value} with-footer>
+              <wa-dialog label="Project Details" open={open.value} with-footer>
                 <SplitView
                   id="recipe-projects"
                   label="Projects"
@@ -208,7 +208,7 @@ export const createRecipe: RecipeFactory = (announce) => {
                   detailActive={detailOpen.value}
                   listTitle="Recent projects"
                   detailTitle={records[selected.value].name}
-                  backLabel="Back to projects"
+                  backLabel="Back to Projects"
                   list={<List>{projectRows(true)}</List>}
                   detail={compactDetail()}
                 />
@@ -227,12 +227,12 @@ export const createRecipe: RecipeFactory = (announce) => {
                   data-action="recipe-action"
                   data-recipe-command="open-record"
                 >
-                  Open project
+                  Open Project
                 </wa-button>
               </wa-dialog>
             ) : (
               <wa-dialog
-                label="Project details"
+                label="Project Details"
                 open={open.value}
                 without-header
               >