@atelic-action/ui 0.9.0 → 0.11.0

package/README.md

@@ -41,7 +41,7 @@ The package sheets sit inside `@layer atelic-ui`, so any rule a site writes outs
 | Import | Exports |
 |---|---|
 | `@atelic-action/ui/chrome` | `SiteHeader`, `SiteMenu`, `Footer`, `CreditBar`, `StickyCTABar`, `BrandLockup`, `SkipLink`, and their prop types |
-| `@atelic-action/ui/components` | `NotFound` and the page components (`Checklist`, `DataTable`, `StatRow`, `Callout`, `Collapsible`, `StackedBar`, `ColumnChart`, `ThresholdScale`, `StarRating`), with their prop types (see [The Not Found Page](#the-not-found-page) and [Page Components](#page-components)) |
+| `@atelic-action/ui/components` | `NotFound` and the page components (`Checklist`, `DataTable`, `StatRow`, `Callout`, `Collapsible`, `StackedBar`, `ColumnChart`, `ThresholdScale`, `StarRating`, `Disclosure`), with their prop types (see [The Not Found Page](#the-not-found-page) and [Page Components](#page-components)) |
 | `@atelic-action/ui/email` | The email components, the theme provider, the plain text helpers, and their prop types (see [Email](#email)) |
 | `@atelic-action/ui/email/render` | `renderEmail` and `renderFailureEmail`, the only entry that imports `react-dom/server` |
 | `@atelic-action/ui/tokens` | `Palette`, `atelicPalette`, `Fonts`, `atelicFonts`, `toThemeCSS`, `themeTokenMap` |
@@ -256,8 +256,9 @@ The blocks a page composes, each styled in `styles/components.css` inside the `a
 |---|---|---|
 | `Checklist` | A short list of checks, each passed or failed | Two columns when there is room, one on a phone. `passLabel` and `failLabel` name the icons for a screen reader |
 | `DataTable` | A table whose first column names each row, sortable by any column marked `sortable` | A click on a heading sorts on a wide screen. On a phone each row stacks, every fact wearing its column's label, and a dropdown sorts. A cell is a node, or `{ display, sort }` when what it shows is not what it sorts by; a formatted number in a string (`"$12,047"`, `"0.24%"`) sorts as a number. It renders in `defaultSort` on the server |
-| `StatRow` | A row of large figures, each over what it counts and its `period` | `trend` draws an arrow before a figure that is itself a change. `deltas` list comparisons beneath: an arrow, how far, against what (`basis`), and the earlier figure (`was`), each in its own tone, since a spend falling and a cost falling read differently |
+| `StatRow` | A row of large figures, each over what it counts and its `period`. `variant="quiet"` is the glance row for a working page: a light figure in the text color over a small capitalized label, hairlines between; `unit` sets a figure's unit small beside it | `trend` draws an arrow before a figure that is itself a change. `deltas` list comparisons beneath: an arrow, how far, against what (`basis`), and the earlier figure (`was`), each in its own tone, since a spend falling and a cost falling read differently |
 | `Callout` | One finding: an icon in its tone beside the title, the explainer under it | `variant="box"` sets it apart on a tinted ground, for something missing or owed |
+| `Disclosure` | A section the page opens and closes: a header row that folds a body the caller controls | For an app. The caller holds `open`, so it can remember what was folded, and a closed body is not rendered. The label is the toggle; `meta` (a count, a flag) sits beside it, outside its name, and a tap on it still folds. `headingLevel` makes the label a real heading |
 | `Collapsible` | A labeled line the reader opens for the detail behind it | A native `details`, so it works before any script loads and find in page opens it. `summary` carries the point, so the detail needs no explaining once open. It prints open |
 | `StackedBar` | One bar split into the parts of a whole, with a key | A part of zero is keyed and not drawn |
 | `ColumnChart` | A bar a period, the periods in groups that carry a label and a total | Months in quarters is the case it was cut for: a quarter reads against the one before it and the same one a year earlier |
@@ -266,8 +267,50 @@ The blocks a page composes, each styled in `styles/components.css` inside the `a
 
 **StarRating outside a site.** It is the one component that does not sit under `.mkt` or read a theme token: its styles are in `styles/star-rating.css`, and its two colors are the `--star-fill` and `--star-outline` custom properties, falling back to the text color and a faint tint of it. An app that installs the package for this component alone imports that one sheet, not `components.css`.
 
+**A part's own color.** `StackedBar` takes a `color` on a segment, any CSS color, for parts that are not good or bad (the protein, carbs, and fat of a meal), and it wins over `tone`. `showKey={false}` draws the bar alone for a page that keys the parts its own way; the bar keeps its spoken summary.
+
 **Tones.** `good`, `warn`, `bad`, `info`, and `muted` are the one palette the package carries, because good, a warning, and broken read green, amber, and red whatever the brand is. A component sets `data-tone`, and `--tone`, `--tone-fill`, and `--tone-bg` follow for whatever sits inside. A site's theme may restate `--tone-good` and the rest on `.mkt`; `info` and `muted` come from the theme's own primary and neutral tokens.
 
+## In an App
+
+The page components also work in an app that has its own base styles (Tailwind, shadcn) and wears none of the site chrome. Three things make that so (0.10.0):
+
+1. **A second scope.** Every rule in `styles/components.css` answers to `.atelic-ui` as well as `.mkt`. `.atelic-ui` has no resets behind it, so an app puts the class on the region that holds a package component and nothing else in it restyles. Prefer a region to `body`: the components use plain class names (`.stat .num`, `.callout`, `.note`), and an app with markup of its own under those names would have a page wide scope reach it. `body` is right only for an app that has checked it has none, and it is the one way to cover a component rendered in a portal.
+2. **The app imports one sheet**, `@atelic-action/ui/styles/components.css`, and neither `base.css` nor `chrome.css`. An app's own unlayered CSS always wins over the package. With Tailwind the app **must declare the layer order before any stylesheet loads**, in a `<style>` in the `<head>` of its `index.html`: `@layer properties, theme, base, atelic-ui, components, utilities;`. A layer ranks by where it is first named, and a bundler is free to name the package's first, which ranks it below Tailwind's reset; the reset then strips the padding, margins, and borders off every component, while colors and type still look right, so it is easy to miss. Named there, the package ranks above the reset and below the app's utilities.
+3. **The app maps its tokens** onto the ones the components read, in its own stylesheet on the same scope:
+
+| Token | What it colors |
+|---|---|
+| `--ink`, `--ink-soft` | Text and quieter text |
+| `--neutral-100`, `--neutral-200`, `--neutral-500` | Hairlines, tracks, and captions |
+| `--surface-alt` | The quiet ground behind a muted tone |
+| `--ui-primary` (falls back to `--primary`), `--primary-bright`, `--primary-tint` | The accent, its brighter fill, and its tint |
+| `--ui-card` (falls back to `--card`) | A raised surface |
+| `--font-sans`, `--font-mono`, `--radius-sm` | Type and the small radius |
+| `--tone-good`, `--tone-warn`, `--tone-bad`, each with `-fill` and `-bg` | Optional: the package defines these, and a dark theme restates them |
+
+`--ui-primary` and `--ui-card` exist because an app's own `--primary` and `--card` may hold something else: shadcn keeps bare HSL channels there, which are not a color on their own. A site sets neither and nothing changes.
+
+```css
+/* app.css */
+.atelic-ui {
+	--ink: hsl(var(--foreground));
+	--ink-soft: hsl(var(--muted-foreground));
+	--neutral-500: hsl(var(--muted-foreground));
+	--neutral-200: hsl(var(--border));
+	--neutral-100: hsl(var(--muted));
+	--surface-alt: hsl(var(--muted));
+	--ui-primary: hsl(var(--brand));
+	--primary-bright: hsl(var(--brand));
+	--primary-tint: color-mix(in srgb, hsl(var(--brand)) 12%, transparent);
+	--ui-card: hsl(var(--card));
+}
+```
+
+**Unit tests.** The package ships TSX source, and Vitest compiles it like any other module. A file under `node_modules` has no tsconfig of its own to name a JSX runtime, so a test that renders a package component fails with `React is not defined` until the test config says which to use: `esbuild: { jsx: "automatic" }` at the top level of `vitest.config.ts`. The app build needs nothing, since the React plugin sets it for Vite.
+
+`StarRating` needs none of this: its sheet is unscoped and reads no token. The chrome (`SiteHeader`, `Footer`, and the rest) and `NotFound` remain site shaped and are not meant for a signed in app.
+
 ## The Gallery
 
 `gallery/` is one static page, The Components, that shows every page component on its own with made up data for a fictional bakery, wearing the practice's own palette and type. It lives at [ui.atelic.me](https://ui.atelic.me), noindexed and disallowed in its `robots.txt`, since it is for the people building with the package and never search inventory. It imports the components and stylesheets from `src/` by relative path rather than from npm, so it always shows the code in the repo, and it reads the package name and version from `package.json` at build time. It sits outside `src/`, so it is never published.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, and the component library they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/components/Disclosure.tsx

@@ -0,0 +1,73 @@
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useId } from "react";
+
+export interface DisclosureProps {
+	/** What the section is, and the toggle's accessible name. */
+	label: ReactNode;
+	open: boolean;
+	onToggle: () => void;
+	/**
+	 * Sits beside the label and outside the toggle's name: a count, a flag, a
+	 * small chart. A tap on it still folds the section.
+	 */
+	meta?: ReactNode;
+	/** Makes the label a real heading at this level; leave it out for none. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6;
+	/** The panel's id; minted when left out. */
+	panelId?: string;
+	className?: string;
+	children: ReactNode;
+}
+
+/**
+ * A section the page opens and closes: a header row that folds a body the
+ * caller controls. Where `Collapsible` is a native details element that keeps
+ * its own state and its detail in the page, this one is for an app. The
+ * caller holds `open`, so it can remember which sections were folded, and a
+ * closed body is not rendered, so a long list costs nothing until asked for.
+ *
+ * The label is the toggle, so its name reads "Produce, collapsed" and not
+ * "Produce 10 items"; `meta` is a sibling for that reason. The toggle's
+ * `::after` stretches over the whole header row, so a tap anywhere on it,
+ * meta and chevron included, folds the section.
+ */
+export function Disclosure({
+	label,
+	open,
+	onToggle,
+	meta,
+	headingLevel,
+	panelId,
+	className,
+	children,
+}: DisclosureProps) {
+	const minted = useId();
+	const id = panelId ?? minted;
+	const Root = headingLevel ? "section" : "div";
+	const Title = headingLevel ? (`h${headingLevel}` as const) : "div";
+
+	return (
+		<Root className={["disclosure", open && "is-open", className].filter(Boolean).join(" ")}>
+			<div className="disclosure-head">
+				<Title className="disclosure-title">
+					<button
+						type="button"
+						className="disclosure-toggle"
+						onClick={onToggle}
+						aria-expanded={open}
+						aria-controls={id}
+					>
+						{label}
+					</button>
+				</Title>
+				{meta != null && meta !== false && <span className="disclosure-meta">{meta}</span>}
+				<ChevronDown className="disclosure-chevron" size={16} aria-hidden="true" />
+			</div>
+			{open && (
+				<div className="disclosure-body" id={id}>
+					{children}
+				</div>
+			)}
+		</Root>
+	);
+}

package/src/components/StackedBar.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import type { Tone } from "./tone";
 
 export interface StackedBarSegment {
@@ -5,16 +6,26 @@ export interface StackedBarSegment {
 	value: number;
 	/** The figure as printed, e.g. "1,158"; defaults to the value with separators. */
 	display?: string;
-	tone: Tone;
+	/** How the part reads. Leave it out when `color` says it instead. */
+	tone?: Tone;
+	/** A color of the part's own, any CSS color, for parts that are not good or bad. It wins over `tone`. */
+	color?: string;
 }
 
 export interface StackedBarProps {
 	segments: StackedBarSegment[];
+	/** False draws the bar alone, for a page that keys the parts its own way. The bar keeps its spoken summary. */
+	showKey?: boolean;
 	className?: string;
 }
 
+/** A part's own color, set as the fill its bar and its swatch both read. */
+function fill(segment: StackedBarSegment): CSSProperties | undefined {
+	return segment.color ? ({ "--tone-fill": segment.color } as CSSProperties) : undefined;
+}
+
 /** One bar split into the parts of a whole, with a key naming each part and its figure. */
-export function StackedBar({ segments, className }: StackedBarProps) {
+export function StackedBar({ segments, showKey = true, className }: StackedBarProps) {
 	const total = segments.reduce((sum, segment) => sum + segment.value, 0) || 1;
 	const figure = (segment: StackedBarSegment) =>
 		segment.display ?? segment.value.toLocaleString("en-US");
@@ -28,19 +39,21 @@ export function StackedBar({ segments, className }: StackedBarProps) {
 						<span
 							key={segment.label}
 							data-tone={segment.tone}
-							style={{ flexGrow: segment.value / total }}
+							style={{ flexGrow: segment.value / total, ...fill(segment) }}
 						/>
 					))}
 			</div>
-			<ul className="chart-key">
-				{segments.map((segment) => (
-					<li key={segment.label} data-tone={segment.tone}>
-						<span className="chart-swatch" aria-hidden="true" />
-						<b>{figure(segment)}</b>
-						<span>{segment.label}</span>
-					</li>
-				))}
-			</ul>
+			{showKey && (
+				<ul className="chart-key">
+					{segments.map((segment) => (
+						<li key={segment.label} data-tone={segment.tone} style={fill(segment)}>
+							<span className="chart-swatch" aria-hidden="true" />
+							<b>{figure(segment)}</b>
+							<span>{segment.label}</span>
+						</li>
+					))}
+				</ul>
+			)}
 		</div>
 	);
 }

package/src/components/StatRow.tsx

@@ -22,6 +22,8 @@ export interface StatDelta {
 export interface StatItem {
 	/** The big figure, e.g. "$199", "3,948", "23%"; may embed an inline glyph. */
 	value: ReactNode;
+	/** The figure's unit, set small after it on the same baseline, e.g. "mi". */
+	unit?: ReactNode;
 	/** An arrow before the figure, when the figure is itself a change. */
 	trend?: StatDirection;
 	/** What the figure counts. */
@@ -38,6 +40,13 @@ export interface StatItem {
 
 export interface StatRowProps {
 	stats: StatItem[];
+	/**
+	 * How loud the row is. `loud`, the default, is a report's headline figures:
+	 * heavy, large, in the accent. `quiet` is a glance row for a working page:
+	 * a light figure in the text color over a small capitalized label, the
+	 * stats divided by a hairline. A tone still colors a quiet figure.
+	 */
+	variant?: "loud" | "quiet";
 	className?: string;
 }
 
@@ -50,9 +59,13 @@ const spoken = { up: "Up", down: "Down", flat: "Unchanged" } as const;
  * closes the stat, with the period it covers. The row wraps to as many
  * columns as fit, and arrows are read aloud as up or down.
  */
-export function StatRow({ stats, className }: StatRowProps) {
+export function StatRow({ stats, variant = "loud", className }: StatRowProps) {
 	return (
-		<div className={["stat-row", className].filter(Boolean).join(" ")}>
+		<div
+			className={["stat-row", variant === "quiet" && "is-quiet", className]
+				.filter(Boolean)
+				.join(" ")}
+		>
 			{stats.map((stat, i) => {
 				const Trend = stat.trend ? arrow[stat.trend] : null;
 				return (
@@ -63,6 +76,7 @@ export function StatRow({ stats, className }: StatRowProps) {
 								<Trend className="stat-trend" role="img" aria-label={spoken[stat.trend]} />
 							)}
 							{stat.value}
+							{stat.unit != null && <span className="stat-unit">{stat.unit}</span>}
 						</div>
 						{stat.deltas?.map((delta) => {
 							const Icon = arrow[delta.direction];

package/src/components/index.ts

@@ -16,6 +16,7 @@ export {
 	type DataTableValueCell,
 	type SortDirection,
 } from "./DataTable";
+export { Disclosure, type DisclosureProps } from "./Disclosure";
 export { NotFound, type NotFoundProps } from "./NotFound";
 export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";
 export { describeStarRating, StarRating, type StarRatingProps } from "./StarRating";

package/src/styles/components.css

@@ -2,21 +2,33 @@
 
 /* Layout defaults for the components under src/components. A site's own
    classes (.page-hero, .eyebrow, .lead, .btn) arrive unlayered and win, so
-   these only fill in where a site does not style them. */
+   these only fill in where a site does not style them.
+
+   Every rule answers to either of two scopes. `.mkt` is a site's canvas,
+   which base.css also resets headings, links, and buttons under.
+   `.atelic-ui` is the same scope with no resets behind it, for an app that
+   has its own base (Tailwind, shadcn) and wants only the components. The
+   two weigh the same, so nothing a site already overrides changes.
+
+   Two tokens are read through names of the package's own first:
+   `--ui-primary` and `--ui-card`, each falling back to `--primary` and
+   `--card`. A site sets neither and nothing changes. An app whose own
+   `--primary` and `--card` hold something else (shadcn keeps bare HSL
+   channels there) sets the `--ui-` names and leaves its own alone. */
 @layer atelic-ui {
-	.mkt .not-found-hero {
+	:is(.mkt, .atelic-ui) .not-found-hero {
 		padding-top: calc(var(--nav-height, 72px) + clamp(40px, 7vw, 86px));
 		padding-bottom: clamp(28px, 5vw, 60px);
 	}
-	.mkt .not-found-hero h1 {
+	:is(.mkt, .atelic-ui) .not-found-hero h1 {
 		margin: 16px 0 0;
 	}
-	.mkt .not-found-hero .lead {
+	:is(.mkt, .atelic-ui) .not-found-hero .lead {
 		margin-top: 22px;
 		max-width: 56ch;
 	}
-	.mkt .not-found-links .cta-row,
-	.mkt .not-found-closing .cta-row {
+	:is(.mkt, .atelic-ui) .not-found-links .cta-row,
+	:is(.mkt, .atelic-ui) .not-found-closing .cta-row {
 		margin-top: 22px;
 	}
 
@@ -24,7 +36,7 @@
 	   warning, and broken read green, amber, and red whatever the brand is.
 	   A site's theme may restate any of these on .mkt. A component sets
 	   data-tone, and --tone, --tone-fill, and --tone-bg follow. ---- */
-	.mkt {
+	:is(.mkt, .atelic-ui) {
 		--tone-good: #1b7f3b;
 		--tone-good-fill: #37a35c;
 		--tone-good-bg: #eaf6ee;
@@ -35,27 +47,27 @@
 		--tone-bad-fill: #d9483f;
 		--tone-bad-bg: #fdecea;
 	}
-	.mkt [data-tone="good"] {
+	:is(.mkt, .atelic-ui) [data-tone="good"] {
 		--tone: var(--tone-good);
 		--tone-fill: var(--tone-good-fill);
 		--tone-bg: var(--tone-good-bg);
 	}
-	.mkt [data-tone="warn"] {
+	:is(.mkt, .atelic-ui) [data-tone="warn"] {
 		--tone: var(--tone-warn);
 		--tone-fill: var(--tone-warn-fill);
 		--tone-bg: var(--tone-warn-bg);
 	}
-	.mkt [data-tone="bad"] {
+	:is(.mkt, .atelic-ui) [data-tone="bad"] {
 		--tone: var(--tone-bad);
 		--tone-fill: var(--tone-bad-fill);
 		--tone-bg: var(--tone-bad-bg);
 	}
-	.mkt [data-tone="info"] {
-		--tone: var(--primary);
+	:is(.mkt, .atelic-ui) [data-tone="info"] {
+		--tone: var(--ui-primary, var(--primary));
 		--tone-fill: var(--primary-bright);
 		--tone-bg: var(--primary-tint);
 	}
-	.mkt [data-tone="muted"] {
+	:is(.mkt, .atelic-ui) [data-tone="muted"] {
 		--tone: var(--neutral-500);
 		--tone-fill: var(--neutral-200);
 		--tone-bg: var(--surface-alt);
@@ -63,50 +75,50 @@
 
 	/* ---- StatRow: large figures, each over what it counts, its period,
 	   and its comparisons ---- */
-	.mkt .stat-row {
+	:is(.mkt, .atelic-ui) .stat-row {
 		display: grid;
 		gap: 24px;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 	@media (min-width: 760px) {
-		.mkt .stat-row {
+		:is(.mkt, .atelic-ui) .stat-row {
 			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 		}
 	}
-	.mkt .stat-row.is-center .stat {
+	:is(.mkt, .atelic-ui) .stat-row.is-center .stat {
 		text-align: center;
 	}
-	.mkt .stat .num {
+	:is(.mkt, .atelic-ui) .stat .num {
 		display: flex;
 		align-items: center;
 		gap: 0.12em;
 		font-size: clamp(2.2rem, 5vw, 3rem);
 		font-weight: 800;
 		letter-spacing: -0.03em;
-		color: var(--tone, var(--primary));
+		color: var(--tone, var(--ui-primary, var(--primary)));
 		line-height: 1;
 		font-variant-numeric: tabular-nums;
 	}
-	.mkt .stat-row.is-center .stat .num {
+	:is(.mkt, .atelic-ui) .stat-row.is-center .stat .num {
 		justify-content: center;
 	}
-	.mkt .stat-trend {
+	:is(.mkt, .atelic-ui) .stat-trend {
 		width: 0.8em;
 		height: 0.8em;
 		flex: none;
 	}
-	.mkt .stat .lbl {
+	:is(.mkt, .atelic-ui) .stat .lbl {
 		font-size: 0.95rem;
 		font-weight: 650;
 		color: var(--ink);
 		margin-top: 8px;
 	}
-	.mkt .stat-period {
+	:is(.mkt, .atelic-ui) .stat-period {
 		margin-left: 0.5em;
 		font-weight: 400;
 		color: var(--neutral-500);
 	}
-	.mkt .stat-delta {
+	:is(.mkt, .atelic-ui) .stat-delta {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: baseline;
@@ -117,27 +129,135 @@
 		color: var(--neutral-500);
 		font-variant-numeric: tabular-nums;
 	}
-	.mkt .stat-delta-change {
+	:is(.mkt, .atelic-ui) .stat-delta-change {
 		display: inline-flex;
 		align-items: center;
 		gap: 2px;
 		font-weight: 700;
 		color: var(--tone);
 	}
-	.mkt .stat-delta-change svg {
+	:is(.mkt, .atelic-ui) .stat-delta-change svg {
 		align-self: center;
 	}
-	.mkt .stat-delta-basis {
+	:is(.mkt, .atelic-ui) .stat-delta-basis {
 		text-decoration: none;
 	}
-	.mkt .stat .note {
+	:is(.mkt, .atelic-ui) .stat .note {
 		font-size: 0.8rem;
 		color: var(--neutral-500);
 		margin-top: 4px;
 	}
 
+	:is(.mkt, .atelic-ui) .stat-unit {
+		margin-left: 0.2em;
+		font-size: 0.4em;
+		font-weight: 500;
+		letter-spacing: 0;
+		color: var(--neutral-500);
+	}
+
+	/* ---- StatRow, quiet: a glance row for a working page. A light figure in
+	   the text color over a small capitalized label, the stats divided by a
+	   hairline. `--stat-size` sets the figure. ---- */
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet {
+		display: flex;
+		gap: 0;
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat {
+		flex: 1;
+		min-width: 64px;
+		padding-right: 16px;
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat + .stat {
+		padding-left: 16px;
+		border-left: 1px solid var(--neutral-200);
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .num {
+		align-items: baseline;
+		gap: 4px;
+		font: 300 var(--stat-size, 28px) / 1 var(--font-sans);
+		/* After the shorthand, which would otherwise reset it. */
+		font-variant-numeric: tabular-nums;
+		letter-spacing: -0.02em;
+		color: var(--tone, var(--ink));
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat-unit {
+		margin-left: 0;
+		font: 500 12px / 1 var(--font-mono);
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .lbl {
+		margin-top: 7px;
+		font: 500 10px / 1.2 var(--font-sans);
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--neutral-500);
+	}
+
+	/* ---- Disclosure: a section the page opens and closes. The toggle's
+	   ::after covers the whole header row, so the meta and the chevron fold
+	   it too while staying out of its name. ---- */
+	:is(.mkt, .atelic-ui) .disclosure {
+		border: 1px solid var(--neutral-200);
+		border-radius: 16px;
+		background: var(--ui-card, var(--card));
+		overflow: hidden;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-head {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 14px 18px;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-title {
+		display: flex;
+		min-width: 0;
+		margin: 0;
+		font: inherit;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle {
+		border: none;
+		background: transparent;
+		padding: 0;
+		text-align: left;
+		font: 500 17px / 1 var(--font-sans);
+		letter-spacing: -0.01em;
+		color: var(--ink);
+		cursor: pointer;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible {
+		outline: none;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible::after {
+		outline: 2px solid var(--disclosure-focus, var(--ink));
+		outline-offset: -2px;
+		border-radius: 15px;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-meta {
+		display: inline-flex;
+		align-items: center;
+		color: var(--neutral-500);
+	}
+	:is(.mkt, .atelic-ui) .disclosure-chevron {
+		margin-left: auto;
+		flex-shrink: 0;
+		color: var(--neutral-500);
+		transition: transform 200ms ease;
+	}
+	:is(.mkt, .atelic-ui) .disclosure.is-open .disclosure-chevron {
+		transform: rotate(180deg);
+	}
+	:is(.mkt, .atelic-ui) .disclosure-body {
+		border-top: 1px solid var(--neutral-200);
+	}
+
 	/* ---- Collapsible: a labeled line that opens to the detail behind it ---- */
-	.mkt .collapsible > summary {
+	:is(.mkt, .atelic-ui) .collapsible > summary {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -145,77 +265,77 @@
 		cursor: pointer;
 		list-style: none;
 	}
-	.mkt .collapsible > summary::-webkit-details-marker {
+	:is(.mkt, .atelic-ui) .collapsible > summary::-webkit-details-marker {
 		display: none;
 	}
-	.mkt .collapsible-text {
+	:is(.mkt, .atelic-ui) .collapsible-text {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
 		min-width: 0;
 	}
-	.mkt .collapsible-label {
+	:is(.mkt, .atelic-ui) .collapsible-label {
 		font-weight: 650;
 		color: var(--ink);
 	}
-	.mkt .collapsible-summary {
+	:is(.mkt, .atelic-ui) .collapsible-summary {
 		color: var(--ink-soft);
 		text-wrap: pretty;
 	}
-	.mkt .collapsible > summary:hover .collapsible-label {
-		color: var(--primary);
+	:is(.mkt, .atelic-ui) .collapsible > summary:hover .collapsible-label {
+		color: var(--ui-primary, var(--primary));
 	}
-	.mkt .collapsible-chevron {
+	:is(.mkt, .atelic-ui) .collapsible-chevron {
 		flex: none;
 		color: var(--neutral-500);
 		transition: transform 0.15s;
 	}
-	.mkt .collapsible[open] > summary .collapsible-chevron {
+	:is(.mkt, .atelic-ui) .collapsible[open] > summary .collapsible-chevron {
 		transform: rotate(180deg);
 	}
-	.mkt .collapsible-body {
+	:is(.mkt, .atelic-ui) .collapsible-body {
 		margin-top: 12px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.mkt .collapsible-chevron {
+		:is(.mkt, .atelic-ui) .collapsible-chevron {
 			transition: none;
 		}
 	}
 	/* Paper cannot be clicked, so a printed collapsible is open. */
 	@media print {
-		.mkt .collapsible::details-content {
+		:is(.mkt, .atelic-ui) .collapsible::details-content {
 			content-visibility: visible;
 			display: block;
 		}
-		.mkt .collapsible-chevron {
+		:is(.mkt, .atelic-ui) .collapsible-chevron {
 			display: none;
 		}
 	}
 
 	/* ---- Callout: an icon in its tone beside the title, the explainer
 	   under it; boxed, it sits apart on a tinted ground ---- */
-	.mkt .callout {
+	:is(.mkt, .atelic-ui) .callout {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		gap: 10px;
 		align-items: start;
 	}
-	.mkt .callout-icon {
+	:is(.mkt, .atelic-ui) .callout-icon {
 		margin-top: 0.15em;
 		color: var(--tone);
 		flex: none;
 	}
-	.mkt .callout-title {
+	:is(.mkt, .atelic-ui) .callout-title {
 		font-weight: 650;
 		color: var(--ink);
 		text-wrap: pretty;
 	}
-	.mkt .callout-body {
+	:is(.mkt, .atelic-ui) .callout-body {
 		margin-top: 2px;
 		color: var(--ink-soft);
 		text-wrap: pretty;
 	}
-	.mkt .callout.is-box {
+	:is(.mkt, .atelic-ui) .callout.is-box {
 		padding: 14px 16px;
 		border-radius: var(--radius-sm);
 		background: var(--tone-bg);
@@ -223,7 +343,7 @@
 	}
 
 	/* ---- Checklist: checks passed or failed, two columns when there is room ---- */
-	.mkt .checklist {
+	:is(.mkt, .atelic-ui) .checklist {
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -232,36 +352,36 @@
 		gap: 12px 28px;
 	}
 	@media print, (min-width: 721px) {
-		.mkt .checklist {
+		:is(.mkt, .atelic-ui) .checklist {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 	}
-	.mkt .checklist li {
+	:is(.mkt, .atelic-ui) .checklist li {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		gap: 10px;
 		align-items: start;
 		line-height: 1.4;
 	}
-	.mkt .checklist li > svg {
+	:is(.mkt, .atelic-ui) .checklist li > svg {
 		margin-top: 0.1em;
 		color: var(--tone);
 	}
-	.mkt .checklist-label {
+	:is(.mkt, .atelic-ui) .checklist-label {
 		display: block;
 		font-weight: 600;
 		color: var(--ink);
 	}
-	.mkt .checklist li[data-tone="bad"] .checklist-label {
+	:is(.mkt, .atelic-ui) .checklist li[data-tone="bad"] .checklist-label {
 		color: var(--tone);
 	}
-	.mkt .checklist-detail {
+	:is(.mkt, .atelic-ui) .checklist-detail {
 		display: block;
 		color: var(--ink-soft);
 	}
 
 	/* ---- The charts' shared key: a swatch, a figure, a label ---- */
-	.mkt .chart-key {
+	:is(.mkt, .atelic-ui) .chart-key {
 		list-style: none;
 		margin: 10px 0 0;
 		padding: 0;
@@ -271,17 +391,17 @@
 		font-size: 0.82rem;
 		color: var(--ink-soft);
 	}
-	.mkt .chart-key li {
+	:is(.mkt, .atelic-ui) .chart-key li {
 		display: inline-flex;
 		align-items: baseline;
 		gap: 7px;
 	}
-	.mkt .chart-key b {
+	:is(.mkt, .atelic-ui) .chart-key b {
 		font-weight: 650;
 		color: var(--ink);
 		font-variant-numeric: tabular-nums;
 	}
-	.mkt .chart-swatch {
+	:is(.mkt, .atelic-ui) .chart-swatch {
 		width: 10px;
 		height: 10px;
 		border-radius: 3px;
@@ -291,35 +411,35 @@
 	}
 
 	/* ---- StackedBar: one bar, the parts of a whole ---- */
-	.mkt .stacked-bar-track {
+	:is(.mkt, .atelic-ui) .stacked-bar-track {
 		display: flex;
 		gap: 2px;
 		height: 16px;
 		border-radius: 999px;
 		overflow: hidden;
 	}
-	.mkt .stacked-bar-track span {
+	:is(.mkt, .atelic-ui) .stacked-bar-track span {
 		background: var(--tone-fill);
 		min-width: 4px;
 	}
 
 	/* ---- ColumnChart: a bar a period, the periods in labeled groups ---- */
-	.mkt .column-chart-plot {
+	:is(.mkt, .atelic-ui) .column-chart-plot {
 		display: flex;
 		align-items: flex-end;
 		gap: 12px;
 		min-width: 0;
 	}
-	.mkt .column-chart-group {
+	:is(.mkt, .atelic-ui) .column-chart-group {
 		flex: 1 1 0;
 		min-width: 0;
 	}
-	.mkt .column-chart-bars {
+	:is(.mkt, .atelic-ui) .column-chart-bars {
 		display: flex;
 		align-items: flex-end;
 		gap: 3px;
 	}
-	.mkt .column-chart-col {
+	:is(.mkt, .atelic-ui) .column-chart-col {
 		flex: 1 1 0;
 		min-width: 0;
 		display: flex;
@@ -327,24 +447,24 @@
 		align-items: center;
 		gap: 3px;
 	}
-	.mkt .column-chart-value {
+	:is(.mkt, .atelic-ui) .column-chart-value {
 		font-size: 0.64rem;
 		font-variant-numeric: tabular-nums;
 		color: var(--ink-soft);
 		white-space: nowrap;
 	}
-	.mkt .column-chart-bar {
+	:is(.mkt, .atelic-ui) .column-chart-bar {
 		width: 100%;
 		max-width: 48px;
 		border-radius: 4px 4px 0 0;
 		background: var(--tone-fill);
 	}
-	.mkt .column-chart-label {
+	:is(.mkt, .atelic-ui) .column-chart-label {
 		font-size: 0.66rem;
 		color: var(--ink-soft);
 		white-space: nowrap;
 	}
-	.mkt .column-chart-group-label {
+	:is(.mkt, .atelic-ui) .column-chart-group-label {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
@@ -358,7 +478,7 @@
 		color: var(--neutral-500);
 		white-space: nowrap;
 	}
-	.mkt .column-chart-group-label b {
+	:is(.mkt, .atelic-ui) .column-chart-group-label b {
 		font-family: var(--font-sans);
 		font-size: 0.8rem;
 		letter-spacing: 0;
@@ -368,37 +488,37 @@
 	}
 
 	/* ---- ThresholdScale: zones, and a pin a reading ---- */
-	.mkt .threshold-scale {
+	:is(.mkt, .atelic-ui) .threshold-scale {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
 	}
-	.mkt .threshold-scale-row {
+	:is(.mkt, .atelic-ui) .threshold-scale-row {
 		display: grid;
 		grid-template-columns: 4.4em minmax(0, 1fr) 3.4em;
 		gap: 10px;
 		align-items: center;
 	}
-	.mkt .threshold-scale-label {
+	:is(.mkt, .atelic-ui) .threshold-scale-label {
 		color: var(--ink-soft);
 	}
-	.mkt .threshold-scale-track {
+	:is(.mkt, .atelic-ui) .threshold-scale-track {
 		position: relative;
 		display: flex;
 		gap: 2px;
 		height: 12px;
 	}
-	.mkt .threshold-scale-zone {
+	:is(.mkt, .atelic-ui) .threshold-scale-zone {
 		background: var(--tone-fill);
 		opacity: 0.32;
 	}
-	.mkt .threshold-scale-zone:first-child {
+	:is(.mkt, .atelic-ui) .threshold-scale-zone:first-child {
 		border-radius: 999px 0 0 999px;
 	}
-	.mkt .threshold-scale-zone:nth-last-child(2) {
+	:is(.mkt, .atelic-ui) .threshold-scale-zone:nth-last-child(2) {
 		border-radius: 0 999px 999px 0;
 	}
-	.mkt .threshold-scale-pin {
+	:is(.mkt, .atelic-ui) .threshold-scale-pin {
 		position: absolute;
 		top: 50%;
 		width: 18px;
@@ -406,30 +526,30 @@
 		margin: -9px 0 0 -9px;
 		border-radius: 50%;
 		background: var(--tone-fill);
-		border: 3px solid var(--card);
+		border: 3px solid var(--ui-card, var(--card));
 		box-shadow: 0 0 0 1.5px var(--tone-fill);
 	}
-	.mkt .threshold-scale-value {
+	:is(.mkt, .atelic-ui) .threshold-scale-value {
 		font-weight: 700;
 		font-variant-numeric: tabular-nums;
 		color: var(--tone);
 		text-align: right;
 	}
-	.mkt .threshold-scale-axis {
+	:is(.mkt, .atelic-ui) .threshold-scale-axis {
 		position: relative;
 		display: flex;
 		gap: 2px;
 		height: 2.3em;
 		font-size: 0.8rem;
 	}
-	.mkt .threshold-scale-axis > span {
+	:is(.mkt, .atelic-ui) .threshold-scale-axis > span {
 		color: var(--tone);
 		font-weight: 600;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.mkt .threshold-scale-axis > i {
+	:is(.mkt, .atelic-ui) .threshold-scale-axis > i {
 		position: absolute;
 		top: 1.25em;
 		transform: translateX(-50%);
@@ -443,12 +563,12 @@
 	/* ---- DataTable: on a phone each row stacks, its facts wearing their
 	   column's label, and a dropdown sorts; wide, it is a table whose
 	   headings sort ---- */
-	.mkt .data-table table,
-	.mkt .data-table tbody {
+	:is(.mkt, .atelic-ui) .data-table table,
+	:is(.mkt, .atelic-ui) .data-table tbody {
 		display: block;
 		width: 100%;
 	}
-	.mkt .data-table thead {
+	:is(.mkt, .atelic-ui) .data-table thead {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -456,7 +576,7 @@
 		clip: rect(0, 0, 0, 0);
 		white-space: nowrap;
 	}
-	.mkt .data-table-sort {
+	:is(.mkt, .atelic-ui) .data-table-sort {
 		display: flex;
 		align-items: center;
 		gap: 8px;
@@ -464,16 +584,16 @@
 		font-size: 0.85rem;
 		color: var(--ink-soft);
 	}
-	.mkt .data-table-sort select {
+	:is(.mkt, .atelic-ui) .data-table-sort select {
 		font: inherit;
 		color: var(--ink);
-		background: var(--card);
+		background: var(--ui-card, var(--card));
 		border: 1px solid var(--neutral-200);
 		border-radius: var(--radius-sm);
 		padding: 5px 8px;
 		max-width: 100%;
 	}
-	.mkt .data-table tbody tr {
+	:is(.mkt, .atelic-ui) .data-table tbody tr {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -482,25 +602,25 @@
 		border-bottom: 1px solid var(--neutral-100);
 		line-height: 1.35;
 	}
-	.mkt .data-table tbody tr:first-child {
+	:is(.mkt, .atelic-ui) .data-table tbody tr:first-child {
 		border-top: 1.5px solid var(--ink);
 	}
-	.mkt .data-table tbody tr:last-child {
+	:is(.mkt, .atelic-ui) .data-table tbody tr:last-child {
 		border-bottom: 0;
 		padding-bottom: 0;
 	}
-	.mkt .data-table tbody th {
+	:is(.mkt, .atelic-ui) .data-table tbody th {
 		width: 100%;
 		text-align: left;
 		font-weight: 400;
 	}
-	.mkt .data-table td {
+	:is(.mkt, .atelic-ui) .data-table td {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
 		font-variant-numeric: tabular-nums;
 	}
-	.mkt .data-table td::before {
+	:is(.mkt, .atelic-ui) .data-table td::before {
 		content: attr(data-label);
 		font-family: var(--font-mono);
 		font-size: 0.7rem;
@@ -509,33 +629,33 @@
 		color: var(--neutral-500);
 	}
 	@media print, (min-width: 721px) {
-		.mkt .data-table-sort {
+		:is(.mkt, .atelic-ui) .data-table-sort {
 			display: none;
 		}
-		.mkt .data-table table {
+		:is(.mkt, .atelic-ui) .data-table table {
 			display: table;
 			border-collapse: collapse;
 		}
-		.mkt .data-table tbody {
+		:is(.mkt, .atelic-ui) .data-table tbody {
 			display: table-row-group;
 		}
-		.mkt .data-table thead {
+		:is(.mkt, .atelic-ui) .data-table thead {
 			position: static;
 			width: auto;
 			height: auto;
 			overflow: visible;
 			clip: auto;
 		}
-		.mkt .data-table tbody tr {
+		:is(.mkt, .atelic-ui) .data-table tbody tr {
 			display: table-row;
 			padding: 0;
 			border: 0;
 		}
-		.mkt .data-table tbody tr:first-child {
+		:is(.mkt, .atelic-ui) .data-table tbody tr:first-child {
 			border-top: 0;
 		}
-		.mkt .data-table th,
-		.mkt .data-table td {
+		:is(.mkt, .atelic-ui) .data-table th,
+		:is(.mkt, .atelic-ui) .data-table td {
 			display: table-cell;
 			padding: 7px 14px 7px 0;
 			border-bottom: 1px solid var(--neutral-100);
@@ -543,23 +663,23 @@
 			vertical-align: middle;
 			font-weight: 400;
 		}
-		.mkt .data-table tbody th {
+		:is(.mkt, .atelic-ui) .data-table tbody th {
 			width: auto;
 		}
-		.mkt .data-table td::before {
+		:is(.mkt, .atelic-ui) .data-table td::before {
 			content: none;
 		}
-		.mkt .data-table th:last-child,
-		.mkt .data-table td:last-child {
+		:is(.mkt, .atelic-ui) .data-table th:last-child,
+		:is(.mkt, .atelic-ui) .data-table td:last-child {
 			padding-right: 0;
 		}
-		.mkt .data-table [data-align="center"] {
+		:is(.mkt, .atelic-ui) .data-table [data-align="center"] {
 			text-align: center;
 		}
-		.mkt .data-table [data-align="right"] {
+		:is(.mkt, .atelic-ui) .data-table [data-align="right"] {
 			text-align: right;
 		}
-		.mkt .data-table thead th {
+		:is(.mkt, .atelic-ui) .data-table thead th {
 			padding-top: 0;
 			padding-bottom: 8px;
 			border-bottom: 1.5px solid var(--ink);
@@ -571,7 +691,7 @@
 			white-space: nowrap;
 			vertical-align: bottom;
 		}
-		.mkt .data-table thead th button {
+		:is(.mkt, .atelic-ui) .data-table thead th button {
 			display: inline-flex;
 			align-items: center;
 			gap: 4px;
@@ -584,23 +704,23 @@
 			color: inherit;
 			cursor: pointer;
 		}
-		.mkt .data-table thead th button:hover,
-		.mkt .data-table thead th button[data-active] {
-			color: var(--primary);
+		:is(.mkt, .atelic-ui) .data-table thead th button:hover,
+		:is(.mkt, .atelic-ui) .data-table thead th button[data-active] {
+			color: var(--ui-primary, var(--primary));
 		}
-		.mkt .data-table thead th button svg {
+		:is(.mkt, .atelic-ui) .data-table thead th button svg {
 			opacity: 0.55;
 		}
-		.mkt .data-table thead th button[data-active] svg {
+		:is(.mkt, .atelic-ui) .data-table thead th button[data-active] svg {
 			opacity: 1;
 		}
-		.mkt .data-table tbody tr:last-child th,
-		.mkt .data-table tbody tr:last-child td {
+		:is(.mkt, .atelic-ui) .data-table tbody tr:last-child th,
+		:is(.mkt, .atelic-ui) .data-table tbody tr:last-child td {
 			border-bottom: 0;
 		}
 	}
 	@media print {
-		.mkt .data-table thead th button svg {
+		:is(.mkt, .atelic-ui) .data-table thead th button svg {
 			display: none;
 		}
 	}