themelia-ui 1.0.0

package/dist/styles/index.css

@@ -0,0 +1,96 @@
+/*
+ * Themelia UI — stylesheet entry point.
+ *
+ * Import this once at the application root. Everything below is plain CSS: no
+ * Tailwind, no PostCSS plugin, no build step required to read it.
+ *
+ * ── Cascade order ────────────────────────────────────────────────────────────────
+ * The layer statement is the whole override story, so it comes first and appears
+ * exactly once. Later layers beat earlier ones regardless of selector specificity.
+ *
+ *   tokens     primitives (palette) + the raw tunable contract semantics resolve against
+ *   theming    computed, reusable wiring derived from tokens (never raw values)
+ *   base       element reset
+ *   components CSS-Module rules compile here (see vite.config.ts)
+ *   utilities  the handful of escape-hatch helpers the kit ships
+ *
+ * A consumer's own unlayered CSS outranks every layer above. That is deliberate: it
+ * replaces `tailwind-merge`, which existed only to referee utility collisions at
+ * runtime. Here the cascade referees, and it costs nothing at runtime.
+ *
+ * Note the `layer(...)` form on each import — `@import` may not appear inside a
+ * `@layer { }` block, so the layer is named on the import itself.
+ */
+@layer tokens, theming, base, components, utilities;
+
+/* ── tokens: the raw contract ─────────────────────────────────────────────────── */
+/* Primitives first: the theme resolves its semantics against these. */
+@import "./tokens/palette.css" layer(tokens);
+@import "./themes/default.css" layer(tokens);
+@import "./tokens/foundation.css" layer(tokens);
+@import "./tokens/primitives.css" layer(tokens);
+@import "./tokens/states.css" layer(tokens);
+@import "./tokens/layout.css" layer(tokens);
+@import "./tokens/components.css" layer(tokens);
+
+/* ── theming: computed wiring ─────────────────────────────────────────────────── */
+@import "./theming/breakpoints.css";
+@import "./theming/colors.css" layer(theming);
+@import "./theming/sizing.css" layer(theming);
+@import "./theming/typography.css" layer(theming);
+@import "./theming/focus.css" layer(theming);
+@import "./theming/motion.css" layer(theming);
+@import "./theming/layers.css" layer(theming);
+@import "./theming/animation.css" layer(theming);
+
+/*
+ * Per-component contracts. One file per component, each declaring only that component's
+ * variables in terms of the cross-cutting files above. A component's .module.css resolves
+ * against these, so a component whose file is missing here renders unstyled — every
+ * var() falls back to nothing rather than to a default.
+ */
+@import "./theming/overlay.css" layer(theming);
+@import "./theming/layout.css" layer(theming);
+@import "./theming/field.css" layer(theming);
+@import "./theming/feedback.css" layer(theming);
+@import "./theming/text.css" layer(theming);
+@import "./theming/mentions.css" layer(theming);
+
+/* ── base: element reset (declares its own @layer base) ───────────────────────── */
+@import "./base.css";
+
+/*
+ * The shared field surface. Global rather than per-component so every control wears the
+ * same chrome and a new one cannot get it subtly wrong. See the file.
+ */
+@import "./fields.css";
+
+/*
+ * Minimum hit areas for small controls. Global for the same reason as the field surface.
+ */
+@import "./targets.css";
+
+/*
+ * Mention chips. Global because the same chip is rendered by a React component on a page
+ * and by raw serialised HTML inside an editor, and the two must be indistinguishable.
+ * See the file.
+ */
+@import "./mentions.css";
+
+/* ── utilities: caller-supplied class hooks the component API documents ───────── */
+@import "./utilities.css";
+/* ── utilities: the forced-colors focus restoration (declares its own @layer) ──── */
+@import "./forced-colors.css";
+
+/*
+ * Unlayered on purpose — see the file. Modal scrims must outrank the component modules
+ * that would otherwise set their own backdrop, which is the precedence they had upstream.
+ */
+@import "./overlays.css";
+
+/*
+ * Also unlayered, and for a sharper reason: leaflet.css is unlayered, and an unlayered
+ * rule beats every layer. These retunings have to meet it on its own terms. Harmless when
+ * no map is on the page — every selector is qualified by `.map--component`.
+ */
+@import "./map.css";

package/dist/styles/map.css

@@ -0,0 +1,160 @@
+/*
+ * Leaflet's chrome, retuned — and UNLAYERED, which is the whole point of the file.
+ *
+ * `leaflet.css` ships every one of its rules outside any cascade layer, and an unlayered
+ * rule beats a layered one no matter the specificity or the import order. So none of
+ * this can live in the feature's CSS Module, which compiles into `@layer components`:
+ * `.leaflet-container { background: #ddd }` would keep winning and the map would flash
+ * light grey behind its tiles on a dark surface.
+ *
+ * Unlayered against unlayered, specificity decides again — so every rule here is
+ * qualified by a kit class or an extra Leaflet class, and none of them needs
+ * `!important`.
+ *
+ * Only what Leaflet actually paints is here. Everything the feature draws itself lives in
+ * its module, where it belongs.
+ */
+
+.map--component.leaflet-container {
+	background-color: var(--muted);
+	font-family: var(--font-sans);
+}
+
+/*
+ * Dark mode with no dark basemap.
+ *
+ * There is no key-less dark tile source to pair with OpenStreetMap's own, so the light
+ * one is inverted: `invert` flips it, and the `hue-rotate` puts the hues back where they
+ * were, which is what keeps water blue and parks green instead of orange and magenta.
+ * The brightness trim stops the result glaring against a dark page.
+ *
+ * The MARKERS are not in this pane, so nothing the consumer drew is affected. Passing a
+ * real `darkUrl` removes the attribute and the filter with it.
+ */
+.map--component[data-tile-filter="invert"] .leaflet-tile-pane {
+	filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9);
+}
+
+/* ── The panes Leaflet paints itself ──────────────────────────────────────────── */
+
+.map--component .leaflet-popup-content-wrapper {
+	border: var(--border-width) solid var(--border);
+	border-radius: var(--radius-md);
+	background-color: var(--popover);
+	color: var(--popover-foreground);
+	box-shadow: var(--shadow-md);
+}
+
+.map--component .leaflet-popup-content {
+	margin: var(--surface-py) var(--surface-px);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+}
+
+/* The tip is a rotated square Leaflet fills; it has to match the wrapper it points at. */
+.map--component .leaflet-popup-tip {
+	background-color: var(--popover);
+	box-shadow: none;
+}
+
+.map--component .leaflet-popup-close-button {
+	color: var(--muted-foreground);
+}
+
+.map--component .leaflet-popup-close-button:hover {
+	color: var(--foreground);
+}
+
+/*
+ * The tooltip's own chrome is REMOVED rather than restyled. The component draws its own
+ * arrow, because Leaflet's single built-in tip cannot sit on a side the component chose.
+ */
+.map--component .leaflet-tooltip {
+	padding: 0;
+	border: 0;
+	background: none;
+	box-shadow: none;
+}
+
+.map--component .leaflet-tooltip::before {
+	display: none;
+}
+
+/* ── Attribution ──────────────────────────────────────────────────────────────── */
+
+.map--component.leaflet-container .leaflet-control-attribution {
+	border-radius: var(--radius-sm) 0 0 0;
+	background-color: var(--background-80, var(--background));
+	color: var(--muted-foreground);
+	font-family: var(--font-sans);
+	font-size: var(--text-xxs);
+	line-height: var(--text-xxs--line-height);
+}
+
+.map--component .leaflet-control-attribution a {
+	color: var(--link-color);
+}
+
+/* ── leaflet-draw's toolbar ───────────────────────────────────────────────────── */
+
+/*
+ * Hidden, not styled. Every draw control in this kit is a real Button; leaflet-draw's own
+ * toolbar is only ever the second copy of the same controls.
+ */
+.map--component .leaflet-draw-toolbar,
+.map--component .leaflet-draw-actions {
+	display: none;
+}
+
+/* Its on-map instruction tooltip stays — it says what to do next, which nothing else
+ * does — but wears the kit's surface. */
+.map--component .leaflet-draw-tooltip {
+	border: var(--border-width) solid var(--border);
+	border-radius: var(--radius-sm);
+	background-color: var(--popover);
+	color: var(--popover-foreground);
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	line-height: var(--text-xs--line-height);
+}
+
+/*
+ * Physical on purpose, and the only such declaration left in the kit. This paints the
+ * arrow on Leaflet's own tooltip element, whose geometry the library fixes in physical
+ * terms; a logical property here would point the arrow away from the marker.
+ */
+.map--component .leaflet-draw-tooltip::before {
+	border-right-color: var(--border);
+}
+
+/* ── Marker clusters ──────────────────────────────────────────────────────────── */
+
+/*
+ * MarkerCluster.Default.css paints a green and blue palette that belongs to no theme, so
+ * this kit does not import it. These rules give the default cluster the kit's own
+ * surface, for a consumer who did not pass an `icon`.
+ */
+.map--component .marker-cluster {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-pill);
+	background-color: var(--primary-20);
+	color: var(--primary-accent);
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	line-height: var(--text-xs--line-height);
+	font-weight: var(--weight-semibold);
+}
+
+.map--component .marker-cluster div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	border-radius: var(--radius-pill);
+	background-color: var(--primary-10);
+}

package/dist/styles/mentions.css

@@ -0,0 +1,152 @@
+/*
+ * Mention chips — the one global component look in the kit, and why.
+ *
+ * A mention exists in two places at once. Inside a rich-text editor it is raw HTML the
+ * serialiser wrote, sitting in a contenteditable where no React component can run. On a
+ * rendered page it is a real component with a link, a hover state, and a current label.
+ * They have to be INDISTINGUISHABLE — a chip that changes shape the moment a comment is
+ * posted tells the writer they were editing something other than what they published.
+ *
+ * So the look is defined once, here, and both wear it.
+ *
+ * It keys off `data-ref-id` rather than a class because `sanitizeHtml` does not allow
+ * `class`: a chip styled by class loses its look the first time a body is saved and
+ * reloaded. The attribute the chip is identified BY is the attribute it is styled by.
+ *
+ * Layered `components`, so a consumer's own unlayered rule still wins.
+ */
+@layer components {
+	:is(span, a)[data-ref-id] {
+		/*
+		 * `inline-block`, not `inline-flex`. A flex box aligns to the line's middle and
+		 * drifts below the text beside it; this sits on the baseline like a word.
+		 */
+		display: inline-block;
+		/* Chip geometry, in em so it follows whatever line it lands in. */
+		padding: 0.125em 0.5em;
+		border-radius: var(--radius-pill);
+		/*
+		 * `em`, not `rem`. A chip inherits the size of the line it is in, so the same
+		 * mention reads correctly in a heading, in body copy, and in a caption.
+		 */
+		font-size: 0.875em;
+		font-weight: var(--weight-medium);
+		line-height: 1.35;
+		white-space: nowrap;
+		vertical-align: baseline;
+		text-decoration: none;
+		/* Untoned: a chip that is a reference and nothing more. */
+		background-color: var(--foreground-8);
+		color: var(--foreground);
+		box-shadow: inset 0 0 0 1px var(--foreground-10);
+		transition: background-color var(--duration-fast) var(--ease-out);
+	}
+
+	/*
+	 * `all`, so a click selects the whole chip rather than a letter of a name. Inside an
+	 * editor this is half of what makes it atomic; `contenteditable="false"` is the other.
+	 */
+	:is(span, a)[data-ref-id] {
+		user-select: all;
+		-webkit-user-select: all;
+	}
+
+	:is(span, a)[data-ref-id]:hover {
+		background-color: color-mix(in oklab, var(--foreground) 15%, transparent);
+	}
+
+	/* A chip with no destination is a label, so it does not pretend to be clickable. */
+	span[data-ref-id] {
+		cursor: default;
+	}
+
+	a[data-ref-id] {
+		cursor: pointer;
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="primary"] {
+		background-color: var(--primary-12);
+		color: var(--primary);
+		box-shadow: inset 0 0 0 1px var(--primary-25);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="primary"]:hover {
+		background-color: var(--primary-20);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="secondary"] {
+		background-color: var(--muted);
+		color: var(--muted-foreground);
+		box-shadow: inset 0 0 0 1px var(--foreground-10);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="secondary"]:hover {
+		background-color: var(--muted-80);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="info"] {
+		background-color: var(--info-15);
+		color: var(--info);
+		box-shadow: inset 0 0 0 1px var(--info-30);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="info"]:hover {
+		background-color: color-mix(in oklab, var(--info) 20%, transparent);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="success"] {
+		background-color: color-mix(in oklab, var(--success) 20%, transparent);
+		color: var(--success);
+		box-shadow: inset 0 0 0 1px var(--success-30);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="success"]:hover {
+		/*
+		 * Warning takes the paired foreground, not the tone itself. A warning hue against its
+		 * own wash is the one combination in the set that fails contrast in both modes.
+		*/
+		background-color: var(--success-30);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="warning"] {
+		background-color: var(--warning-50);
+		color: var(--warning-foreground);
+		box-shadow: inset 0 0 0 1px var(--warning-50);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="warning"]:hover {
+		background-color: color-mix(in oklab, var(--warning) 70%, transparent);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="destructive"] {
+		background-color: color-mix(in oklab, var(--destructive) 12%, transparent);
+		color: var(--mention-destructive-fg);
+		box-shadow: inset 0 0 0 1px var(--destructive-30);
+	}
+
+	:is(span, a)[data-ref-id][data-ref-tone="destructive"]:hover {
+		background-color: var(--destructive-20);
+	}
+
+	/*
+	 * The glyph a React chip puts before the label.
+	 *
+	 * `inline-block` is the load-bearing line. The base reset makes every replaced element
+	 * a BLOCK — right for an icon in a flex row, wrong for one in running text — and a
+	 * block glyph inside an inline chip pushes the name onto a second line, doubling the
+	 * chip's height and breaking the sentence's leading. This is the one place in the kit
+	 * where an icon lives in text flow rather than a layout, so it is the one place that
+	 * has to say so.
+	 */
+	:is(span, a)[data-ref-id] > svg {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		vertical-align: -0.15em;
+		margin-inline-end: 0.25em;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:is(span, a)[data-ref-id] { transition: none; }
+	}
+}

package/dist/styles/overlays.css

@@ -0,0 +1,86 @@
+/*
+ * Modal scrims — native `::backdrop`.
+ *
+ * ── Why this file is unlayered ──────────────────────────────────────────────────────
+ * These are RULES, not tokens, so they cannot live in styles/tokens (imported into
+ * `@layer tokens`, the lowest layer) or a component module would outrank them. Upstream
+ * the equivalent rule was deliberately unlayered so it beat Tailwind's `@layer utilities`.
+ * Unlayered here preserves that precedence.
+ *
+ * ── Why ::backdrop rather than an element ───────────────────────────────────────────
+ * Dialog, alert dialog, sheet, and drawer all open with `showModal()`, which promotes
+ * them to the browser's TOP LAYER and attaches a `::backdrop` behind them. That removes
+ * the whole class of bugs where a scrim is trapped inside a transformed or
+ * `overflow: hidden` ancestor, and it means one rule covers every modal surface instead
+ * of four components each rendering their own overlay div.
+ *
+ * Consumers retune the tint through --overlay-backdrop, exactly as before.
+ */
+
+dialog::backdrop {
+	background-color: var(--overlay-backdrop);
+	/*
+	 * The scrim does NOT blur, and that is a measured decision rather than a taste one.
+	 *
+	 * `backdrop-filter` cannot be composited: every frame it is on screen, the browser
+	 * re-rasterises everything behind the surface. Timing the frames of a dialog close at
+	 * 1440x950 — animated blur, static blur, and none at all:
+	 *
+	 *     animated blur   10, 29, 32, 39, 93 ms
+	 *     static blur      5,  8, 37, 48, 65 ms
+	 *     no blur          4,  8,  9, 11, 11 ms
+	 *
+	 * A 112ms exit was taking 190ms and drawing four frames of it. That is the "lag" —
+	 * not the duration, not the easing, not React. The tint alone is a scrim; the blur is
+	 * a garnish that costs the whole animation.
+	 *
+	 * Set this to `blur(3px)` on a product that wants one and can pay for it. `none`
+	 * rather than `blur(0)`: a zero blur still creates the filter layer, and the layer is
+	 * the cost.
+	*/
+	backdrop-filter: none;
+
+	/*
+	 * The backdrop is in the top layer, so animating it needs `allow-discrete`: without
+	 * it the element is removed the instant `close()` runs and the exit transition never
+	 * renders. `overlay` is what keeps it in the top layer for the duration.
+	 */
+	opacity: 0;
+
+	/* The exit timing, for the same reason as the surface — see overlay.module.css. */
+	transition:
+		opacity var(--overlay-duration-exit) var(--ease-out),
+		overlay var(--overlay-duration-exit) allow-discrete,
+		display var(--overlay-duration-exit) allow-discrete;
+}
+
+dialog[open]::backdrop {
+	opacity: 1;
+
+	/*
+	 * The scrim enters WITH the surface, not before it. Matching the surface's enter
+	 * duration keeps the two as one gesture; a scrim on its own timing reads as two things
+	 * happening near each other.
+	 */
+	transition:
+		opacity var(--duration-fast) var(--ease-out),
+		overlay var(--duration-fast) allow-discrete,
+		display var(--duration-fast) allow-discrete;
+}
+
+@starting-style {
+	dialog[open]::backdrop {
+		opacity: 0;
+	}
+}
+
+/*
+ * A non-modal drawer keeps the page usable, so it must not be scrimmed. It opens through
+ * the popover API rather than showModal() — also top layer, but with no backdrop and no
+ * focus trap, which is the correct primitive for a panel you can work alongside.
+ */
+dialog[data-modality="trap-focus"]::backdrop,
+dialog[data-modality="non-modal"]::backdrop {
+	background-color: transparent;
+	backdrop-filter: none;
+}

package/dist/styles/tailwind.css

@@ -0,0 +1,149 @@
+/*
+ * themelia-ui → Tailwind CSS v4.
+ *
+ * GENERATED by scripts/gen-tailwind-bridge.mjs — run `npm run tokens:tailwind`.
+ * Edit the tokens, not this file. `verify:docs-freshness` fails if the two disagree.
+ *
+ * Import it AFTER Tailwind and after the kit's stylesheet:
+ *
+ *   @import "tailwindcss";
+ *   @import "themelia-ui/core.css";
+ *   @import "themelia-ui/tailwind.css";
+ *
+ * It is a theme declaration only — no utilities, no rules, nothing to ship at runtime that
+ * Tailwind does not already emit. Tailwind drops every key no utility uses.
+ *
+ * Two things it does. It makes the kit's contract addressable from Tailwind, so
+ * `bg-primary`, `text-muted-foreground`, `rounded-surface` and `p-md` mean what they mean
+ * everywhere else in the kit. And it stops Tailwind's own defaults from overwriting the token
+ * names the two projects share — both descend from shadcn, so 41 names collide and 23 of them
+ * are silently re-pointed without this file. The kit's radius ladder, six type steps and three
+ * font stacks quietly become Tailwind's, and `--text-sm` loses its type-factor fallback so
+ * scoped type scaling stops working. The 49 restated names below are the fix.
+ *
+ * `inline` is load-bearing, not a style choice. Without it every key resolves once at
+ * `:root`, and `bg-primary` inside a `.dark` subtree paints the light colour.
+ */
+@theme inline {
+	/* ── colour ────────────────────────────────────────────────────────────────────
+	 * The key is Tailwind's, the value reads the kit's. Nothing of the kit's is overridden,
+	 * so a consumer re-pointing a token at any scope — including .dark — is followed.
+	 */
+	--color-background:                 var(--background);
+	--color-foreground:                 var(--foreground);
+	--color-card:                       var(--card);
+	--color-card-foreground:            var(--card-foreground);
+	--color-popover:                    var(--popover);
+	--color-popover-foreground:         var(--popover-foreground);
+	--color-primary:                    var(--primary);
+	--color-primary-foreground:         var(--primary-foreground);
+	--color-secondary:                  var(--secondary);
+	--color-secondary-foreground:       var(--secondary-foreground);
+	--color-muted:                      var(--muted);
+	--color-muted-foreground:           var(--muted-foreground);
+	--color-accent:                     var(--accent);
+	--color-accent-foreground:          var(--accent-foreground);
+	--color-destructive:                var(--destructive);
+	--color-destructive-foreground:     var(--destructive-foreground);
+	--color-border:                     var(--border);
+	--color-input:                      var(--input);
+	--color-ring:                       var(--ring);
+	--color-chart-1:                    var(--chart-1);
+	--color-chart-2:                    var(--chart-2);
+	--color-chart-3:                    var(--chart-3);
+	--color-chart-4:                    var(--chart-4);
+	--color-chart-5:                    var(--chart-5);
+	--color-sidebar:                    var(--sidebar);
+	--color-sidebar-foreground:         var(--sidebar-foreground);
+	--color-sidebar-primary:            var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent:             var(--sidebar-accent);
+	--color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
+	--color-sidebar-border:             var(--sidebar-border);
+	--color-sidebar-ring:               var(--sidebar-ring);
+	--color-success:                    var(--success);
+	--color-success-foreground:         var(--success-foreground);
+	--color-info:                       var(--info);
+	--color-info-foreground:            var(--info-foreground);
+	--color-link:                       var(--link-color);
+	--color-primary-accent:             var(--primary-accent);
+	--color-warning:                    var(--warning);
+	--color-warning-foreground:         var(--warning-foreground);
+	--color-warning-accent:             var(--warning-accent);
+	--color-inverse-background:         var(--inverse-background);
+	--color-inverse-foreground:         var(--inverse-foreground);
+	--color-inverse-muted:              var(--inverse-muted);
+	--color-inverse-subtle:             var(--inverse-subtle);
+	--color-inverse-disabled:           var(--inverse-disabled);
+	--color-inverse-surface:            var(--inverse-surface);
+	--color-inverse-surface-strong:     var(--inverse-surface-strong);
+	--color-inverse-border:             var(--inverse-border);
+	--color-inverse-decoration:         var(--inverse-decoration);
+
+	/* ── spacing ───────────────────────────────────────────────────────────────────
+	 * Tailwind's namespace is `--spacing-*`, the kit's ladder is `--space-*`. A different name,
+	 * so `p-md` follows a scoped `--space-scale` the way the kit's own padding does.
+	 */
+	--spacing-2xs: var(--space-2xs);
+	--spacing-xs:  var(--space-xs);
+	--spacing-sm:  var(--space-sm);
+	--spacing-md:  var(--space-md);
+	--spacing-lg:  var(--space-lg);
+	--spacing-xl:  var(--space-xl);
+	--spacing-2xl: var(--space-2xl);
+
+	/* ── names the kit and Tailwind both use ───────────────────────────────────────
+	 * These restate the kit's own declared values. `--radius-lg: var(--radius-lg)` would
+	 * reference itself and resolve to nothing; restating makes the override a no-op and
+	 * takes Tailwind's default — which silently re-points 23 kit tokens — out of the way.
+	 */
+	--radius-sm:              calc(var(--radius) * 0.6);
+	--radius-md:              calc(var(--radius) * 0.8);
+	--radius-lg:              var(--radius);
+	--radius-xl:              calc(var(--radius) * 1.4);
+	--radius-2xl:             calc(var(--radius) * 1.8);
+	--radius-3xl:             calc(var(--radius) * 2.2);
+	--radius-4xl:             calc(var(--radius) * 2.6);
+	--radius-surface:         var(--radius-lg);
+	--radius-control:         var(--radius-md);
+	--radius-inner:           var(--radius-sm);
+	--radius-pill:            999px;
+	--shadow-2xs:             0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 5%, transparent);
+	--shadow-xs:              0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 5%, transparent);
+	--shadow-sm:              0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--shadow-ink) 10%, transparent);
+	--shadow-md:              0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 2px 4px -1px color-mix(in oklab, var(--shadow-ink) 10%, transparent);
+	--shadow-lg:              0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 4px 6px -1px color-mix(in oklab, var(--shadow-ink) 10%, transparent);
+	--shadow-xl:              0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 8px 10px -1px color-mix(in oklab, var(--shadow-ink) 10%, transparent);
+	--shadow-2xl:             0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 25%, transparent);
+	--text-xxs:               calc(0.75rem * var(--text-scale, var(--scale)));
+	--text-xxs--line-height:  calc(1 / 0.75);
+	--text-xs:                calc(0.75rem * var(--text-scale, var(--scale)));
+	--text-xs--line-height:   calc(1 / 0.75);
+	--text-pxs:               calc(0.8125rem * var(--text-scale, var(--scale)));
+	--text-pxs--line-height:  calc(1.125 / 0.8125);
+	--text-sm:                calc(0.875rem * var(--text-scale, var(--scale)));
+	--text-sm--line-height:   calc(1.25 / 0.875);
+	--text-base:              calc(1rem * var(--text-scale, var(--scale)));
+	--text-base--line-height: calc(1.5 / 1);
+	--text-lg:                calc(1.125rem * var(--text-scale, var(--scale)));
+	--text-lg--line-height:   calc(1.75 / 1.125);
+	--text-xl:                calc(1.25rem * var(--text-scale, var(--scale)));
+	--text-xl--line-height:   calc(1.75 / 1.25);
+	--text-2xl:               calc(1.5rem * var(--text-scale, var(--scale)));
+	--text-2xl--line-height:  calc(2 / 1.5);
+	--font-sans:              'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--font-serif:             Merriweather, ui-serif, serif;
+	--font-mono:              JetBrains Mono, ui-monospace, monospace;
+	--font-heading:           var(--font-sans);
+	--leading-none:           1;
+	--leading-tight:          1.25;
+	--leading-snug:           1.375;
+	--leading-normal:         1.5;
+	--leading-relaxed:        1.625;
+	--tracking-widest:        0.1em;
+	--ease-out:               cubic-bezier(0, 0, 0.2, 1);
+	--ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
+	--animate-spin:           spin 1s linear infinite;
+	--animate-ping:           ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+	--animate-pulse:          pulse 2s var(--ease-in-out) infinite;
+}

package/dist/styles/targets.css

@@ -0,0 +1,34 @@
+/*
+ * Minimum hit area for a small control.
+ *
+ * A chip's remove button, an info affordance, a tag's dismiss — each draws a 12–14px glyph
+ * because a larger one would dominate the thing it belongs to. But the GLYPH is not the
+ * target: WCAG 2.2 asks for 24x24 CSS pixels, and a 12px button is a genuinely hard thing
+ * to hit with a thumb.
+ *
+ * The expansion is a pseudo-element rather than padding, so the control keeps the size it
+ * needs to look right and the layout around it does not move. Global rather than repeated
+ * per module for the same reason as the field surface: four copies drift the moment one is
+ * edited, and this one is invisible, so the drift would never be noticed.
+ *
+ * Add `data-hit-area` to any control whose drawn size is under the minimum.
+ */
+@layer components {
+	[data-hit-area] {
+		position: relative;
+	}
+
+	[data-hit-area]::after {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		translate: -50% -50%;
+		/*
+		 * `max()` so this only ever GROWS the target. A control that is already large
+		 * enough keeps its own size rather than being shrunk to the minimum.
+		 */
+		width: max(100%, var(--hit-area-min));
+		height: max(100%, var(--hit-area-min));
+	}
+}