themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/ui-provider.md

@@ -43,7 +43,7 @@ Per-component prop defaults. Empty here; each family augments it from its own di
 ```ts fragment — declaration JSDoc excerpt
 declare module "@/lib/ui-provider" {
   interface ComponentDefaults {
-    button: { tone: ButtonTone; buttonStyle: ButtonStyle }
+    button: { tone: ButtonTone; appearance: ButtonAppearance }
   }
 }
 ```
@@ -63,7 +63,9 @@ Kind: type.
 Kind: callable.
 
 Attributes the stylesheet keys off. Density is an attribute, not a variable, so the
-preset values stay in styles/tokens/foundation.css and a bare `data-density` works too.
+preset values stay in styles/theme/density.css and a bare `data-density` works too.
+`default` writes nothing, so the theme's own lengths, a consumer's `:root` overrides
+included, apply; a scope resetting a denser region writes it itself (UIScope).
 
 ```text
 (config: UIConfig) => Record<string, string | undefined>
@@ -79,8 +81,14 @@ style object for the scope's own element so nesting merges through the cascade.
 The rule: a value that can be a token is CSS; a decision a component makes in JavaScript
 stays in context. Nothing appears in both.
 
+`scale` is computed here rather than in CSS: it writes the spacing, control and icon
+lengths themselves, from the density in effect (`resolved`, when a scope inherits one), and
+the type factor. CSS never multiplies a factor except Text's own `--text-scale`. A scope
+that changes density under a scaled ancestor writes its lengths at the inherited scale,
+since the ancestor's lengths reach it inline and would outrank the preset.
+
 ```text
-(config: UIConfig) => Record<string, string>
+(config: UIConfig, resolved?: ResolvedUIConfig) => Record<string, string>
 ```
 
 ### `CSPProvider`
@@ -135,7 +143,7 @@ ResolvedUIConfig
 
 Kind: type.
 
-Spacing and control-geometry preset. Sets `--density-scale` through `data-density`.
+Spacing and control-height preset, set through `data-density` (styles/theme/density.css).
 
 ```text
 "compact" | "default" | "comfortable"
@@ -232,7 +240,7 @@ Kind: interface.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `durations` | no | `Partial<Record<"instant" \| "fast" \| "normal", string>>` | Duration overrides, keyed without the `--duration-` prefix. |
+| `durations` | no | `Partial<Record<"fast" \| "normal", string>>` | The two durations: `fast` writes `--duration-fast`, `normal` writes `--duration`. |
 | `reduced` | no | `boolean` | `true` forces motion off; unset respects `prefers-reduced-motion`. |
 
 ### `OverlayConfig`
@@ -244,16 +252,6 @@ Kind: interface.
 | `backdropBlur` | no | `number \| string` | Blur behind a modal's scrim, in px (a number) or any CSS length. Off by default: a<br>backdrop filter repaints everything behind the surface each frame. |
 | `darkMenus` | no | `boolean` | Dropdown and context menus render in the dark scheme whatever the page is. Default<br>`true`; `false` lets them follow the scheme they are portalled into, like other popups.<br>A config value, not a CSS switch: Firefox lacks CSS `if()`. @default true |
 
-### `PaletteToken`
-
-Kind: type.
-
-Primitive ramp steps. Overriding one moves every semantic that resolves through it.
-
-```text
-"brand-300" | "brand-350" | "brand-600" | "brand-950" | "danger-400" | "danger-600" | "danger-950" | "info-400" | "info-600" | "info-950" | "link-400" | "link-600" | "neutral-0" | "neutral-100" | "neutral-150" | "neutral-200" | "neutral-25" | "neutral-400" | "neutral-50" | "neutral-500" | "neutral-550" | "neutral-700" | "neutral-75" | "neutral-750" | "neutral-800" | "neutral-850" | "neutral-875" | "neutral-900" | "neutral-950" | "pure-black" | "series-1" | "series-1-dark" | "series-2" | "series-2-dark" | "series-3" | "series-3-dark" | "series-4" | "series-4-dark" | "series-5" | "series-5-dark" | "success-400" | "success-600" | "success-950" | "violet-500" | "warning-300" | "warning-500" | "warning-700" | "warning-900" | "warning-950" | "white-a10" | "white-a15"
-```
-
 ### `ResolvedUIConfig`
 
 Kind: interface.
@@ -277,15 +275,12 @@ Extends: `UIConfig`.
 
 Kind: callable.
 
-`<Scope>` — a token boundary without the config machinery. Overriding a factor needs a
-scope boundary, not just any element: derived tokens are declared at `:root`,
-`[data-ui-scope]`, `[data-density]`, `[data-theme]`, `.light` and `.dark`, so a plain
-`div` that sets `--density-scale` sets a variable nothing reads. Scope renders
-`data-ui-scope`, which puts the element on that list. Use it when the change is purely
-tokens, and `<UIProvider>` when JavaScript config changes too. `render` picks the element,
-e.g. `render={<section />}`.
+`<Scope>` — a region with its own theme variables, without the config machinery. Every
+component inside reads the variables it sets, and the element leaves layout alone. Use it
+when the change is purely variables, and `<UIProvider>` when JavaScript config changes
+too. `render` picks the element, e.g. `render={<section />}`.
 
-  <Scope vars={{ "--density-scale": 0.8 }}>
+  <Scope vars={{ "--control-height": "2.5rem" }}>
     <Toolbar />
   </Scope>
 
@@ -308,10 +303,10 @@ Extends: `useRender.ComponentProps<"div">`.
 
 Kind: type.
 
-Semantic tokens a consumer may retheme. Values carry meaning, not raw colour.
+Colour variables a consumer may retheme, named without the leading `--`.
 
 ```text
-"accent" | "accent-foreground" | "background" | "border" | "card" | "card-foreground" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "destructive" | "destructive-accent" | "destructive-foreground" | "foreground" | "info" | "info-foreground" | "input" | "inverse-background" | "inverse-border" | "inverse-decoration" | "inverse-disabled" | "inverse-foreground" | "inverse-muted" | "inverse-subtle" | "inverse-surface" | "inverse-surface-strong" | "link-color" | "muted" | "muted-foreground" | "popover" | "popover-foreground" | "primary" | "primary-accent" | "primary-foreground" | "ring" | "secondary" | "secondary-foreground" | "sidebar" | "sidebar-accent" | "sidebar-accent-foreground" | "sidebar-border" | "sidebar-foreground" | "sidebar-primary" | "sidebar-primary-foreground" | "sidebar-ring" | "success" | "success-foreground" | "warning" | "warning-accent" | "warning-foreground"
+"accent" | "accent-foreground" | "background" | "border" | "card" | "card-foreground" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "destructive" | "destructive-foreground" | "foreground" | "info" | "info-foreground" | "input" | "link" | "muted" | "muted-foreground" | "overlay-backdrop" | "popover" | "popover-foreground" | "primary" | "primary-foreground" | "ring" | "secondary" | "secondary-foreground" | "sidebar" | "sidebar-accent" | "sidebar-accent-foreground" | "sidebar-border" | "sidebar-foreground" | "sidebar-ring" | "success" | "success-foreground" | "warning" | "warning-foreground"
 ```
 
 ### `TextSize`
@@ -319,10 +314,9 @@ Semantic tokens a consumer may retheme. Values carry meaning, not raw colour.
 Kind: type.
 
 Step on the type scale. `inherit` lets the surrounding size flow through.
-`xxs` is deprecated: it renders as `xs`, so write `xs`.
 
 ```text
-"inherit" | "xxs" | "xs" | "pxs" | "sm" | "base" | "lg" | "xl"
+"inherit" | "xs" | "pxs" | "sm" | "base" | "lg" | "xl"
 ```
 
 ### `ThemeConfig`
@@ -335,8 +329,7 @@ Theme overrides. Token names are generated from the stylesheet, so a typo is a t
 | --- | :-: | --- | --- |
 | `radius` | no | `string` | The container radius — cards, dialogs, popovers, menus. Writes `--radius`. |
 | `radiusSm` | no | `string` | The inner radius — controls, rows, chips, badges, tooltips. Writes `--radius-sm`.<br>Not derived from `radius`: set both. |
-| `colors` | no | `Partial<Record<SemanticToken, string>>` | Semantic colour overrides. Prefer these to `palette`. |
-| `palette` | no | `Partial<Record<PaletteToken, string>>` | Primitive ramp overrides: moves every semantic resolving through the step. |
+| `colors` | no | `Partial<Record<SemanticToken, string>>` | Colour overrides, one value for both modes or a `light-dark(light, dark)` pair. Keys<br>omit `--`. |
 | `vars` | no | `Record<string, string>` | Escape hatch for custom properties the kit does not define. Keys omit `--`. |
 
 ### `TypographyConfig`
@@ -362,9 +355,9 @@ changes; everything else inherits from the scope around it.
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
 | `colorScheme` | no | `ColorScheme` | Colour scheme. `system` follows `prefers-color-scheme`. @default "system" |
-| `theme` | no | `ThemeConfig` | Radius, colour, palette and custom-property overrides. |
-| `density` | no | `Density` | Named spacing and control-geometry preset: `compact`, `default` and `comfortable` scale<br>by 0.941176 (32px actions), 1 and 1.075. Readable typography is unchanged. @default "default" |
-| `scale` | no | `number` | Master factor (`--scale`). Geometry, spacing, icons and the type ramp follow it by<br>default; use `density` or `typography.scale` to move only one of them. @default 1 |
+| `theme` | no | `ThemeConfig` | Radius, colour and custom-property overrides. |
+| `density` | no | `Density` | Named spacing and control-height preset. `compact` sets 12px insets and gaps and 32px<br>controls, `default` 16px and 34px, `comfortable` 20px and 36px. Type keeps its size. @default "default" |
+| `scale` | no | `number` | Master factor. The provider writes the spacing, control and icon lengths at this scale,<br>rounded to whole pixels, and type follows it unless `typography.scale` is set. @default 1 |
 | `typography` | no | `TypographyConfig` | The type factor, the default text size, font stacks and per-step sizes. |
 | `motion` | no | `MotionConfig` | Duration overrides, and motion forced off. |
 | `overlay` | no | `OverlayConfig` | The modal scrim's blur, and whether menus render dark. |
@@ -508,7 +501,7 @@ Kind: callable.
 `<UIScope>` — a region with its own tokens. Nests freely; writes the custom properties
 its merged config names and never touches the document: a region governs its subtree,
 and reaching past it is the root's job, and only when asked. `render` picks the element
-— Base UI's contract, the same one Item and Stack use — e.g. `<UIScope render={<aside />}>`,
+through Base UI's element-substitution contract, e.g. `<UIScope render={<aside />}>`,
 for places a `div` is invalid.
 
 ```text
@@ -648,29 +641,29 @@ Preview route: Form field — `/form-field`
 import { Stack } from "themelia-ui/base/structure"
 import { Input, NativeSelect } from "themelia-ui/base/text-inputs"
 import { MonoValue } from "themelia-ui/primitives"
-import { Scope } from "themelia-ui/ui-provider"
+import { UIScope } from "themelia-ui/ui-provider"
 
 export default function FormsScale() {
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
-			{[1, 0.875, 1.125].map((scale) => (
-				<Scope key={scale} vars={{ "--density-scale": scale }}>
-					<Stack direction="horizontal" gap="md" align="center" justify="start">
+		<Stack style={{ width: "100%" }}>
+			{(["compact", "default", "comfortable"] as const).map((density) => (
+				<UIScope key={density} config={{ density }}>
+					<Stack direction="horizontal" gap="sm" align="center" justify="start">
 						{/* Widths on the wrappers: Input's style lands on the inner control, not its frame. */}
-						<MonoValue size="xs" style={{ width: "3.5rem", flexShrink: 0, fontSize: "0.75rem" }}>
-							{scale}
+						<MonoValue size="xs" style={{ width: "6rem", flexShrink: 0 }}>
+							{density}
 						</MonoValue>
 						{/* Named even in a geometry demo: a placeholder is not a label. */}
 						<div style={{ width: "12rem", flexShrink: 0 }}>
-							<Input placeholder="Field" aria-label={`Example field at density ${scale}`} />
+							<Input placeholder="Field" aria-label={`Example field at ${density} density`} />
 						</div>
 						<div style={{ width: "9rem", flexShrink: 0 }}>
-							<NativeSelect defaultValue="a" aria-label={`Example select at density ${scale}`}>
+							<NativeSelect defaultValue="a" aria-label={`Example select at ${density} density`}>
 								<option value="a">Option</option>
 							</NativeSelect>
 						</div>
 					</Stack>
-				</Scope>
+				</UIScope>
 			))}
 		</Stack>
 	)
@@ -681,6 +674,7 @@ export default function FormsScale() {
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
 import { UIProvider } from "themelia-ui/ui-provider"
 
 import { ControlRow } from "./_shared"
@@ -692,8 +686,8 @@ export default function TheFactor() {
 		<>
 			{FACTORS.map((scale) => (
 				<UIProvider key={scale} config={{ scale }}>
-					<Stack direction="horizontal" gap="lg" align="center">
-						<code style={{ width: "4rem", fontSize: "var(--text-xs)" }}>{scale}</code>
+					<Stack direction="horizontal" align="center">
+						<Text tag="span" size="xs" mono style={{ width: "4rem", flex: "none" }}>{scale}</Text>
 						<ControlRow />
 					</Stack>
 				</UIProvider>
@@ -703,7 +697,7 @@ export default function TheFactor() {
 }
 ```
 
-### Type can override the master factor
+### Type has its own factor
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Button } from "themelia-ui/base/buttons"
@@ -714,11 +708,11 @@ import { UIProvider } from "themelia-ui/ui-provider"
 
 export default function TypeFactor() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">typography.scale 0.875 — type shrinks, control geometry holds</Text>
 				<UIProvider config={{ typography: { scale: 0.875 } }}>
-					<Stack direction="horizontal" gap="md" align="center" wrap>
+					<Stack direction="horizontal" gap="sm" align="center" wrap>
 						<Text>Body copy at this factor.</Text>
 						<Button>Save</Button>
 						<Checkbox label="Check" defaultChecked />
@@ -728,7 +722,7 @@ export default function TypeFactor() {
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">scale 0.875 + typography.scale 1 — geometry shrinks, type holds</Text>
 				<UIProvider config={{ scale: 0.875, typography: { scale: 1 } }}>
-					<Stack direction="horizontal" gap="md" align="center" wrap>
+					<Stack direction="horizontal" gap="sm" align="center" wrap>
 						<Text>Body copy at this factor.</Text>
 						<Button>Save</Button>
 						<Checkbox label="Check" defaultChecked />
@@ -740,37 +734,37 @@ export default function TypeFactor() {
 }
 ```
 
-### Two levels of control
+### A factor, or one variable
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
 import { Text } from "themelia-ui/base/typography"
-import { Scope } from "themelia-ui/ui-provider"
+import { Scope, UIProvider } from "themelia-ui/ui-provider"
 
 import { ControlRow } from "./_shared"
 
 export default function FactorChain() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">default</Text>
 				<ControlRow />
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--density-scale: 0.8 — heights and rows tighten, gaps hold</Text>
-				<Scope vars={{ "--density-scale": 0.8 }}>
+				<Text type="secondary" size="xs">scale: 0.875 — every length and type step</Text>
+				<UIProvider config={{ scale: 0.875 }}>
 					<ControlRow />
-				</Scope>
+				</UIProvider>
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--density-scale: 1.4 — gaps open, control heights hold</Text>
-				<Scope vars={{ "--density-scale": 1.4 }}>
+				<Text type="secondary" size="xs">--control-height: 2.5rem — every control, nothing else</Text>
+				<Scope vars={{ "--control-height": "2.5rem" }}>
 					<ControlRow />
 				</Scope>
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--button-h: 2.75rem — one measurement</Text>
-				<Scope vars={{ "--button-h": "2.75rem" }}>
+				<Text type="secondary" size="xs">--radius-sm: 0 — every item corner</Text>
+				<Scope vars={{ "--radius-sm": "0" }}>
 					<ControlRow />
 				</Scope>
 			</Stack>
@@ -791,13 +785,13 @@ import { ControlRow } from "./_shared"
 export default function Nesting() {
 	return (
 		<UIProvider config={{ scale: 1.125 }}>
-			<Stack gap="lg">
+			<Stack>
 				<Text type="secondary" size="sm">
 					Outer scope — 1.125
 				</Text>
 				<ControlRow />
 				<UIProvider config={{ scale: 0.8 }}>
-					<Stack gap="md">
+					<Stack gap="sm">
 						<Text type="secondary" size="sm">
 							Nested scope — 0.8
 						</Text>
@@ -814,6 +808,7 @@ export default function Nesting() {
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
 import { UIProvider } from "themelia-ui/ui-provider"
 
 import { ControlRow } from "./_shared"
@@ -823,8 +818,8 @@ export default function Density() {
 		<>
 			{(["compact", "default", "comfortable"] as const).map((density) => (
 				<UIProvider key={density} config={{ density }}>
-					<Stack direction="horizontal" gap="lg" align="center">
-						<code style={{ width: "7rem", fontSize: "var(--text-xs)" }}>{density}</code>
+					<Stack direction="horizontal" align="center">
+						<Text tag="span" size="xs" mono style={{ width: "7rem", flex: "none" }}>{density}</Text>
 						<ControlRow />
 					</Stack>
 				</UIProvider>
@@ -839,7 +834,7 @@ export default function Density() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
 import { Text } from "themelia-ui/base/typography"
-import { Scope } from "themelia-ui/ui-provider"
+import { UIScope } from "themelia-ui/ui-provider"
 
 import { InvoiceTable } from "./_shared"
 
@@ -849,22 +844,45 @@ export default function TableScale() {
 		 * Both, captioned. On its own the scoped table just looked like a table —
 		 * the section asserted a difference the page gave the reader no way to see.
 		 */
-		<Stack gap="lg" style={{ width: "100%" }}>
-			<Stack gap="xs" style={{ width: "100%" }}>
-				<Text size="xs" type="secondary">--density-scale: 1</Text>
+		<Stack style={{ width: "100%" }}>
+			<Stack gap="sm" style={{ width: "100%" }}>
+				<Text size="xs" type="secondary">density: default</Text>
 				<InvoiceTable />
 			</Stack>
-			<Stack gap="xs" style={{ width: "100%" }}>
-				<Text size="xs" type="secondary">--density-scale: 0.85</Text>
-				<Scope vars={{ "--density-scale": 0.85 }} style={{ width: "100%" }}>
+			<Stack gap="sm" style={{ width: "100%" }}>
+				<Text size="xs" type="secondary">density: compact</Text>
+				<UIScope config={{ density: "compact" }} style={{ width: "100%" }}>
 					<InvoiceTable />
-				</Scope>
+				</UIScope>
 			</Stack>
 		</Stack>
 	)
 }
 ```
 
+### Colour islands
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { Button } from "themelia-ui/base/buttons"
+import { Card } from "themelia-ui/base/cards"
+import { Grid } from "themelia-ui/base/structure"
+import { UIProvider } from "themelia-ui/ui-provider"
+
+export default function ColourIsland() {
+	return (
+		<Grid columns={{ base: 1, sm: 2 }}>
+			{(["light", "dark"] as const).map((colorScheme) => (
+				<UIProvider key={colorScheme} config={{ colorScheme }}>
+					<Card title={`A ${colorScheme} region`} description="Every colour inside resolves to this half.">
+						<Button>Continue</Button>
+					</Card>
+				</UIProvider>
+			))}
+		</Grid>
+	)
+}
+```
+
 ### Scoped theming
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -902,7 +920,7 @@ import { Sample } from "./_shared"
 
 export default function UiScopeDensity() {
 	return (
-		<Grid columns={3} gap="lg">
+		<Grid columns={3}>
 			{(["compact", "default", "comfortable"] as const).map((density) => (
 				<GridCell key={density}>
 					<UIScope config={{ density }}>
@@ -926,8 +944,8 @@ import { Sample } from "./_shared"
 
 export default function UiScopeNesting() {
 	return (
-		<UIScope config={{ colorScheme: "dark" }} transparent={false} style={{ padding: "var(--space-xl)", borderRadius: "var(--radius)", background: "var(--background)" }}>
-			<Stack gap="lg">
+		<UIScope config={{ colorScheme: "dark" }} transparent={false} style={{ padding: "var(--padding)", borderRadius: "var(--radius)", background: "var(--background)" }}>
+			<Stack>
 				<Text size="xs" type="secondary">
 					outer: colorScheme=&quot;dark&quot;
 				</Text>
@@ -952,7 +970,7 @@ export default function UiScopeRender() {
 			render={<aside />}
 			transparent={false}
 			config={{ density: "compact" }}
-			style={{ padding: "var(--space-lg)", border: "var(--border-width) solid var(--border)", borderRadius: "var(--radius)" }}
+			style={{ padding: "var(--padding)", border: "var(--border-width) solid var(--border)", borderRadius: "var(--radius)" }}
 		>
 			<Text size="xs" type="secondary">
 				This scope is a real &lt;aside&gt;, at compact density.
@@ -977,7 +995,7 @@ import { UIPortalHost, UIScope } from "themelia-ui/ui-provider"
 function ActionsMenu() {
 	return (
 		<DropdownMenu>
-			<DropdownMenuTrigger render={<Button buttonStyle="outline">Actions</Button>} />
+			<DropdownMenuTrigger render={<Button appearance="outline">Actions</Button>} />
 			<DropdownMenuContent>
 				<DropdownMenuItem>Duplicate</DropdownMenuItem>
 				<DropdownMenuItem>Move to…</DropdownMenuItem>
@@ -989,8 +1007,8 @@ function ActionsMenu() {
 
 export default function UiPortalHostExample() {
 	return (
-		<Stack direction="horizontal">
-			<Grid columns={2} gap="lg">
+		<Stack gap="sm" direction="horizontal">
+			<Grid columns={2}>
 				<GridCell>
 					<Stack gap="sm">
 						<Text size="xs" type="secondary">

package/docs/generated/composition-ladder.md

@@ -10,9 +10,9 @@ The rungs are ordinary props; controlled state and callbacks when state exists;
 named slots; render props; exported parts; headless hooks; and complete recipes. Passive
 modules may stop at the first rung. Interaction features normally expose several.
 
-This table is derived from what each module declares, so it cannot describe a seam that
-was removed or miss one that was added. The table focuses on feature modules, where the
-higher rungs are meaningful; the columns start at accessors.
+This table summarizes detected declarations and recipes. It is a discovery aid, not a
+prop contract: open the selected module API for exact signatures and supported seams.
+It focuses on feature modules; the columns start at accessors.
 
 | module | accessors | slots | render props | headless hook | partials | recipe |
 | --- | :-: | :-: | :-: | :-: | :-: | :-: |
@@ -41,7 +41,7 @@ higher rungs are meaningful; the columns start at accessors.
 | `features/table` | ● | ● | · | ● | ● | ● |
 | `features/theme-tweaker` | · | ● | · | ● | ● | ● |
 
-## The four the plan names
+## Four feature examples
 
 Global Search, Filters, Comments and Data View are the demonstration cases, because a
 ladder that only works on a Badge proves nothing. Each is usable at three heights:
@@ -50,7 +50,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `GlobalSearch`, dropped in with props and callbacks.
 
-**Region-customized** — 8 exported parts, so a region can be replaced without copying the whole: `GlobalSearchDialog`, `GlobalSearchEmptyState`, `GlobalSearchFooter`, `GlobalSearchIdleState`, `GlobalSearchInput`, and 2 more.
+**Region-customized** — 7 other public exports to inspect for region customization: `GlobalSearchDialog`, `GlobalSearchEmptyState`, `GlobalSearchFooter`, `GlobalSearchIdleState`, `GlobalSearchInput`, and 2 more.
 
 **Headless** — `useGlobalSearch`, for presentation the parts cannot express.
 
@@ -58,7 +58,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `FilterLayout`, dropped in with props and callbacks.
 
-**Region-customized** — 18 exported parts, so a region can be replaced without copying the whole: `AsyncFilterEditor`, `DateFilterEditor`, `FilterEditor`, `FilterErrorBoundary`, `FilterOperator`, and 12 more.
+**Region-customized** — 17 other public exports to inspect for region customization: `AsyncFilterEditor`, `DateFilterEditor`, `FilterEditor`, `FilterErrorBoundary`, `FilterOperator`, and 12 more.
 
 **Headless** — `useAsyncOptions`, `useFilterCache`, `useFilterGroups`, `useFilters`, for presentation the parts cannot express.
 
@@ -66,7 +66,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `Comments`, dropped in with props and callbacks.
 
-**Region-customized** — 6 exported parts, so a region can be replaced without copying the whole: `CommentAttachmentChip`, `CommentComposer`, `CommentContent`, `CommentItem`, `CommentTimeline`.
+**Region-customized** — 5 other public exports to inspect for region customization: `CommentAttachmentChip`, `CommentComposer`, `CommentContent`, `CommentItem`, `CommentTimeline`.
 
 **Headless** — `useAttachmentUpload`, `useComments`, for presentation the parts cannot express.
 
@@ -74,6 +74,6 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `DataView`, dropped in with props and callbacks.
 
-**Region-customized** — 6 exported parts, so a region can be replaced without copying the whole: `DataViewPagination`, `DataViewShell`, `DataViewTableFrame`, `DataViewToolbar`, `SavedViewTabs`.
+**Region-customized** — 5 other public exports to inspect for region customization: `DataViewPagination`, `DataViewShell`, `DataViewTableFrame`, `DataViewToolbar`, `SavedViewTabs`.
 
 **Headless** — `useDataView`, for presentation the parts cannot express.