@weasel-js/ui 1.7.1 → 1.7.2

package/dist/chunks/{PropertyField-CV_Gw57S.js → PropertyField-BbNqK8xr.js}

@@ -1,111 +1,113 @@
 import { t as e } from "./dlog-F0I8KsIW.js";
 import { n as t, r as n } from "./Tooltip-C6eFCYxw.js";
 import { t as r } from "./stance-BFQpS_fL.js";
-import { n as i } from "./InlineRange-P01ABSzo.js";
-import { t as a } from "./ColorField-BLs9fbeq.js";
-import { t as o } from "./Select-BppLsJTz.js";
-import { t as s } from "./FontFamilySelect-CGJ5OIOy.js";
-import { t as c } from "./FontWeightSelect-RbcXYJPS.js";
-import { t as l } from "./Input-CzwvCZs_.js";
-import { n as u, t as d } from "./NumberField-DLXXgh48.js";
+import { n as i } from "./InlineRange-DPjIsJB3.js";
+import { t as a } from "./ColorField-BwlelY26.js";
+import { t as o } from "./Select-ouV8O6cp.js";
+import { t as s } from "./FontFamilySelect-DEvMXyZd.js";
+import { t as c } from "./FontWeightSelect-BLQ_LMJF.js";
+import { t as l } from "./Input-D7SDKbST.js";
+import { n as u, t as d } from "./NumberField-DS0WSiin.js";
 import { t as f } from "./ToggleBar-Z2jZiguF.js";
-import { t as p } from "./PaintInput-jQRxM95Y.js";
-import { t as m } from "./PaintField-C0hoXc0Y.js";
-import { n as h, t as g } from "./RadioGroup-4dbzqvGy.js";
+import { t as p } from "./PaintInput-DaQMeBsI.js";
+import { t as m } from "./PaintField-BdmQM53v.js";
+import { n as h, t as g } from "./RadioGroup-B70_M-gT.js";
 import { t as _ } from "./Switch-CSYmcM8y.js";
 import { t as v } from "./checkbox.module-DLQV9tMX.js";
 import { getAlpha01 as y, toHex8 as b, withAlpha01 as x } from "@weasel-js/core";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { createContext as ee, forwardRef as T, useContext as te, useEffect as E, useId as ne, useRef as D, useState as O } from "react";
-import { Focusable as k } from "react-aria-components";
-import { decimal as A, parseAs as re, qty as j } from "@weasel-js/quantity";
-var M = {
-	panel: "_panel_tasmr_9",
-	list: "_list_tasmr_3",
-	row: "_row_tasmr_4",
-	group: "_group_tasmr_4",
-	subpanel: "_subpanel_tasmr_3",
-	card: "_card_tasmr_37",
-	cardList: "_cardList_tasmr_37",
-	readout: "_readout_tasmr_42",
-	readoutInput: "_readoutInput_tasmr_43",
-	panelTitle: "_panelTitle_tasmr_72",
-	panelHeader: "_panelHeader_tasmr_84",
-	panelActions: "_panelActions_tasmr_97",
-	listPairs: "_listPairs_tasmr_3",
-	rowColor: "_rowColor_tasmr_4",
-	span: "_span_tasmr_505",
-	listOneUp: "_listOneUp_tasmr_513",
-	densityTight: "_densityTight_tasmr_524",
-	densityNormal: "_densityNormal_tasmr_536",
-	densityRoomy: "_densityRoomy_tasmr_548",
-	alignStart: "_alignStart_tasmr_574",
-	alignCenter: "_alignCenter_tasmr_580",
-	alignEnd: "_alignEnd_tasmr_586",
-	alignBaseline: "_alignBaseline_tasmr_592",
-	rowInline: "_rowInline_tasmr_623",
-	rowLabel: "_rowLabel_tasmr_629",
-	rowBlock: "_rowBlock_tasmr_654",
-	rowCheckbox: "_rowCheckbox_tasmr_655",
-	readoutAfter: "_readoutAfter_tasmr_674",
-	readoutText: "_readoutText_tasmr_685",
-	help: "_help_tasmr_698",
-	autoToggle: "_autoToggle_tasmr_732",
-	readoutGroup: "_readoutGroup_tasmr_680",
-	readoutUnit: "_readoutUnit_tasmr_809",
-	fieldUnitGroup: "_fieldUnitGroup_tasmr_834",
-	numberField: "_numberField_tasmr_842",
-	toggleBar: "_toggleBar_tasmr_882",
-	textField: "_textField_tasmr_900",
-	select: "_select_tasmr_913",
-	dialogTrigger: "_dialogTrigger_tasmr_1034",
-	dialogSummary: "_dialogSummary_tasmr_1069",
-	dialogGlyph: "_dialogGlyph_tasmr_1077",
-	colorField: "_colorField_tasmr_1151",
-	dimmed: "_dimmed_tasmr_1232",
-	cellReadout: "_cellReadout_tasmr_1238",
-	textarea: "_textarea_tasmr_1244",
-	groupHeadRow: "_groupHeadRow_tasmr_1280",
-	groupTitle: "_groupTitle_tasmr_1288",
-	groupLeading: "_groupLeading_tasmr_1294",
-	groupActions: "_groupActions_tasmr_1295",
-	note: "_note_tasmr_1492",
-	groupTitleMid: "_groupTitleMid_tasmr_1522",
-	groupTwisty: "_groupTwisty_tasmr_1528",
-	groupBody: "_groupBody_tasmr_4",
-	groupPairs: "_groupPairs_tasmr_1557",
-	groupOneUp: "_groupOneUp_tasmr_1570",
-	subpanelTitle: "_subpanelTitle_tasmr_1710",
-	rowAuto: "_rowAuto_tasmr_1747"
+import { createContext as T, forwardRef as E, useContext as D, useEffect as O, useId as k, useLayoutEffect as ee, useRef as A, useState as j } from "react";
+import { Focusable as te } from "react-aria-components";
+import { decimal as ne, parseAs as re, qty as M } from "@weasel-js/quantity";
+var N = {
+	panel: "_panel_hs84t_9",
+	list: "_list_hs84t_3",
+	row: "_row_hs84t_4",
+	group: "_group_hs84t_4",
+	subpanel: "_subpanel_hs84t_3",
+	card: "_card_hs84t_37",
+	cardList: "_cardList_hs84t_37",
+	readout: "_readout_hs84t_42 _numeric_zns9n_4",
+	readoutInput: "_readoutInput_hs84t_43 _numeric_zns9n_4",
+	panelTitle: "_panelTitle_hs84t_72",
+	panelHeader: "_panelHeader_hs84t_84",
+	panelActions: "_panelActions_hs84t_97",
+	listPairs: "_listPairs_hs84t_3",
+	rowColor: "_rowColor_hs84t_4",
+	span: "_span_hs84t_505",
+	listOneUp: "_listOneUp_hs84t_513",
+	densityTight: "_densityTight_hs84t_524",
+	densityNormal: "_densityNormal_hs84t_536",
+	densityRoomy: "_densityRoomy_hs84t_548",
+	alignStart: "_alignStart_hs84t_574",
+	alignCenter: "_alignCenter_hs84t_580",
+	alignEnd: "_alignEnd_hs84t_586",
+	alignBaseline: "_alignBaseline_hs84t_592",
+	rowInline: "_rowInline_hs84t_623",
+	rowLabel: "_rowLabel_hs84t_629",
+	rowBlock: "_rowBlock_hs84t_654",
+	rowCheckbox: "_rowCheckbox_hs84t_655",
+	readoutAfter: "_readoutAfter_hs84t_674",
+	readoutText: "_readoutText_hs84t_685 _numeric_zns9n_4",
+	help: "_help_hs84t_699",
+	autoToggle: "_autoToggle_hs84t_733",
+	readoutGroup: "_readoutGroup_hs84t_680",
+	readoutUnit: "_readoutUnit_hs84t_812",
+	fieldUnitGroup: "_fieldUnitGroup_hs84t_837",
+	numberField: "_numberField_hs84t_845",
+	colorField: "_colorField_hs84t_898",
+	toggleBar: "_toggleBar_hs84t_911",
+	textField: "_textField_hs84t_929",
+	select: "_select_hs84t_942",
+	dialogTrigger: "_dialogTrigger_hs84t_1063",
+	dialogSummary: "_dialogSummary_hs84t_1098",
+	dialogGlyph: "_dialogGlyph_hs84t_1106",
+	dimmed: "_dimmed_hs84t_1259",
+	cellReadout: "_cellReadout_hs84t_1265",
+	textarea: "_textarea_hs84t_1271",
+	groupHeadRow: "_groupHeadRow_hs84t_1307",
+	groupTitle: "_groupTitle_hs84t_1315",
+	groupLeading: "_groupLeading_hs84t_1321",
+	groupActions: "_groupActions_hs84t_1322",
+	note: "_note_hs84t_1519",
+	groupTitleMid: "_groupTitleMid_hs84t_1549",
+	groupTwisty: "_groupTwisty_hs84t_1555",
+	groupBody: "_groupBody_hs84t_4",
+	groupPairs: "_groupPairs_hs84t_1584",
+	groupOneUp: "_groupOneUp_hs84t_1597",
+	subpanelTitle: "_subpanelTitle_hs84t_1737",
+	rowAuto: "_rowAuto_hs84t_1774",
+	rowAutoDimmed: "_rowAutoDimmed_hs84t_1784",
+	rowHint: "_rowHint_hs84t_1789"
+}, P = {
+	tight: N.densityTight,
+	normal: N.densityNormal,
+	roomy: N.densityRoomy
 }, ie = {
-	tight: M.densityTight,
-	normal: M.densityNormal,
-	roomy: M.densityRoomy
-}, ae = {
-	start: M.alignStart,
-	center: M.alignCenter,
-	end: M.alignEnd,
-	baseline: M.alignBaseline
+	start: N.alignStart,
+	center: N.alignCenter,
+	end: N.alignEnd,
+	baseline: N.alignBaseline
 };
-function N(e, { density: t, align: n }, r) {
+function F(e, { density: t, align: n }, r) {
 	return [
 		e,
-		t && ie[t],
-		n && ae[n],
+		t && P[t],
+		n && ie[n],
 		r
 	].filter(Boolean).join(" ");
 }
-var P = ee(!1);
-function oe({ title: e, actions: t, selectable: n, children: i, className: a, density: o, align: s, stance: c, tone: l }) {
-	let u = te(P), d = r({
+var I = T(!1);
+function ae({ title: e, actions: t, selectable: n, children: i, className: a, density: o, align: s, stance: c, tone: l }) {
+	let u = D(I), d = r({
 		stance: c,
 		tone: l
 	}), f = e != null && /* @__PURE__ */ C("h2", {
-		className: M.panelTitle,
+		className: N.panelTitle,
 		children: e
 	});
 	return /* @__PURE__ */ w("div", {
-		className: N(M.panel, {
+		className: F(N.panel, {
 			density: o,
 			align: s
 		}, a),
@@ -113,96 +115,126 @@ function oe({ title: e, actions: t, selectable: n, children: i, className: a, de
 		"data-nested": u || void 0,
 		"data-selectable": (n ?? c === "debug") || void 0,
 		children: [t == null ? f : /* @__PURE__ */ w("div", {
-			className: M.panelHeader,
+			className: N.panelHeader,
 			children: [f, /* @__PURE__ */ C("div", {
-				className: M.panelActions,
+				className: N.panelActions,
 				children: t
 			})]
-		}), /* @__PURE__ */ C(P.Provider, {
+		}), /* @__PURE__ */ C(I.Provider, {
 			value: !0,
 			children: i
 		})]
 	});
 }
-var se = T(function({ children: e, className: t, pack: n = "auto-color", density: r, align: i }, a) {
-	let o = `${M.list}${n === "pairs" ? ` ${M.listPairs}` : n === "one-up" ? ` ${M.listOneUp}` : ""}`;
+var oe = E(function({ children: e, className: t, pack: n = "auto-color", density: r, align: i }, a) {
+	let o = `${N.list}${n === "pairs" ? ` ${N.listPairs}` : n === "one-up" ? ` ${N.listOneUp}` : ""}`;
 	return /* @__PURE__ */ C("div", {
 		ref: a,
-		className: N(o, {
+		className: F(o, {
 			density: r,
 			align: i
 		}, t),
 		children: e
 	});
 });
-function ce({ children: e, className: t }) {
+function se({ children: e, className: t }) {
 	return /* @__PURE__ */ C("div", {
-		className: t ? `${M.span} ${t}` : M.span,
+		className: t ? `${N.span} ${t}` : N.span,
 		children: e
 	});
 }
-function le({ children: e, className: t }) {
+function ce({ children: e, className: t }) {
 	return /* @__PURE__ */ C("p", {
-		className: t ? `${M.note} ${t}` : M.note,
+		className: t ? `${N.note} ${t}` : N.note,
 		children: e
 	});
 }
-function F({ label: e, readout: t, description: n, variant: r = "default", layout: i, span: a, children: o, htmlFor: s, group: c, className: l, density: u, align: d, auto: f, onAutoChange: p }) {
-	let m = r === "color" ? M.rowColor : r === "checkbox" ? M.rowCheckbox : "", h = r === "default" ? "block" : "inline", g = i ?? h, _ = g === h ? "" : g === "inline" ? M.rowInline : M.rowBlock, v = N([
-		M.row,
-		m,
-		_,
-		a && M.span,
-		f && M.rowAuto
+function L({ label: e, readout: t, description: n, variant: r = "default", layout: i, span: a, children: o, htmlFor: s, group: c, className: l, density: u, align: d, auto: f, onAutoChange: p, autoControl: m = "hidden", hint: h }) {
+	let g = r === "color" ? N.rowColor : r === "checkbox" ? N.rowCheckbox : "", _ = r === "default" ? "block" : "inline", v = i ?? _, y = v === _ ? "" : v === "inline" ? N.rowInline : N.rowBlock, b = F([
+		N.row,
+		g,
+		y,
+		a && N.span,
+		f && (m === "dimmed" ? N.rowAutoDimmed : N.rowAuto)
 	].filter(Boolean).join(" "), {
 		density: u,
 		align: d
-	}, l), y = g === "inline" && t != null, b = /* @__PURE__ */ w("span", {
-		className: M.rowLabel,
+	}, l), x = v === "inline" && t != null, S = A(null), T = A(null), E = le(S, T, v === "inline"), D = /* @__PURE__ */ w("span", {
+		className: N.rowLabel,
+		ref: T,
 		children: [
-			p ? /* @__PURE__ */ C(I, {
+			p ? /* @__PURE__ */ C(ue, {
 				auto: f ?? !1,
 				label: e,
 				onChange: p
 			}) : e,
-			n ? /* @__PURE__ */ C(L, {
+			h != null && /* @__PURE__ */ C("span", {
+				className: N.rowHint,
+				children: h
+			}),
+			n ? /* @__PURE__ */ C(R, {
 				label: e,
 				description: n
 			}) : null,
-			t != null && !y && /* @__PURE__ */ C("em", {
-				className: M.readout,
+			t != null && !x && /* @__PURE__ */ C("em", {
+				className: N.readout,
 				children: t
 			})
 		]
-	}), x = y ? /* @__PURE__ */ C("em", {
-		className: `${M.readout} ${M.readoutAfter}`,
+	}), O = x ? /* @__PURE__ */ C("em", {
+		className: `${N.readout} ${N.readoutAfter}`,
 		children: t
-	}) : null;
+	}) : null, k = E ? { "data-multiline": "" } : {};
 	return c ? /* @__PURE__ */ w("div", {
-		className: v,
+		className: b,
+		ref: S,
+		...k,
 		children: [
-			b,
+			D,
 			o,
-			x
+			O
 		]
 	}) : /* @__PURE__ */ w("label", {
-		className: v,
+		className: b,
 		htmlFor: s,
+		ref: S,
+		...k,
 		children: [
-			b,
+			D,
 			o,
-			x
+			O
 		]
 	});
 }
-function I({ auto: e, label: t, onChange: n }) {
+function le(e, t, n) {
+	let [r, i] = j(!1);
+	return ee(() => {
+		let r = e.current, a = t.current;
+		if (!n || !r || !a || typeof ResizeObserver > "u") {
+			i(!1);
+			return;
+		}
+		let o = new ResizeObserver(() => {
+			let e = getComputedStyle(a), t = Number.parseFloat(e.lineHeight) || Number.parseFloat(e.fontSize) * 1.2, n = Number.parseFloat(getComputedStyle(r).minHeight) || t, o = a.getBoundingClientRect().height > t * 1.5, s = Array.from(r.children).some((e) => e !== a && e.getBoundingClientRect().height > n * 1.5);
+			i(o || s);
+		});
+		o.observe(r), o.observe(a);
+		for (let e of Array.from(r.children)) o.observe(e);
+		return () => o.disconnect();
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}
+function ue({ auto: e, label: t, onChange: n }) {
 	let r = typeof t == "string" ? t : "this setting", i = (t) => {
 		t.preventDefault(), t.stopPropagation(), n(!e);
 	};
 	return /* @__PURE__ */ C("span", {
 		role: "button",
 		tabIndex: 0,
-		className: M.autoToggle,
+		className: N.autoToggle,
 		"aria-pressed": !e,
 		"aria-label": `Pin ${r}`,
 		onClick: i,
@@ -213,11 +245,11 @@ function I({ auto: e, label: t, onChange: n }) {
 		children: t
 	});
 }
-function L({ label: e, description: r }) {
+function R({ label: e, description: r }) {
 	let i = typeof e == "string" ? e : "this setting";
-	return /* @__PURE__ */ w(n, { children: [/* @__PURE__ */ C(k, { children: /* @__PURE__ */ C("button", {
+	return /* @__PURE__ */ w(n, { children: [/* @__PURE__ */ C(te, { children: /* @__PURE__ */ C("button", {
 		type: "button",
-		className: M.help,
+		className: N.help,
 		"aria-label": `About ${i}`,
 		onClick: (e) => {
 			e.preventDefault(), e.stopPropagation();
@@ -228,13 +260,13 @@ function L({ label: e, description: r }) {
 }
 //#endregion
 //#region src/components/Properties/PropertyField.tsx
-function R(e) {
-	let { label: t, readout: n, description: r, layout: i, span: a, density: o, align: s, auto: c, onAutoChange: l, rowClassName: u, controlClassName: d, ...f } = e, p = ne(), m = {
+function de(e) {
+	let { label: t, readout: n, description: r, layout: i, span: a, density: o, align: s, auto: c, onAutoChange: l, rowClassName: u, controlClassName: d, ...f } = e, p = k(), m = {
 		...f,
 		name: f.name ?? X(t),
 		className: d,
 		id: p
-	}, h = B(m), g = {
+	}, h = V(m), g = {
 		label: t,
 		description: r,
 		layout: i,
@@ -248,24 +280,49 @@ function R(e) {
 		group: h.group,
 		htmlFor: h.group || m.kind === "font-family" || m.kind === "font-weight" ? void 0 : p
 	};
-	return m.kind === "number" && m.control === "slider" ? /* @__PURE__ */ C(F, {
-		...g,
-		readout: Y(n) ?? /* @__PURE__ */ C(J, { ...m }),
-		children: /* @__PURE__ */ C(q, { ...m })
-	}) : /* @__PURE__ */ C(F, {
+	return m.kind === "number" && m.control === "slider" ? /* @__PURE__ */ C(B, {
+		row: g,
+		readout: n,
+		control: m
+	}) : /* @__PURE__ */ C(L, {
 		...g,
 		readout: n,
-		children: /* @__PURE__ */ C(V, { ...m })
+		children: /* @__PURE__ */ C(H, { ...m })
 	});
 }
-function z(e) {
+function fe(e) {
 	let t = e;
-	return t.kind === "number" && t.control === "slider" ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(q, { ...t }), /* @__PURE__ */ C("span", {
-		className: M.cellReadout,
+	return t.kind === "number" && t.control === "slider" ? /* @__PURE__ */ C(pe, { ...t }) : /* @__PURE__ */ C(H, { ...t });
+}
+function z(e) {
+	let [t, n] = j(), { onInput: r, onChange: i } = e;
+	return r ? {
+		...e,
+		value: t ?? e.value,
+		onInput: (e) => {
+			n(e), r(e);
+		},
+		onChange: (e) => {
+			n(void 0), i(e);
+		}
+	} : e;
+}
+function B({ row: e, readout: t, control: n }) {
+	let r = z(n);
+	return /* @__PURE__ */ C(L, {
+		...e,
+		readout: Y(t) ?? /* @__PURE__ */ C(J, { ...r }),
+		children: /* @__PURE__ */ C(q, { ...r })
+	});
+}
+function pe(e) {
+	let t = z(e);
+	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(q, { ...t }), /* @__PURE__ */ C("span", {
+		className: N.cellReadout,
 		children: /* @__PURE__ */ C(J, { ...t })
-	})] }) : /* @__PURE__ */ C(V, { ...t });
+	})] });
 }
-function B(e) {
+function V(e) {
 	switch (e.kind) {
 		case "boolean": return {
 			variant: "checkbox",
@@ -289,14 +346,14 @@ function B(e) {
 		};
 	}
 }
-function V(e) {
+function H(e) {
 	switch (e.kind) {
-		case "boolean": return /* @__PURE__ */ C(U, { ...e });
-		case "number": return /* @__PURE__ */ C(de, { ...e });
-		case "string": return /* @__PURE__ */ C(me, { ...e });
-		case "enum": return /* @__PURE__ */ C(he, { ...e });
-		case "color": return /* @__PURE__ */ C(ge, { ...e });
-		case "paint": return /* @__PURE__ */ C(_e, { ...e });
+		case "boolean": return /* @__PURE__ */ C(me, { ...e });
+		case "number": return /* @__PURE__ */ C(ge, { ...e });
+		case "string": return /* @__PURE__ */ C(ye, { ...e });
+		case "enum": return /* @__PURE__ */ C(be, { ...e });
+		case "color": return /* @__PURE__ */ C(xe, { ...e });
+		case "paint": return /* @__PURE__ */ C(Se, { ...e });
 		case "font-family": return /* @__PURE__ */ C(s, {
 			className: e.className,
 			value: e.mixed ? void 0 : e.value,
@@ -317,16 +374,16 @@ function V(e) {
 		default: throw Error(`PropertyControl: no control for kind "${e.kind}"`);
 	}
 }
-function H({ mixed: e, unset: t, children: n }) {
+function U({ mixed: e, unset: t, children: n }) {
 	return !e && !t ? /* @__PURE__ */ C(S, { children: n }) : /* @__PURE__ */ C("span", {
-		className: M.dimmed,
+		className: N.dimmed,
 		title: e ? "Mixed" : "Not set",
 		children: n
 	});
 }
-function U(e) {
-	let t = !e.mixed && e.value === !0, n = D(null);
-	return E(() => {
+function me(e) {
+	let t = !e.mixed && e.value === !0, n = A(null);
+	return O(() => {
 		n.current && (n.current.indeterminate = e.mixed === !0);
 	}), e.control === "toggle" ? /* @__PURE__ */ C(f, {
 		mode: "multiple",
@@ -342,7 +399,7 @@ function U(e) {
 		value: t ? ["on"] : [],
 		mixedValues: e.mixed ? ["on"] : [],
 		onChange: (t) => e.onChange(t.includes("on"))
-	}) : e.control === "switch" ? /* @__PURE__ */ C(H, {
+	}) : e.control === "switch" ? /* @__PURE__ */ C(U, {
 		mixed: e.mixed,
 		unset: e.unset,
 		children: /* @__PURE__ */ C(_, {
@@ -351,7 +408,7 @@ function U(e) {
 			onChange: e.onChange,
 			"aria-label": e.name
 		})
-	}) : /* @__PURE__ */ C(H, {
+	}) : /* @__PURE__ */ C(U, {
 		unset: e.unset,
 		children: /* @__PURE__ */ C("input", {
 			ref: n,
@@ -364,11 +421,11 @@ function U(e) {
 		})
 	});
 }
-function ue(e) {
-	let t = D(null), n = D(e);
-	return E(() => {
+function he(e) {
+	let t = A(null), n = A(e);
+	return O(() => {
 		n.current = e;
-	}), E(() => {
+	}), O(() => {
 		let e = t.current;
 		if (!e) return;
 		let r = () => n.current?.(e.value);
@@ -382,10 +439,10 @@ function W(e, t) {
 	}) : e;
 }
 var G = () => {};
-function de(e) {
+function ge(e) {
 	let t = !e.mixed && typeof e.value == "number" && Number.isFinite(e.value), n = /* @__PURE__ */ C(d, {
 		id: e.id,
-		className: e.className ? `${M.numberField} ${e.className}` : M.numberField,
+		className: e.className ? `${N.numberField} ${e.className}` : N.numberField,
 		value: t ? e.value : NaN,
 		placeholder: e.mixed ? "Mixed" : e.placeholder,
 		minValue: e.min,
@@ -399,8 +456,8 @@ function de(e) {
 		onChange: e.onInput ? e.onChange : G
 	});
 	return e.unit == null ? n : /* @__PURE__ */ w("span", {
-		className: M.fieldUnitGroup,
-		children: [n, W(e.unit, M.readoutUnit)]
+		className: N.fieldUnitGroup,
+		children: [n, W(e.unit, N.readoutUnit)]
 	});
 }
 function K(e) {
@@ -411,7 +468,7 @@ function K(e) {
 	};
 }
 function q(t) {
-	let { min: n, max: r, step: a } = K(t), o = t.onInput ?? t.onChange, s = t.onInput ? t.onChange : void 0, c = ue(s && ((e) => s(Number(e)))), l = !t.mixed && typeof t.value == "number" && Number.isFinite(t.value) ? Math.min(Math.max(t.value, n), r) : n;
+	let { min: n, max: r, step: a } = K(t), o = t.onInput ?? t.onChange, s = t.onInput ? t.onChange : void 0, c = he(s && ((e) => s(Number(e)))), l = !t.mixed && typeof t.value == "number" && Number.isFinite(t.value) ? Math.min(Math.max(t.value, n), r) : n;
 	return /* @__PURE__ */ C("input", {
 		ref: c,
 		type: "range",
@@ -436,11 +493,11 @@ function q(t) {
 function J(e) {
 	let { min: t, max: n, step: r } = K(e);
 	if (e.mixed || typeof e.value != "number" || !Number.isFinite(e.value)) return /* @__PURE__ */ C(S, { children: Y("—") });
-	let i = r >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(r)))), a = e.display ?? A({
+	let i = r >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(r)))), a = e.display ?? ne({
 		places: i,
 		grouping: !1
 	});
-	return /* @__PURE__ */ C(fe, {
+	return /* @__PURE__ */ C(_e, {
 		name: e.name,
 		value: e.value,
 		min: t,
@@ -456,15 +513,15 @@ function J(e) {
 }
 function Y(e) {
 	return typeof e != "string" && typeof e != "number" ? e : /* @__PURE__ */ C("span", {
-		className: M.readoutGroup,
+		className: N.readoutGroup,
 		children: /* @__PURE__ */ C("span", {
-			className: M.readoutText,
+			className: N.readoutText,
 			children: e
 		})
 	});
 }
-function fe({ name: e, value: t, min: n, max: r, step: i, display: a, format: o, unit: s, onCommit: c }) {
-	let [l, d] = O(null), f = (e) => o ? String(o(e)) : j(e, a).text, p = (e) => re(e, a), m = l === null ? f(t) : l, h = { "--wzl-property-readout-fit": `${Math.max(f(n).length, f(r).length)}ch` }, g = () => {
+function _e({ name: e, value: t, min: n, max: r, step: i, display: a, format: o, unit: s, onCommit: c }) {
+	let [l, d] = j(null), f = (e) => o ? String(o(e)) : M(e, a).text, p = (e) => re(e, a), m = l === null ? f(t) : l, h = { "--wzl-property-readout-fit": `${Math.max(f(n).length, f(r).length)}ch` }, g = () => {
 		if (l !== null) {
 			let e = p(l);
 			Number.isFinite(e) && c(Math.min(r, Math.max(n, e)));
@@ -472,17 +529,17 @@ function fe({ name: e, value: t, min: n, max: r, step: i, display: a, format: o,
 		d(null);
 	};
 	return /* @__PURE__ */ w("span", {
-		className: M.readoutGroup,
+		className: N.readoutGroup,
 		children: [/* @__PURE__ */ C("input", {
 			type: "text",
 			role: "spinbutton",
 			"aria-label": e,
 			"aria-valuenow": t,
-			"aria-valuetext": o ? f(t) : j(t, a).spoken,
+			"aria-valuetext": o ? f(t) : M(t, a).spoken,
 			"aria-valuemin": n,
 			"aria-valuemax": r,
 			inputMode: "decimal",
-			className: M.readoutInput,
+			className: N.readoutInput,
 			style: h,
 			value: m,
 			onFocus: (e) => {
@@ -507,11 +564,11 @@ function fe({ name: e, value: t, min: n, max: r, step: i, display: a, format: o,
 					e.preventDefault(), c(o), d(null);
 				}
 			}
-		}), W(s, M.readoutUnit)]
+		}), W(s, N.readoutUnit)]
 	});
 }
-function pe(e) {
-	let [t, n] = O(null), r = e.mixed ? "" : e.value ?? "", i = e.onInput !== void 0;
+function ve(e) {
+	let [t, n] = j(null), r = e.mixed ? "" : e.value ?? "", i = e.onInput !== void 0;
 	return {
 		shown: t ?? r,
 		type: (t) => {
@@ -526,11 +583,11 @@ function pe(e) {
 		}
 	};
 }
-function me(e) {
-	let t = pe(e), n = e.mixed ? "Mixed" : e.placeholder;
+function ye(e) {
+	let t = ve(e), n = e.mixed ? "Mixed" : e.placeholder;
 	return e.control === "textarea" ? /* @__PURE__ */ C("textarea", {
 		id: e.id,
-		className: e.className ? `${M.textarea} ${e.className}` : M.textarea,
+		className: e.className ? `${N.textarea} ${e.className}` : N.textarea,
 		"aria-label": e.name,
 		value: t.shown,
 		placeholder: n,
@@ -540,7 +597,7 @@ function me(e) {
 		onBlur: t.settle
 	}) : /* @__PURE__ */ C(l, {
 		id: e.id,
-		className: e.className ? `${M.textField} ${e.className}` : M.textField,
+		className: e.className ? `${N.textField} ${e.className}` : N.textField,
 		value: t.shown,
 		placeholder: n,
 		maxLength: e.maxLength,
@@ -561,7 +618,7 @@ function Z(e) {
 function Q(e) {
 	return e.glyph === void 0 || e.glyph === null ? void 0 : e.label;
 }
-function he(t) {
+function be(t) {
 	let n = !t.mixed && t.options.some((e) => e.value === t.value) ? t.value : null;
 	if (t.control === "radio") return /* @__PURE__ */ C(h, {
 		className: t.className,
@@ -580,7 +637,7 @@ function he(t) {
 			mode: "multiple",
 			size: "sm",
 			variant: "flat",
-			className: t.className ? `${M.toggleBar} ${t.className}` : M.toggleBar,
+			className: t.className ? `${N.toggleBar} ${t.className}` : N.toggleBar,
 			ariaLabel: t.name,
 			items: t.options.map((e) => ({
 				value: e.value,
@@ -600,7 +657,7 @@ function he(t) {
 	return t.control === "toggle" ? /* @__PURE__ */ C(f, {
 		size: "sm",
 		variant: "flat",
-		className: t.className ? `${M.toggleBar} ${t.className}` : M.toggleBar,
+		className: t.className ? `${N.toggleBar} ${t.className}` : N.toggleBar,
 		ariaLabel: t.name,
 		items: t.options.map((e) => ({
 			value: e.value,
@@ -614,7 +671,7 @@ function he(t) {
 			e !== null && t.onChange(e);
 		}
 	}) : /* @__PURE__ */ C(o, {
-		className: t.className ? `${M.select} ${t.className}` : M.select,
+		className: t.className ? `${N.select} ${t.className}` : N.select,
 		triggerId: t.id,
 		"aria-label": t.name,
 		placeholder: t.mixed ? "Mixed" : t.placeholder ?? (t.unset ? "—" : "Choose option…"),
@@ -643,7 +700,7 @@ function $(e) {
 		alpha: 1
 	};
 }
-function ge(e) {
+function xe(e) {
 	let t = e.alpha !== void 0 && e.alpha !== !1, n = typeof e.alpha == "number", r = $(e.value), i = n ? e.alpha : r.alpha, o = (e, t) => (a) => {
 		if (!n) {
 			e(a);
@@ -656,7 +713,7 @@ function ge(e) {
 	}, s = e.onInput !== void 0 || e.onAlphaInput !== void 0, c = o(e.onInput ?? e.onChange, e.onAlphaInput ?? e.onAlphaChange), l = s ? o(e.onChange, e.onAlphaChange) : G;
 	return /* @__PURE__ */ C(a, {
 		id: e.id,
-		className: e.className ? `${M.colorField} ${e.className}` : M.colorField,
+		className: e.className ? `${N.colorField} ${e.className}` : N.colorField,
 		value: e.mixed ? void 0 : t ? x(r.rgb, i) : e.value ?? "#000000",
 		mixed: e.mixed,
 		alpha: t,
@@ -666,7 +723,7 @@ function ge(e) {
 		"aria-label": e.name
 	});
 }
-function _e(e) {
+function Se(e) {
 	let t = e.control === "inline" ? p : m;
 	return /* @__PURE__ */ C(t, {
 		className: e.className,
@@ -681,6 +738,6 @@ function _e(e) {
 	});
 }
 //#endregion
-export { le as a, ce as c, se as i, N as l, R as n, oe as o, Z as r, F as s, z as t, M as u };
+export { oe as a, L as c, N as d, R as i, se as l, de as n, ce as o, Z as r, ae as s, fe as t, F as u };
 
-//# sourceMappingURL=PropertyField-CV_Gw57S.js.map
+//# sourceMappingURL=PropertyField-BbNqK8xr.js.map