@jonmilner/ui 0.2.2 → 0.2.3

package/dist/Badge/Badge.css

@@ -1,2 +1,2 @@
 @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 components.badge{._1ixfil10{white-space:nowrap;border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}
+@layer components.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Badge/index.mjs

@@ -46,6 +46,7 @@ function c({ variant: c = "neutral", size: l = "med", display: u = "inline-block
 			font: "label",
 			size: l,
 			weight: "medium",
+			wrap: "nowrap",
 			children: _
 		})
 	});

package/dist/Button/index.mjs

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

package/dist/Field/index.d.mts

@@ -8,9 +8,9 @@ export type FieldLabelProps = TextPartProps<Field$1.Label.Props>;
 export type FieldDescriptionProps = TextPartProps<Field$1.Description.Props>;
 export type FieldErrorProps = TextPartProps<Field$1.Error.Props>;
 declare function FieldRoot({ display, flexDirection, gap, className, style, ...props }: FieldProps): import("react").JSX.Element;
-declare function FieldLabel({ nativeLabel, size, font, weight, leading, truncate, className, style, ...props }: FieldLabelProps): import("react").JSX.Element;
-declare function FieldDescription({ size, font, weight, leading, truncate, color, className, style, ...props }: FieldDescriptionProps): import("react").JSX.Element;
-declare function FieldError({ children, match, size, font, weight, leading, truncate, color, className, style, ...props }: FieldErrorProps): import("react").JSX.Element;
+declare function FieldLabel({ nativeLabel, size, font, weight, leading, truncate, wrap, className, style, ...props }: FieldLabelProps): import("react").JSX.Element;
+declare function FieldDescription({ size, font, weight, leading, truncate, wrap, color, className, style, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+declare function FieldError({ children, match, size, font, weight, leading, truncate, wrap, color, className, style, ...props }: FieldErrorProps): import("react").JSX.Element;
 export declare const Field: typeof FieldRoot & {
   Label: typeof FieldLabel;
   Description: typeof FieldDescription;

package/dist/Field/index.mjs

@@ -22,10 +22,10 @@ function d({ display: e = "flex", flexDirection: r = "column", gap: i = "8", cla
 		})
 	});
 }
-function f({ nativeLabel: n = !0, size: i = "sm", font: o = "label", weight: c = "medium", leading: l, truncate: d, className: f, style: p, ...m }) {
-	let [h, g] = t(m);
+function f({ nativeLabel: n = !0, size: i = "sm", font: o = "label", weight: c = "medium", leading: l, truncate: d, wrap: f, className: p, style: m, ...h }) {
+	let [g, _] = t(h);
 	return /* @__PURE__ */ s(u.Label, {
-		...g,
+		..._,
 		nativeLabel: n,
 		render: /* @__PURE__ */ s(r, {
 			as: n ? "label" : "span",
@@ -34,31 +34,33 @@ function f({ nativeLabel: n = !0, size: i = "sm", font: o = "label", weight: c =
 			weight: c,
 			leading: l,
 			truncate: d,
-			...h,
-			className: e(a, f),
-			style: p
+			wrap: f,
+			...g,
+			className: e(a, p),
+			style: m
 		})
 	});
 }
-function p({ size: e = "sm", font: n, weight: i, leading: a, truncate: o, color: c = "fgMuted", className: l, style: d, ...f }) {
-	let [p, m] = t(f);
+function p({ size: e = "sm", font: n, weight: i, leading: a, truncate: o, wrap: c, color: l = "fgMuted", className: d, style: f, ...p }) {
+	let [m, h] = t(p);
 	return /* @__PURE__ */ s(u.Description, {
-		...m,
+		...h,
 		render: /* @__PURE__ */ s(r, {
 			size: e,
 			font: n,
 			weight: i,
 			leading: a,
 			truncate: o,
-			color: c,
-			...p,
-			className: l,
-			style: d
+			wrap: c,
+			color: l,
+			...m,
+			className: d,
+			style: f
 		})
 	});
 }
-function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading: p, truncate: m, color: h = "danger", className: g, style: _, ...v }) {
-	let [y, b] = t(v), x = l.toArray(n).some((e) => e !== "");
+function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading: p, truncate: m, wrap: h, color: g = "danger", className: _, style: v, ...y }) {
+	let [b, x] = t(y), S = l.toArray(n).some((e) => e !== "");
 	return /* @__PURE__ */ c(r, {
 		"aria-atomic": !0,
 		"aria-live": "assertive",
@@ -68,14 +70,15 @@ function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading:
 		weight: f,
 		leading: p,
 		truncate: m,
-		color: h,
-		...y,
-		className: e(i, g),
-		style: _,
+		wrap: h,
+		color: g,
+		...b,
+		className: e(i, _),
+		style: v,
 		children: [/* @__PURE__ */ s(o, {
-			...b,
-			...x && { children: n },
-			match: a ?? (x || void 0),
+			...x,
+			...S && { children: n },
+			match: a ?? (S || void 0),
 			size: u
 		}), "​"]
 	});

package/dist/MultiSelect/MultiSelect.css

@@ -1,2 +1,2 @@
 @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 components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}._1seauxl0>span{flex:auto;justify-items:stretch;min-inline-size:0}._1seauxl0>span>span{min-inline-size:0}._1seauxl0>span>span>span:first-child{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}
+@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}

package/dist/MultiSelect/client.mjs

@@ -1,93 +1,96 @@
 "use client";
 import { Box as e } from "../Box/index.mjs";
-import { PopupScope as t, triggerElement as n, usePopupScope as r } from "../popup/client.mjs";
-import { Field as i } from "../Field/index.mjs";
-import { ChevronDownIcon as a } from "../icons/ChevronDownIcon.mjs";
-import { labels as o, popup as s, summary as c, trigger as l, value as u } from "./MultiSelect.css.mjs";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createContext as p, use as m, useId as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Select as b } from "@base-ui/react/select";
+import { Text as t } from "../Text/index.mjs";
+import { PopupScope as n, triggerElement as r, usePopupScope as i } from "../popup/client.mjs";
+import { Field as a } from "../Field/index.mjs";
+import { ChevronDownIcon as o } from "../icons/ChevronDownIcon.mjs";
+import { labels as s, popup as c, summary as l, trigger as u, value as d } from "./MultiSelect.css.mjs";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { createContext as m, use as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Select as x } from "@base-ui/react/select";
 //#region src/MultiSelect/client.tsx
-function x({ options: e, placeholder: t, countLabel: i, disabled: o }) {
-	let { ref: s } = r(), c = _(() => new Map(e.map((e) => [e.value, e.label])), [e]);
-	return /* @__PURE__ */ d(b.Trigger, {
-		disabled: o,
+function S({ options: e, placeholder: t, countLabel: n, disabled: a }) {
+	let { ref: s } = i(), c = v(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+	return /* @__PURE__ */ f(x.Trigger, {
+		disabled: a,
 		ref: s,
-		render: n({
+		render: r({
 			variant: "secondary",
-			iconEnd: a,
-			className: l,
-			children: /* @__PURE__ */ d(b.Value, {
-				className: u,
+			iconEnd: o,
+			className: u,
+			children: /* @__PURE__ */ f(x.Value, {
+				className: d,
 				placeholder: t,
-				children: (e) => e.length > 0 ? /* @__PURE__ */ d(S, {
-					count: i.replaceAll("{count}", String(e.length)),
+				children: (e) => e.length > 0 ? /* @__PURE__ */ f(C, {
+					count: n.replaceAll("{count}", String(e.length)),
 					labels: e.map((e) => c.get(e) ?? e)
 				}) : t
 			})
 		})
 	});
 }
-function S({ labels: t, count: n }) {
-	let r = v(null), [i, a] = y(!0), s = t.join(", ");
-	g(() => {
-		let e = r.current;
+function C({ labels: n, count: r }) {
+	let i = y(null), [a, o] = b(!0), c = n.join(", ");
+	_(() => {
+		let e = i.current;
 		if (!e) return;
-		let t = () => a(e.scrollWidth <= e.clientWidth);
+		let t = () => o(e.scrollWidth <= e.clientWidth);
 		t(), document.fonts?.ready.then(t);
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [s]);
-	let l = !i && t.length > 1;
-	return /* @__PURE__ */ f(e, {
+	}, [c]);
+	let u = !a && n.length > 1;
+	return /* @__PURE__ */ p(e, {
 		as: "span",
-		className: c,
-		children: [/* @__PURE__ */ d(e, {
-			"aria-hidden": l || void 0,
+		className: l,
+		children: [/* @__PURE__ */ f(t, {
+			"aria-hidden": u || void 0,
 			as: "span",
-			className: o,
-			ref: r,
-			children: s
-		}), l && /* @__PURE__ */ d(e, {
+			className: s,
+			ref: i,
+			truncate: "box",
+			children: c
+		}), u && /* @__PURE__ */ f(t, {
 			as: "span",
 			className: "_1seauxl4",
-			children: n
+			truncate: "box",
+			children: r
 		})]
 	});
 }
-var C = p(void 0);
-function w({ children: e }) {
-	return /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(C, {
-		value: h(),
+var w = m(void 0);
+function T({ children: e }) {
+	return /* @__PURE__ */ f(n, { children: /* @__PURE__ */ f(w, {
+		value: g(),
 		children: e
 	}) });
 }
-function T({ children: e }) {
-	return /* @__PURE__ */ d(i.Label, {
-		id: m(C),
+function E({ children: e }) {
+	return /* @__PURE__ */ f(a.Label, {
+		id: h(w),
 		nativeLabel: !1,
 		children: e
 	});
 }
-function E({ children: t }) {
-	return /* @__PURE__ */ d(b.Popup, {
-		"aria-labelledby": m(C),
-		render: /* @__PURE__ */ d(e, {
+function D({ children: t }) {
+	return /* @__PURE__ */ f(x.Popup, {
+		"aria-labelledby": h(w),
+		render: /* @__PURE__ */ f(e, {
 			backgroundColor: "bgRaised",
 			borderRadius: "med",
 			boxShadow: "med",
-			className: s,
+			className: c,
 			padding: "4"
 		}),
 		children: t
 	});
 }
-function D({ children: e }) {
-	let { container: t } = r();
-	return /* @__PURE__ */ d(b.Portal, {
+function O({ children: e }) {
+	let { container: t } = i();
+	return /* @__PURE__ */ f(x.Portal, {
 		container: t,
 		children: e
 	});
 }
 //#endregion
-export { T as MultiSelectLabel, E as MultiSelectPopup, D as MultiSelectPortal, w as MultiSelectScope, x as MultiSelectTrigger };
+export { E as MultiSelectLabel, D as MultiSelectPopup, O as MultiSelectPortal, T as MultiSelectScope, S as MultiSelectTrigger };

package/dist/Tabs/index.d.mts

@@ -9,7 +9,7 @@ export type TabsTabProps = PartProps<Omit<Tabs$1.Tab.Props, keyof TextOwnProps>>
 export type TabsPanelProps = PartProps<Tabs$1.Panel.Props>;
 declare function TabsRoot({ orientation, display, flexDirection, flexWrap, gap, className, style, ...props }: TabsProps): import("react").JSX.Element;
 declare function TabsList({ display, flexWrap, gap, position, className, style, ...props }: TabsListProps): import("react").JSX.Element;
-declare function TabsTab({ children, size, font, weight, leading, paddingInline, justifyContent, minBlockSize, position, color, className, style, ...props }: TabsTabProps): import("react").JSX.Element;
+declare function TabsTab({ children, size, font, weight, leading, wrap, paddingInline, justifyContent, minBlockSize, position, color, className, style, ...props }: TabsTabProps): import("react").JSX.Element;
 declare function TabsPanel({ flexGrow, className, style, ...props }: TabsPanelProps): import("react").JSX.Element;
 export declare const Tabs: typeof TabsRoot & {
   List: typeof TabsList;

package/dist/Tabs/index.mjs

@@ -38,19 +38,19 @@ function p({ display: r = "flex", flexWrap: i = "wrap", gap: a = "4", position:
 		})
 	});
 }
-function m({ children: o, size: s = "sm", font: f = "label", weight: p = "medium", leading: m, paddingInline: h = "12", justifyContent: g = "start", minBlockSize: _ = "med", position: v = "relative", color: y = "fgMuted", className: b, style: x, ...S }) {
-	let [C, w] = t(S);
+function m({ children: o, size: s = "sm", font: f = "label", weight: p = "medium", leading: m, wrap: h, paddingInline: g = "12", justifyContent: _ = "start", minBlockSize: v = "med", position: y = "relative", color: b = "fgMuted", className: x, style: S, ...C }) {
+	let [w, T] = t(C);
 	return /* @__PURE__ */ u(d.Tab, {
-		...w,
+		...T,
 		render: /* @__PURE__ */ l(r, {
-			color: y,
-			justifyContent: g,
-			minBlockSize: _,
-			paddingInline: h,
-			position: v,
-			...C,
-			className: e(c, b),
-			style: x
+			color: b,
+			justifyContent: _,
+			minBlockSize: v,
+			paddingInline: g,
+			position: y,
+			...w,
+			className: e(c, x),
+			style: S
 		}),
 		children: [/* @__PURE__ */ l(i, {
 			as: "span",
@@ -58,6 +58,7 @@ function m({ children: o, size: s = "sm", font: f = "label", weight: p = "medium
 			font: f,
 			weight: p,
 			leading: m,
+			wrap: h,
 			children: o
 		}), /* @__PURE__ */ l(n, {
 			"aria-hidden": !0,

package/dist/Tag/Tag.css

@@ -1,2 +1,2 @@
 @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 components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{white-space:normal;text-overflow:clip;padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}
+@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Tag/index.mjs

@@ -54,6 +54,7 @@ function _({ size: a = "med", href: p, onRemove: m, removeLabel: _, display: v =
 		borderRadius: w,
 		className: e(c, l({ size: a }), O),
 		color: E,
+		"data-text-reveal": "",
 		display: v,
 		gap: b,
 		maxInlineSize: D,

package/dist/Text/Text.css

@@ -1,2 +1,2 @@
 @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 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{--_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)}._1mgdisq5{--_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)}._1mgdisq6{--_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)}._1mgdisq7{--_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)}._1mgdisq8{--_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)}._1mgdisq9{font-size:var(--font-size-xs)}._1mgdisqa{font-size:var(--font-size-sm)}._1mgdisqb{font-size:var(--font-size-med)}._1mgdisqc{font-size:var(--font-size-lg)}._1mgdisqd{font-size:var(--font-size-xl)}._1mgdisqe{font-size:var(--font-size-2xl)}._1mgdisqf{font-size:var(--font-size-3xl)}._1mgdisqg{font-size:var(--font-size-4xl)}._1mgdisqh{font-weight:var(--font-weight-regular)}._1mgdisqi{font-weight:var(--font-weight-medium)}._1mgdisqj{font-weight:var(--font-weight-semibold)}._1mgdisqk{font-weight:var(--font-weight-bold)}._1mgdisql{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqm{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqo{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))}}
+@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}}

package/dist/Text/Text.css.mjs

@@ -3,30 +3,30 @@ import "./Text.css";
 /* empty css                               */
 /* empty css                     */
 //#region src/Text/Text.css.ts
-var e = "_1mgdisq3", t = {
-	body: "_1mgdisq4",
-	heading: "_1mgdisq5",
-	display: "_1mgdisq6",
-	label: "_1mgdisq7",
-	mono: "_1mgdisq8"
-}, n = {
-	xs: "_1mgdisq9",
-	sm: "_1mgdisqa",
-	med: "_1mgdisqb",
-	lg: "_1mgdisqc",
-	xl: "_1mgdisqd",
-	"2xl": "_1mgdisqe",
-	"3xl": "_1mgdisqf",
-	"4xl": "_1mgdisqg"
+var e = "_1mgdisq3", t = "_1mgdisq4", n = {
+	body: "_1mgdisq5",
+	heading: "_1mgdisq6",
+	display: "_1mgdisq7",
+	label: "_1mgdisq8",
+	mono: "_1mgdisq9"
 }, r = {
-	regular: "_1mgdisqh",
-	medium: "_1mgdisqi",
-	semibold: "_1mgdisqj",
-	bold: "_1mgdisqk"
+	xs: "_1mgdisqa",
+	sm: "_1mgdisqb",
+	med: "_1mgdisqc",
+	lg: "_1mgdisqd",
+	xl: "_1mgdisqe",
+	"2xl": "_1mgdisqf",
+	"3xl": "_1mgdisqg",
+	"4xl": "_1mgdisqh"
 }, i = {
-	sm: "_1mgdisql",
-	med: "_1mgdisqm",
-	lg: "_1mgdisqn"
-}, a = "_1mgdisqo";
+	regular: "_1mgdisqi",
+	medium: "_1mgdisqj",
+	semibold: "_1mgdisqk",
+	bold: "_1mgdisql"
+}, a = {
+	sm: "_1mgdisqm",
+	med: "_1mgdisqn",
+	lg: "_1mgdisqo"
+}, o = { nowrap: "_1mgdisqp" }, s = "_1mgdisqq";
 //#endregion
-export { t as font, i as leading, e as root, n as size, a as truncate, r as weight };
+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

@@ -8,9 +8,10 @@ export type TextOwnProps = {
   font?: FontRole;
   leading?: keyof typeof tokens.lineHeight;
   size?: keyof typeof tokens.fontSize;
-  truncate?: boolean;
+  truncate?: boolean | "box";
   weight?: keyof typeof tokens.fontWeight;
+  wrap?: "nowrap";
 };
 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, display, overflow, className, ...props }: TextProps<T>): import("react").JSX.Element;
+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;
 //#endregion

package/dist/Text/index.mjs

@@ -1,25 +1,27 @@
 import { join as e } from "../styles/join.mjs";
 import { Box as t } from "../Box/index.mjs";
-import { font as n, leading as r, root as i, size as a, weight as o } from "./Text.css.mjs";
-import { jsx as s } from "react/jsx-runtime";
+import { font as n, leading as r, root as i, size as a, weight as o, wrap as s } from "./Text.css.mjs";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/Text/index.tsx
-function c({ as: c, size: l, font: u, weight: d, leading: f, truncate: p, display: m = "block", overflow: h = p ? "hidden" : void 0, className: g, ..._ }) {
-	let v = [
+function l({ as: l, size: u, font: d, weight: f, leading: p, truncate: m, wrap: h, display: g = "block", overflow: _ = m ? "hidden" : void 0, className: v, ...y }) {
+	let b = [
 		i,
-		u && n[u],
-		l && a[l],
-		d && o[d],
-		f && r[f],
-		p && "_1mgdisqo",
-		g
+		m === "box" && "_1mgdisq4",
+		d && n[d],
+		u && a[u],
+		f && o[f],
+		p && r[p],
+		h && s[h],
+		m === !0 && "_1mgdisqq",
+		v
 	];
-	return /* @__PURE__ */ s(t, {
-		as: c ?? "p",
-		display: m,
-		overflow: h,
-		..._,
-		className: e(...v)
+	return /* @__PURE__ */ c(t, {
+		as: l ?? "p",
+		display: g,
+		overflow: _,
+		...y,
+		className: e(...b)
 	});
 }
 //#endregion
-export { c as Text };
+export { l as Text };

package/dist/docs/Field.md

@@ -111,8 +111,9 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `font` | `"body" \| "display" \| "heading" \| "label" \| "mono"` | no |  |
 | `leading` | `"lg" \| "med" \| "sm"` | no |  |
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
-| `truncate` | `boolean` | no |  |
+| `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
+| `wrap` | `"nowrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -124,8 +125,9 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `leading` | `"lg" \| "med" \| "sm"` | no |  |
 | `match` | `boolean \| keyof ValidityState` | no | Determines whether to show the error message according to the field's [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState). Specifying `true` will always show the error message, and lets external libraries control the visibility. |
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
-| `truncate` | `boolean` | no |  |
+| `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
+| `wrap` | `"nowrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -137,7 +139,8 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `leading` | `"lg" \| "med" \| "sm"` | no |  |
 | `nativeLabel` | `boolean` | no | Whether the component renders a native `<label>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a label (for example, `<div>`).  This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button. |
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
-| `truncate` | `boolean` | no |  |
+| `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
+| `wrap` | `"nowrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Heading.md

@@ -63,7 +63,8 @@ Generated from the TypeScript types.
 | `font` | `"body" \| "display" \| "heading" \| "label" \| "mono"` | no |  |
 | `leading` | `"lg" \| "med" \| "sm"` | no |  |
 | `size` | `"2xl" \| "lg" \| "med" \| "sm" \| "xl"` | no |  |
-| `truncate` | `boolean` | no |  |
+| `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
+| `wrap` | `"nowrap"` | no |  |
 
 Also accepts every `<h2>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/Tabs.md

@@ -126,5 +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 |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Text.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-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` and `truncate`.
+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`.
 
 ## When to use
 
@@ -27,6 +27,8 @@ The base of all visible text, and the primitive every text component builds on.
 - `leading` takes a unitless line height: `sm`, `med` (default) or `lg`. The trim follows it.
 - `color` takes a color role (`fg`, `fgMuted`, `accent`, …), never a raw color. Unset, it inherits.
 - `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.
 - The trim is two pseudo-elements; do not style `::before` or `::after` on a Text.
 - No native `text-box`; capsize only (ADR 0016).
 
@@ -47,6 +49,12 @@ The base of all visible text, and the primitive every text component builds on.
 </Text>
 ```
 
+```tsx
+<Text as="span" font="label" size="sm" weight="medium" wrap="nowrap">
+  Beta
+</Text>
+```
+
 ## Don't
 
 ```tsx
@@ -84,7 +92,8 @@ Generated from the TypeScript types.
 | `font` | `"body" \| "display" \| "heading" \| "label" \| "mono"` | no |  |
 | `leading` | `"lg" \| "med" \| "sm"` | no |  |
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
-| `truncate` | `boolean` | no |  |
+| `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
+| `wrap` | `"nowrap"` | no |  |
 
 Also accepts every `<p>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/llms.txt

@@ -23,7 +23,7 @@
 - [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 `bgMuted` fill 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` and `truncate`.
+- [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`.
 - [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.
 
 ## Reference

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "components": [
     {
       "name": "AlertDialog",
@@ -674,7 +674,7 @@
             },
             {
               "name": "truncate",
-              "type": "boolean",
+              "type": "\"box\" | boolean",
               "required": false
             },
             {
@@ -687,6 +687,14 @@
                 "regular",
                 "semibold"
               ]
+            },
+            {
+              "name": "wrap",
+              "type": "\"nowrap\"",
+              "required": false,
+              "values": [
+                "nowrap"
+              ]
             }
           ]
         },
@@ -739,7 +747,7 @@
             },
             {
               "name": "truncate",
-              "type": "boolean",
+              "type": "\"box\" | boolean",
               "required": false
             },
             {
@@ -752,6 +760,14 @@
                 "regular",
                 "semibold"
               ]
+            },
+            {
+              "name": "wrap",
+              "type": "\"nowrap\"",
+              "required": false,
+              "values": [
+                "nowrap"
+              ]
             }
           ]
         },
@@ -804,7 +820,7 @@
             },
             {
               "name": "truncate",
-              "type": "boolean",
+              "type": "\"box\" | boolean",
               "required": false
             },
             {
@@ -817,6 +833,14 @@
                 "regular",
                 "semibold"
               ]
+            },
+            {
+              "name": "wrap",
+              "type": "\"nowrap\"",
+              "required": false,
+              "values": [
+                "nowrap"
+              ]
             }
           ]
         }
@@ -876,7 +900,7 @@
         },
         {
           "name": "truncate",
-          "type": "boolean",
+          "type": "\"box\" | boolean",
           "required": false
         },
         {
@@ -889,6 +913,14 @@
             "regular",
             "semibold"
           ]
+        },
+        {
+          "name": "wrap",
+          "type": "\"nowrap\"",
+          "required": false,
+          "values": [
+            "nowrap"
+          ]
         }
       ],
       "element": "h2",
@@ -1677,6 +1709,14 @@
                 "regular",
                 "semibold"
               ]
+            },
+            {
+              "name": "wrap",
+              "type": "\"nowrap\"",
+              "required": false,
+              "values": [
+                "nowrap"
+              ]
             }
           ]
         }
@@ -1763,7 +1803,7 @@
         },
         {
           "name": "truncate",
-          "type": "boolean",
+          "type": "\"box\" | boolean",
           "required": false
         },
         {
@@ -1776,6 +1816,14 @@
             "regular",
             "semibold"
           ]
+        },
+        {
+          "name": "wrap",
+          "type": "\"nowrap\"",
+          "required": false,
+          "values": [
+            "nowrap"
+          ]
         }
       ],
       "element": "p",

package/dist/docs/theming.md

@@ -57,3 +57,5 @@ A provider's `color-scheme` stops at its `div`, so the page canvas and scrollbar
 ## Fonts
 
 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.

package/dist/styles/button-parts.css.mjs

@@ -0,0 +1,4 @@
+//#region src/styles/button-parts.css.ts
+var e = "_1gwwloa0", t = "_1gwwloa1", n = "_1gwwloa2";
+//#endregion
+export { t as content, n as label, e as stack };

package/package.json

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