@atelic-action/ui 0.8.0 → 0.10.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`), 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`), 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` |
@@ -50,6 +50,7 @@ The package sheets sit inside `@layer atelic-ui`, so any rule a site writes outs
 | `@atelic-action/ui/styles/base.css` | Resets, the `.mkt` canvas, typography, and layout helpers |
 | `@atelic-action/ui/styles/chrome.css` | Styles for everything under `chrome` |
 | `@atelic-action/ui/styles/components.css` | Layout defaults for everything under `components` |
+| `@atelic-action/ui/styles/star-rating.css` | `StarRating`'s styles alone, for an app that wears none of the site chrome; `components.css` already imports it |
 
 Every component renders from props alone. None reads a config file or a router, so a site maps its own config onto the props in its shell:
 
@@ -261,9 +262,61 @@ The blocks a page composes, each styled in `styles/components.css` inside the `a
 | `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 |
 | `ThresholdScale` | Zones on a scale and a pin for each reading | For a number judged against lines, like a load time against good and poor |
+| `StarRating` | A row of stars showing a rating in half star steps, and taking one when given `onChange` | Each star is two hit targets; picking the current rating clears it. Editable, it is one slider to a keyboard and a screen reader; read only, a picture named by the rating. `fillColor` and `outlineColor` take any CSS color, `size` and `max` set the star and the scale |
+
+**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, where the app can declare the layer order before Tailwind loads, `@layer theme, base, atelic-ui, components, utilities;` keeps utilities winning over the package too; where it cannot, the package's layer lands last and wins over utilities set on a package element, which only matters to a caller styling one with a utility class.
+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));
+	--ui-card: hsl(var(--card));
+}
+```
+
+`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.
+
+```bash
+bun run gallery:dev    # a dev server on the repo's own source
+bun run gallery:build  # the static page, written to gallery/dist
+```
+
+`vercel.json` builds it the same way and serves `gallery/dist`. Typecheck and lint cover it, and CI builds it, so a component change that breaks the gallery fails CI. **A new page component gets a gallery section in the same change**, with each of its meaningfully different forms shown.
+
 ## Releasing
 
 1. Bump `version` in `package.json` and merge it to `main`: patch for a fix, minor for a new component or prop, major for a breaking prop or class rename.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, and the component library they install",
 	"type": "module",
 	"license": "UNLICENSED",
@@ -28,13 +28,16 @@
 		"./styles/base.css": "./src/styles/base.css",
 		"./styles/chrome.css": "./src/styles/chrome.css",
 		"./styles/components.css": "./src/styles/components.css",
+		"./styles/star-rating.css": "./src/styles/star-rating.css",
 		"./package.json": "./package.json"
 	},
 	"scripts": {
 		"lint": "biome check .",
 		"lint:fix": "biome check . --write",
-		"typecheck": "tsc --noEmit",
-		"test:run": "vitest run"
+		"typecheck": "tsc --noEmit && tsc --noEmit -p gallery",
+		"test:run": "vitest run",
+		"gallery:dev": "vite gallery",
+		"gallery:build": "vite build gallery"
 	},
 	"peerDependencies": {
 		"lucide-react": "^1.23.0",
@@ -47,11 +50,13 @@
 		"@testing-library/react": "^16.0.1",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^6.1.1",
 		"jsdom": "^25.0.1",
 		"lucide-react": "^1.23.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"typescript": "^5.6.3",
+		"vite": "^8.3.2",
 		"vitest": "^4.0.0"
 	},
 	"trustedDependencies": [

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/StarRating.tsx

@@ -0,0 +1,153 @@
+import { Star } from "lucide-react";
+import { type CSSProperties, type KeyboardEvent, useState } from "react";
+
+const STEP = 0.5;
+
+export interface StarRatingProps {
+	/** The rating, in half star steps from 0.5 up to `max`; null is unrated. */
+	value: number | null;
+	/** Called with the new rating, or null to clear it. Leave it out for a read only row. */
+	onChange?: (value: number | null) => void;
+	/** How many stars the scale runs to. */
+	max?: number;
+	/** The side of one star, in pixels. */
+	size?: number;
+	/** The color of a filled star: any CSS color. Defaults to the text color around it. */
+	fillColor?: string;
+	/** The color of a star's outline: any CSS color. Defaults to a faint tint of the text color. */
+	outlineColor?: string;
+	/** What a screen reader calls the row. */
+	label?: string;
+	className?: string;
+}
+
+/** "4.5 stars", "1 star", "Not rated": the rating as a person would say it. */
+export function describeStarRating(value: number | null): string {
+	if (value === null) return "Not rated";
+	return `${value} ${value === 1 ? "star" : "stars"}`;
+}
+
+/**
+ * A row of stars that shows a rating in half star steps and, given `onChange`,
+ * takes one. Each star is two hit targets, its left half and its right, so a
+ * pointer lands on 3.5 or 4 without a second control. Picking the rating
+ * already set clears it, which is the only way back to unrated and needs no
+ * button of its own.
+ *
+ * To a keyboard and a screen reader an editable row is one slider: the arrows
+ * move half a star, Home clears, End is the top of the scale. The halves stay
+ * out of the tab order, so the row is one stop rather than ten. Without
+ * `onChange` it is a picture with the rating as its name.
+ *
+ * The two colors are the `--star-fill` and `--star-outline` custom properties.
+ * `fillColor` and `outlineColor` set them on this row; a site may also set
+ * them in its own CSS for every row at once.
+ */
+export function StarRating({
+	value,
+	onChange,
+	max = 5,
+	size = 24,
+	fillColor,
+	outlineColor,
+	label = "Rating",
+	className,
+}: StarRatingProps) {
+	const [hover, setHover] = useState<number | null>(null);
+	const shown = hover ?? value ?? 0;
+
+	const style = {
+		"--star-size": `${size}px`,
+		...(fillColor ? { "--star-fill": fillColor } : {}),
+		...(outlineColor ? { "--star-outline": outlineColor } : {}),
+	} as CSSProperties;
+	const classes = ["star-rating", className].filter(Boolean).join(" ");
+
+	const stars = Array.from({ length: max }, (_, i) => i + 1).map((star) => {
+		const fill = shown >= star ? "100%" : shown >= star - STEP ? "50%" : "0%";
+		return (
+			<span key={star} className="star-rating-star">
+				<Star aria-hidden="true" size={size} className="star-rating-outline" />
+				<span aria-hidden="true" className="star-rating-fill" style={{ width: fill }}>
+					<Star size={size} />
+				</span>
+				{onChange &&
+					[star - STEP, star].map((rating, half) => (
+						<button
+							key={rating}
+							type="button"
+							tabIndex={-1}
+							aria-label={describeStarRating(rating)}
+							className={`star-rating-hit ${half === 0 ? "is-left" : "is-right"}`}
+							onMouseEnter={() => setHover(rating)}
+							onClick={() => {
+								// Drop the preview with the pick: the pointer is still on this
+								// half, and a preview left up would hide a clear behind the
+								// very stars it just emptied.
+								setHover(null);
+								onChange(rating === value ? null : rating);
+							}}
+						/>
+					))}
+			</span>
+		);
+	});
+
+	if (!onChange) {
+		return (
+			<span
+				role="img"
+				aria-label={`${label}: ${describeStarRating(value)}`}
+				className={classes}
+				style={style}
+			>
+				{stars}
+			</span>
+		);
+	}
+
+	const set = (next: number | null) => {
+		if (next !== value) onChange(next);
+	};
+
+	const onKeyDown = (event: KeyboardEvent) => {
+		const current = value ?? 0;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				set(Math.min(max, current + STEP));
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				set(current - STEP > 0 ? current - STEP : null);
+				break;
+			case "Home":
+				set(null);
+				break;
+			case "End":
+				set(max);
+				break;
+			default:
+				return;
+		}
+		event.preventDefault();
+	};
+
+	return (
+		<span
+			role="slider"
+			tabIndex={0}
+			aria-label={label}
+			aria-valuemin={0}
+			aria-valuemax={max}
+			aria-valuenow={value ?? 0}
+			aria-valuetext={describeStarRating(value)}
+			className={`${classes} is-editable`}
+			style={style}
+			onKeyDown={onKeyDown}
+			onMouseLeave={() => setHover(null)}
+		>
+			{stars}
+		</span>
+	);
+}

package/src/components/index.ts

@@ -18,6 +18,7 @@ export {
 } from "./DataTable";
 export { NotFound, type NotFoundProps } from "./NotFound";
 export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";
+export { describeStarRating, StarRating, type StarRatingProps } from "./StarRating";
 export {
 	type StatDelta,
 	type StatDirection,

package/src/styles/components.css

@@ -1,20 +1,34 @@
+@import "./star-rating.css";
+
 /* 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;
 	}
 
@@ -22,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;
@@ -33,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);
@@ -61,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;
@@ -115,27 +129,27 @@
 		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;
 	}
 
 	/* ---- 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;
@@ -143,77 +157,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);
@@ -221,7 +235,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;
@@ -230,36 +244,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;
@@ -269,17 +283,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;
@@ -289,35 +303,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;
@@ -325,24 +339,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;
@@ -356,7 +370,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;
@@ -366,37 +380,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;
@@ -404,30 +418,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%);
@@ -441,12 +455,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;
@@ -454,7 +468,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;
@@ -462,16 +476,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;
@@ -480,25 +494,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;
@@ -507,33 +521,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);
@@ -541,23 +555,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);
@@ -569,7 +583,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;
@@ -582,23 +596,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;
 		}
 	}

package/src/styles/star-rating.css

@@ -0,0 +1,67 @@
+/* StarRating: a row of stars in half star steps. On its own sheet, and not
+   under .mkt, so an app that wears none of the site chrome can import this
+   file alone; components.css imports it for every site.
+
+   The two colors are custom properties with fallbacks off the text color, so
+   the row needs no theme token and takes a color from a prop, from a site's
+   own rule, or from whatever it sits in. */
+@layer atelic-ui {
+	.star-rating {
+		display: inline-flex;
+		align-items: center;
+		vertical-align: middle;
+		line-height: 0;
+		border-radius: 4px;
+	}
+	.star-rating.is-editable:focus-visible {
+		outline: 2px solid var(--star-focus, currentColor);
+		outline-offset: 2px;
+	}
+	.star-rating-star {
+		position: relative;
+		display: inline-block;
+		width: var(--star-size, 24px);
+		height: var(--star-size, 24px);
+	}
+	/* Pinned to the star's size: a base reset that caps an svg at its
+	   container's width would shrink the filled star inside its clip to a
+	   small whole star, where it has to stay full size and be cut in half. */
+	.star-rating .star-rating-star svg {
+		display: block;
+		width: var(--star-size, 24px);
+		height: var(--star-size, 24px);
+		max-width: none;
+	}
+	.star-rating-outline {
+		color: var(--star-outline, color-mix(in srgb, currentColor 40%, transparent));
+	}
+	/* The filled star sits over the outline and is clipped to none, half, or
+	   all of its width. */
+	.star-rating-fill {
+		position: absolute;
+		inset-block: 0;
+		left: 0;
+		overflow: hidden;
+		pointer-events: none;
+		color: var(--star-fill, currentColor);
+	}
+	.star-rating-fill svg {
+		fill: currentColor;
+	}
+	.star-rating-hit {
+		position: absolute;
+		inset-block: 0;
+		width: 50%;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		cursor: pointer;
+	}
+	.star-rating-hit.is-left {
+		left: 0;
+	}
+	.star-rating-hit.is-right {
+		right: 0;
+	}
+}