@jonmilner/ui 0.5.4 → 0.6.0

package/dist/Toast/client.mjs

@@ -11,10 +11,10 @@ import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
 import { InfoIcon as l } from "../icons/InfoIcon.mjs";
 import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { createContext as y, use as b, useCallback as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
-import { Toast as E } from "@base-ui/react/toast";
+import { createContext as y, use as b, useCallback as x, useEffect as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { Toast as D } from "@base-ui/react/toast";
 //#region src/Toast/client.tsx
-var D = {
+var O = {
 	info: {
 		Icon: l,
 		color: "fgMuted"
@@ -27,13 +27,13 @@ var D = {
 		Icon: o,
 		color: "danger"
 	}
-}, O = y(null), k = y(null), A = (e) => e !== void 0 && Object.hasOwn(D, e);
-function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
-	let { container: c, ref: l } = a(), [u] = T(E.createToastManager);
-	return /* @__PURE__ */ _(E.Provider, {
+}, k = y(null), A = y(null), j = (e) => e !== void 0 && Object.hasOwn(O, e);
+function M({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
+	let { container: c, ref: l } = a(), [u] = E(D.createToastManager);
+	return /* @__PURE__ */ _(D.Provider, {
 		limit: e,
 		toastManager: u,
-		children: /* @__PURE__ */ v(O, {
+		children: /* @__PURE__ */ v(k, {
 			value: u,
 			children: [
 				/* @__PURE__ */ _(t, {
@@ -42,23 +42,38 @@ function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
 					ref: l
 				}),
 				s,
-				/* @__PURE__ */ _(N, {}),
-				/* @__PURE__ */ _(E.Portal, {
+				/* @__PURE__ */ _(P, {}),
+				/* @__PURE__ */ _(D.Portal, {
 					container: c,
-					children: /* @__PURE__ */ _(M, {
+					children: /* @__PURE__ */ _(N, {
 						className: i,
 						regionLabel: r,
 						style: o,
-						children: /* @__PURE__ */ _(P, { closeLabel: n })
+						children: /* @__PURE__ */ _(F, { closeLabel: n })
 					})
 				})
 			]
 		})
 	});
 }
-function M({ regionLabel: n, className: r, style: i, children: a }) {
-	let o = w(null);
-	return /* @__PURE__ */ _(E.Viewport, {
+function N({ regionLabel: n, className: r, style: i, children: a }) {
+	let o = T(null), s = T(null);
+	return S(() => {
+		let e = s.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = !1, r = (t) => {
+			e.contains(t.target) ? n = !0 : n && (n = !1, e.dispatchEvent(new MouseEvent("mouseout", {
+				bubbles: !0,
+				relatedTarget: e.parentElement
+			})));
+		}, i = (t) => {
+			let r = t.relatedTarget;
+			(!r || !e.contains(r)) && (n = !1);
+		};
+		return t.addEventListener("mouseover", r), t.addEventListener("mouseout", i), () => {
+			t.removeEventListener("mouseover", r), t.removeEventListener("mouseout", i);
+		};
+	}, []), /* @__PURE__ */ _(D.Viewport, {
 		"aria-atomic": void 0,
 		"aria-label": n,
 		"aria-live": "off",
@@ -67,6 +82,7 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
 			let t = e.relatedTarget;
 			t && !e.currentTarget.contains(t) && (o.current = t);
 		},
+		ref: s,
 		render: /* @__PURE__ */ _(t, {
 			className: e(g, r),
 			position: "fixed",
@@ -75,15 +91,15 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
 		}),
 		children: /* @__PURE__ */ _("div", {
 			className: p,
-			children: /* @__PURE__ */ _(k, {
+			children: /* @__PURE__ */ _(A, {
 				value: o,
 				children: a
 			})
 		})
 	});
 }
-function N() {
-	let { toasts: e } = E.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+function P() {
+	let { toasts: e } = D.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
 		e.title,
 		" ",
 		e.description
@@ -103,18 +119,18 @@ function N() {
 		})]
 	});
 }
-function P({ closeLabel: e }) {
-	let { toasts: t } = E.useToastManager();
-	return t.map((t) => /* @__PURE__ */ _(F, {
+function F({ closeLabel: e }) {
+	let { toasts: t } = D.useToastManager();
+	return t.map((t) => /* @__PURE__ */ _(I, {
 		closeLabel: e,
 		toast: t
 	}, t.id));
 }
-function F({ toast: a, closeLabel: o }) {
-	let c = A(a.type) ? a.type : "info", { Icon: l, color: u } = D[c], p = b(O), g = b(k), [y, C] = T(!1), j = x((e) => {
-		e && C(getComputedStyle(e).direction === "rtl");
-	}, []), M = w(!1), N = a.transitionStatus === "ending";
-	return S(() => {
+function I({ toast: a, closeLabel: o }) {
+	let c = j(a.type) ? a.type : "info", { Icon: l, color: u } = O[c], p = b(k), g = b(A), [y, S] = E(!1), w = x((e) => {
+		e && S(getComputedStyle(e).direction === "rtl");
+	}, []), M = T(!1), N = a.transitionStatus === "ending";
+	return C(() => {
 		let e = a.ref?.current, t = e?.ownerDocument.activeElement;
 		if (!N || M.current || !t || !e.contains(t)) return;
 		let n = g?.current;
@@ -123,9 +139,9 @@ function F({ toast: a, closeLabel: o }) {
 		N,
 		g,
 		a.ref
-	]), /* @__PURE__ */ v(E.Root, {
+	]), /* @__PURE__ */ v(D.Root, {
 		"aria-modal": void 0,
-		ref: j,
+		ref: w,
 		render: /* @__PURE__ */ _(t, {
 			alignItems: "start",
 			backgroundColor: "bgRaised",
@@ -154,27 +170,27 @@ function F({ toast: a, closeLabel: o }) {
 				flexGrow: 1,
 				gap: "8",
 				children: [
-					/* @__PURE__ */ _(E.Title, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(D.Title, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						weight: "medium"
 					}) }),
-					/* @__PURE__ */ _(E.Description, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(D.Description, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						color: "fgMuted",
 						size: "sm"
 					}) }),
-					/* @__PURE__ */ _(E.Action, { render: /* @__PURE__ */ _(i, {
+					/* @__PURE__ */ _(D.Action, { render: /* @__PURE__ */ _(i, {
 						size: "sm",
 						variant: "secondary"
 					}) })
 				]
 			}),
-			/* @__PURE__ */ _(E.Close, {
+			/* @__PURE__ */ _(D.Close, {
 				"aria-hidden": !1,
 				"aria-label": o,
 				onClick: (e) => {
 					if (e.detail !== 0 || !p) return;
-					let t = a.ref?.current, n = (t && I(t)) ?? g?.current;
+					let t = a.ref?.current, n = (t && L(t)) ?? g?.current;
 					n instanceof HTMLElement && (e.preventBaseUIHandler(), M.current = !0, p.close(a.id), requestAnimationFrame(() => {
 						n.isConnected && n.focus();
 					}));
@@ -190,14 +206,14 @@ function F({ toast: a, closeLabel: o }) {
 		]
 	});
 }
-function I(e) {
+function L(e) {
 	let t = (e, n) => !e || !e.matches("[data-ending-style]") ? e : t(n ? e.nextElementSibling : e.previousElementSibling, n);
 	return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
 }
-function L() {
-	let e = b(O);
+function R() {
+	let e = b(k);
 	if (!e) throw Error("useToast must be called under Toast.Provider.");
-	return C(() => {
+	return w(() => {
 		let t = (t) => e.close(t);
 		return {
 			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
@@ -225,4 +241,4 @@ function L() {
 	}, [e]);
 }
 //#endregion
-export { N as ToastAnnouncer, F as ToastItem, j as ToastProvider, M as ToastStack, L as useToast };
+export { P as ToastAnnouncer, I as ToastItem, M as ToastProvider, N as ToastStack, R as useToast };

package/dist/base.css

@@ -1,6 +1,6 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
 
-@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
+@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
 
 @layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-block-size:100dvb;line-height:1.5}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}}

package/dist/brands/default.mjs

@@ -1,7 +1,7 @@
 import { lightDark as e } from "./brand.mjs";
-import { arial as t, courierNew as n, inter as r, jetBrainsMono as i } from "./metrics.mjs";
+import { arial as t, consolas as n, courierNew as r, inter as i, jetBrainsMono as a, menlo as o } from "./metrics.mjs";
 //#region src/brands/default.ts
-var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t, `oklch(${n} ${r} ${e})`])), o = "oklch(1 0 0)", s = "oklch(0 0 0)", c = a(265, {
+var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t, `oklch(${n} ${r} ${e})`])), c = "oklch(1 0 0)", l = "oklch(0 0 0)", u = s(265, {
 	50: [.985, .002],
 	100: [.968, .004],
 	200: [.925, .006],
@@ -13,7 +13,7 @@ var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.27, .01],
 	900: [.205, .008],
 	950: [.145, .006]
-}), l = a(258, {
+}), d = s(258, {
 	50: [.97, .014],
 	100: [.932, .032],
 	200: [.882, .056],
@@ -25,7 +25,7 @@ var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.424, .155],
 	900: [.379, .135],
 	950: [.282, .09]
-}), u = a(25, {
+}), f = s(25, {
 	50: [.971, .013],
 	100: [.936, .032],
 	200: [.885, .06],
@@ -37,7 +37,7 @@ var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.444, .16],
 	900: [.396, .13],
 	950: [.258, .085]
-}), d = a(150, {
+}), p = s(150, {
 	50: [.975, .018],
 	100: [.945, .04],
 	200: [.9, .075],
@@ -49,7 +49,7 @@ var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.41, .1],
 	900: [.36, .085],
 	950: [.26, .06]
-}), f = a(75, {
+}), m = s(75, {
 	50: [.98, .012],
 	100: [.955, .03],
 	200: [.915, .06],
@@ -61,42 +61,46 @@ var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.42, .085],
 	900: [.37, .07],
 	950: [.27, .05]
-}), p = {
-	metrics: r,
+}), h = {
+	metrics: i,
 	fallback: t,
 	generic: "sans-serif"
-}, m = {
-	metrics: i,
-	fallback: n,
+}, g = {
+	metrics: a,
+	fallback: [
+		o,
+		n,
+		r
+	],
 	generic: "monospace"
-}, h = {
+}, _ = {
 	name: "default",
 	color: {
-		bg: e(o, c[950]),
-		bgMuted: e(c[100], c[800]),
-		bgRaised: e(o, c[900]),
-		fg: e(c[950], c[50]),
-		fgMuted: e(c[600], c[400]),
-		border: e(c[200], c[800]),
-		borderStrong: e(c[500], c[500]),
-		accent: e(l[600], l[400]),
-		accentFg: e(o, c[950]),
-		danger: e(u[600], u[400]),
-		dangerFg: e(o, c[950]),
-		success: e(d[600], d[400]),
-		successFg: e(o, c[950]),
-		warning: e(f[600], f[400]),
-		warningFg: e(o, c[950]),
-		focus: e(l[600], l[400]),
-		shadow: e(c[950], s)
+		bg: e(c, u[950]),
+		bgMuted: e(u[100], u[800]),
+		bgRaised: e(c, u[900]),
+		fg: e(u[950], u[50]),
+		fgMuted: e(u[600], u[400]),
+		border: e(u[200], u[800]),
+		borderStrong: e(u[500], u[500]),
+		accent: e(d[600], d[400]),
+		accentFg: e(c, u[950]),
+		danger: e(f[600], f[400]),
+		dangerFg: e(c, u[950]),
+		success: e(p[600], p[400]),
+		successFg: e(c, u[950]),
+		warning: e(m[600], m[400]),
+		warningFg: e(c, u[950]),
+		focus: e(d[600], d[400]),
+		shadow: e(u[950], l)
 	},
 	font: {
-		body: p,
-		heading: p,
-		display: p,
-		label: p,
-		mono: m
+		body: h,
+		heading: h,
+		display: h,
+		label: h,
+		mono: g
 	}
 };
 //#endregion
-export { h as defaultBrand };
+export { _ as defaultBrand };

package/dist/brands/font.d.mts

@@ -13,7 +13,7 @@ export interface FontMetrics {
 export type FontVariant = Omit<FontMetrics, "variants">;
 export interface BrandFont {
   readonly metrics: FontMetrics;
-  readonly fallback: FontMetrics;
+  readonly fallback: FontMetrics | readonly [FontMetrics, ...FontMetrics[]];
   readonly generic: "sans-serif" | "serif" | "monospace";
 }
 //#endregion

package/dist/brands/font.mjs

@@ -1,43 +1,52 @@
 //#region src/brands/font.ts
-var e = (e) => `"${e}"`, t = (e) => String(Number(e.toFixed(6))), n = (e) => `${t(e * 100)}%`, r = (e) => `${e.metrics.familyName} Fallback`, i = (t) => [
+var e = (e) => `"${e}"`, t = (e) => String(Number(e.toFixed(6))), n = (e) => `${t(e * 100)}%`;
+function r({ metrics: e, fallback: t }) {
+	let n = [t].flat();
+	if (!n.length) throw Error(`"${e.familyName}" lists no fallback font`);
+	return n.map((t) => ({
+		metrics: e,
+		fallback: t
+	}));
+}
+var i = ({ metrics: e, fallback: t }) => `${e.familyName} Fallback ${t.familyName}`, a = (t) => [
 	e(t.metrics.familyName),
-	e(r(t)),
+	...r(t).map((t) => e(i(t))),
 	t.generic
 ].join(", ");
-function a({ capHeight: e, ascent: n, descent: r, unitsPerEm: i }) {
+function o({ capHeight: e, ascent: n, descent: r, unitsPerEm: i }) {
 	let a = (n - Math.abs(r)) / i / 2;
 	return {
 		cap: t(e / i - a),
 		baseline: t(a)
 	};
 }
-var o = 1.0001, s = /^([1-9]00)?(italic)?$/, c = (e, t) => e.variants?.[t]?.familyName === e.familyName, l = ({ fallback: e }) => ["regular", ...Object.keys(e.variants ?? {}).filter((t) => t !== "" && s.test(t) && c(e, t))];
-function u({ metrics: t, fallback: r }, i = "regular") {
-	let a = i === "regular", l = a ? r : c(r, i) && r.variants?.[i], u = s.exec(a ? "" : i);
-	if (!l || !u) throw Error(`"${r.familyName}" has no ${i} variant`);
-	let d = !a && c(t, i) && t.variants?.[i] || t, f = d.capHeight / d.unitsPerEm / (l.capHeight / l.unitsPerEm), p = d.unitsPerEm * f, m = [l.fullName ?? l.familyName, l.postscriptName];
+var s = 1.0001, c = /^([1-9]00)?(italic)?$/, l = (e, t) => e.variants?.[t]?.familyName === e.familyName, u = ({ fallback: e }) => ["regular", ...Object.keys(e.variants ?? {}).filter((t) => t !== "" && c.test(t) && l(e, t))];
+function d({ metrics: t, fallback: r }, i = "regular") {
+	let a = i === "regular", o = a ? r : l(r, i) && r.variants?.[i], u = c.exec(a ? "" : i);
+	if (!o || !u) throw Error(`"${r.familyName}" has no ${i} variant`);
+	let d = !a && l(t, i) && t.variants?.[i] || t, f = d.capHeight / d.unitsPerEm / (o.capHeight / o.unitsPerEm), p = d.unitsPerEm * f, m = [o.fullName ?? o.familyName, o.postscriptName];
 	return {
 		src: [...new Set(m)].filter(Boolean).map((t) => `local(${e(t)})`).join(", "),
 		fontWeight: u[1] ?? "400",
 		fontStyle: u[2] ? "italic" : "normal",
 		sizeAdjust: n(f),
-		ascentOverride: n(d.ascent / p * o),
-		descentOverride: n(Math.abs(d.descent) / p * o),
+		ascentOverride: n(d.ascent / p * s),
+		descentOverride: n(Math.abs(d.descent) / p * s),
 		lineGapOverride: n(d.lineGap / p)
 	};
 }
-function d(e) {
+function f(e) {
 	let t = /* @__PURE__ */ new Map();
-	for (let n of e) {
-		let e = r(n), i = t.get(e) ?? /* @__PURE__ */ new Map();
-		for (let t of l(n)) {
-			let r = u(n, t), a = `${r.fontWeight} ${r.fontStyle}`, o = i.get(a);
-			if (o && JSON.stringify(o) !== JSON.stringify(r)) throw Error(`"${e}" is declared with different metrics or fallbacks`);
-			i.set(a, r);
+	for (let n of [...e].flatMap(r)) {
+		let e = i(n), r = t.get(e) ?? /* @__PURE__ */ new Map();
+		for (let t of u(n)) {
+			let i = d(n, t), a = `${i.fontWeight} ${i.fontStyle}`, o = r.get(a);
+			if (o && JSON.stringify(o) !== JSON.stringify(i)) throw Error(`"${e}" is declared with different metrics or fallbacks`);
+			r.set(a, i);
 		}
-		t.set(e, i);
+		t.set(e, r);
 	}
 	return new Map([...t].map(([e, t]) => [e, [...t.values()]]));
 }
 //#endregion
-export { u as fallbackFace, d as fallbackFaces, r as fallbackFamily, l as fallbackVariants, i as fontStack, a as fontTrim };
+export { d as fallbackFace, f as fallbackFaces, i as fallbackFamily, r as fallbackPairs, u as fallbackVariants, a as fontStack, o as fontTrim };

package/dist/brands/metrics.mjs

@@ -99,6 +99,65 @@ var e = {
 			unitsPerEm: 2048
 		}
 	}
+}, i = {
+	familyName: "Menlo",
+	fullName: "Menlo Regular",
+	postscriptName: "Menlo-Regular",
+	capHeight: 1493,
+	ascent: 1901,
+	descent: -483,
+	lineGap: 0,
+	unitsPerEm: 2048
+}, a = {
+	...i,
+	capHeight: 1495
+}, o = {
+	...i,
+	variants: {
+		700: {
+			...a,
+			fullName: "Menlo Bold",
+			postscriptName: "Menlo-Bold"
+		},
+		italic: {
+			...i,
+			fullName: "Menlo Italic",
+			postscriptName: "Menlo-Italic"
+		},
+		"700italic": {
+			...a,
+			fullName: "Menlo Bold Italic",
+			postscriptName: "Menlo-BoldItalic"
+		}
+	}
+}, s = {
+	familyName: "Consolas",
+	fullName: "Consolas",
+	postscriptName: "Consolas",
+	capHeight: 1307,
+	ascent: 1521,
+	descent: -527,
+	lineGap: 350,
+	unitsPerEm: 2048
+}, c = {
+	...s,
+	variants: {
+		700: {
+			...s,
+			fullName: "Consolas Bold",
+			postscriptName: "Consolas-Bold"
+		},
+		italic: {
+			...s,
+			fullName: "Consolas Italic",
+			postscriptName: "Consolas-Italic"
+		},
+		"700italic": {
+			...s,
+			fullName: "Consolas Bold Italic",
+			postscriptName: "Consolas-BoldItalic"
+		}
+	}
 };
 //#endregion
-export { n as arial, r as courierNew, e as inter, t as jetBrainsMono };
+export { n as arial, c as consolas, r as courierNew, e as inter, t as jetBrainsMono, o as menlo };

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "components": [
     {
       "name": "AlertDialog",

package/dist/docs/migrations/0.6.0.md

@@ -0,0 +1,38 @@
+# 0.6.0
+
+Each fallback face family is now named for the web font and the local font it pairs, `"<Family> Fallback <Local>"`, and `BrandFont.fallback` may be an ordered list, because `mono` now falls back to Menlo, Consolas, then Courier New, each sized on its own (decision 0118); `defaultBrand.font.mono.fallback` is that list.
+
+## Find
+
+In the app's styles and source (`*.css`, `*.css.ts`, `*.ts`, `*.tsx`): the old family names, regex `Fallback(["';,)]|\s*$)` (`"Inter Fallback"`, `"JetBrains Mono Fallback"`, unquoted `Inter Fallback;`, or a custom brand's `"<Family> Fallback"`).
+
+In `*.ts` and `*.tsx`: code that reads a brand font's fallback as one font, such as regex `\.fallback\.(familyName|fullName|postscriptName|capHeight|ascent|descent|lineGap|unitsPerEm|variants)\b`.
+
+## Replace
+
+Name the pair's family. A preset's `sans` stays one family; `mono` is three, in stack order. Prefer `var(--font-mono)` (or `vars.font.mono`) to a hand-written stack, which keeps the order and any later change.
+
+```css
+/* before */
+font-family: "JetBrains Mono", "JetBrains Mono Fallback", monospace;
+/* after */
+font-family: var(--font-mono);
+
+/* before */
+font-family: "Inter Fallback";
+/* after */
+font-family: "Inter Fallback Arial";
+```
+
+Code reading a fallback's metrics takes the first font of the list, or each in turn:
+
+```ts
+// before
+const name = brand.font.mono.fallback.familyName;
+// after
+const name = [brand.font.mono.fallback].flat()[0]!.familyName;
+```
+
+## Verify
+
+Run `rg "Fallback([\"';,)]|\s*$)" --glob '!node_modules'` again: no match, since every family now ends in its local font (`"Inter Fallback Arial"`). Then the app's typecheck passes, which also catches a fallback read the regex missed (a destructured `fallback`), and with the web fonts blocked in devtools, code text renders in Menlo (macOS) or Consolas (Windows), not Courier New.

package/dist/docs/theming.md

@@ -39,7 +39,7 @@ const inbox = defineTheme({
 - **Give a custom brand its own name.** A theme applies page-wide, not only inside its provider: a theme named `default` recolors every `default` provider on the page. The name must be a CSS identifier.
 - **Contrast is checked in development.** Outside production, `defineTheme` throws when a text, fill or focus pair fails WCAG AA in either mode, and lists the pairs. It also checks text on component fills mixed from your roles, such as the dark-mode menu highlight (`fg` 10% into `bgRaised`), where `fg`, `fgMuted` and `danger` need 4.5:1 too, and Button's hover (`fg` 15% over each variant's fill), where `fg`, `accentFg` and `dangerFg` need 4.5:1 on `bg`, `accent` and `danger` tinted. The roles a fill mixes must be opaque. Colors must be literal: hex, `rgb()`, `oklab()`, `oklch()`, `color-mix()` or `light-dark()`. Named colors other than `white`, `black` and `transparent` are rejected, as is a translucent background. `var()` may only reference another color role (`var(--color-accent)`).
 - **Override theme tokens in unlayered CSS or in the theme itself.** The theme is unlayered, so a token set in `@layer app` loses to it. Preset tokens live in `@layer tokens` and can be overridden from `@layer app`.
-- **Fallback faces are global.** A brand font's fallback face is named `"<Family> Fallback"`. The theme declares only faces `base.css` lacks. A font reusing a family name must agree with every face it shares, weight and style included: a fallback listing fewer variants (such as capsize's per-font `arial` import) reuses the others' faces, but one that sizes a shared face differently, or adds a weight or style to a preset's family, throws.
+- **Fallback faces are global.** A brand font's fallback faces are named for the web font and the local font, `"<Family> Fallback <Local>"` (`"Inter Fallback Arial"`). The theme declares only faces `base.css` lacks. A font reusing a family name must agree with every face it shares, weight and style included: a fallback listing fewer variants (such as capsize's per-font `arial` import) reuses the others' faces, but one that sizes a shared face differently, or adds a weight or style to a preset's family, throws.
 - **Values must be plain.** Color values and font names may not contain CSS syntax (`;`, braces, `<`, `>`, `\`, `!`, `/*`) or, for font names, quotes; `defineTheme` throws in every mode.
 - **Each change gets its own `href`.** The `href` hashes the CSS, so a theme rebuilt with new colors replaces the old one instead of being deduped away.
 - Under forced colors, every role maps to a system color, as for presets.
@@ -58,4 +58,4 @@ A provider's `color-scheme` stops at its `div`, so the page canvas and scrollbar
 
 A brand declares its fonts; the app loads them (fontsource or self-hosted `@font-face`) and owns preloading. The `default` brand uses Inter and JetBrains Mono. In development, `ThemeProvider` warns in the console when a brand font has no `@font-face` or fails to load; in production it renders no check and the check's body is dead code.
 
-Until a web font loads, text renders in a fallback face sized to the web font's cap height, so the trim holds where the fallback font (Arial, Courier New) is installed; elsewhere the generic family renders unadjusted. Bold, italic and bold italic text get their own fallback faces (`local("Arial Bold")` and so on), each sized to the web font's matching weight and style; in a custom brand, give `fallback` (and `metrics`, for the web font's own sizes) a `variants` map keyed `700`, `italic` and `700italic`, as `@capsizecss/metrics`' `entireMetricsCollection` has them. A fallback without `variants` gets only the regular face, and the browser synthesizes bold and italic from it. Widths still differ: in the `default` brand, `mono` text is about 28% wider than JetBrains Mono, so expect code to overflow or wrap until the font loads. Where width matters, preload the mono font and load it with `font-display: block` (or `optional`, which may keep the fallback for that page view); a custom brand's gap depends on its own fallback.
+Until a web font loads, text renders in a fallback face sized to the web font's cap height, so the trim holds where a fallback font is installed (Arial for `sans`; Menlo, Consolas or Courier New for `mono`, tried in that order); elsewhere the generic family renders unadjusted. In a custom brand, `fallback` takes one font or an ordered list, and each gets its own faces. Bold, italic and bold italic text get their own fallback faces (`local("Arial Bold")` and so on), each sized to the web font's matching weight and style; in a custom brand, give `fallback` (and `metrics`, for the web font's own sizes) a `variants` map keyed `700`, `italic` and `700italic`, as `@capsizecss/metrics`' `entireMetricsCollection` has them. A fallback without `variants` gets only the regular face, and the browser synthesizes bold and italic from it. Widths still differ: in the `default` brand, `mono` text is about 0.5% wider than JetBrains Mono in Menlo (macOS), 4.8% in Consolas (Windows) and 28% in Courier New (elsewhere), so expect code to overflow or wrap until the font loads where Courier New stands in. Where width matters, preload the mono font and load it with `font-display: block` (or `optional`, which may keep the fallback for that page view); a custom brand's gap depends on its own fallback.

package/dist/theme/define-theme.mjs

@@ -1,88 +1,84 @@
-import { fallbackFaces as e, fallbackFamily as t, fontStack as n, fontTrim as r } from "../brands/font.mjs";
-import { forcedColors as i } from "../brands/forced-colors.mjs";
-import { presets as a } from "../brands/index.mjs";
-import { resolveColor as o } from "../contrast/color.mjs";
-import { checkContrast as s, contrastPairs as c } from "../contrast/contrast.mjs";
-import { checkMixes as l, contrastMixes as u } from "../contrast/mixes.mjs";
-import { colorRoles as d, fontRoles as f } from "../tokens/roles.mjs";
-import { vars as p } from "../tokens/contract.mjs";
+import { fallbackFaces as e, fallbackFamily as t, fallbackPairs as n, fontStack as r, fontTrim as i } from "../brands/font.mjs";
+import { forcedColors as a } from "../brands/forced-colors.mjs";
+import { presets as o } from "../brands/index.mjs";
+import { resolveColor as s } from "../contrast/color.mjs";
+import { checkContrast as c, contrastPairs as l } from "../contrast/contrast.mjs";
+import { checkMixes as u, contrastMixes as d } from "../contrast/mixes.mjs";
+import { colorRoles as f, fontRoles as p } from "../tokens/roles.mjs";
+import { vars as m } from "../tokens/contract.mjs";
 //#region src/theme/define-theme.ts
-var m = (e) => e.slice(4, -1), h = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), g = (e, t) => `${e} {\n${t.map(([e, t]) => `  ${e}: ${t};\n`).join("")}}`;
-function _(o) {
-	let s = (e) => {
-		throw Error(`defineTheme("${o.name}"): ${e}`);
+var h = (e) => e.slice(4, -1), g = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), _ = (e, t) => `${e} {\n${t.map(([e, t]) => `  ${e}: ${t};\n`).join("")}}`;
+function v(s) {
+	let c = (e) => {
+		throw Error(`defineTheme("${s.name}"): ${e}`);
 	};
-	/^[a-z][\w-]*$/i.test(o.name) || s("the name must be a CSS identifier");
-	for (let [e, t] of Object.entries(o.color)) v.test(t) && s(`color.${e} must be a single color value`);
-	for (let [e, { metrics: t, fallback: n }] of Object.entries(o.font)) for (let r of [
-		t,
-		n,
-		...Object.values(n.variants ?? {})
-	].flatMap((e) => [
+	/^[a-z][\w-]*$/i.test(s.name) || c("the name must be a CSS identifier");
+	for (let [e, t] of Object.entries(s.color)) y.test(t) && c(`color.${e} must be a single color value`);
+	for (let [e, t] of Object.entries(s.font)) for (let r of [t.metrics, ...n(t).flatMap(({ fallback: e }) => [e, ...Object.values(e.variants ?? {})])].flatMap((e) => [
 		e.familyName,
 		e.fullName,
 		e.postscriptName
-	])) r !== void 0 && (v.test(r) || /["'\n]/.test(r)) && s(`font.${e} has a font name with quotes or CSS syntax: ${r}`);
-	process.env.NODE_ENV !== "production" && C(o, s);
-	let c = `[data-brand="${o.name}"]`, l = Object.values(o.font), u = Object.values(a).flatMap((e) => Object.values(e.font)), _;
+	])) r !== void 0 && (y.test(r) || /["'\n]/.test(r)) && c(`font.${e} has a font name with quotes or CSS syntax: ${r}`);
+	process.env.NODE_ENV !== "production" && w(s, c);
+	let l = `[data-brand="${s.name}"]`, u = Object.values(s.font), d = Object.values(o).flatMap((e) => Object.values(e.font)), v;
 	try {
-		_ = e([...u, ...l]);
+		v = e([...d, ...u]);
 	} catch (e) {
-		return s(e.message);
+		return c(e.message);
 	}
-	let b = new Set(l.map(t));
-	for (let [t, n] of e(u)) b.delete(t), _.get(t).length > n.length && s(`"${t}" is declared with a weight or style base.css lacks`);
-	let x = [
-		...[..._].filter(([e]) => b.has(e)).flatMap(([e, t]) => t.map((t) => g("@font-face", [["font-family", `"${e}"`], ...Object.entries(t).map(([e, t]) => [h(e), t])]))),
-		g(c, [...d.map((e) => [m(p.color[e]), o.color[e]]), ...f.flatMap((e) => {
-			let t = r(o.font[e].metrics);
+	let x = new Set(u.flatMap(n).map(t));
+	for (let [t, n] of e(d)) x.delete(t), v.get(t).length > n.length && c(`"${t}" is declared with a weight or style base.css lacks`);
+	let S = [
+		...[...v].filter(([e]) => x.has(e)).flatMap(([e, t]) => t.map((t) => _("@font-face", [["font-family", `"${e}"`], ...Object.entries(t).map(([e, t]) => [g(e), t])]))),
+		_(l, [...f.map((e) => [h(m.color[e]), s.color[e]]), ...p.flatMap((e) => {
+			let t = i(s.font[e].metrics);
 			return [
-				[m(p.font[e]), n(o.font[e])],
-				[m(p.fontTrim[e].cap), t.cap],
-				[m(p.fontTrim[e].baseline), t.baseline]
+				[h(m.font[e]), r(s.font[e])],
+				[h(m.fontTrim[e].cap), t.cap],
+				[h(m.fontTrim[e].baseline), t.baseline]
 			];
 		})]),
-		`@media (forced-colors: active) {\n${g(c, d.map((e) => [m(p.color[e]), i[e]])).split("\n").map((e) => `  ${e}`).join("\n")}\n}`
+		`@media (forced-colors: active) {\n${_(l, f.map((e) => [h(m.color[e]), a[e]])).split("\n").map((e) => `  ${e}`).join("\n")}\n}`
 	].join("\n");
 	return {
-		brand: o,
-		href: `ui-theme-${o.name}-${y(x)}`,
-		css: x
+		brand: s,
+		href: `ui-theme-${s.name}-${b(S)}`,
+		css: S
 	};
 }
-var v = /[;{}<>\\!]|\/\*/;
-function y(e) {
+var y = /[;{}<>\\!]|\/\*/;
+function b(e) {
 	let t = 2166136261;
 	for (let n = 0; n < e.length; n++) t = Math.imul(t ^ e.charCodeAt(n), 16777619);
 	return (t >>> 0).toString(36);
 }
-var b = /var\(\s*--color-([a-z-]+)\s*\)/g, x = new Map(d.map((e) => [h(e), e])), S = new Set(c.map((e) => e.bg));
-function C(e, t) {
-	let n = (r, i = []) => (i.includes(r) && t(`color.${r} references itself through var()`), e.color[r].replace(b, (e, t) => {
-		let a = x.get(t);
+var x = /var\(\s*--color-([a-z-]+)\s*\)/g, S = new Map(f.map((e) => [g(e), e])), C = new Set(l.map((e) => e.bg));
+function w(e, t) {
+	let n = (r, i = []) => (i.includes(r) && t(`color.${r} references itself through var()`), e.color[r].replace(x, (e, t) => {
+		let a = S.get(t);
 		return a ? n(a, [...i, r]) : e;
-	})), r = Object.fromEntries(d.map((e) => [e, n(e)]));
-	for (let n of d) {
+	})), r = Object.fromEntries(f.map((e) => [e, n(e)]));
+	for (let n of f) {
 		r[n].includes("var(") && t(`color.${n} is ${e.color[n]}: the contrast check needs literal colors, so use var() only to reference another color role`);
 		for (let i of ["light", "dark"]) {
 			let a;
 			try {
-				({alpha: a} = o(r[n], i));
+				({alpha: a} = s(r[n], i));
 			} catch (r) {
 				return t(`color.${n} is ${e.color[n]}, which the contrast check cannot resolve (${r.message}). Use hex, rgb(), oklab(), oklch(), color-mix() or light-dark(); named colors other than white, black and transparent are not supported`);
 			}
-			a < 1 && S.has(n) && t(`color.${n} is translucent in ${i} mode, but it is a background in a contrast pair and must be opaque`);
+			a < 1 && C.has(n) && t(`color.${n} is translucent in ${i} mode, but it is a background in a contrast pair and must be opaque`);
 		}
 	}
-	for (let { name: e, fill: n } of u) for (let i of ["light", "dark"]) o(n(r), i).alpha < 1 && t(`the ${e} is translucent in ${i} mode: the roles it mixes must be opaque`);
+	for (let { name: e, fill: n } of d) for (let i of ["light", "dark"]) s(n(r), i).alpha < 1 && t(`the ${e} is translucent in ${i} mode: the roles it mixes must be opaque`);
 	let i = {
 		...e,
 		color: r
-	}, a = s(i), c = [...a, ...l(i).filter((e) => !a.some((t) => t.fg === e.fg && t.mode === e.mode && t.ratio === e.ratio)).map(({ mix: e, ...t }) => ({
+	}, a = c(i), o = [...a, ...u(i).filter((e) => !a.some((t) => t.fg === e.fg && t.mode === e.mode && t.ratio === e.ratio)).map(({ mix: e, ...t }) => ({
 		...t,
 		bg: `the ${e}`
 	}))].toSorted((e, t) => e.mode === t.mode ? 0 : e.mode === "light" ? -1 : 1);
-	c.length > 0 && t(`fails WCAG AA contrast:\n${c.map(({ fg: e, bg: t, mode: n, ratio: r, min: i }) => `  ${e} on ${t} (${n}): ${r.toFixed(2)}, needs ${i}`).join("\n")}`);
+	o.length > 0 && t(`fails WCAG AA contrast:\n${o.map(({ fg: e, bg: t, mode: n, ratio: r, min: i }) => `  ${e} on ${t} (${n}): ${r.toFixed(2)}, needs ${i}`).join("\n")}`);
 }
 //#endregion
-export { _ as defineTheme };
+export { v as defineTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"