@jonmilner/ui 0.2.4 → 0.2.5

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.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
 @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);size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;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-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-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}@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-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-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/font.d.mts

@@ -8,7 +8,9 @@ export interface FontMetrics {
   readonly descent: number;
   readonly lineGap: number;
   readonly unitsPerEm: number;
+  readonly variants?: Readonly<Record<string, FontVariant>>;
 }
+export type FontVariant = Omit<FontMetrics, "variants">;
 export interface BrandFont {
   readonly metrics: FontMetrics;
   readonly fallback: FontMetrics;

package/dist/brands/font.mjs

@@ -11,25 +11,33 @@ function a({ capHeight: e, ascent: n, descent: r, unitsPerEm: i }) {
 		baseline: t(a)
 	};
 }
-var o = 1.0001;
-function s({ metrics: t, fallback: r }) {
-	let i = t.capHeight / t.unitsPerEm / (r.capHeight / r.unitsPerEm), a = t.unitsPerEm * i, s = [r.fullName ?? r.familyName, r.postscriptName];
+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];
 	return {
-		src: [...new Set(s)].filter(Boolean).map((t) => `local(${e(t)})`).join(", "),
-		sizeAdjust: n(i),
-		ascentOverride: n(t.ascent / a * o),
-		descentOverride: n(Math.abs(t.descent) / a * o),
-		lineGapOverride: n(t.lineGap / a)
+		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),
+		lineGapOverride: n(d.lineGap / p)
 	};
 }
-function c(e) {
+function d(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
-		let e = r(n), i = s(n), a = t.get(e);
-		if (a && JSON.stringify(a) !== JSON.stringify(i)) throw Error(`"${e}" is declared with different metrics or fallbacks`);
+		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);
+		}
 		t.set(e, i);
 	}
-	return t;
+	return new Map([...t].map(([e, t]) => [e, [...t.values()]]));
 }
 //#endregion
-export { s as fallbackFace, c as fallbackFaces, r as fallbackFamily, i as fontStack, a as fontTrim };
+export { u as fallbackFace, d as fallbackFaces, r as fallbackFamily, l as fallbackVariants, i as fontStack, a as fontTrim };

package/dist/brands/metrics.mjs

@@ -25,7 +25,39 @@ var e = {
 	ascent: 1854,
 	descent: -434,
 	lineGap: 67,
-	unitsPerEm: 2048
+	unitsPerEm: 2048,
+	variants: {
+		700: {
+			familyName: "Arial",
+			fullName: "Arial Bold",
+			postscriptName: "Arial-BoldMT",
+			capHeight: 1466,
+			ascent: 1854,
+			descent: -434,
+			lineGap: 67,
+			unitsPerEm: 2048
+		},
+		italic: {
+			familyName: "Arial",
+			fullName: "Arial Italic",
+			postscriptName: "Arial-ItalicMT",
+			capHeight: 1466,
+			ascent: 1854,
+			descent: -434,
+			lineGap: 67,
+			unitsPerEm: 2048
+		},
+		"700italic": {
+			familyName: "Arial",
+			fullName: "Arial Bold Italic",
+			postscriptName: "Arial-BoldItalicMT",
+			capHeight: 1465,
+			ascent: 1854,
+			descent: -434,
+			lineGap: 67,
+			unitsPerEm: 2048
+		}
+	}
 }, r = {
 	familyName: "Courier New",
 	fullName: "Courier New",
@@ -34,7 +66,39 @@ var e = {
 	ascent: 1705,
 	descent: -615,
 	lineGap: 0,
-	unitsPerEm: 2048
+	unitsPerEm: 2048,
+	variants: {
+		700: {
+			familyName: "Courier New",
+			fullName: "Courier New Bold",
+			postscriptName: "CourierNewPS-BoldMT",
+			capHeight: 1212,
+			ascent: 1705,
+			descent: -615,
+			lineGap: 0,
+			unitsPerEm: 2048
+		},
+		italic: {
+			familyName: "Courier New",
+			fullName: "Courier New Italic",
+			postscriptName: "CourierNewPS-ItalicMT",
+			capHeight: 1170,
+			ascent: 1705,
+			descent: -615,
+			lineGap: 0,
+			unitsPerEm: 2048
+		},
+		"700italic": {
+			familyName: "Courier New",
+			fullName: "Courier New Bold Italic",
+			postscriptName: "CourierNewPS-BoldItalicMT",
+			capHeight: 1212,
+			ascent: 1705,
+			descent: -615,
+			lineGap: 0,
+			unitsPerEm: 2048
+		}
+	}
 };
 //#endregion
 export { n as arial, r as courierNew, e as inter, t as jetBrainsMono };

package/dist/docs/manifest.json

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

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; reusing a family name that a preset declares with other metrics throws.
+- **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.
 - **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. 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 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.

package/dist/theme/define-theme.mjs

@@ -14,7 +14,11 @@ function _(o) {
 	};
 	/^[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].flatMap((e) => [
+	for (let [e, { metrics: t, fallback: n }] of Object.entries(o.font)) for (let r of [
+		t,
+		n,
+		...Object.values(n.variants ?? {})
+	].flatMap((e) => [
 		e.familyName,
 		e.fullName,
 		e.postscriptName
@@ -27,9 +31,9 @@ function _(o) {
 		return s(e.message);
 	}
 	let b = new Set(l.map(t));
-	for (let e of u) b.delete(t(e));
+	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)).map(([e, t]) => g("@font-face", [["font-family", `"${e}"`], ...Object.entries(t).map(([e, t]) => [h(e), t])])),
+		...[..._].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);
 			return [

package/package.json

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