@jonmilner/ui 0.2.2 → 0.2.4

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/Button.md

@@ -73,7 +73,7 @@ The labelled action: a `<button type="button">` with the house look, or a link s
 ## Accessibility
 
 - A button that goes somewhere is a link (`as="a"` with `href`); one that does something is a button.
-- Disabled and loading buttons stay in the tab order, so keyboard and screen reader users find them; Enter and Space do nothing while either is set.
+- Disabled and loading buttons stay in the tab order, so keyboard and screen reader users find them; Enter and Space do nothing while either is set. The blocked click still bubbles to an ancestor's `onClick` (see Clickable's Rules).
 - State is never color alone: disabled adds a dashed border, loading shows the dots. Under forced colors the button keeps its system colors (`LinkText` fill for `primary` and `danger`, a `CanvasText` border for `secondary`) and a disabled one is `GrayText`. Hover draws no tint there, so the system pairs keep their contrast.
 - Under reduced motion the dots hold still.
 - Text on every variant passes 4.5:1 at rest and on hover in light and dark modes.

package/dist/docs/Clickable.md

@@ -21,11 +21,26 @@ The low-level base for everything a user presses: a `<button type="button">` by
 - `busy` renders `aria-busy="true"` and blocks activation the same way. Pair it with a visible change (a spinner or new label).
 - Set state with `disabled` and `busy`, not `aria-disabled` and `aria-busy`. A raw attribute still blocks the click, since JSX cannot reject hyphenated attributes, but the props are the API.
 - `as="button"` gets `type="button"`; pass `type="submit"` for a form's submit button. A component passed as `as` gets no `type`; it sets its own.
-- Only `onClick` is blocked. Do not put actions in `onPointerDown`, `onMouseDown` or `onKeyDown`.
+- Only `onClick` and `onAuxClick` are blocked. Do not put actions in `onPointerDown`, `onMouseDown` or `onKeyDown`.
 - Layout and the target size are default style props (`display="inline-flex"`, centered, `minInlineSize` and `minBlockSize` `"xs"`, 24px). Raise them freely; never set them below `"xs"`.
 - Style props win over the stripped chrome, so `padding`, `color` and `backgroundColor` apply as given.
 - The focus ring is the library's one ring (`outline` in the `focus` color, `Highlight` under forced colors). Do not restyle `:focus-visible` or `outline`.
 - A client component (`'use client'`): it wraps `onClick`. Server components can render it with serializable props.
+- A blocked click still bubbles: Clickable never calls `stopPropagation`, so an ancestor's `onClick` and `onAuxClick` run, unlike a native disabled button, which fires no click. A row handler or analytics listener sees it. An ancestor that must not act on a disabled or busy child checks with `closest`, since the target can be a span inside the control:
+
+```tsx
+// Clicking the disabled Delete still reaches the row; the check keeps `select` from running.
+<li
+  onClick={(event) => {
+    if ((event.target as Element).closest('[aria-disabled="true"], [aria-busy="true"]')) return;
+    select();
+  }}
+>
+  <Clickable disabled onClick={remove}>
+    Delete
+  </Clickable>
+</li>
+```
 
 ## Do
 

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/IconButton.md

@@ -62,7 +62,7 @@ A compact button whose only visible content is an icon, for an action the icon m
 
 - The `label` is announced as the button's name; the icon is hidden from assistive technology.
 - The label is not shown on hover or focus. Sighted users who don't recognise the icon get no text, so keep IconButton to widely understood icons.
-- A disabled IconButton stays in the tab order, and Enter and Space do nothing. State is never color alone: disabled adds a dashed border.
+- A disabled IconButton stays in the tab order, and Enter and Space do nothing; the blocked click still bubbles to an ancestor's `onClick` (see Clickable's Rules). State is never color alone: disabled adds a dashed border.
 - Every size is at least 24 by 24 CSS px (WCAG 2.2 target size); the icon on each variant passes 4.5:1 at rest and on hover in light and dark modes. Under forced colors it keeps Button's system colors.
 
 ## Props

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.4",
   "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.4",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"