@jonmilner/ui 0.9.1 → 0.10.1

package/dist/Button/index.mjs

@@ -4,87 +4,88 @@ import { Clickable as n } from "../Clickable/index.mjs";
 import { Icon as r } from "../Icon/index.mjs";
 import { fills as i } from "../styles/button-fills.mjs";
 import { content as a, stack as o } from "../styles/button-parts.css.mjs";
-import { Text as s } from "../Text/index.mjs";
-import { button as c, content as l, root as u, stack as d } from "./Button.css.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { controlHeight as s, controlText as c } from "../styles/control-size.mjs";
+import { Text as l } from "../Text/index.mjs";
+import { button as u, content as d, root as f, stack as p } from "./Button.css.mjs";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/Button/index.tsx
-var m = {
+var g = {
 	sm: {
-		minBlockSize: "sm",
+		minBlockSize: s.sm,
+		paddingBlock: "4",
+		paddingInline: "8",
+		gap: "4"
+	},
+	med: {
+		minBlockSize: s.med,
 		paddingBlock: "6",
 		paddingInline: "12",
 		gap: "4"
 	},
-	med: {
-		minBlockSize: "med",
+	lg: {
+		minBlockSize: s.lg,
 		paddingBlock: "8",
 		paddingInline: "16",
 		gap: "8"
-	},
-	lg: {
-		minBlockSize: "lg",
-		paddingBlock: "12",
-		paddingInline: "20",
-		gap: "8"
 	}
 };
-function h({ variant: h = "secondary", size: g = "med", loading: _ = !1, iconStart: v, iconEnd: y, minBlockSize: b = m[g].minBlockSize, paddingBlock: x = m[g].paddingBlock, paddingInline: S = m[g].paddingInline, gap: C = m[g].gap, borderRadius: w = "med", backgroundColor: T = i[h].backgroundColor, color: E = i[h].color, className: D, children: O, "aria-busy": k, ...A }) {
-	let j = _ || String(k) === "true";
-	return /* @__PURE__ */ f(n, {
-		...A,
-		backgroundColor: T,
-		borderRadius: w,
-		busy: j,
-		className: e(u, c({
-			variant: h,
-			size: g
-		}), D),
-		color: E,
-		minBlockSize: b,
-		paddingBlock: x,
-		paddingInline: S,
-		children: /* @__PURE__ */ p(t, {
+function _({ variant: s = "secondary", size: _ = "med", loading: v = !1, iconStart: y, iconEnd: b, minBlockSize: x = g[_].minBlockSize, paddingBlock: S = g[_].paddingBlock, paddingInline: C = g[_].paddingInline, gap: w = g[_].gap, borderRadius: T = "med", backgroundColor: E = i[s].backgroundColor, color: D = i[s].color, className: O, children: k, "aria-busy": A, ...j }) {
+	let M = v || String(A) === "true", N = j, P = c[_];
+	return /* @__PURE__ */ m(n, {
+		...N,
+		backgroundColor: E,
+		borderRadius: T,
+		busy: M,
+		className: e(f, u({
+			variant: s,
+			size: _
+		}), O),
+		color: D,
+		minBlockSize: x,
+		paddingBlock: S,
+		paddingInline: C,
+		children: /* @__PURE__ */ h(t, {
 			alignItems: "center",
 			as: "span",
-			className: e(d, o),
+			className: e(p, o),
 			display: "grid",
-			children: [/* @__PURE__ */ p(t, {
+			children: [/* @__PURE__ */ h(t, {
 				alignItems: "center",
 				as: "span",
-				className: e(l, a),
+				className: e(d, a),
 				display: "flex",
-				gap: C,
+				gap: w,
 				children: [
-					v && /* @__PURE__ */ f(v, { size: g }),
-					O != null && O !== !1 && O !== "" && /* @__PURE__ */ f(s, {
+					y && /* @__PURE__ */ m(y, { size: P }),
+					k != null && k !== !1 && k !== "" && /* @__PURE__ */ m(l, {
 						as: "span",
 						className: "_1gwwloa2",
 						font: "label",
-						size: g,
+						size: P,
 						weight: "medium",
-						children: O
+						children: k
 					}),
-					y && /* @__PURE__ */ f(y, { size: g })
+					b && /* @__PURE__ */ m(b, { size: P })
 				]
-			}), j && /* @__PURE__ */ p(r, {
+			}), M && /* @__PURE__ */ h(r, {
 				className: "hkhd8b",
 				fill: "currentColor",
-				size: g,
+				size: P,
 				stroke: "none",
 				children: [
-					/* @__PURE__ */ f("circle", {
+					/* @__PURE__ */ m("circle", {
 						className: "hkhd8c",
 						cx: "5",
 						cy: "12",
 						r: "2"
 					}),
-					/* @__PURE__ */ f("circle", {
+					/* @__PURE__ */ m("circle", {
 						className: "hkhd8c",
 						cx: "12",
 						cy: "12",
 						r: "2"
 					}),
-					/* @__PURE__ */ f("circle", {
+					/* @__PURE__ */ m("circle", {
 						className: "hkhd8c",
 						cx: "19",
 						cy: "12",
@@ -96,4 +97,4 @@ function h({ variant: h = "secondary", size: g = "med", loading: _ = !1, iconSta
 	});
 }
 //#endregion
-export { h as Button };
+export { _ as Button };

package/dist/ColorField/ColorField.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, 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 components.color-field{.nmj5ie0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.nmj5ie1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}.nmj5ie1::placeholder{color:var(--color-fg-muted);opacity:1}.nmj5ie1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}.nmj5ie1[aria-invalid=true]{border-color:var(--color-danger)}.nmj5ie2{block-size:var(--size-sm);padding-inline-start:calc(var(--size-sm) + var(--space-4));padding-inline-end:var(--space-8)}.nmj5ie3{block-size:var(--size-med);padding-inline-start:calc(var(--size-med) + var(--space-4));padding-inline-end:var(--space-12)}.nmj5ie4{block-size:var(--size-lg);padding-inline-start:calc(var(--size-lg) + var(--space-4));padding-inline-end:var(--space-16)}.nmj5ie5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background-color:#0000;grid-area:1/1;justify-self:start;padding:0;position:relative;inset-inline-start:var(--space-4)}.nmj5ie5::-webkit-color-swatch-wrapper{padding:0}.nmj5ie5::-webkit-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5::-moz-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie5:disabled{cursor:not-allowed;border-style:dashed}.nmj5ie6{inline-size:var(--size-xs);block-size:var(--size-xs)}.nmj5ie7{inline-size:var(--size-sm);block-size:var(--size-sm)}.nmj5ie8{inline-size:var(--size-med);block-size:var(--size-med)}@media (forced-colors:active){.nmj5ie1:disabled{color:graytext;border-color:graytext}.nmj5ie5{border-color:canvastext}.nmj5ie5:disabled{border-color:graytext}}}
+@layer components.color-field{.nmj5ie0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.nmj5ie1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}.nmj5ie1::placeholder{color:var(--color-fg-muted);opacity:1}.nmj5ie1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}.nmj5ie1[aria-invalid=true]{border-color:var(--color-danger)}.nmj5ie2{block-size:var(--size-xs);padding-inline-start:calc(var(--size-xs) + var(--space-12));padding-inline-end:var(--space-6)}.nmj5ie3{block-size:var(--size-sm);padding-inline-start:calc(var(--size-xs) + var(--space-12));padding-inline-end:var(--space-8)}.nmj5ie4{block-size:var(--size-med);padding-inline-start:calc(var(--size-sm) + var(--space-12));padding-inline-end:var(--space-12)}.nmj5ie5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background-color:#0000;grid-area:1/1;justify-self:start;padding:0;position:relative;inset-inline-start:var(--space-4)}.nmj5ie5::-webkit-color-swatch-wrapper{padding:0}.nmj5ie5::-webkit-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5::-moz-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie5:disabled{cursor:not-allowed;border-style:dashed}.nmj5ie6,.nmj5ie7{inline-size:var(--size-xs);block-size:var(--size-xs)}.nmj5ie8{inline-size:var(--size-sm);block-size:var(--size-sm)}@media (pointer:coarse){.nmj5ie1{font-size:var(--font-size-med)}}@media (forced-colors:active){.nmj5ie1:disabled{color:graytext;border-color:graytext}.nmj5ie5{border-color:canvastext}.nmj5ie5:disabled{border-color:graytext}}}

package/dist/ColorField/client.mjs

@@ -1,43 +1,44 @@
 "use client";
 import { Box as e } from "../Box/base.mjs";
-import { Text as t } from "../Text/index.mjs";
-import { input as n, swatch as r } from "./ColorField.css.mjs";
-import { useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Input as s } from "@base-ui/react/input";
+import { controlText as t } from "../styles/control-size.mjs";
+import { Text as n } from "../Text/index.mjs";
+import { input as r, swatch as i } from "./ColorField.css.mjs";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Input as c } from "@base-ui/react/input";
 //#region src/ColorField/client.tsx
-var c = /^#[0-9a-f]{6}$/i, l = (e) => c.test(e) ? e.toLowerCase() : "#000000";
-function u({ value: c, defaultValue: u, onValueChange: d, placeholder: f, size: p, disabled: m, required: h, name: g, swatchLabel: _, inputProps: v }) {
-	let [y, b] = i(u), x = c ?? y, S = (e) => {
-		c === void 0 && b(e), d?.(e);
+var l = /^#[0-9a-f]{6}$/i, u = (e) => l.test(e) ? e.toLowerCase() : "#000000";
+function d({ value: l, defaultValue: d, onValueChange: f, placeholder: p, size: m, disabled: h, required: g, name: _, swatchLabel: v, inputProps: y }) {
+	let [b, x] = a(d), S = l ?? b, C = (e) => {
+		l === void 0 && x(e), f?.(e);
 	};
-	return /* @__PURE__ */ o(e, {
+	return /* @__PURE__ */ s(e, {
 		alignItems: "center",
 		display: "grid",
-		children: [/* @__PURE__ */ a("input", {
-			"aria-label": _,
-			className: r({ size: p }),
-			disabled: m,
-			onChange: (e) => S(e.currentTarget.value),
+		children: [/* @__PURE__ */ o("input", {
+			"aria-label": v,
+			className: i({ size: m }),
+			disabled: h,
+			onChange: (e) => C(e.currentTarget.value),
 			type: "color",
-			value: l(x)
-		}), /* @__PURE__ */ a(s, {
+			value: u(S)
+		}), /* @__PURE__ */ o(c, {
 			spellCheck: !1,
-			...v,
-			name: g,
-			onValueChange: (e) => S(e),
+			...y,
+			name: _,
+			onValueChange: (e) => C(e),
 			pattern: "#[0-9a-fA-F]{6}",
-			placeholder: f,
-			render: /* @__PURE__ */ a(t, {
+			placeholder: p,
+			render: /* @__PURE__ */ o(n, {
 				as: "input",
-				className: n({ size: p }),
-				size: p
+				className: r({ size: m }),
+				size: t[m]
 			}),
-			required: h,
+			required: g,
 			type: "text",
-			value: x
+			value: S
 		})]
 	});
 }
 //#endregion
-export { u as ColorFieldControl };
+export { d as ColorFieldControl };

package/dist/IconButton/index.mjs

@@ -1,25 +1,26 @@
 import { join as e } from "../styles/join.mjs";
 import { Clickable as t } from "../Clickable/index.mjs";
 import { fills as n } from "../styles/button-fills.mjs";
-import { iconButton as r, root as i } from "./IconButton.css.mjs";
-import { jsx as a } from "react/jsx-runtime";
+import { controlHeight as r, controlText as i } from "../styles/control-size.mjs";
+import { iconButton as a, root as o } from "./IconButton.css.mjs";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/IconButton/index.tsx
-function o({ label: o, icon: s, variant: c = "secondary", size: l = "med", minInlineSize: u = l, minBlockSize: d = l, borderRadius: f = "med", backgroundColor: p = n[c].backgroundColor, color: m = n[c].color, className: h, ...g }) {
-	return /* @__PURE__ */ a(t, {
-		...g,
-		"aria-label": o,
+function c({ label: c, icon: l, variant: u = "secondary", size: d = "med", minInlineSize: f = r[d], minBlockSize: p = r[d], borderRadius: m = "med", backgroundColor: h = n[u].backgroundColor, color: g = n[u].color, className: _, ...v }) {
+	return /* @__PURE__ */ s(t, {
+		...v,
+		"aria-label": c,
 		"aria-labelledby": void 0,
-		backgroundColor: p,
-		borderRadius: f,
-		className: e(i, r({
-			variant: c,
-			size: l
-		}), h),
-		color: m,
-		minBlockSize: d,
-		minInlineSize: u,
-		children: /* @__PURE__ */ a(s, { size: l })
+		backgroundColor: h,
+		borderRadius: m,
+		className: e(o, a({
+			variant: u,
+			size: d
+		}), _),
+		color: g,
+		minBlockSize: p,
+		minInlineSize: f,
+		children: /* @__PURE__ */ s(l, { size: i[d] })
 	});
 }
 //#endregion
-export { o as IconButton };
+export { c as IconButton };

package/dist/SearchField/SearchField.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, 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 components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g2{grid-template-columns:var(--space-8) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g3{grid-template-columns:var(--space-12) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g4{grid-template-columns:var(--space-16) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1/auto/-1;padding-block:0}._1cj8r6g5::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g5:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g5[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g5::-webkit-search-cancel-button{appearance:none}._1cj8r6g5::-webkit-search-decoration{appearance:none}._1cj8r6g6{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g7{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g8{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g9{pointer-events:none;color:var(--color-fg-muted);grid-area:1/2}._1cj8r6ga{border-color:#0000;grid-area:1/4}@media (forced-colors:active){._1cj8r6g5:disabled{color:graytext;border-color:graytext}}}
+@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g2{grid-template-columns:var(--space-6) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g3{grid-template-columns:var(--space-8) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g4{grid-template-columns:var(--space-12) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1/auto/-1;padding-block:0}._1cj8r6g5::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g5:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g5[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g5::-webkit-search-cancel-button{appearance:none}._1cj8r6g5::-webkit-search-decoration{appearance:none}._1cj8r6g6{block-size:var(--size-xs);padding-inline-start:calc(var(--space-6) + var(--space-8) + var(--font-size-xs));padding-inline-end:calc(var(--size-xs) + var(--space-4))}._1cj8r6g7{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:calc(var(--size-xs) + var(--space-4))}._1cj8r6g8{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:calc(var(--size-sm) + var(--space-4))}._1cj8r6g9{pointer-events:none;color:var(--color-fg-muted);grid-area:1/2}._1cj8r6ga{background-clip:padding-box;border-color:#0000;grid-area:1/4}@media (pointer:coarse){._1cj8r6g5{font-size:var(--font-size-med)}}@media (forced-colors:active){._1cj8r6g5:disabled{color:graytext;border-color:graytext}}}

package/dist/SearchField/client.mjs

@@ -1,75 +1,65 @@
 "use client";
 import { Box as e } from "../Box/base.mjs";
-import { Text as t } from "../Text/index.mjs";
-import { IconButton as n } from "../IconButton/index.mjs";
-import { SearchIcon as r } from "../icons/SearchIcon.mjs";
-import { XIcon as i } from "../icons/XIcon.mjs";
-import { icon as a, input as o, root as s } from "./SearchField.css.mjs";
-import { useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Input as f } from "@base-ui/react/input";
+import { controlText as t } from "../styles/control-size.mjs";
+import { Text as n } from "../Text/index.mjs";
+import { IconButton as r } from "../IconButton/index.mjs";
+import { SearchIcon as i } from "../icons/SearchIcon.mjs";
+import { XIcon as a } from "../icons/XIcon.mjs";
+import { icon as o, input as s, root as c } from "./SearchField.css.mjs";
+import { useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Input as p } from "@base-ui/react/input";
 //#region src/SearchField/client.tsx
-var p = {
-	sm: {
-		size: "sm",
-		square: "xs"
-	},
-	med: {
-		size: "sm",
-		square: "sm"
-	},
-	lg: {
-		size: "med",
-		square: "med"
-	}
+var m = {
+	sm: "sm",
+	med: "sm",
+	lg: "med"
 };
-function m({ value: m, defaultValue: h, onValueChange: g, placeholder: _, size: v, disabled: y, required: b, name: x, clearLabel: S, inputProps: { ref: C, onKeyDown: w, ...T } = {} }) {
-	let E = c(null), [D, O] = l(h), k = m ?? D, A = (e) => {
-		m === void 0 && O(e), g?.(e);
-	}, j = k !== "" && (m === void 0 || g !== void 0), M = (e) => {
-		if (w?.(e), e.defaultPrevented) return;
+function h({ value: h, defaultValue: g, onValueChange: _, placeholder: v, size: y, disabled: b, required: x, name: S, clearLabel: C, inputProps: { ref: w, onKeyDown: T, ...E } = {} }) {
+	let D = l(null), [O, k] = u(g), A = h ?? O, j = (e) => {
+		h === void 0 && k(e), _?.(e);
+	}, M = A !== "" && (h === void 0 || _ !== void 0), N = (e) => {
+		if (T?.(e), e.defaultPrevented) return;
 		let t = e.nativeEvent.isComposing || e.keyCode === 229;
-		e.key === "Escape" && j && !t && (e.preventDefault(), e.stopPropagation(), A(""));
-	}, N = p[v];
-	return /* @__PURE__ */ d(e, {
+		e.key === "Escape" && M && !t && (e.preventDefault(), e.stopPropagation(), j(""));
+	}, P = t[y];
+	return /* @__PURE__ */ f(e, {
 		alignItems: "center",
-		className: s({ size: v }),
+		className: c({ size: y }),
 		display: "grid",
 		children: [
-			/* @__PURE__ */ u(f, {
-				...T,
-				name: x,
-				onKeyDown: M,
-				onValueChange: A,
-				placeholder: _,
-				ref: C,
-				render: /* @__PURE__ */ u(t, {
+			/* @__PURE__ */ d(p, {
+				...E,
+				name: S,
+				onKeyDown: N,
+				onValueChange: j,
+				placeholder: v,
+				ref: w,
+				render: /* @__PURE__ */ d(n, {
 					as: "input",
-					className: o({ size: v }),
-					ref: E,
-					size: v
+					className: s({ size: y }),
+					ref: D,
+					size: P
 				}),
-				required: b,
+				required: x,
 				type: "search",
-				value: k
+				value: A
 			}),
-			/* @__PURE__ */ u(r, {
-				className: a,
-				size: v
+			/* @__PURE__ */ d(i, {
+				className: o,
+				size: P
 			}),
-			k !== "" && !y && /* @__PURE__ */ u(n, {
+			A !== "" && !b && /* @__PURE__ */ d(r, {
 				className: "_1cj8r6ga",
-				icon: i,
-				label: S,
-				minBlockSize: N.square,
-				minInlineSize: N.square,
+				icon: a,
+				label: C,
 				onClick: () => {
-					A(""), E.current?.focus();
+					j(""), D.current?.focus();
 				},
-				size: N.size
+				size: m[y]
 			})
 		]
 	});
 }
 //#endregion
-export { m as SearchFieldControl };
+export { h as SearchFieldControl };

package/dist/Text/Text.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, 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 components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}
+@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{white-space:pre-wrap;overflow-wrap:anywhere}._1mgdisqr{white-space:pre}._1mgdisqs{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqs{white-space:normal;text-overflow:clip}}

package/dist/Text/Text.css.mjs

@@ -27,6 +27,10 @@ var e = "_1mgdisq3", t = "_1mgdisq4", n = {
 	sm: "_1mgdisqm",
 	med: "_1mgdisqn",
 	lg: "_1mgdisqo"
-}, o = { nowrap: "_1mgdisqp" }, s = "_1mgdisqq";
+}, o = {
+	nowrap: "_1mgdisqp",
+	"pre-wrap": "_1mgdisqq",
+	pre: "_1mgdisqr"
+}, s = "_1mgdisqs";
 //#endregion
 export { n as font, a as leading, e as root, r as size, s as truncate, t as truncateBox, i as weight, o as wrap };

package/dist/Text/index.d.mts

@@ -10,7 +10,7 @@ export type TextOwnProps = {
   size?: keyof typeof tokens.fontSize;
   truncate?: boolean | "box";
   weight?: keyof typeof tokens.fontWeight;
-  wrap?: "nowrap";
+  wrap?: "nowrap" | "pre-wrap" | "pre";
 };
 export type TextProps<T extends ElementType = "p"> = PolymorphicProps<T, StyleProps & TextOwnProps>;
 export declare function Text<T extends ElementType = "p">({ as, size, font, weight, leading, truncate, wrap, display, overflow, className, ...props }: TextProps<T>): import("react").JSX.Element;

package/dist/Text/index.mjs

@@ -11,8 +11,8 @@ function l({ as: l, size: u, font: d, weight: f, leading: p, truncate: m, wrap:
 		u && a[u],
 		f && o[f],
 		p && r[p],
-		h && s[h],
-		m === !0 && "_1mgdisqq",
+		h && !m && s[h],
+		m === !0 && "_1mgdisqs",
 		v
 	];
 	return /* @__PURE__ */ c(t, {

package/dist/TextField/TextField.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, 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 components.text-field{._20at410{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._20at411{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);padding-block:0}._20at411::placeholder{color:var(--color-fg-muted);opacity:1}._20at411:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._20at411:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._20at411[aria-invalid=true]{border-color:var(--color-danger)}._20at412{block-size:var(--size-sm);padding-inline:var(--space-8)}._20at413{block-size:var(--size-med);padding-inline:var(--space-12)}._20at414{block-size:var(--size-lg);padding-inline:var(--space-16)}@media (forced-colors:active){._20at411:disabled{color:graytext;border-color:graytext}}}
+@layer components.text-field{._20at410{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._20at411{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);padding-block:0}._20at411::placeholder{color:var(--color-fg-muted);opacity:1}._20at411:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._20at411:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._20at411[aria-invalid=true]{border-color:var(--color-danger)}._20at412{block-size:var(--size-xs);padding-inline:var(--space-6)}._20at413{block-size:var(--size-sm);padding-inline:var(--space-8)}._20at414{block-size:var(--size-med);padding-inline:var(--space-12)}@media (pointer:coarse){._20at411{font-size:var(--font-size-med)}}@media (forced-colors:active){._20at411:disabled{color:graytext;border-color:graytext}}}

package/dist/TextField/index.mjs

@@ -1,40 +1,41 @@
-import { Text as e } from "../Text/index.mjs";
-import { Field as t } from "../Field/index.mjs";
-import { hiddenLabel as n, input as r } from "./TextField.css.mjs";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Input as o } from "@base-ui/react/input";
+import { controlText as e } from "../styles/control-size.mjs";
+import { Text as t } from "../Text/index.mjs";
+import { Field as n } from "../Field/index.mjs";
+import { hiddenLabel as r, input as i } from "./TextField.css.mjs";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Input as s } from "@base-ui/react/input";
 //#region src/TextField/index.tsx
-function s({ label: s, hideLabel: c = !1, type: l = "text", value: u, defaultValue: d, onValueChange: f, placeholder: p, description: m, error: h, size: g = "med", disabled: _ = !1, required: v = !1, name: y, inputProps: b, className: x, style: S, ...C }) {
-	return /* @__PURE__ */ a(t, {
-		...C,
-		className: x,
-		disabled: _,
-		invalid: h != null && h !== !1 && h !== "",
-		style: S,
+function c({ label: c, hideLabel: l = !1, type: u = "text", value: d, defaultValue: f, onValueChange: p, placeholder: m, description: h, error: g, size: _ = "med", disabled: v = !1, required: y = !1, name: b, inputProps: x, className: S, style: C, ...w }) {
+	return /* @__PURE__ */ o(n, {
+		...w,
+		className: S,
+		disabled: v,
+		invalid: g != null && g !== !1 && g !== "",
+		style: C,
 		children: [
-			/* @__PURE__ */ i(t.Label, {
-				className: c ? n : void 0,
-				children: s
+			/* @__PURE__ */ a(n.Label, {
+				className: l ? r : void 0,
+				children: c
 			}),
-			/* @__PURE__ */ i(o, {
-				...b,
-				defaultValue: d,
-				name: y,
-				onValueChange: f && ((e) => f(e)),
-				placeholder: p,
-				render: /* @__PURE__ */ i(e, {
+			/* @__PURE__ */ a(s, {
+				...x,
+				defaultValue: f,
+				name: b,
+				onValueChange: p && ((e) => p(e)),
+				placeholder: m,
+				render: /* @__PURE__ */ a(t, {
 					as: "input",
-					className: r({ size: g }),
-					size: g
+					className: i({ size: _ }),
+					size: e[_]
 				}),
-				required: v,
-				type: l,
-				value: u
+				required: y,
+				type: u,
+				value: d
 			}),
-			m != null && /* @__PURE__ */ i(t.Description, { children: m }),
-			/* @__PURE__ */ i(t.Error, { children: h })
+			h != null && /* @__PURE__ */ a(n.Description, { children: h }),
+			/* @__PURE__ */ a(n.Error, { children: g })
 		]
 	});
 }
 //#endregion
-export { s as TextField };
+export { c as TextField };

package/dist/Toast/client.mjs

@@ -180,7 +180,7 @@ function I({ toast: a, closeLabel: o }) {
 						size: "sm"
 					}) }),
 					/* @__PURE__ */ T(D.Action, { render: /* @__PURE__ */ T(i, {
-						size: "sm",
+						size: "med",
 						variant: "secondary"
 					}) })
 				]

package/dist/docs/Button.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-The labelled action: a `<button type="button">` with the house look, or a link styled as one with `as="a"` (or a router's link). Three variants (`primary`, `secondary`, `danger`), three sizes (`sm`, `med`, `lg`, 32, 40 and 48 px high), a `loading` state that keeps its width, and icon slots before and after the label. It is built on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` / `aria-busy` states that block activation while the button stays focusable.
+The labelled action: a `<button type="button">` with the house look, or a link styled as one with `as="a"` (or a router's link). Three variants (`primary`, `secondary`, `danger`), three sizes (`sm`, `med`, `lg`, 24, 32 and 40 px high, ADR 0124), a `loading` state that keeps its width, and icon slots before and after the label. It is built on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` / `aria-busy` states that block activation while the button stays focusable.
 
 ## When to use
 
@@ -20,7 +20,7 @@ The labelled action: a `<button type="button">` with the house look, or a link s
 
 - `primary` marks the one action a view or dialog exists for; everything else is `secondary`, the default. One primary per group. Its fill is `accentFill` with `accentFillFg` text (ADR 0119): light text on a solid accent in both modes, 4.5:1 at rest and on hover.
 - `danger` (`dangerFg` on `danger`, ADR 0060) replaces `primary` when that action destroys data or cannot be undone, such as a confirm dialog's "Delete project". It takes `primary`'s place, so a group has one `primary` or one `danger`, not both. The label names the consequence ("Delete project", not "OK"): under forced colors `danger` looks like `primary`, so the word carries the meaning, not the color. Confirm before an irreversible action runs; `danger` does not.
-- Sizes are `sm`, `med` (default) and `lg`, never `md`. The label and the icons take the `fontSize` step of the same name.
+- Sizes are `sm`, `med` (default) and `lg`, never `md`. `sm`, `med` and `lg` are 24, 32 and 40px high; the label and the icons take the `fontSize` step one below the `size` (`xs`, `sm`, `med`: 12, 14 and 16px).
 - `loading` renders `aria-busy="true"`, blocks clicks, Enter and Space, and swaps the label for three pulsing dots in the same space: the width never changes, and the label stays the accessible name. A label narrower than the dots (one character, such as a page number) widens by a few pixels; give such buttons a fixed `minInlineSize`. Announce the outcome elsewhere (a toast or a status message); `aria-busy` alone is not announced.
 - `disabled` renders `aria-disabled="true"` and a dashed border, never the native `disabled`: the button stays focusable and announced. Say why it is disabled nearby when it is not obvious.
 - `iconStart` and `iconEnd` take an icon component (a generated `ArrowRightIcon`, or a component that renders `Icon`), not an element: Button renders it at its text size. The icons are decorative; the label names the button.

package/dist/docs/ColorField.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-A form field for one colour as a `#rrggbb` string: a swatch, the browser's own colour picker (`<input type="color">`), before a hex text input (role `textbox`) that holds the value. Picking a colour writes its hex; typing a valid hex moves the swatch. The hex input has TextField's look, with the swatch over its inline-start padding. Built on Base UI's `Input` and a native colour input, since Base UI has no colour picker (ADR 0003, 0114); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+A form field for one colour as a `#rrggbb` string: a swatch, the browser's own colour picker (`<input type="color">`), before a hex text input (role `textbox`) that holds the value. Picking a colour writes its hex; typing a valid hex moves the swatch. The hex input has TextField's look, with the swatch over its inline-start padding. Built on Base UI's `Input` and a native colour input, since Base UI has no colour picker (ADR 0003, 0114); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124); the swatch is 24px, or 32px in `lg`.
 
 ## When to use
 
@@ -62,7 +62,7 @@ A form field for one colour as a `#rrggbb` string: a swatch, the browser's own c
 
 - The hex input is a `textbox` named by the label, visible or not; the swatch is the browser's colour input, named by `swatchLabel`. The swatch comes first in the tab order and opens the platform picker with Enter or Space.
 - The colour shows as a filled square with a border, so a pale or dark colour stays visible on any background; the hex beside it says the colour in text.
-- Invalid adds a danger border and the error message with its icon, never colour alone; disabled adds dashed borders. Under forced colors the swatch keeps its colour, since the colour is the content, and its border uses a system colour.
+- Invalid adds a danger border and the error message with its icon, never colour alone; disabled adds dashed borders. Under forced colors the swatch keeps its colour, since the colour is the content, and its border uses a system colour. On a coarse pointer (a touch screen) the hex text is 16px at every size, so iOS Safari does not zoom the page when the field takes focus.
 
 ## Props
 

package/dist/docs/Field.md

@@ -113,7 +113,7 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -127,7 +127,7 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -141,6 +141,6 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Heading.md

@@ -65,6 +65,6 @@ Generated from the TypeScript types.
 | `size` | `"2xl" \| "lg" \| "med" \| "sm" \| "xl"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts every `<h2>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/IconButton.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-A compact button whose only visible content is an icon, for an action the icon makes plain: close, edit, refresh. A required `label` names it for assistive technology (`aria-label`); the icon is decorative. It is a `<button type="button">` on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` that blocks activation while the button stays focusable. Two variants from Button's fills (`primary`, `secondary`) and three square sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+A compact button whose only visible content is an icon, for an action the icon makes plain: close, edit, refresh. A required `label` names it for assistive technology (`aria-label`); the icon is decorative. It is a `<button type="button">` on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` that blocks activation while the button stays focusable. Two variants from Button's fills (`primary`, `secondary`) and three square sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124).
 
 ## When to use
 
@@ -19,9 +19,9 @@ A compact button whose only visible content is an icon, for an action the icon m
 ## Rules
 
 - `label` is required and is the accessible name: say what the button does ("Close dialog", "Refresh results"), not what the icon shows ("X", "Arrows"). Never pass an empty string: the button would have no name. `aria-label`, `aria-labelledby` and children are not props; a raw one is ignored.
-- `icon` takes an icon component (a generated `XIcon`, or a component that renders `Icon`), not an element: IconButton renders it at the `fontSize` step of its `size`, `aria-hidden`.
+- `icon` takes an icon component (a generated `XIcon`, or a component that renders `Icon`), not an element: IconButton renders it at the `fontSize` step one below its `size` (12, 14 and 16px at `sm`, `med`, `lg`), as Button's icons, `aria-hidden`.
 - `variant`: `secondary` (default) for most actions; `primary` for the one action a view or dialog exists for. There is no `danger` in v0.1: a destructive action deserves a labelled `Button`.
-- `size`: `sm`, `med` (default) or `lg`, never `md`. Each is a square of Button's height of the same name, so an IconButton lines up with a Button beside it.
+- `size`: `sm`, `med` (default) or `lg`, never `md`. Each is a square of Button's height of the same name (24, 32 and 40px), so an IconButton lines up with a Button beside it.
 - `disabled` renders `aria-disabled="true"` and a dashed border, never the native `disabled`. There is no `loading` and no tooltip in v0.1.
 - With `aria-expanded="true"`, as a Dialog trigger sets it, it holds the hover tint and an inset ring while the popup is open, as Button does.
 - Fill (`backgroundColor`), text color (`color`), width (`minInlineSize`), height (`minBlockSize`) and `borderRadius` are default style props: pass one to change it. Change width and height together to keep the square. Hover tints whatever the fill is; a custom fill needs an icon color that passes 3:1 on it (4.5:1 to match Button).

package/dist/docs/MultiSelect.md

@@ -25,7 +25,7 @@ A form field for picking any number of values from a list too long to show at on
 - `value` with `onValueChange` controls it; `defaultValue` leaves it uncontrolled. Both are arrays of option values, and `onValueChange` gets the new array.
 - `name` makes each selected value submit as its own `name=value` pair, as a `<select multiple>` does; read them with `formData.getAll(name)`. Nothing selected submits nothing.
 - `placeholder` (`"Select"`) shows while nothing is selected. `countLabel` (`"{count} selected"`) is the summary once the joined labels do not fit; `{count}` is replaced with the number selected. Translate both. One selected label that does not fit is truncated, not replaced by a count.
-- `size` (`sm`, `med`, `lg`; default `med`) is the trigger's, as Button's: it matches a SearchField, TextField or Button of the same size in height. The list's options do not change size.
+- `size` (`sm`, `med`, `lg`; default `med`) is the trigger's, as Button's: it matches a SearchField, TextField or Button of the same size in height (24, 32 and 40 px, ADR 0124). The list's options do not change size.
 - `disabled` takes the trigger out of the tab order and mutes the label. `required` sets `aria-required` on the trigger; report a missing value through `error`.
 - The trigger and the open listbox are both named by `label`.
 - Style props, `className` and `style` go to the `Field` around the label, trigger and messages, not to the trigger or the popup.

package/dist/docs/SearchField.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124); the clear button is 24px, or 32px in `lg`.
 
 ## When to use
 
@@ -98,7 +98,7 @@ const ref = useRef<HTMLInputElement>(null);
 - The clear button is a named button in the tab order after the input. Activating it, by pointer or keyboard, empties the field and moves focus to the input, never to `body`.
 - Escape clears without closing a surrounding Dialog; on an empty field it passes through.
 - Showing and hiding the clear button shifts nothing: the input's inline-end padding always holds it.
-- Invalid adds a danger border and the error message with its icon, never color alone; disabled adds a dashed border. Every size is at least 24 px tall, and the clear button meets the 24 by 24 CSS px target size. Under forced colors the border, text and disabled state use system colors.
+- Invalid adds a danger border and the error message with its icon, never color alone; disabled adds a dashed border. Every size is at least 24 px tall, and the clear button meets the 24 by 24 CSS px target size. Under forced colors the border, text and disabled state use system colors. On a coarse pointer (a touch screen) the input text is 16px at every size, so iOS Safari does not zoom the page when the field takes focus.
 
 ## Props
 

package/dist/docs/Tabs.md

@@ -126,6 +126,6 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `value` | `any` | yes | The value of the Tab. |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Text.md

@@ -29,6 +29,10 @@ The base of all visible text, and the primitive every text component builds on.
 - `truncate` keeps one line and cuts it with an ellipsis, without clipping ascenders or descenders. It sets the block margins, so do not combine it with margin props.
 - `truncate="box"` cuts a part of another Text's line (a field's summary inside a button's label) at its own box: untrimmed, in the outer Text's font until its own props say otherwise. Use it only inside another Text, below a Box or element that is not a Text run.
 - `wrap="nowrap"` keeps the text on one line, uncut: a short label that must never break. A long string overflows its box, so cap it with `truncate` instead.
+- `wrap="pre-wrap"` keeps newlines and runs of spaces and wraps, breaking a long unbroken string (a path, a URL, a hash) anywhere so it stays in its box: logs, commit messages, user-entered text.
+- `wrap="pre"` keeps newlines and runs of spaces on unwrapped lines, so a long line overflows its box: aligned output whose columns must not reflow. Text is not a scroll container; where the box cannot grow, use `pre-wrap`.
+- `truncate` wins over `wrap`: a Text with both keeps one line, collapses whitespace and ignores `wrap`.
+- Plain wrapped text with a long unbroken string and no whitespace to keep has no `wrap` value; its component sets `overflow-wrap` in its own styles.
 - The trim is two pseudo-elements; do not style `::before` or `::after` on a Text.
 - No native `text-box`; capsize only (ADR 0016).
 
@@ -55,6 +59,12 @@ The base of all visible text, and the primitive every text component builds on.
 </Text>
 ```
 
+```tsx
+<Text as="pre" font="mono" size="sm" wrap="pre-wrap">
+  {commitMessage}
+</Text>
+```
+
 ## Don't
 
 ```tsx
@@ -94,6 +104,6 @@ Generated from the TypeScript types.
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts every `<p>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/TextField.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124).
 
 ## When to use
 
@@ -79,7 +79,7 @@ A form field for one line of text that is not a search: an `<input>` (role `text
 ## Accessibility
 
 - The input is a `textbox` named by the label, visible or not.
-- Invalid adds a danger border and the error message with its icon, never color alone; disabled adds a dashed border. Every size is at least 24 px tall. Under forced colors the border, text and disabled state use system colors.
+- Invalid adds a danger border and the error message with its icon, never color alone; disabled adds a dashed border. Every size is at least 24 px tall. Under forced colors the border, text and disabled state use system colors. On a coarse pointer (a touch screen) the input text is 16px at every size, so iOS Safari does not zoom the page when the field takes focus.
 - `type="email"`, `"url"` and `"tel"` bring the platform's keyboard on touch devices; the role stays `textbox`.
 
 ## Props

package/dist/docs/llms.txt

@@ -8,25 +8,25 @@
 - [Avatar](Avatar.md): Identifies a person, project or account by one or two letters in a circle, on a colour of the consumer's choosing or a neutral fill. A `span` with `role="img"`, named by `label`, around a `Text` in the `label` font. It is never focusable.
 - [Badge](Badge.md): A static label that states the status of, or a short fact about, the thing beside it: "Draft", "Failed", "Beta". A `span` with a fill from the color roles around a `Text` in the `label` font. It has no role and is never focusable.
 - [Box](Box.md): The base element every component builds on: one element, chosen with `as`, styled with style props. Style props are the token-backed classes from `@layer atoms`: layout (`display`, flex, `gap`, logical padding, margin and sizing), color roles, `borderRadius`, `boxShadow`, `position`, `zIndex`, `overflow` and `textAlign`.
-- [Button](Button.md): The labelled action: a `<button type="button">` with the house look, or a link styled as one with `as="a"` (or a router's link). Three variants (`primary`, `secondary`, `danger`), three sizes (`sm`, `med`, `lg`, 32, 40 and 48 px high), a `loading` state that keeps its width, and icon slots before and after the label. It is built on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` / `aria-busy` states that block activation while the button stays focusable.
+- [Button](Button.md): The labelled action: a `<button type="button">` with the house look, or a link styled as one with `as="a"` (or a router's link). Three variants (`primary`, `secondary`, `danger`), three sizes (`sm`, `med`, `lg`, 24, 32 and 40 px high, ADR 0124), a `loading` state that keeps its width, and icon slots before and after the label. It is built on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` / `aria-busy` states that block activation while the button stays focusable.
 - [Checkbox](Checkbox.md): A two-state choice, with a third mixed state for a "select all" over a partly selected list. Built on Base UI `Checkbox` (ADR 0003, 0046): a `span` with `role="checkbox"` and `aria-checked`, plus a hidden `<input type="checkbox">` that submits with the form. The span is a 24 by 24 CSS px target (WCAG 2.2) with the shared focus ring; the 16px box inside fills and shows a tick when checked, a dash when mixed. It composes `Field` for its label, description and error (ADR 0026).
 - [Chip](Chip.md): A toggle that filters content or picks an option: "Unread", "Starred", "Medium". A `<button>` with `aria-pressed` on `Clickable`, built on Base UI `Toggle`; `ChipGroup` is a Base UI `ToggleGroup` of chips that share one state. If it changes state when clicked, it's a chip.
 - [Clickable](Clickable.md): The low-level base for everything a user presses: a `<button type="button">` by default, or a link with `as="a"` (or a router's link component). It brings the shared focus ring, a 24 by 24 CSS px minimum target (WCAG 2.2), `disabled` and `busy` states as ARIA attributes, and no look of its own: the button and link chrome is stripped. `Button`, `IconButton` and link components are built on it.
-- [ColorField](ColorField.md): A form field for one colour as a `#rrggbb` string: a swatch, the browser's own colour picker (`<input type="color">`), before a hex text input (role `textbox`) that holds the value. Picking a colour writes its hex; typing a valid hex moves the swatch. The hex input has TextField's look, with the swatch over its inline-start padding. Built on Base UI's `Input` and a native colour input, since Base UI has no colour picker (ADR 0003, 0114); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+- [ColorField](ColorField.md): A form field for one colour as a `#rrggbb` string: a swatch, the browser's own colour picker (`<input type="color">`), before a hex text input (role `textbox`) that holds the value. Picking a colour writes its hex; typing a valid hex moves the swatch. The hex input has TextField's look, with the swatch over its inline-start padding. Built on Base UI's `Input` and a native colour input, since Base UI has no colour picker (ADR 0003, 0114); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124); the swatch is 24px, or 32px in `lg`.
 - [Dialog](Dialog.md): A modal panel over the page for one short task: edit a name, fill a small form, read details that need a decision. Built on Base UI's Dialog, which owns the behavior: focus moves into the dialog and stays there, the page behind is inert and does not scroll, Esc and a click on the backdrop close it, and focus returns to the trigger. The parts add the look: a dimmed backdrop, a raised panel with a title, and a zoom-and-fade that is a plain fade under reduced motion.
 - [Field](Field.md): Wires one form control to its label, description and error: ids, `htmlFor`, `aria-describedby` and `aria-invalid`. It is input-agnostic: the control inside is Base UI's `Field.Control` or a Base UI control (Checkbox, Combobox), and Base UI does the wiring. The parts are `Field` (the root, a flex column), `Field.Label`, `Field.Description` and `Field.Error`. Built on Base UI `Field` (ADR 0003, 0026, 0046); `@base-ui/react` is a peer dependency, so the app's Base UI controls and Field share one copy of its contexts.
 - [Heading](Heading.md): Section and page headings. A `Text` with heading defaults: the `heading` font role, `semibold`, `sm` leading, and balanced line wrapping. The level (`as`) and the look (`size`) are separate, so the outline stays right whatever the design calls for.
 - [Icon](Icon.md): The base for every icon: an `<svg>` on a 24-unit grid that draws its children with round 2-unit strokes in `currentColor`. Generated icons from `@jonmilner/ui/icons` (`ArrowRightIcon`, …) wrap it and take the same props, less `children` and `viewBox`. `size` takes a `fontSize` step, so an icon matches the `Text` beside it; `color` takes a color role.
-- [IconButton](IconButton.md): A compact button whose only visible content is an icon, for an action the icon makes plain: close, edit, refresh. A required `label` names it for assistive technology (`aria-label`); the icon is decorative. It is a `<button type="button">` on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` that blocks activation while the button stays focusable. Two variants from Button's fills (`primary`, `secondary`) and three square sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+- [IconButton](IconButton.md): A compact button whose only visible content is an icon, for an action the icon makes plain: close, edit, refresh. A required `label` names it for assistive technology (`aria-label`); the icon is decorative. It is a `<button type="button">` on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` that blocks activation while the button stays focusable. Two variants from Button's fills (`primary`, `secondary`) and three square sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124).
 - [Inline](Inline.md): A horizontal row of children that wraps onto new lines, with even space between them on both axes. `Inline` is a `Box` with `display="flex"`, `flexDirection="row"`, `flexWrap="wrap"` and `alignItems="center"` as default style props, spaced by a required `gap`. Children render as they are: no wrapper per child.
 - [Menu](Menu.md): A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a toolbar's overflow. It may mix in links ("Open invoice", "Download PDF") as `Menu.LinkItem`, real anchors that keep the browser's link behavior. Built on Base UI's Menu, which owns the keyboard and focus: arrow keys, Home and End move through the items, typing jumps to a matching item, Esc and an outside click close it, and focus returns to the trigger. The parts add the look: a raised surface with a border and shadow, a highlighted item, a zoom-and-fade that is a plain fade under reduced motion.
 - [MultiSelect](MultiSelect.md): A form field for picking any number of values from a list too long to show at once. A trigger styled as Button's secondary look opens a listbox of options; each selected option shows a check mark, and the trigger summarises the selection as the joined labels, or a count ("3 selected") once the labels would not fit. Built on Base UI's `Select` in multiple mode (ADR 0003), which owns the keyboard and focus: arrow keys, Home and End move through the options, typing jumps to a match, Esc and an outside click close it, and focus returns to the trigger. It composes `Field` for its label, description and error (ADR 0026).
-- [SearchField](SearchField.md): A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+- [SearchField](SearchField.md): A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124); the clear button is 24px, or 32px in `lg`.
 - [Stack](Stack.md): A vertical column of children with even space between them. `Stack` is a `Box` with `display="flex"` and `flexDirection="column"` as default style props, spaced by a required `gap`. Children render as they are: no wrapper per child.
 - [Tabs](Tabs.md): Switches between views that share one place on the page. The parts are `Tabs` (the root, a flex column; a row when vertical), `Tabs.List` (the `tablist`), `Tabs.Tab` (a `tab` button on `Clickable`) and `Tabs.Panel` (the `tabpanel`). Built on Base UI `Tabs` (ADR 0003, 0046): it owns the selection, one tab stop with arrow-key roving, `aria-selected`, and the ids that tie each tab to its panel. The selected tab shows an accent bar that fades and grows in (ADR 0049).
 - [Tag](Tag.md): A label that puts content in a category: a topic, a label, a user-made category. A `span` with a subtle tone fill (gray by default) and an `lg` radius (half a one-line tag's height, so one line reads as a pill and wrapped lines stay inside the fill) around a `Text` in the `label` font. It can be read-only, a link, or removable.
 - [Text](Text.md): The base of all visible text, and the primitive every text component builds on. Capsize trims the box to the cap height and the baseline, so the gap around text is the visible space. It takes every Box style prop (`color`, `textAlign`, margins), plus `size`, `font`, `weight`, `leading`, `truncate` and `wrap`.
-- [TextField](TextField.md): A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
+- [TextField](TextField.md): A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 24, 32 and 40 px, ADR 0124).
 - [Toast](Toast.md): Tells the user briefly about the result of an action without interrupting them: "Changes saved", "Message sent", "Couldn't upload the file". Material calls it a snackbar and Atlassian a flag. Built on Base UI's Toast, which owns the queue, the timers and swipe-to-dismiss. The parts add the look: a raised card in a stack at the bottom end corner, an icon per variant, a close button, and a slide-up-and-fade that is a plain fade under reduced motion. A toast never takes focus and moves nothing on the page.
 - [VisuallyHidden](VisuallyHidden.md): Text that screen readers read and nobody sees: a 1px clipped box, out of the layout, still in the accessibility tree. Use it for words a sighted user gets from the layout, an icon or a color, never to hide a control or a skip link. One element, chosen with `as`, a `span` by default.
 

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "components": [
     {
       "name": "AlertDialog",
@@ -824,10 +824,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -897,10 +899,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -970,10 +974,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -1050,10 +1056,12 @@
         },
         {
           "name": "wrap",
-          "type": "\"nowrap\"",
+          "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
           "required": false,
           "values": [
-            "nowrap"
+            "nowrap",
+            "pre",
+            "pre-wrap"
           ]
         }
       ],
@@ -1944,10 +1952,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -2064,10 +2074,12 @@
         },
         {
           "name": "wrap",
-          "type": "\"nowrap\"",
+          "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
           "required": false,
           "values": [
-            "nowrap"
+            "nowrap",
+            "pre",
+            "pre-wrap"
           ]
         }
       ],

package/dist/docs/migrations/0.10.0.md

@@ -0,0 +1,32 @@
+# 0.10.0
+
+Button and the controls that line up with it (IconButton, SearchField, TextField, ColorField, and the MultiSelect, Menu and Dialog triggers) moved one step down the `size` scale for dense UIs: `sm`, `med` and `lg` are now 24, 32 and 40px high (were 32, 40 and 48), and their text and icons 12, 14 and 16px (were 14, 16 and 18; on a coarse pointer the fields' input text stays 16px at every size, so iOS Safari does not zoom in), so every one renders 8px shorter at the same `size`, the default `med` included (decision 0124). The old 48px `lg` has no equivalent. AlertDialog's Cancel and Confirm buttons take the default `med`, so they are 32px now (were 40) with no prop to change it; the Toast action keeps its 32px.
+
+## Find
+
+Only where a screen should keep its old heights; a dense screen can take the new ones as they are. In the app's source (`*.tsx`):
+
+1. A `size` on one of these controls, or on a trigger that takes Button's look: regex `<(Button|IconButton|SearchField|TextField|ColorField|MultiSelect|\w+\.Trigger|\w+\.Close)\b[^>]*\bsize=["{]` (a multi-line tag needs a multiline search).
+2. The same controls and triggers with no `size`, which default to `med`, now 32px: regex `<(Button|IconButton|SearchField|TextField|ColorField|MultiSelect|\w+\.Trigger|\w+\.Close)\b(?![^>]*\bsize=)`. A trigger or close that renders no Button look (no `variant`, icon or `render` of a Button) is a match you can skip.
+3. Code that measures these controls, such as a test expecting 32, 40 or 48px, or layout sized to a 40px default: regex `\b(32|40|48)\b` near these components' names.
+
+## Replace
+
+Step each `size` up one, in this order so nothing moves twice: `med` to `lg`, then `sm` to `med`. An old `lg` (48px) has no equivalent; keep it at `lg` (40px). A Button or IconButton can hold 48px with `minBlockSize="lg"` (and `minInlineSize="lg"` for IconButton's square); on a field the style props reach the wrapping `Field`, not the input, so a field cannot.
+
+```tsx
+// before
+<Button size="sm">Edit</Button>
+<SearchField label="Search" />
+<IconButton icon={XIcon} label="Close" size="lg" />
+// after: the same heights as before
+<Button size="med">Edit</Button>
+<SearchField label="Search" size="lg" />
+<IconButton icon={XIcon} label="Close" minBlockSize="lg" minInlineSize="lg" size="lg" />
+```
+
+Update any measured value from step 3 to the new heights: `sm` 24, `med` 32, `lg` 40.
+
+## Verify
+
+`pnpm typecheck` passes (no prop changed type), and the app's visual or browser tests either match their old baselines where you stepped `size` up or show only the intended 8px shorter controls where you did not.

package/dist/styles/control-size.mjs

@@ -0,0 +1,12 @@
+//#region src/styles/control-size.ts
+var e = {
+	sm: "xs",
+	med: "sm",
+	lg: "med"
+}, t = {
+	sm: "xs",
+	med: "sm",
+	lg: "med"
+};
+//#endregion
+export { e as controlHeight, t as controlText };

package/package.json

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