mlform 0.1.7 → 0.1.9

package/dist/{primitives-BqjFDDhL.js → primitives-Di95y_ur.js}

@@ -1,36 +1,37 @@
-import { L as e } from "./engine-CEy1IX7y.js";
+import { c as e } from "./runtime-C5iTM3uu.js";
+import { n as t } from "./builtins-ml-pjab8_gu.js";
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
-var t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
+var n = globalThis, r = n.ShadowRoot && (n.ShadyCSS === void 0 || n.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, i = Symbol(), a = /* @__PURE__ */ new WeakMap(), o = class {
 	constructor(e, t, n) {
-		if (this._$cssResult$ = !0, n !== r) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+		if (this._$cssResult$ = !0, n !== i) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
 		this.cssText = e, this.t = t;
 	}
 	get styleSheet() {
 		let e = this.o, t = this.t;
-		if (n && e === void 0) {
+		if (r && e === void 0) {
 			let n = t !== void 0 && t.length === 1;
-			n && (e = i.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), n && i.set(t, e));
+			n && (e = a.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), n && a.set(t, e));
 		}
 		return e;
 	}
 	toString() {
 		return this.cssText;
 	}
-}, o = (e) => new a(typeof e == "string" ? e : e + "", void 0, r), s = (e, ...t) => new a(e.length === 1 ? e[0] : t.reduce((t, n, r) => t + ((e) => {
+}, s = (e) => new o(typeof e == "string" ? e : e + "", void 0, i), c = (e, ...t) => new o(e.length === 1 ? e[0] : t.reduce((t, n, r) => t + ((e) => {
 	if (!0 === e._$cssResult$) return e.cssText;
 	if (typeof e == "number") return e;
 	throw Error("Value passed to 'css' function must be a 'css' function result: " + e + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-})(n) + e[r + 1], e[0]), e, r), c = (e, r) => {
-	if (n) e.adoptedStyleSheets = r.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
-	else for (let n of r) {
-		let r = document.createElement("style"), i = t.litNonce;
-		i !== void 0 && r.setAttribute("nonce", i), r.textContent = n.cssText, e.appendChild(r);
+})(n) + e[r + 1], e[0]), e, i), l = (e, t) => {
+	if (r) e.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+	else for (let r of t) {
+		let t = document.createElement("style"), i = n.litNonce;
+		i !== void 0 && t.setAttribute("nonce", i), t.textContent = r.cssText, e.appendChild(t);
 	}
-}, l = n ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((e) => {
+}, u = r ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((e) => {
 	let t = "";
 	for (let n of e.cssRules) t += n.cssText;
-	return o(t);
-})(e) : e, { is: u, defineProperty: d, getOwnPropertyDescriptor: f, getOwnPropertyNames: p, getOwnPropertySymbols: m, getPrototypeOf: ee } = Object, te = globalThis, ne = te.trustedTypes, re = ne ? ne.emptyScript : "", ie = te.reactiveElementPolyfillSupport, ae = (e, t) => e, oe = {
+	return s(t);
+})(e) : e, { is: d, defineProperty: f, getOwnPropertyDescriptor: p, getOwnPropertyNames: m, getOwnPropertySymbols: h, getPrototypeOf: ee } = Object, te = globalThis, ne = te.trustedTypes, re = ne ? ne.emptyScript : "", ie = te.reactiveElementPolyfillSupport, g = (e, t) => e, ae = {
 	toAttribute(e, t) {
 		switch (t) {
 			case Boolean:
@@ -59,30 +60,30 @@ var t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nat
 		}
 		return n;
 	}
-}, se = (e, t) => !u(e, t), ce = {
+}, oe = (e, t) => !d(e, t), se = {
 	attribute: !0,
 	type: String,
-	converter: oe,
+	converter: ae,
 	reflect: !1,
 	useDefault: !1,
-	hasChanged: se
+	hasChanged: oe
 };
 Symbol.metadata ??= Symbol("metadata"), te.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-var h = class extends HTMLElement {
+var _ = class extends HTMLElement {
 	static addInitializer(e) {
 		this._$Ei(), (this.l ??= []).push(e);
 	}
 	static get observedAttributes() {
 		return this.finalize(), this._$Eh && [...this._$Eh.keys()];
 	}
-	static createProperty(e, t = ce) {
+	static createProperty(e, t = se) {
 		if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
 			let n = Symbol(), r = this.getPropertyDescriptor(e, n, t);
-			r !== void 0 && d(this.prototype, e, r);
+			r !== void 0 && f(this.prototype, e, r);
 		}
 	}
 	static getPropertyDescriptor(e, t, n) {
-		let { get: r, set: i } = f(this.prototype, e) ?? {
+		let { get: r, set: i } = p(this.prototype, e) ?? {
 			get() {
 				return this[t];
 			},
@@ -101,17 +102,17 @@ var h = class extends HTMLElement {
 		};
 	}
 	static getPropertyOptions(e) {
-		return this.elementProperties.get(e) ?? ce;
+		return this.elementProperties.get(e) ?? se;
 	}
 	static _$Ei() {
-		if (this.hasOwnProperty(ae("elementProperties"))) return;
+		if (this.hasOwnProperty(g("elementProperties"))) return;
 		let e = ee(this);
 		e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
 	}
 	static finalize() {
-		if (this.hasOwnProperty(ae("finalized"))) return;
-		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ae("properties"))) {
-			let e = this.properties, t = [...p(e), ...m(e)];
+		if (this.hasOwnProperty(g("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(g("properties"))) {
+			let e = this.properties, t = [...m(e), ...h(e)];
 			for (let n of t) this.createProperty(n, e[n]);
 		}
 		let e = this[Symbol.metadata];
@@ -130,8 +131,8 @@ var h = class extends HTMLElement {
 		let t = [];
 		if (Array.isArray(e)) {
 			let n = new Set(e.flat(Infinity).reverse());
-			for (let e of n) t.unshift(l(e));
-		} else e !== void 0 && t.push(l(e));
+			for (let e of n) t.unshift(u(e));
+		} else e !== void 0 && t.push(u(e));
 		return t;
 	}
 	static _$Eu(e, t) {
@@ -157,7 +158,7 @@ var h = class extends HTMLElement {
 	}
 	createRenderRoot() {
 		let e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-		return c(e, this.constructor.elementStyles), e;
+		return l(e, this.constructor.elementStyles), e;
 	}
 	connectedCallback() {
 		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
@@ -172,14 +173,14 @@ var h = class extends HTMLElement {
 	_$ET(e, t) {
 		let n = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, n);
 		if (r !== void 0 && !0 === n.reflect) {
-			let i = (n.converter?.toAttribute === void 0 ? oe : n.converter).toAttribute(t, n.type);
+			let i = (n.converter?.toAttribute === void 0 ? ae : n.converter).toAttribute(t, n.type);
 			this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
 		}
 	}
 	_$AK(e, t) {
 		let n = this.constructor, r = n._$Eh.get(e);
 		if (r !== void 0 && this._$Em !== r) {
-			let e = n.getPropertyOptions(r), i = typeof e.converter == "function" ? { fromAttribute: e.converter } : e.converter?.fromAttribute === void 0 ? oe : e.converter;
+			let e = n.getPropertyOptions(r), i = typeof e.converter == "function" ? { fromAttribute: e.converter } : e.converter?.fromAttribute === void 0 ? ae : e.converter;
 			this._$Em = r;
 			let a = i.fromAttribute(t, e.type);
 			this[r] = a ?? this._$Ej?.get(r) ?? a, this._$Em = null;
@@ -188,7 +189,7 @@ var h = class extends HTMLElement {
 	requestUpdate(e, t, n, r = !1, i) {
 		if (e !== void 0) {
 			let a = this.constructor;
-			if (!1 === r && (i = this[e]), n ??= a.getPropertyOptions(e), !((n.hasChanged ?? se)(i, t) || n.useDefault && n.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(a._$Eu(e, n)))) return;
+			if (!1 === r && (i = this[e]), n ??= a.getPropertyOptions(e), !((n.hasChanged ?? oe)(i, t) || n.useDefault && n.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(a._$Eu(e, n)))) return;
 			this.C(e, t, n);
 		}
 		!1 === this.isUpdatePending && (this._$ES = this._$EP());
@@ -252,87 +253,87 @@ var h = class extends HTMLElement {
 	updated(e) {}
 	firstUpdated(e) {}
 };
-h.elementStyles = [], h.shadowRootOptions = { mode: "open" }, h[ae("elementProperties")] = /* @__PURE__ */ new Map(), h[ae("finalized")] = /* @__PURE__ */ new Map(), ie?.({ ReactiveElement: h }), (te.reactiveElementVersions ??= []).push("2.1.2");
+_.elementStyles = [], _.shadowRootOptions = { mode: "open" }, _[g("elementProperties")] = /* @__PURE__ */ new Map(), _[g("finalized")] = /* @__PURE__ */ new Map(), ie?.({ ReactiveElement: _ }), (te.reactiveElementVersions ??= []).push("2.1.2");
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js
-var le = globalThis, ue = (e) => e, de = le.trustedTypes, fe = de ? de.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pe = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, me = "?" + g, he = `<${me}>`, _ = document, ge = () => _.createComment(""), _e = (e) => e === null || typeof e != "object" && typeof e != "function", ve = Array.isArray, ye = (e) => ve(e) || typeof e?.[Symbol.iterator] == "function", be = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, xe = /-->/g, Se = />/g, y = RegExp(`>|${be}(?:([^\\s"'>=/]+)(${be}*=${be}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), Ce = /'/g, we = /"/g, Te = /^(?:script|style|textarea|title)$/i, b = ((e) => (t, ...n) => ({
+var ce = globalThis, le = (e) => e, ue = ce.trustedTypes, de = ue ? ue.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, fe = "$lit$", v = `lit$${Math.random().toFixed(9).slice(2)}$`, pe = "?" + v, me = `<${pe}>`, y = document, b = () => y.createComment(""), he = (e) => e === null || typeof e != "object" && typeof e != "function", ge = Array.isArray, _e = (e) => ge(e) || typeof e?.[Symbol.iterator] == "function", ve = "[ 	\n\f\r]", ye = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, be = /-->/g, xe = />/g, x = RegExp(`>|${ve}(?:([^\\s"'>=/]+)(${ve}*=${ve}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), Se = /'/g, Ce = /"/g, we = /^(?:script|style|textarea|title)$/i, S = ((e) => (t, ...n) => ({
 	_$litType$: e,
 	strings: t,
 	values: n
-}))(1), x = Symbol.for("lit-noChange"), S = Symbol.for("lit-nothing"), Ee = /* @__PURE__ */ new WeakMap(), C = _.createTreeWalker(_, 129);
-function De(e, t) {
-	if (!ve(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
-	return fe === void 0 ? t : fe.createHTML(t);
+}))(1), C = Symbol.for("lit-noChange"), w = Symbol.for("lit-nothing"), Te = /* @__PURE__ */ new WeakMap(), T = y.createTreeWalker(y, 129);
+function Ee(e, t) {
+	if (!ge(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+	return de === void 0 ? t : de.createHTML(t);
 }
-var Oe = (e, t) => {
-	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = v;
+var De = (e, t) => {
+	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = ye;
 	for (let t = 0; t < n; t++) {
 		let n = e[t], s, c, l = -1, u = 0;
-		for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === v ? c[1] === "!--" ? o = xe : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = y) : (Te.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = y) : o = Se : o === y ? c[0] === ">" ? (o = i ?? v, l = -1) : c[1] === void 0 ? l = -2 : (l = o.lastIndex - c[2].length, s = c[1], o = c[3] === void 0 ? y : c[3] === "\"" ? we : Ce) : o === we || o === Ce ? o = y : o === xe || o === Se ? o = v : (o = y, i = void 0);
-		let d = o === y && e[t + 1].startsWith("/>") ? " " : "";
-		a += o === v ? n + he : l >= 0 ? (r.push(s), n.slice(0, l) + pe + n.slice(l) + g + d) : n + g + (l === -2 ? t : d);
+		for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === ye ? c[1] === "!--" ? o = be : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = x) : (we.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = x) : o = xe : o === x ? c[0] === ">" ? (o = i ?? ye, l = -1) : c[1] === void 0 ? l = -2 : (l = o.lastIndex - c[2].length, s = c[1], o = c[3] === void 0 ? x : c[3] === "\"" ? Ce : Se) : o === Ce || o === Se ? o = x : o === be || o === xe ? o = ye : (o = x, i = void 0);
+		let d = o === x && e[t + 1].startsWith("/>") ? " " : "";
+		a += o === ye ? n + me : l >= 0 ? (r.push(s), n.slice(0, l) + fe + n.slice(l) + v + d) : n + v + (l === -2 ? t : d);
 	}
-	return [De(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
-}, ke = class e {
+	return [Ee(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
+}, Oe = class e {
 	constructor({ strings: t, _$litType$: n }, r) {
 		let i;
 		this.parts = [];
-		let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = Oe(t, n);
-		if (this.el = e.createElement(l, r), C.currentNode = this.el.content, n === 2 || n === 3) {
+		let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = De(t, n);
+		if (this.el = e.createElement(l, r), T.currentNode = this.el.content, n === 2 || n === 3) {
 			let e = this.el.content.firstChild;
 			e.replaceWith(...e.childNodes);
 		}
-		for (; (i = C.nextNode()) !== null && c.length < s;) {
+		for (; (i = T.nextNode()) !== null && c.length < s;) {
 			if (i.nodeType === 1) {
-				if (i.hasAttributes()) for (let e of i.getAttributeNames()) if (e.endsWith(pe)) {
-					let t = u[o++], n = i.getAttribute(e).split(g), r = /([.?@])?(.*)/.exec(t);
+				if (i.hasAttributes()) for (let e of i.getAttributeNames()) if (e.endsWith(fe)) {
+					let t = u[o++], n = i.getAttribute(e).split(v), r = /([.?@])?(.*)/.exec(t);
 					c.push({
 						type: 1,
 						index: a,
 						name: r[2],
 						strings: n,
-						ctor: r[1] === "." ? Me : r[1] === "?" ? Ne : r[1] === "@" ? Pe : T
+						ctor: r[1] === "." ? je : r[1] === "?" ? Me : r[1] === "@" ? Ne : D
 					}), i.removeAttribute(e);
-				} else e.startsWith(g) && (c.push({
+				} else e.startsWith(v) && (c.push({
 					type: 6,
 					index: a
 				}), i.removeAttribute(e));
-				if (Te.test(i.tagName)) {
-					let e = i.textContent.split(g), t = e.length - 1;
+				if (we.test(i.tagName)) {
+					let e = i.textContent.split(v), t = e.length - 1;
 					if (t > 0) {
-						i.textContent = de ? de.emptyScript : "";
-						for (let n = 0; n < t; n++) i.append(e[n], ge()), C.nextNode(), c.push({
+						i.textContent = ue ? ue.emptyScript : "";
+						for (let n = 0; n < t; n++) i.append(e[n], b()), T.nextNode(), c.push({
 							type: 2,
 							index: ++a
 						});
-						i.append(e[t], ge());
+						i.append(e[t], b());
 					}
 				}
-			} else if (i.nodeType === 8) if (i.data === me) c.push({
+			} else if (i.nodeType === 8) if (i.data === pe) c.push({
 				type: 2,
 				index: a
 			});
 			else {
 				let e = -1;
-				for (; (e = i.data.indexOf(g, e + 1)) !== -1;) c.push({
+				for (; (e = i.data.indexOf(v, e + 1)) !== -1;) c.push({
 					type: 7,
 					index: a
-				}), e += g.length - 1;
+				}), e += v.length - 1;
 			}
 			a++;
 		}
 	}
 	static createElement(e, t) {
-		let n = _.createElement("template");
+		let n = y.createElement("template");
 		return n.innerHTML = e, n;
 	}
 };
-function w(e, t, n = e, r) {
-	if (t === x) return t;
-	let i = r === void 0 ? n._$Cl : n._$Co?.[r], a = _e(t) ? void 0 : t._$litDirective$;
-	return i?.constructor !== a && (i?._$AO?.(!1), a === void 0 ? i = void 0 : (i = new a(e), i._$AT(e, n, r)), r === void 0 ? n._$Cl = i : (n._$Co ??= [])[r] = i), i !== void 0 && (t = w(e, i._$AS(e, t.values), i, r)), t;
+function E(e, t, n = e, r) {
+	if (t === C) return t;
+	let i = r === void 0 ? n._$Cl : n._$Co?.[r], a = he(t) ? void 0 : t._$litDirective$;
+	return i?.constructor !== a && (i?._$AO?.(!1), a === void 0 ? i = void 0 : (i = new a(e), i._$AT(e, n, r)), r === void 0 ? n._$Cl = i : (n._$Co ??= [])[r] = i), i !== void 0 && (t = E(e, i._$AS(e, t.values), i, r)), t;
 }
-var Ae = class {
+var ke = class {
 	constructor(e, t) {
 		this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
 	}
@@ -343,28 +344,28 @@ var Ae = class {
 		return this._$AM._$AU;
 	}
 	u(e) {
-		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? _).importNode(t, !0);
-		C.currentNode = r;
-		let i = C.nextNode(), a = 0, o = 0, s = n[0];
+		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? y).importNode(t, !0);
+		T.currentNode = r;
+		let i = T.nextNode(), a = 0, o = 0, s = n[0];
 		for (; s !== void 0;) {
 			if (a === s.index) {
 				let t;
-				s.type === 2 ? t = new je(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new Fe(i, this, e)), this._$AV.push(t), s = n[++o];
+				s.type === 2 ? t = new Ae(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new Pe(i, this, e)), this._$AV.push(t), s = n[++o];
 			}
-			a !== s?.index && (i = C.nextNode(), a++);
+			a !== s?.index && (i = T.nextNode(), a++);
 		}
-		return C.currentNode = _, r;
+		return T.currentNode = y, r;
 	}
 	p(e) {
 		let t = 0;
 		for (let n of this._$AV) n !== void 0 && (n.strings === void 0 ? n._$AI(e[t]) : (n._$AI(e, n, t), t += n.strings.length - 2)), t++;
 	}
-}, je = class e {
+}, Ae = class e {
 	get _$AU() {
 		return this._$AM?._$AU ?? this._$Cv;
 	}
 	constructor(e, t, n, r) {
-		this.type = 2, this._$AH = S, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = r, this._$Cv = r?.isConnected ?? !0;
+		this.type = 2, this._$AH = w, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = r, this._$Cv = r?.isConnected ?? !0;
 	}
 	get parentNode() {
 		let e = this._$AA.parentNode, t = this._$AM;
@@ -377,7 +378,7 @@ var Ae = class {
 		return this._$AB;
 	}
 	_$AI(e, t = this) {
-		e = w(this, e, t), _e(e) ? e === S || e == null || e === "" ? (this._$AH !== S && this._$AR(), this._$AH = S) : e !== this._$AH && e !== x && this._(e) : e._$litType$ === void 0 ? e.nodeType === void 0 ? ye(e) ? this.k(e) : this._(e) : this.T(e) : this.$(e);
+		e = E(this, e, t), he(e) ? e === w || e == null || e === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : e !== this._$AH && e !== C && this._(e) : e._$litType$ === void 0 ? e.nodeType === void 0 ? _e(e) ? this.k(e) : this._(e) : this.T(e) : this.$(e);
 	}
 	O(e) {
 		return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -386,36 +387,36 @@ var Ae = class {
 		this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
 	}
 	_(e) {
-		this._$AH !== S && _e(this._$AH) ? this._$AA.nextSibling.data = e : this.T(_.createTextNode(e)), this._$AH = e;
+		this._$AH !== w && he(this._$AH) ? this._$AA.nextSibling.data = e : this.T(y.createTextNode(e)), this._$AH = e;
 	}
 	$(e) {
-		let { values: t, _$litType$: n } = e, r = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = ke.createElement(De(n.h, n.h[0]), this.options)), n);
+		let { values: t, _$litType$: n } = e, r = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = Oe.createElement(Ee(n.h, n.h[0]), this.options)), n);
 		if (this._$AH?._$AD === r) this._$AH.p(t);
 		else {
-			let e = new Ae(r, this), n = e.u(this.options);
+			let e = new ke(r, this), n = e.u(this.options);
 			e.p(t), this.T(n), this._$AH = e;
 		}
 	}
 	_$AC(e) {
-		let t = Ee.get(e.strings);
-		return t === void 0 && Ee.set(e.strings, t = new ke(e)), t;
+		let t = Te.get(e.strings);
+		return t === void 0 && Te.set(e.strings, t = new Oe(e)), t;
 	}
 	k(t) {
-		ve(this._$AH) || (this._$AH = [], this._$AR());
+		ge(this._$AH) || (this._$AH = [], this._$AR());
 		let n = this._$AH, r, i = 0;
-		for (let a of t) i === n.length ? n.push(r = new e(this.O(ge()), this.O(ge()), this, this.options)) : r = n[i], r._$AI(a), i++;
+		for (let a of t) i === n.length ? n.push(r = new e(this.O(b()), this.O(b()), this, this.options)) : r = n[i], r._$AI(a), i++;
 		i < n.length && (this._$AR(r && r._$AB.nextSibling, i), n.length = i);
 	}
 	_$AR(e = this._$AA.nextSibling, t) {
 		for (this._$AP?.(!1, !0, t); e !== this._$AB;) {
-			let t = ue(e).nextSibling;
-			ue(e).remove(), e = t;
+			let t = le(e).nextSibling;
+			le(e).remove(), e = t;
 		}
 	}
 	setConnected(e) {
 		this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
 	}
-}, T = class {
+}, D = class {
 	get tagName() {
 		return this.element.tagName;
 	}
@@ -423,47 +424,47 @@ var Ae = class {
 		return this._$AM._$AU;
 	}
 	constructor(e, t, n, r, i) {
-		this.type = 1, this._$AH = S, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = S;
+		this.type = 1, this._$AH = w, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = w;
 	}
 	_$AI(e, t = this, n, r) {
 		let i = this.strings, a = !1;
-		if (i === void 0) e = w(this, e, t, 0), a = !_e(e) || e !== this._$AH && e !== x, a && (this._$AH = e);
+		if (i === void 0) e = E(this, e, t, 0), a = !he(e) || e !== this._$AH && e !== C, a && (this._$AH = e);
 		else {
 			let r = e, o, s;
-			for (e = i[0], o = 0; o < i.length - 1; o++) s = w(this, r[n + o], t, o), s === x && (s = this._$AH[o]), a ||= !_e(s) || s !== this._$AH[o], s === S ? e = S : e !== S && (e += (s ?? "") + i[o + 1]), this._$AH[o] = s;
+			for (e = i[0], o = 0; o < i.length - 1; o++) s = E(this, r[n + o], t, o), s === C && (s = this._$AH[o]), a ||= !he(s) || s !== this._$AH[o], s === w ? e = w : e !== w && (e += (s ?? "") + i[o + 1]), this._$AH[o] = s;
 		}
 		a && !r && this.j(e);
 	}
 	j(e) {
-		e === S ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+		e === w ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
 	}
-}, Me = class extends T {
+}, je = class extends D {
 	constructor() {
 		super(...arguments), this.type = 3;
 	}
 	j(e) {
-		this.element[this.name] = e === S ? void 0 : e;
+		this.element[this.name] = e === w ? void 0 : e;
 	}
-}, Ne = class extends T {
+}, Me = class extends D {
 	constructor() {
 		super(...arguments), this.type = 4;
 	}
 	j(e) {
-		this.element.toggleAttribute(this.name, !!e && e !== S);
+		this.element.toggleAttribute(this.name, !!e && e !== w);
 	}
-}, Pe = class extends T {
+}, Ne = class extends D {
 	constructor(e, t, n, r, i) {
 		super(e, t, n, r, i), this.type = 5;
 	}
 	_$AI(e, t = this) {
-		if ((e = w(this, e, t, 0) ?? S) === x) return;
-		let n = this._$AH, r = e === S && n !== S || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, i = e !== S && (n === S || r);
+		if ((e = E(this, e, t, 0) ?? w) === C) return;
+		let n = this._$AH, r = e === w && n !== w || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, i = e !== w && (n === w || r);
 		r && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
 	}
 	handleEvent(e) {
 		typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
 	}
-}, Fe = class {
+}, Pe = class {
 	constructor(e, t, n) {
 		this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
 	}
@@ -471,33 +472,33 @@ var Ae = class {
 		return this._$AM._$AU;
 	}
 	_$AI(e) {
-		w(this, e);
+		E(this, e);
 	}
-}, Ie = {
-	M: pe,
-	P: g,
-	A: me,
+}, Fe = {
+	M: fe,
+	P: v,
+	A: pe,
 	C: 1,
-	L: Oe,
-	R: Ae,
-	D: ye,
-	V: w,
-	I: je,
-	H: T,
-	N: Ne,
-	U: Pe,
-	B: Me,
-	F: Fe
-}, Le = le.litHtmlPolyfillSupport;
-Le?.(ke, je), (le.litHtmlVersions ??= []).push("3.3.2");
-var Re = (e, t, n) => {
+	L: De,
+	R: ke,
+	D: _e,
+	V: E,
+	I: Ae,
+	H: D,
+	N: Me,
+	U: Ne,
+	B: je,
+	F: Pe
+}, Ie = ce.litHtmlPolyfillSupport;
+Ie?.(Oe, Ae), (ce.litHtmlVersions ??= []).push("3.3.2");
+var Le = (e, t, n) => {
 	let r = n?.renderBefore ?? t, i = r._$litPart$;
 	if (i === void 0) {
 		let e = n?.renderBefore ?? null;
-		r._$litPart$ = i = new je(t.insertBefore(ge(), e), e, void 0, n ?? {});
+		r._$litPart$ = i = new Ae(t.insertBefore(b(), e), e, void 0, n ?? {});
 	}
 	return i._$AI(e), i;
-}, ze = globalThis, E = class extends h {
+}, Re = globalThis, O = class extends _ {
 	constructor() {
 		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
 	}
@@ -507,7 +508,7 @@ var Re = (e, t, n) => {
 	}
 	update(e) {
 		let t = this.render();
-		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Re(t, this.renderRoot, this.renderOptions);
+		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Le(t, this.renderRoot, this.renderOptions);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -516,25 +517,25 @@ var Re = (e, t, n) => {
 		super.disconnectedCallback(), this._$Do?.setConnected(!1);
 	}
 	render() {
-		return x;
+		return C;
 	}
 };
-E._$litElement$ = !0, E.finalized = !0, ze.litElementHydrateSupport?.({ LitElement: E });
-var Be = ze.litElementPolyfillSupport;
-Be?.({ LitElement: E }), (ze.litElementVersions ??= []).push("4.2.2");
+O._$litElement$ = !0, O.finalized = !0, Re.litElementHydrateSupport?.({ LitElement: O });
+var ze = Re.litElementPolyfillSupport;
+ze?.({ LitElement: O }), (Re.litElementVersions ??= []).push("4.2.2");
 //#endregion
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/custom-element.js
-var D = (e) => (t, n) => {
+var k = (e) => (t, n) => {
 	n === void 0 ? customElements.define(e, t) : n.addInitializer(() => {
 		customElements.define(e, t);
 	});
-}, Ve = {
+}, Be = {
 	attribute: !0,
 	type: String,
-	converter: oe,
+	converter: ae,
 	reflect: !1,
-	hasChanged: se
-}, He = (e = Ve, t, n) => {
+	hasChanged: oe
+}, Ve = (e = Be, t, n) => {
 	let { kind: r, metadata: i } = n, a = globalThis.litPropertyMetadata.get(i);
 	if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), a.set(n.name, e), r === "accessor") {
 		let { name: r } = n;
@@ -557,16 +558,16 @@ var D = (e) => (t, n) => {
 	}
 	throw Error("Unsupported decorator location: " + r);
 };
-function O(e) {
-	return (t, n) => typeof n == "object" ? He(e, t, n) : ((e, t, n) => {
+function A(e) {
+	return (t, n) => typeof n == "object" ? Ve(e, t, n) : ((e, t, n) => {
 		let r = t.hasOwnProperty(n);
 		return t.constructor.createProperty(n, e), r ? Object.getOwnPropertyDescriptor(t, n) : void 0;
 	})(e, t, n);
 }
 //#endregion
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
-function k(e) {
-	return O({
+function j(e) {
+	return A({
 		...e,
 		state: !0,
 		attribute: !1
@@ -574,7 +575,7 @@ function k(e) {
 }
 //#endregion
 //#region src/primitives/constants.ts
-var A = {
+var M = {
 	form: "mlf-form",
 	formErrors: "mlf-form-errors",
 	submitButton: "mlf-submit-button",
@@ -597,19 +598,19 @@ var A = {
 	singleChoiceField: "mlf-single-choice-field",
 	multiChoiceField: "mlf-multi-choice-field",
 	ratingField: "mlf-rating-field"
-}, Ue = {
+}, He = {
 	submitRequest: "mlf-submit-request",
 	submitStart: "mlf-submit-start",
 	submitSuccess: "mlf-submit-success",
 	submitAbort: "mlf-submit-abort",
 	submitError: "mlf-submit-error"
-}, j = {
+}, N = {
 	form: "Inputs",
 	reports: "Reports",
 	submit: "Submit",
 	validating: "Validating...",
 	submitting: "Submitting..."
-}, M = Object.freeze({
+}, P = Object.freeze({
 	formEyebrow: "Form",
 	reportEyebrow: "Report",
 	formErrorsTitle: "Form errors",
@@ -666,10 +667,10 @@ var A = {
 	},
 	reportsEmptyTitle: "Results",
 	reportsEmptyBody: "Reports will appear here after the form is submitted."
-}), We = (e) => e ? Object.freeze({
-	...M,
+}), Ue = (e) => e ? Object.freeze({
+	...P,
 	...e
-}) : M, N = {
+}) : P, F = {
 	booleanGroup: "mlf-boolean",
 	fieldDescription: "mlf-field-description",
 	fieldErrors: "mlf-field-errors",
@@ -678,8 +679,8 @@ var A = {
 	explanationRegion: "mlf-explanation-region"
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.123.0/helpers/decorate.js
-function P(e, t, n, r) {
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+function I(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -687,8 +688,8 @@ function P(e, t, n, r) {
 }
 //#endregion
 //#region src/primitives/components/form-errors.ts
-var F = class extends E {
-	static styles = s`
+var L = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -728,7 +729,7 @@ var F = class extends E {
 	set form(e) {
 		this.#e = e;
 	}
-	#t = M;
+	#t = P;
 	get text() {
 		return this.#t;
 	}
@@ -755,11 +756,11 @@ var F = class extends E {
 	}
 	render() {
 		let e = this.formErrors;
-		return e.length === 0 ? b`` : b`
+		return e.length === 0 ? S`` : S`
       <div class="card" part="form-errors" role="alert" aria-live="assertive" aria-atomic="true">
         <p class="eyebrow">${this.text.formErrorsTitle}</p>
         <ul>
-          ${e.map((e) => b`<li>${e}</li>`)}
+          ${e.map((e) => S`<li>${e}</li>`)}
         </ul>
       </div>
     `;
@@ -776,11 +777,11 @@ var F = class extends E {
 		}
 	}
 };
-P([O({ attribute: !1 })], F.prototype, "form", null), P([O({ attribute: !1 })], F.prototype, "text", null), P([k()], F.prototype, "formErrors", null), F = P([D(A.formErrors)], F);
+I([A({ attribute: !1 })], L.prototype, "form", null), I([A({ attribute: !1 })], L.prototype, "text", null), I([j()], L.prototype, "formErrors", null), L = I([k(M.formErrors)], L);
 //#endregion
 //#region src/primitives/components/submit-button.ts
-var I = class extends E {
-	static styles = s`
+var R = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -830,21 +831,21 @@ var I = class extends E {
 	set status(e) {
 		this.#e = e;
 	}
-	#t = j.submit;
+	#t = N.submit;
 	get idleLabel() {
 		return this.#t;
 	}
 	set idleLabel(e) {
 		this.#t = e;
 	}
-	#n = j.validating;
+	#n = N.validating;
 	get validatingLabel() {
 		return this.#n;
 	}
 	set validatingLabel(e) {
 		this.#n = e;
 	}
-	#r = j.submitting;
+	#r = N.submitting;
 	get submittingLabel() {
 		return this.#r;
 	}
@@ -881,7 +882,7 @@ var I = class extends E {
 	}
 	render() {
 		let e = this.progressMessage ?? (typeof this.loaded == "number" && typeof this.total == "number" && this.total > 0 ? `${Math.round(this.loaded / this.total * 100)}%` : typeof this.sessionMessageCount == "number" && this.sessionMessageCount > 0 ? `${this.sessionMessageCount} msgs` : void 0), t = this.status === "validating" ? this.validatingLabel : this.status === "submitting" ? e ? `${this.submittingLabel} ${e}` : this.submittingLabel : this.idleLabel;
-		return b`
+		return S`
       <button
         type="button"
         ?disabled=${this.status === "validating" || this.status === "submitting"}
@@ -893,17 +894,17 @@ var I = class extends E {
     `;
 	}
 	#c = () => {
-		this.dispatchEvent(new CustomEvent(Ue.submitRequest, {
+		this.dispatchEvent(new CustomEvent(He.submitRequest, {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
 };
-P([O({ type: String })], I.prototype, "status", null), P([O({ type: String })], I.prototype, "idleLabel", null), P([O({ type: String })], I.prototype, "validatingLabel", null), P([O({ type: String })], I.prototype, "submittingLabel", null), P([O({ type: Number })], I.prototype, "loaded", null), P([O({ type: Number })], I.prototype, "total", null), P([O({ type: String })], I.prototype, "progressMessage", null), P([O({ type: Number })], I.prototype, "sessionMessageCount", null), I = P([D(A.submitButton)], I);
+I([A({ type: String })], R.prototype, "status", null), I([A({ type: String })], R.prototype, "idleLabel", null), I([A({ type: String })], R.prototype, "validatingLabel", null), I([A({ type: String })], R.prototype, "submittingLabel", null), I([A({ type: Number })], R.prototype, "loaded", null), I([A({ type: Number })], R.prototype, "total", null), I([A({ type: String })], R.prototype, "progressMessage", null), I([A({ type: Number })], R.prototype, "sessionMessageCount", null), R = I([k(M.submitButton)], R);
 //#endregion
 //#region src/primitives/components/unsupported-component.ts
-var L = class extends E {
-	static styles = s`
+var We = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -940,7 +941,7 @@ var L = class extends E {
 	set role(e) {
 		this.#t = e;
 	}
-	#n = M;
+	#n = P;
 	get text() {
 		return this.#n;
 	}
@@ -948,7 +949,7 @@ var L = class extends E {
 		this.#n = e;
 	}
 	render() {
-		return b`
+		return S`
       <div class="card" part="unsupported-card">
         <strong>${this.role}</strong>
         ${this.text.unsupportedMapping(this.role, this.component)}
@@ -956,7 +957,7 @@ var L = class extends E {
     `;
 	}
 };
-P([O({ type: String })], L.prototype, "component", null), P([O({ type: String })], L.prototype, "role", null), P([O({ attribute: !1 })], L.prototype, "text", null), L = P([D(A.unsupportedComponent)], L);
+I([A({ type: String })], We.prototype, "component", null), I([A({ type: String })], We.prototype, "role", null), I([A({ attribute: !1 })], We.prototype, "text", null), We = I([k(M.unsupportedComponent)], We);
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/static.js
 var Ge = Symbol.for(""), Ke = (e) => {
@@ -964,7 +965,7 @@ var Ge = Symbol.for(""), Ke = (e) => {
 }, qe = (e) => ({
 	_$litStatic$: e,
 	r: Ge
-}), Je = /* @__PURE__ */ new Map(), R = ((e) => (t, ...n) => {
+}), Je = /* @__PURE__ */ new Map(), z = ((e) => (t, ...n) => {
 	let r = n.length, i, a, o = [], s = [], c, l = 0, u = !1;
 	for (; l < r;) {
 		for (c = t[l]; l < r && (a = n[l], i = Ke(a)) !== void 0;) c += i + t[++l], u = !0;
@@ -975,7 +976,7 @@ var Ge = Symbol.for(""), Ke = (e) => {
 		(t = Je.get(e)) === void 0 && (o.raw = o, Je.set(e, t = o)), n = s;
 	}
 	return e(t, ...n);
-})(b), Ye = class {
+})(S), Ye = class {
 	#e;
 	#t;
 	#n;
@@ -1001,7 +1002,130 @@ var Ge = Symbol.for(""), Ke = (e) => {
 	hostDisconnected() {
 		this.#r?.(), this.#r = null;
 	}
-}, z = (e) => typeof e == "object" && !!e, Xe = (e) => e.join(" "), B = (e, t = "") => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : t, Ze = 0, Qe = (e) => typeof e == "string" ? {
+}, B = (e) => typeof e == "object" && !!e, Xe = (e) => e.join(" "), V = (e, t = "") => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : t, Ze = c`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .tile {
+    position: relative;
+    display: grid;
+    gap: 0.85rem;
+    overflow: hidden;
+    padding: 1.5rem 2rem;
+    border-radius: var(--mlf-field-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-field-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-field-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow: 0 4px 12px var(--mlf-field-shadow, rgba(0, 0, 0, 0.04));
+    transition: box-shadow 0.2s ease;
+  }
+
+  .tile:hover {
+    box-shadow: 0 6px 18px var(--mlf-field-shadow-hover, rgba(0, 0, 0, 0.06));
+  }
+
+  .tile::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 6px;
+    background: var(--mlf-field-accent, var(--mlf-color-accent, #1e40af));
+    transition: background 0.2s ease;
+  }
+
+  .tile.success::before {
+    background: var(--mlf-field-accent-success, var(--mlf-color-success, #059669));
+  }
+
+  .tile.error::before {
+    background: var(--mlf-field-accent-error, var(--mlf-color-danger, #dc2626));
+  }
+
+  .header {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .label {
+    margin: 0;
+    min-width: 0;
+    color: var(--mlf-field-label-color, var(--mlf-color-text, #0f172a));
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+
+  .help-btn {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: var(--mlf-help-btn-bg, var(--mlf-color-accent, #1e40af));
+    color: var(--mlf-help-btn-color, #ffffff);
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .help-btn:hover:not(:disabled) {
+    background: var(--mlf-help-btn-bg-hover, var(--mlf-color-accent-hover, #1d4ed8));
+  }
+
+  .help-btn:disabled {
+    background: var(--mlf-help-btn-bg-disabled, var(--mlf-color-text-muted, #475569));
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .description {
+    display: none;
+    min-width: 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--mlf-field-description-color, var(--mlf-color-secondary, #475569));
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .description.show {
+    display: block;
+  }
+
+  .control-slot {
+    min-width: fit-content;
+  }
+
+  .feedback {
+    min-width: 0;
+    font-size: 0.8rem;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .feedback.success {
+    color: var(--mlf-field-feedback-success, var(--mlf-color-success, #059669));
+  }
+
+  .feedback.error {
+    color: var(--mlf-field-feedback-error, var(--mlf-color-danger, #dc2626));
+  }
+`, Qe = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
 } : e, $e = (e, t) => {
@@ -1015,131 +1139,46 @@ var Ge = Symbol.for(""), Ke = (e) => {
 		case "series": return "series-field";
 		default: return e;
 	}
-}, V = class extends E {
-	static styles = s`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .tile {
-      position: relative;
-      display: grid;
-      gap: 0.85rem;
-      overflow: hidden;
-      padding: 1.5rem 2rem;
-      border-radius: var(--mlf-field-radius, 12px);
-      border: var(--mlf-border-width, 1px) solid
-        var(--mlf-field-border, var(--mlf-color-border, #e2e8f0));
-      background: var(--mlf-field-bg, var(--mlf-color-surface, #ffffff));
-      box-shadow: 0 4px 12px var(--mlf-field-shadow, rgba(0, 0, 0, 0.04));
-      transition: box-shadow 0.2s ease;
-    }
-
-    .tile:hover {
-      box-shadow: 0 6px 18px var(--mlf-field-shadow-hover, rgba(0, 0, 0, 0.06));
-    }
-
-    .tile::before {
-      content: "";
-      position: absolute;
-      inset: 0 auto 0 0;
-      width: 6px;
-      background: var(--mlf-field-accent, var(--mlf-color-accent, #1e40af));
-      transition: background 0.2s ease;
-    }
-
-    .tile.success::before {
-      background: var(--mlf-field-accent-success, var(--mlf-color-success, #059669));
-    }
-
-    .tile.error::before {
-      background: var(--mlf-field-accent-error, var(--mlf-color-danger, #dc2626));
-    }
-
-    .header {
-      display: flex;
-      align-items: start;
-      justify-content: space-between;
-      gap: 1rem;
-      min-width: 0;
-    }
-
-    .label {
-      margin: 0;
-      min-width: 0;
-      color: var(--mlf-field-label-color, var(--mlf-color-text, #0f172a));
-      font-size: 1rem;
-      font-weight: 600;
-      line-height: 1.2;
-      overflow-wrap: anywhere;
-    }
-
-    .help-btn {
-      flex: 0 0 auto;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      border: none;
-      border-radius: 50%;
-      background: var(--mlf-help-btn-bg, var(--mlf-color-accent, #1e40af));
-      color: var(--mlf-help-btn-color, #ffffff);
-      font-size: 1rem;
-      font-weight: 700;
-      cursor: pointer;
-      transition: background 0.2s ease;
-    }
-
-    .help-btn:hover:not(:disabled) {
-      background: var(--mlf-help-btn-bg-hover, var(--mlf-color-accent-hover, #1d4ed8));
-    }
-
-    .help-btn:disabled {
-      background: var(--mlf-help-btn-bg-disabled, var(--mlf-color-text-muted, #475569));
-      cursor: not-allowed;
-      opacity: 0.7;
-    }
-
-    .description {
-      display: none;
-      min-width: 0;
-      font-size: 0.875rem;
-      line-height: 1.5;
-      color: var(--mlf-field-description-color, var(--mlf-color-secondary, #475569));
-      white-space: normal;
-      overflow-wrap: anywhere;
-    }
-
-    .description.show {
-      display: block;
-    }
-
-    .control-slot {
-      min-width: fit-content;
-    }
-
-    .feedback {
-      min-width: 0;
-      font-size: 0.8rem;
-      line-height: 1.5;
-      white-space: normal;
-      overflow-wrap: anywhere;
-    }
-
-    .feedback.success {
-      color: var(--mlf-field-feedback-success, var(--mlf-color-success, #059669));
-    }
-
-    .feedback.error {
-      color: var(--mlf-field-feedback-error, var(--mlf-color-danger, #dc2626));
-    }
-  `;
+}, et = (e, t) => typeof t != "string" || t.length === 0 ? null : (Array.isArray(e.options) ? e.options : []).map(Qe).find((e) => e.value === t) ?? null, tt = (e, t, n, r) => {
+	switch ($e(e, t)) {
+		case "text-field": return typeof n.value == "string" && n.value.trim().length > 0;
+		case "date-field": return typeof t.value == "string" && t.value.trim().length > 0;
+		case "category-field": return et(t, n.value) !== null;
+		case "number-field": return n.value !== null && n.value !== void 0 && n.value !== "" && !(typeof n.value == "number" && Number.isNaN(n.value));
+		case "boolean-field": return r !== void 0 || n.dirty || n.touched;
+		case "series-field": return Array.isArray(t.value) && t.value.length > 0;
+		default: return n.value !== null && n.value !== void 0 && n.value !== "";
+	}
+}, nt = (e, t, n, r) => {
+	switch ($e(e, t)) {
+		case "text-field": {
+			let e = typeof t.value == "string" ? t.value : "";
+			return e.length > 0 ? r.fieldTextRecorded(e.length) : r.fieldReady;
+		}
+		case "number-field": {
+			let e = typeof t.unit == "string" ? ` ${t.unit}` : "";
+			return n.value === null || n.value === void 0 || n.value === "" ? r.fieldReady : r.fieldValidNumber(n.value, e);
+		}
+		case "category-field": {
+			let e = et(t, n.value);
+			return e ? r.fieldCategorySelected(e.label) : r.fieldSelectionReady;
+		}
+		case "date-field": {
+			let e = typeof t.value == "string" ? t.value : "";
+			return e.length > 0 ? r.fieldSelectedDate(e) : r.fieldDateReady;
+		}
+		case "boolean-field": {
+			let e = V(t.trueLabel, r.booleanTrue), i = V(t.falseLabel, r.booleanFalse);
+			return r.fieldBooleanSelection(n.value === !0 ? e : i);
+		}
+		case "series-field": {
+			let e = Array.isArray(t.value) ? t.value.length : 0;
+			return r.fieldSeriesRecorded(e);
+		}
+		default: return r.fieldReady;
+	}
+}, rt = 0, H = class extends O {
+	static styles = Ze;
 	#e;
 	get controller() {
 		return this.#e;
@@ -1147,66 +1186,73 @@ var Ge = Symbol.for(""), Ke = (e) => {
 	set controller(e) {
 		this.#e = e;
 	}
-	#t;
-	get registry() {
+	#t = null;
+	get descriptor() {
 		return this.#t;
 	}
-	set registry(e) {
+	set descriptor(e) {
 		this.#t = e;
 	}
-	#n = M;
-	get text() {
+	#n;
+	get registry() {
 		return this.#n;
 	}
-	set text(e) {
+	set registry(e) {
 		this.#n = e;
 	}
-	#r = null;
-	get descriptor() {
+	#r = P;
+	get text() {
 		return this.#r;
 	}
-	set descriptor(e) {
+	set text(e) {
 		this.#r = e;
 	}
 	#i = null;
-	get fieldState() {
+	get resolvedDescriptor() {
 		return this.#i;
 	}
-	set fieldState(e) {
+	set resolvedDescriptor(e) {
 		this.#i = e;
 	}
-	#a = !1;
-	get descriptionVisible() {
+	#a = null;
+	get fieldState() {
 		return this.#a;
 	}
-	set descriptionVisible(e) {
+	set fieldState(e) {
 		this.#a = e;
 	}
-	#o = ++Ze;
-	#s;
-	#c = null;
+	#o = null;
+	get descriptionVisibilityOverride() {
+		return this.#o;
+	}
+	set descriptionVisibilityOverride(e) {
+		this.#o = e;
+	}
+	#s = ++rt;
+	#c;
 	#l = null;
-	#u = "";
+	#u = null;
 	#d = "";
-	#f = new Ye(this, (e) => {
-		this.descriptor = e?.descriptor ?? null, this.fieldState = e?.state ?? null, this.descriptor?.props.description || (this.descriptionVisible = !1);
+	#f = "";
+	#p = new Ye(this, (e) => {
+		this.resolvedDescriptor = this.descriptor, this.fieldState = e?.state ?? null, this.resolvedDescriptor?.props.description || (this.descriptionVisibilityOverride = null);
 	});
 	willUpdate(e) {
-		e.has("controller") && this.#f.bind(this.controller);
+		e.has("controller") && this.#p.bind(this.controller), e.has("descriptor") && (this.resolvedDescriptor = this.descriptor), e.has("descriptor") && !this.resolvedDescriptor?.props.description && (this.descriptionVisibilityOverride = null);
 	}
 	render() {
-		let e = this.descriptor, t = this.fieldState;
-		if (!e || !t || !t.visible) return R``;
-		let n = e.props, r = this.registry?.resolveField(e.component), i = B(n.label, this.controller?.config.label ?? ""), a = B(n.description), o = this.#_(e.component, n, t), s = Xe(t.errors), c = this.#g(e.component, n, t), l = s.length > 0 && (t.touched || o), u = l ? {
+		let e = this.resolvedDescriptor, t = this.fieldState;
+		if (!e || !t || !t.visible) return z``;
+		let n = e.props, r = this.registry?.resolveField(e.component), i = V(n.label, this.controller?.config.label ?? ""), a = V(n.description), o = this.#v(a), s = tt(e.component, n, t, this.controller?.config.defaultValue), c = Xe(t.errors), l = nt(e.component, n, t, this.text), u = c.length > 0 && (t.touched || s), d = u ? {
 			tone: "error",
-			message: s
-		} : o && t.valid ? {
-			tone: "success",
 			message: c
-		} : null, d = l ? "error" : o && t.valid ? "success" : "", f = `${N.fieldControl}-${this.controller?.id}-${this.#o}`, p = `${N.fieldErrors}-${this.controller?.id}-${this.#o}`, m = `${N.fieldDescription}-${this.controller?.id}-${this.#o}-details`;
-		return R`
+		} : s && t.valid ? {
+			tone: "success",
+			message: l
+		} : null, f = u ? "error" : s && t.valid ? "success" : "", p = `${F.fieldControl}-${this.controller?.id}-${this.#s}`, m = `${F.fieldErrors}-${this.controller?.id}-${this.#s}`, h = `${F.fieldDescription}-${this.controller?.id}-${this.#s}-details`;
+		return z`
       <section
-        class="tile ${d}"
+        class="tile ${f}"
         aria-busy=${String(t.status === "validating")}
         aria-invalid=${String(!t.valid)}
       >
@@ -1216,23 +1262,23 @@ var Ge = Symbol.for(""), Ke = (e) => {
             class="help-btn"
             type="button"
             aria-label=${this.text.helpActionLabel}
-            aria-expanded=${String(this.descriptionVisible)}
-            aria-controls=${m}
+            aria-expanded=${String(o)}
+            aria-controls=${h}
             ?disabled=${a.length === 0}
-            @click=${this.#b}
+            @click=${this.#_}
           >
             ${this.text.helpActionGlyph}
           </button>
         </div>
 
-        ${a ? R`
-              <div id=${m} class="description ${this.descriptionVisible ? "show" : ""}">
+        ${a ? z`
+              <div id=${h} class="description ${o ? "show" : ""}">
                 ${a}
               </div>
-            ` : R``}
+            ` : z``}
 
         <div class="control-slot">
-          ${r ? this.#p(r, f, p) : R`
+          ${r ? this.#m(r, p, m) : z`
                 <mlf-unsupported-component
                   role="field"
                   component=${e.component}
@@ -1241,40 +1287,40 @@ var Ge = Symbol.for(""), Ke = (e) => {
               `}
         </div>
 
-        ${u ? R`
+        ${d ? z`
               <div
-                class="feedback ${u.tone}"
-                role=${u.tone === "error" ? "alert" : "status"}
+                class="feedback ${d.tone}"
+                role=${d.tone === "error" ? "alert" : "status"}
                 aria-live="polite"
               >
-                ${u.message}
+                ${d.message}
               </div>
-            ` : R``}
+            ` : z``}
       </section>
     `;
 	}
-	#p(e, t, n) {
-		let r = qe(e), i = this.#m(t, n);
-		return R`
+	#m(e, t, n) {
+		let r = qe(e), i = this.#h(t, n), a = this.resolvedDescriptor;
+		return z`
       <${r}
         .controller=${this.controller}
-        .descriptor=${this.descriptor}
+        .descriptor=${a}
         .context=${i}
         .text=${this.text}
       ></${r}>
     `;
 	}
-	#m(e, t) {
-		if (this.descriptor === this.#c && this.fieldState === this.#l && e === this.#u && t === this.#d) return this.#s;
-		let n = this.#h(this.descriptor?.props ?? {}, this.fieldState, e, t);
-		return this.#c = this.descriptor, this.#l = this.fieldState, this.#u = e, this.#d = t, this.#s = n, n;
+	#h(e, t) {
+		if (this.resolvedDescriptor === this.#l && this.fieldState === this.#u && e === this.#d && t === this.#f) return this.#c;
+		let n = this.#g(this.resolvedDescriptor?.props ?? {}, this.fieldState, e, t);
+		return this.#l = this.resolvedDescriptor, this.#u = this.fieldState, this.#d = e, this.#f = t, this.#c = n, n;
 	}
-	#h(e, t, n, r) {
+	#g(e, t, n, r) {
 		if (!this.controller || !t) return;
-		let i = typeof e.description == "string" && e.description.length > 0 ? e.description : void 0, a = i ? `${N.fieldDescription}-${this.controller.id}-${this.#o}` : void 0, o = [a, r].filter(Boolean).join(" ") || void 0;
+		let i = typeof e.description == "string" && e.description.length > 0 ? e.description : void 0, a = i ? `${F.fieldDescription}-${this.controller.id}-${this.#s}` : void 0, o = [a, r].filter(Boolean).join(" ") || void 0;
 		return {
 			controlId: n,
-			label: B(e.label, this.controller.config.label),
+			label: V(e.label, this.controller.config.label),
 			description: i,
 			errors: t.errors,
 			descriptionId: a,
@@ -1286,62 +1332,18 @@ var Ge = Symbol.for(""), Ke = (e) => {
 			readOnly: t.readOnly
 		};
 	}
-	#g(e, t, n) {
-		let r = this.text;
-		switch ($e(e, t)) {
-			case "text-field": {
-				let e = typeof t.value == "string" ? t.value : "";
-				return e.length > 0 ? r.fieldTextRecorded(e.length) : r.fieldReady;
-			}
-			case "number-field": {
-				let e = typeof t.unit == "string" ? ` ${t.unit}` : "";
-				return n.value === null || n.value === void 0 || n.value === "" ? r.fieldReady : r.fieldValidNumber(n.value, e);
-			}
-			case "category-field": {
-				let e = this.#v(t, n.value);
-				return e ? r.fieldCategorySelected(e.label) : r.fieldSelectionReady;
-			}
-			case "date-field": {
-				let e = typeof t.value == "string" ? t.value : "";
-				return e.length > 0 ? r.fieldSelectedDate(e) : r.fieldDateReady;
-			}
-			case "boolean-field": {
-				let e = B(t.trueLabel, r.booleanTrue), i = B(t.falseLabel, r.booleanFalse);
-				return r.fieldBooleanSelection(n.value === !0 ? e : i);
-			}
-			case "series-field": {
-				let e = Array.isArray(t.value) ? t.value.length : 0;
-				return r.fieldSeriesRecorded(e);
-			}
-			default: return r.fieldReady;
-		}
-	}
-	#_(e, t, n) {
-		switch ($e(e, t)) {
-			case "text-field": return typeof n.value == "string" && n.value.trim().length > 0;
-			case "date-field": return typeof t.value == "string" && t.value.trim().length > 0;
-			case "category-field": return this.#v(t, n.value) !== null;
-			case "number-field": return n.value !== null && n.value !== void 0 && n.value !== "" && !(typeof n.value == "number" && Number.isNaN(n.value));
-			case "boolean-field": return this.#y() || n.dirty || n.touched;
-			case "series-field": return Array.isArray(t.value) && t.value.length > 0;
-			default: return n.value !== null && n.value !== void 0 && n.value !== "";
-		}
-	}
-	#v(e, t) {
-		return typeof t != "string" || t.length === 0 ? null : (Array.isArray(e.options) ? e.options : []).map(Qe).find((e) => e.value === t) ?? null;
-	}
-	#y() {
-		return this.controller?.config.defaultValue !== void 0;
-	}
-	#b = () => {
-		this.descriptor?.props.description && (this.descriptionVisible = !this.descriptionVisible);
+	#_ = () => {
+		this.resolvedDescriptor?.props.description && (this.descriptionVisibilityOverride = !this.#v(V(this.resolvedDescriptor.props.description)));
 	};
+	#v(e) {
+		return e.length === 0 ? !1 : this.descriptionVisibilityOverride ?? this.resolvedDescriptor?.props.showDescriptionInline === !0;
+	}
 };
-P([O({ attribute: !1 })], V.prototype, "controller", null), P([O({ attribute: !1 })], V.prototype, "registry", null), P([O({ attribute: !1 })], V.prototype, "text", null), P([k()], V.prototype, "descriptor", null), P([k()], V.prototype, "fieldState", null), P([k()], V.prototype, "descriptionVisible", null), V = P([D(A.fieldFrame)], V);
+I([A({ attribute: !1 })], H.prototype, "controller", null), I([A({ attribute: !1 })], H.prototype, "descriptor", null), I([A({ attribute: !1 })], H.prototype, "registry", null), I([A({ attribute: !1 })], H.prototype, "text", null), I([j()], H.prototype, "resolvedDescriptor", null), I([j()], H.prototype, "fieldState", null), I([j()], H.prototype, "descriptionVisibilityOverride", null), H = I([k(M.fieldFrame)], H);
 //#endregion
 //#region src/primitives/components/report-frame.ts
-var et = 0, H = class extends E {
-	static styles = s`
+var it = 0, U = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -1424,7 +1426,7 @@ var et = 0, H = class extends E {
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = M;
+	#n = P;
 	get text() {
 		return this.#n;
 	}
@@ -1453,39 +1455,46 @@ var et = 0, H = class extends E {
 		this.#a = e;
 	}
 	#o = null;
-	get reportState() {
+	get resolvedDescriptor() {
 		return this.#o;
 	}
-	set reportState(e) {
+	set resolvedDescriptor(e) {
 		this.#o = e;
 	}
-	#s = ++et;
-	#c;
+	#s = null;
+	get reportState() {
+		return this.#s;
+	}
+	set reportState(e) {
+		this.#s = e;
+	}
+	#c = ++it;
 	#l;
-	#u = null;
+	#u;
 	#d = null;
 	#f = null;
-	#p = new Ye(this, (e) => {
-		this.descriptor = e?.descriptor ?? null, this.reportState = e?.state ?? null;
+	#p = null;
+	#m = new Ye(this, (e) => {
+		this.resolvedDescriptor = this.descriptor, this.reportState = e?.state ?? null;
 	});
 	willUpdate(e) {
-		e.has("controller") && this.#p.bind(this.controller);
+		e.has("controller") && this.#m.bind(this.controller), e.has("descriptor") && (this.resolvedDescriptor = this.descriptor);
 	}
 	render() {
-		let e = this.descriptor, t = this.reportState;
-		if (!e || !t) return R``;
+		let e = this.resolvedDescriptor, t = this.reportState;
+		if (!e || !t) return z``;
 		let n = e.props, r = this.registry?.resolveReport(e.component);
-		return R`
+		return z`
       <section class="report">
         <div class="header">
           <div class="copy">
-            <p class="label">${B(n.label, this.controller?.config.label ?? "")}</p>
-            ${n.description ? R`<p class="description">${B(n.description)}</p>` : R``}
+            <p class="label">${V(n.label, this.controller?.config.label ?? "")}</p>
+            ${n.description ? z`<p class="description">${V(n.description)}</p>` : z``}
           </div>
           <span class="meta">${this.text.reportStatusLabel(t.status)}</span>
         </div>
 
-        ${r ? this.#m(r) : R`
+        ${r ? this.#h(r) : z`
               <mlf-unsupported-component
                 role="report"
                 component=${e.component}
@@ -1495,12 +1504,12 @@ var et = 0, H = class extends E {
       </section>
     `;
 	}
-	#m(e) {
-		let t = qe(e), n = this.#h(), r = this.transport, i = this.reportState?.status === "ready" ? this.#_() : null;
-		return R`
+	#h(e) {
+		let t = qe(e), n = this.#g(), r = this.transport, i = this.reportState?.status === "ready" ? this.#v() : null, a = this.resolvedDescriptor;
+		return z`
       <${t}
         .controller=${this.controller}
-        .descriptor=${this.descriptor}
+        .descriptor=${a}
         .context=${n}
         .text=${this.text}
         .transport=${r}
@@ -1508,22 +1517,22 @@ var et = 0, H = class extends E {
       ></${t}>
     `;
 	}
-	#h() {
-		if (this.controller === this.#l && this.descriptor === this.#u) return this.#c;
-		let e = this.#g(this.descriptor?.props ?? {});
-		return this.#l = this.controller, this.#u = this.descriptor, this.#c = e, e;
+	#g() {
+		if (this.controller === this.#u && this.resolvedDescriptor === this.#d) return this.#l;
+		let e = this.#_(this.resolvedDescriptor?.props ?? {});
+		return this.#u = this.controller, this.#d = this.resolvedDescriptor, this.#l = e, e;
 	}
-	#g(e) {
+	#_(e) {
 		if (this.controller) return {
-			regionId: `${N.reportRegion}-${this.controller.id}-${this.#s}`,
-			label: B(e.label, this.controller.config.label ?? this.controller.id),
+			regionId: `${F.reportRegion}-${this.controller.id}-${this.#c}`,
+			label: V(e.label, this.controller.config.label ?? this.controller.id),
 			description: typeof e.description == "string" && e.description.length > 0 ? e.description : void 0
 		};
 	}
-	#_() {
+	#v() {
 		let e = this.lastResult;
 		if (!e || !this.controller) return null;
-		if (e === this.#d && this.#f?.reportId === this.controller.id) return this.#f;
+		if (e === this.#f && this.#p?.reportId === this.controller.id) return this.#p;
 		let t = {
 			reportId: this.controller.id,
 			backend: e.backend,
@@ -1535,14 +1544,14 @@ var et = 0, H = class extends E {
 			meta: e.meta,
 			raw: e.raw
 		};
-		return this.#d = e, this.#f = t, t;
+		return this.#f = e, this.#p = t, t;
 	}
 };
-P([O({ attribute: !1 })], H.prototype, "controller", null), P([O({ attribute: !1 })], H.prototype, "registry", null), P([O({ attribute: !1 })], H.prototype, "text", null), P([O({ attribute: !1 })], H.prototype, "transport", null), P([O({ attribute: !1 })], H.prototype, "lastResult", null), P([k()], H.prototype, "descriptor", null), P([k()], H.prototype, "reportState", null), H = P([D(A.reportFrame)], H);
+I([A({ attribute: !1 })], U.prototype, "controller", null), I([A({ attribute: !1 })], U.prototype, "registry", null), I([A({ attribute: !1 })], U.prototype, "text", null), I([A({ attribute: !1 })], U.prototype, "transport", null), I([A({ attribute: !1 })], U.prototype, "lastResult", null), I([A({ attribute: !1 })], U.prototype, "descriptor", null), I([j()], U.prototype, "resolvedDescriptor", null), I([j()], U.prototype, "reportState", null), U = I([k(M.reportFrame)], U);
 //#endregion
 //#region src/primitives/components/explanation-panel.ts
-var tt = 0, U = class extends E {
-	static styles = s`
+var at = 0, W = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -1633,7 +1642,7 @@ var tt = 0, U = class extends E {
 	set lastResult(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = P;
 	get text() {
 		return this.#r;
 	}
@@ -1648,44 +1657,51 @@ var tt = 0, U = class extends E {
 		this.#i = e;
 	}
 	#a = null;
-	get explanationState() {
+	get resolvedDescriptor() {
 		return this.#a;
 	}
-	set explanationState(e) {
+	set resolvedDescriptor(e) {
 		this.#a = e;
 	}
-	#o = ++tt;
-	#s = null;
+	#o = null;
+	get explanationState() {
+		return this.#o;
+	}
+	set explanationState(e) {
+		this.#o = e;
+	}
+	#s = ++at;
 	#c = null;
-	#l;
+	#l = null;
 	#u;
-	#d = null;
-	#f = new Ye(this, (e) => {
-		this.descriptor = e?.descriptor ?? null, this.explanationState = e?.state ?? null;
+	#d;
+	#f = null;
+	#p = new Ye(this, (e) => {
+		this.resolvedDescriptor = this.descriptor, this.explanationState = e?.state ?? null;
 	});
 	willUpdate(e) {
-		e.has("controller") && this.#f.bind(this.controller), (e.has("lastResult") || e.has("controller")) && this.#g();
+		e.has("controller") && this.#p.bind(this.controller), e.has("descriptor") && (this.resolvedDescriptor = this.descriptor), (e.has("lastResult") || e.has("controller")) && this.#_();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.controller?.abort();
 	}
 	render() {
-		let e = this.descriptor, t = this.explanationState;
-		if (!e || !t) return b``;
+		let e = this.resolvedDescriptor, t = this.explanationState;
+		if (!e || !t) return S``;
 		let n = e.props, r = this.registry?.resolveExplanation(e.component);
-		return b`
+		return S`
       <div class="panel">
         <div class="header">
           <div class="copy">
             <p class="label">
-              ${B(n.label, this.controller?.config.label ?? this.text.explanationLabel)}
+              ${V(n.label, this.controller?.config.label ?? this.text.explanationLabel)}
             </p>
-            ${n.description ? b`<p class="description">${B(n.description)}</p>` : b``}
+            ${n.description ? S`<p class="description">${V(n.description)}</p>` : S``}
           </div>
           <span class="status">${t.status}</span>
         </div>
 
-        ${r ? this.#p(r) : b`
+        ${r ? this.#m(r) : S`
               <mlf-unsupported-component
                 role="explanation"
                 component=${e.component}
@@ -1695,37 +1711,37 @@ var tt = 0, U = class extends E {
       </div>
     `;
 	}
-	#p(e) {
-		let t = qe(e), n = this.#m();
-		return R`
+	#m(e) {
+		let t = qe(e), n = this.#h(), r = this.resolvedDescriptor;
+		return z`
       <${t}
         .controller=${this.controller}
-        .descriptor=${this.descriptor}
+        .descriptor=${r}
         .context=${n}
         .text=${this.text}
       ></${t}>
     `;
 	}
-	#m() {
-		if (this.controller === this.#u && this.descriptor === this.#d) return this.#l;
-		let e = this.#h(this.descriptor?.props ?? {});
-		return this.#u = this.controller, this.#d = this.descriptor, this.#l = e, e;
+	#h() {
+		if (this.controller === this.#d && this.resolvedDescriptor === this.#f) return this.#u;
+		let e = this.#g(this.resolvedDescriptor?.props ?? {});
+		return this.#d = this.controller, this.#f = this.resolvedDescriptor, this.#u = e, e;
 	}
-	#h(e) {
+	#g(e) {
 		if (this.controller) return {
-			regionId: `${N.explanationRegion}-${this.controller.id}-${this.#o}`,
+			regionId: `${F.explanationRegion}-${this.controller.id}-${this.#s}`,
 			label: typeof e.label == "string" && e.label.length > 0 ? e.label : this.controller.config.label ?? void 0,
 			description: typeof e.description == "string" && e.description.length > 0 ? e.description : void 0
 		};
 	}
-	#g() {
+	#_() {
 		let e = this.lastResult, t = this.controller;
 		if (!e || !t || t.state.status !== "idle") return;
-		let n = this.#_(e, t.id);
+		let n = this.#v(e, t.id);
 		t.fetch(n);
 	}
-	#_(e, t) {
-		if (e === this.#s && this.#c?.explanationId === t) return this.#c;
+	#v(e, t) {
+		if (e === this.#c && this.#l?.explanationId === t) return this.#l;
 		let n = {
 			explanationId: t,
 			backend: e.backend,
@@ -1737,14 +1753,14 @@ var tt = 0, U = class extends E {
 			meta: e.meta,
 			raw: e.raw
 		};
-		return this.#s = e, this.#c = n, n;
+		return this.#c = e, this.#l = n, n;
 	}
 };
-P([O({ attribute: !1 })], U.prototype, "controller", null), P([O({ attribute: !1 })], U.prototype, "registry", null), P([O({ attribute: !1 })], U.prototype, "lastResult", null), P([O({ attribute: !1 })], U.prototype, "text", null), P([k()], U.prototype, "descriptor", null), P([k()], U.prototype, "explanationState", null), U = P([D(A.explanationPanel)], U);
+I([A({ attribute: !1 })], W.prototype, "controller", null), I([A({ attribute: !1 })], W.prototype, "registry", null), I([A({ attribute: !1 })], W.prototype, "lastResult", null), I([A({ attribute: !1 })], W.prototype, "text", null), I([A({ attribute: !1 })], W.prototype, "descriptor", null), I([j()], W.prototype, "resolvedDescriptor", null), I([j()], W.prototype, "explanationState", null), W = I([k(M.explanationPanel)], W);
 //#endregion
 //#region src/primitives/base-field-element.ts
-var W = class extends E {
-	static styles = s`
+var G = class extends O {
+	static styles = c`
     :host {
       display: block;
       min-width: 0;
@@ -1830,7 +1846,7 @@ var W = class extends E {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = P;
 	get text() {
 		return this.#r;
 	}
@@ -1851,14 +1867,14 @@ var W = class extends E {
 	}
 	renderAssistiveText() {
 		let e = this.fieldContext;
-		return e ? b`
-      ${e.description && e.descriptionId ? b`<span id=${e.descriptionId} class="sr-only">${e.description}</span>` : S}
-      ${e.errorId ? b`
+		return e ? S`
+      ${e.description && e.descriptionId ? S`<span id=${e.descriptionId} class="sr-only">${e.description}</span>` : w}
+      ${e.errorId ? S`
             <span id=${e.errorId} class="sr-only" aria-live="polite">
               ${e.errors.join(" ")}
             </span>
-          ` : S}
-    ` : S;
+          ` : w}
+    ` : w;
 	}
 	getControlAttributes() {
 		let e = this.fieldContext;
@@ -1869,36 +1885,36 @@ var W = class extends E {
 		};
 	}
 };
-P([O({ attribute: !1 })], W.prototype, "controller", null), P([O({ attribute: !1 })], W.prototype, "descriptor", null), P([O({ attribute: !1 })], W.prototype, "context", null), P([O({ attribute: !1 })], W.prototype, "text", null);
+I([A({ attribute: !1 })], G.prototype, "controller", null), I([A({ attribute: !1 })], G.prototype, "descriptor", null), I([A({ attribute: !1 })], G.prototype, "context", null), I([A({ attribute: !1 })], G.prototype, "text", null);
 //#endregion
 //#region src/primitives/components/declarative-field.ts
-var nt = {
+var ot = {
 	text: {
 		component: "text-field",
-		tagName: A.textField
+		tagName: M.textField
 	},
 	number: {
 		component: "number-field",
-		tagName: A.numberField
+		tagName: M.numberField
 	},
 	boolean: {
 		component: "boolean-field",
-		tagName: A.booleanField
+		tagName: M.booleanField
 	},
 	select: {
 		component: "category-field",
-		tagName: A.categoryField
+		tagName: M.categoryField
 	},
 	date: {
 		component: "date-field",
-		tagName: A.dateField
+		tagName: M.dateField
 	},
 	series: {
 		component: "series-field",
-		tagName: A.seriesField
+		tagName: M.seriesField
 	}
-}, rt = class extends W {
-	static styles = [W.styles, s`
+}, st = class extends G {
+	static styles = [G.styles, c`
       :host {
         display: block;
       }
@@ -1906,11 +1922,11 @@ var nt = {
 	render() {
 		let e = this.#e();
 		if (!e) return this.renderAssistiveText();
-		let t = nt[e], n = qe(t.tagName), r = {
+		let t = ot[e], n = qe(t.tagName), r = {
 			component: t.component,
 			props: this.#t(e)
 		};
-		return R`
+		return z`
       <${n}
         .controller=${this.controller}
         .descriptor=${r}
@@ -1921,18 +1937,18 @@ var nt = {
 	}
 	#e() {
 		let e = this.props.widget;
-		return typeof e == "string" && e in nt ? e : null;
+		return typeof e == "string" && e in ot ? e : null;
 	}
 	#t(e) {
 		let t = { ...this.props };
 		return delete t.widget, e === "boolean" && (t.checked = t.value === !0), t;
 	}
 };
-rt = P([D(A.declarativeField)], rt);
+st = I([k(M.declarativeField)], st);
 //#endregion
 //#region src/primitives/base-report-element.ts
-var G = class extends E {
-	static styles = s`
+var K = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -1969,7 +1985,7 @@ var G = class extends E {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = P;
 	get text() {
 		return this.#r;
 	}
@@ -1997,10 +2013,10 @@ var G = class extends E {
 		return this.context;
 	}
 };
-P([O({ attribute: !1 })], G.prototype, "controller", null), P([O({ attribute: !1 })], G.prototype, "descriptor", null), P([O({ attribute: !1 })], G.prototype, "context", null), P([O({ attribute: !1 })], G.prototype, "text", null), P([O({ attribute: !1 })], G.prototype, "transport", null), P([O({ attribute: !1 })], G.prototype, "request", null);
+I([A({ attribute: !1 })], K.prototype, "controller", null), I([A({ attribute: !1 })], K.prototype, "descriptor", null), I([A({ attribute: !1 })], K.prototype, "context", null), I([A({ attribute: !1 })], K.prototype, "text", null), I([A({ attribute: !1 })], K.prototype, "transport", null), I([A({ attribute: !1 })], K.prototype, "request", null);
 //#endregion
 //#region src/primitives/components/presentation.ts
-var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutral", q = (e) => {
+var q = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutral", J = (e) => {
 	if (typeof e == "string") return e;
 	if (typeof e == "number" || typeof e == "boolean" || typeof e == "bigint") return String(e);
 	if (e == null) return "";
@@ -2009,37 +2025,37 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
 	} catch {
 		return Object.prototype.toString.call(e);
 	}
-}, it = (e) => Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
+}, ct = (e) => Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
 	label: e,
 	value: t
-})), at = (e) => b`<span>${q(e)}</span>`, ot = (e, t) => {
+})), lt = (e) => S`<span>${J(e)}</span>`, ut = (e, t) => {
 	switch (e.type) {
-		case "text": return typeof e.value == "string" && e.value.includes("\n") ? b`
-          <section class="node text ${K(e.tone)}" data-node-index=${t}>
-            ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
+		case "text": return typeof e.value == "string" && e.value.includes("\n") ? S`
+          <section class="node text ${q(e.tone)}" data-node-index=${t}>
+            ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
             <pre class="node-text">${e.value}</pre>
           </section>
-        ` : b`
-        <section class="node text ${K(e.tone)}" data-node-index=${t}>
-          ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
-          <p class="node-text">${q(e.value)}</p>
+        ` : S`
+        <section class="node text ${q(e.tone)}" data-node-index=${t}>
+          ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
+          <p class="node-text">${J(e.value)}</p>
         </section>
       `;
-		case "metric": return b`
-        <section class="node metric ${K(e.tone)}" data-node-index=${t}>
+		case "metric": return S`
+        <section class="node metric ${q(e.tone)}" data-node-index=${t}>
           <p class="node-label">${e.label}</p>
-          <p class="metric-value">${q(e.value)}</p>
-          ${e.hint ? b`<p class="node-hint">${e.hint}</p>` : S}
+          <p class="metric-value">${J(e.value)}</p>
+          ${e.hint ? S`<p class="node-hint">${e.hint}</p>` : w}
         </section>
       `;
-		case "kv": return b`
+		case "kv": return S`
         <section class="node kv" data-node-index=${t}>
-          ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
+          ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
           <dl class="kv-list">
-            ${it(e.entries).map((e) => b`
+            ${ct(e.entries).map((e) => S`
                 <div class="kv-row">
                   <dt>${e.label}</dt>
-                  <dd>${q(e.value)}</dd>
+                  <dd>${J(e.value)}</dd>
                 </div>
               `)}
           </dl>
@@ -2047,31 +2063,31 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
       `;
 		case "list": {
 			let n = e.ordered ? "ol" : "ul";
-			return b`
+			return S`
         <section class="node list" data-node-index=${t}>
-          ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
-          ${n === "ol" ? b`<ol class="node-list">
-                ${e.items.map((e) => b`<li>${q(e)}</li>`)}
-              </ol>` : b`<ul class="node-list">
-                ${e.items.map((e) => b`<li>${q(e)}</li>`)}
+          ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
+          ${n === "ol" ? S`<ol class="node-list">
+                ${e.items.map((e) => S`<li>${J(e)}</li>`)}
+              </ol>` : S`<ul class="node-list">
+                ${e.items.map((e) => S`<li>${J(e)}</li>`)}
               </ul>`}
         </section>
       `;
 		}
-		case "table": return b`
+		case "table": return S`
         <section class="node table" data-node-index=${t}>
-          ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
+          ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
           <div class="table-wrap">
             <table>
               <thead>
                 <tr>
-                  ${e.columns.map((e) => b`<th>${e}</th>`)}
+                  ${e.columns.map((e) => S`<th>${e}</th>`)}
                 </tr>
               </thead>
               <tbody>
-                ${e.rows.map((t) => b`
+                ${e.rows.map((t) => S`
                     <tr>
-                      ${(Array.isArray(t) ? t : e.columns.map((e) => t[e])).map((e) => b`<td>${at(e)}</td>`)}
+                      ${(Array.isArray(t) ? t : e.columns.map((e) => t[e])).map((e) => S`<td>${lt(e)}</td>`)}
                     </tr>
                   `)}
               </tbody>
@@ -2079,43 +2095,43 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
           </div>
         </section>
       `;
-		case "badge": return b`
+		case "badge": return S`
         <section class="node badge-row" data-node-index=${t}>
-          <span class="badge ${K(e.tone)}">${e.label}</span>
+          <span class="badge ${q(e.tone)}">${e.label}</span>
         </section>
       `;
-		case "notice": return b`
-        <section class="node notice ${K(e.tone)}" data-node-index=${t}>
-          ${e.title ? b`<p class="node-label">${e.title}</p>` : S}
-          <p class="node-text">${q(e.body)}</p>
+		case "notice": return S`
+        <section class="node notice ${q(e.tone)}" data-node-index=${t}>
+          ${e.title ? S`<p class="node-label">${e.title}</p>` : w}
+          <p class="node-text">${J(e.body)}</p>
         </section>
       `;
-		case "json": return b`
+		case "json": return S`
         <section class="node json" data-node-index=${t}>
-          ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
+          ${e.label ? S`<p class="node-label">${e.label}</p>` : w}
           <pre>${JSON.stringify(e.value, null, 2)}</pre>
         </section>
       `;
 	}
-}, st = (e, t) => {
-	if (!e && !t) return S;
-	let n = B(e?.title, t ?? ""), r = B(e?.description), i = e?.value, a = B(e?.badge);
-	return b`
-    <section class="summary ${K(e?.tone)}">
+}, dt = (e, t) => {
+	if (!e && !t) return w;
+	let n = V(e?.title, t ?? ""), r = V(e?.description), i = e?.value, a = V(e?.badge);
+	return S`
+    <section class="summary ${q(e?.tone)}">
       <div class="summary-copy">
-        ${n ? b`<p class="summary-title">${n}</p>` : S}
-        ${r ? b`<p class="summary-description">${r}</p>` : S}
+        ${n ? S`<p class="summary-title">${n}</p>` : w}
+        ${r ? S`<p class="summary-description">${r}</p>` : w}
       </div>
       <div class="summary-meta">
-        ${i != null && q(i).length > 0 ? b`<strong class="summary-value">${q(i)}</strong>` : S}
-        ${a ? b`<span class="badge ${K(e?.tone)}">${a}</span>` : S}
+        ${i != null && J(i).length > 0 ? S`<strong class="summary-value">${J(i)}</strong>` : w}
+        ${a ? S`<span class="badge ${q(e?.tone)}">${a}</span>` : w}
       </div>
     </section>
   `;
-}, ct = (e) => e.length === 0 ? S : b`<div class="presentation">
-    ${e.map((e, t) => ot(e, t))}
-  </div>`, lt = class extends G {
-	static styles = [G.styles, s`
+}, ft = (e) => e.length === 0 ? w : S`<div class="presentation">
+    ${e.map((e, t) => ut(e, t))}
+  </div>`, pt = class extends K {
+	static styles = [K.styles, c`
       :host {
         display: block;
       }
@@ -2262,17 +2278,17 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
     `];
 	render() {
 		let e = this.props, t = Array.isArray(e.content) ? e.content : [];
-		return b`
-      ${st(e.summary && typeof e.summary == "object" ? e.summary : null, this.reportContext?.label)}
-      ${ct(t)}
+		return S`
+      ${dt(e.summary && typeof e.summary == "object" ? e.summary : null, this.reportContext?.label)}
+      ${ft(t)}
     `;
 	}
 };
-lt = P([D(A.declarativeReport)], lt);
+pt = I([k(M.declarativeReport)], pt);
 //#endregion
 //#region src/primitives/base-explanation-element.ts
-var J = class extends E {
-	static styles = s`
+var Y = class extends O {
+	static styles = c`
     :host {
       display: block;
     }
@@ -2298,7 +2314,7 @@ var J = class extends E {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = P;
 	get text() {
 		return this.#r;
 	}
@@ -2312,11 +2328,11 @@ var J = class extends E {
 		return this.context;
 	}
 };
-P([O({ attribute: !1 })], J.prototype, "controller", null), P([O({ attribute: !1 })], J.prototype, "descriptor", null), P([O({ attribute: !1 })], J.prototype, "context", null), P([O({ attribute: !1 })], J.prototype, "text", null);
+I([A({ attribute: !1 })], Y.prototype, "controller", null), I([A({ attribute: !1 })], Y.prototype, "descriptor", null), I([A({ attribute: !1 })], Y.prototype, "context", null), I([A({ attribute: !1 })], Y.prototype, "text", null);
 //#endregion
 //#region src/primitives/components/declarative-explanation.ts
-var ut = class extends J {
-	static styles = [J.styles, s`
+var mt = class extends Y {
+	static styles = [Y.styles, c`
       :host {
         display: block;
       }
@@ -2452,26 +2468,374 @@ var ut = class extends J {
     `];
 	render() {
 		let e = this.props, t = Array.isArray(e.content) ? e.content : [], n = e.chromeless === !0, r = n && t.length === 1 && t[0]?.type === "text" && !t[0].label ? t[0] : null, i = !n && e.summary && typeof e.summary == "object" ? e.summary : null;
-		return r ? b`<pre class="chromeless-text">${B(r.value)}</pre>` : b`
-      ${st(i, n ? void 0 : this.explanationContext?.label)}
-      ${ct(t)}
+		return r ? S`<pre class="chromeless-text">${V(r.value)}</pre>` : S`
+      ${dt(i, n ? void 0 : this.explanationContext?.label)}
+      ${ft(t)}
     `;
 	}
 };
-ut = P([D(A.declarativeExplanation)], ut);
+mt = I([k(M.declarativeExplanation)], mt);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive.js
-var dt = {
+//#region src/primitives/components/error-focus.ts
+var ht = () => new Promise((e) => {
+	window.setTimeout(e, 0);
+}), gt = (e) => e instanceof HTMLElement && (e.matches("input, select, textarea, button, [tabindex]") || e.getAttribute("role") === "textbox"), _t = (e) => {
+	for (let t of e.querySelectorAll("*")) {
+		if (gt(t)) return t;
+		if (t instanceof HTMLElement && t.shadowRoot) {
+			let e = _t(t.shadowRoot);
+			if (e) return e;
+		}
+	}
+	return null;
+}, vt = (e, t) => Array.from(e.querySelectorAll("mlf-field-frame")).find((e) => e.dataset.fieldId === t) ?? null, yt = async (e) => e ? (e.scrollIntoView?.({
+	behavior: "smooth",
+	block: "center",
+	inline: "nearest"
+}), await ht(), _t(e.shadowRoot ?? e)?.focus(), !0) : !1, bt = (e) => e.find((e) => e.state.visible && e.state.errors.length > 0) ?? null, xt = c`
+  :host {
+    display: block;
+    flex: 1 1 auto;
+    align-self: stretch;
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+    font-family: var(--mlf-font-family-body);
+    min-width: 0;
+    min-height: 0;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .root {
+    display: grid;
+    gap: var(--mlf-shell-gap, 1rem);
+    inline-size: 100%;
+    block-size: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .root.split {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 0;
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: 100%;
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+  }
+
+  .panel {
+    display: grid;
+    gap: 0;
+    min-width: 0;
+    overflow: hidden;
+    border-radius: var(--mlf-panel-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow:
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
+  }
+
+  .pane-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1.5rem;
+    border-bottom: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
+    backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+    -webkit-backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+  }
+
+  .pane-copy {
+    display: grid;
+    gap: 0.28rem;
+  }
+
+  .eyebrow {
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--mlf-pane-eyebrow-color, var(--mlf-color-text-muted, #475569));
+  }
+
+  .pane-title {
+    margin: 0;
+    color: var(--mlf-pane-title-color, var(--mlf-color-text, #0f172a));
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .status {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 999px;
+    background: var(
+      --mlf-status-bg,
+      color-mix(in srgb, var(--mlf-color-accent, #1e40af) 10%, transparent)
+    );
+    color: var(--mlf-status-color, var(--mlf-color-secondary, #475569));
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .pane-body {
+    display: grid;
+    gap: 1rem;
+    padding: 1rem 1rem 0;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem 1rem;
+    color: var(--mlf-color-text-muted, #475569);
+    font-size: 0.84rem;
+  }
+
+  .collection {
+    display: grid;
+    gap: var(--mlf-section-gap, 1rem);
+  }
+
+  .actions {
+    padding: 1rem 1.5rem 1.25rem;
+    border-top: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
+  }
+
+  ${c`
+  .split-shell {
+    display: flex;
+    flex: 1 1 auto;
+    inline-size: 100%;
+    block-size: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+  }
+
+  .left-section,
+  .right-section,
+  .form-inputs,
+  .results-area {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .left-section,
+  .right-section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow:
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 14px 30px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.08));
+  }
+
+  .left-section {
+    flex: 0 1 auto;
+    resize: horizontal;
+    min-width: min-content;
+    max-width: var(--mlf-shell-left-max-width, 48rem);
+    border-right: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+  }
+
+  .right-section {
+    flex: 1 1 0%;
+    min-width: var(--mlf-shell-right-min-width, 24rem);
+    border-left: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+  }
+
+  .scroll-y {
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    scrollbar-color: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 60%, transparent)
+      transparent;
+  }
+
+  .scroll-y::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-y::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 55%, transparent);
+    border-radius: 999px;
+  }
+
+  .sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 2rem;
+    border-bottom: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
+    backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+    -webkit-backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+  }
+
+  .sticky-header h2 {
+    margin: 0;
+    color: var(--mlf-color-text, #0f172a);
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .sticky-meta {
+    color: var(--mlf-color-text-muted, #475569);
+    font-size: var(--mlf-font-size-xs, 0.72rem);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .form-inputs,
+  .results-area {
+    flex: 1 1 auto;
+  }
+
+  .split-content {
+    display: grid;
+    gap: 1rem;
+    padding: 1.25rem 2rem 2rem;
+  }
+
+  .form-actions {
+    padding: 1rem 2rem;
+    border-top: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
+  }
+
+  .empty-report-state {
+    display: grid;
+    gap: 0.35rem;
+    padding: 1.1rem 1.2rem;
+    border: var(--mlf-border-width, 1px) dashed
+      color-mix(in srgb, var(--mlf-color-border, #e2e8f0) 90%, transparent);
+    border-radius: var(--mlf-radius-md, 16px);
+    background: color-mix(in srgb, var(--mlf-color-surface, #ffffff) 84%, transparent);
+    color: var(--mlf-color-text-muted, #475569);
+  }
+
+  .empty-report-title {
+    margin: 0;
+    color: var(--mlf-color-text, #0f172a);
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .empty-report-copy {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    line-height: var(--mlf-line-height-normal, 1.5);
+  }
+
+  @media (max-width: 900px) {
+    .root.split {
+      display: grid;
+    }
+
+    .split-shell {
+      display: grid;
+    }
+
+    .left-section,
+    .right-section {
+      min-width: 0;
+      max-width: none;
+      resize: none;
+      border-left: none;
+      border-right: none;
+    }
+
+    .sticky-header,
+    .split-content,
+    .form-actions {
+      padding-inline: 1.25rem;
+    }
+  }
+`}
+`, St = (e) => ({
+	component: "unsupported-field",
+	props: { label: e.config.label ?? e.id }
+}), Ct = (e, t) => t?.getField(e.kind)?.describe(e.config, {
+	fieldId: e.id,
+	state: e.state,
+	value: e.state.value
+}) ?? St(e), wt = (e, t, n) => {
+	let r = n?.getReport(e.kind);
+	return r ? r.describe(e.config, {
+		reportId: e.id,
+		state: e.state,
+		payload: e.state.payload,
+		result: t.state.lastResult
+	}) : null;
+}, Tt = (e, t) => {
+	let n = t?.getExplanation(e.kind);
+	return n ? n.describe(e.config, {
+		explanationId: e.id,
+		state: e.state
+	}) : null;
+}, Et = (e, t, n) => t.map((t) => e.getField(t)).filter((e) => e !== void 0).map((e) => ({
+	controller: e,
+	descriptor: Ct(e, n)
+})), Dt = (e, t, n, r) => (n === "always" ? e.reports : t.map((t) => e.getReport(t)).filter((e) => e !== void 0)).map((t) => ({
+	controller: t,
+	descriptor: wt(t, e, r)
+})).filter((e) => e.descriptor !== null), Ot = (e, t, n) => t.map((t) => e.getExplanation(t)).filter((e) => e !== void 0).map((e) => ({
+	controller: e,
+	descriptor: Tt(e, n)
+})), kt = {
 	ATTRIBUTE: 1,
 	CHILD: 2,
 	PROPERTY: 3,
 	BOOLEAN_ATTRIBUTE: 4,
 	EVENT: 5,
 	ELEMENT: 6
-}, ft = (e) => (...t) => ({
+}, At = (e) => (...t) => ({
 	_$litDirective$: e,
 	values: t
-}), pt = class {
+}), jt = class {
 	constructor(e) {}
 	get _$AU() {
 		return this._$AM._$AU;
@@ -2485,9 +2849,9 @@ var dt = {
 	update(e, t) {
 		return this.render(...t);
 	}
-}, { I: mt } = Ie, ht = (e) => e, gt = () => document.createComment(""), _t = (e, t, n) => {
+}, { I: Mt } = Fe, Nt = (e) => e, Pt = () => document.createComment(""), Ft = (e, t, n) => {
 	let r = e._$AA.parentNode, i = t === void 0 ? e._$AB : t._$AA;
-	if (n === void 0) n = new mt(r.insertBefore(gt(), i), r.insertBefore(gt(), i), e, e.options);
+	if (n === void 0) n = new Mt(r.insertBefore(Pt(), i), r.insertBefore(Pt(), i), e, e.options);
 	else {
 		let t = n._$AB.nextSibling, a = n._$AM, o = a !== e;
 		if (o) {
@@ -2497,21 +2861,21 @@ var dt = {
 		if (t !== i || o) {
 			let e = n._$AA;
 			for (; e !== t;) {
-				let t = ht(e).nextSibling;
-				ht(r).insertBefore(e, i), e = t;
+				let t = Nt(e).nextSibling;
+				Nt(r).insertBefore(e, i), e = t;
 			}
 		}
 	}
 	return n;
-}, Y = (e, t, n = e) => (e._$AI(t, n), e), vt = {}, yt = (e, t = vt) => e._$AH = t, bt = (e) => e._$AH, xt = (e) => {
+}, X = (e, t, n = e) => (e._$AI(t, n), e), It = {}, Lt = (e, t = It) => e._$AH = t, Rt = (e) => e._$AH, zt = (e) => {
 	e._$AR(), e._$AA.remove();
-}, St = (e, t, n) => {
+}, Bt = (e, t, n) => {
 	let r = /* @__PURE__ */ new Map();
 	for (let i = t; i <= n; i++) r.set(e[i], i);
 	return r;
-}, X = ft(class extends pt {
+}, Vt = At(class extends jt {
 	constructor(e) {
-		if (super(e), e.type !== dt.CHILD) throw Error("repeat() can only be used in text expressions");
+		if (super(e), e.type !== kt.CHILD) throw Error("repeat() can only be used in text expressions");
 	}
 	dt(e, t, n) {
 		let r;
@@ -2527,334 +2891,206 @@ var dt = {
 		return this.dt(e, t, n).values;
 	}
 	update(e, [t, n, r]) {
-		let i = bt(e), { values: a, keys: o } = this.dt(t, n, r);
+		let i = Rt(e), { values: a, keys: o } = this.dt(t, n, r);
 		if (!Array.isArray(i)) return this.ut = o, a;
 		let s = this.ut ??= [], c = [], l, u, d = 0, f = i.length - 1, p = 0, m = a.length - 1;
 		for (; d <= f && p <= m;) if (i[d] === null) d++;
 		else if (i[f] === null) f--;
-		else if (s[d] === o[p]) c[p] = Y(i[d], a[p]), d++, p++;
-		else if (s[f] === o[m]) c[m] = Y(i[f], a[m]), f--, m--;
-		else if (s[d] === o[m]) c[m] = Y(i[d], a[m]), _t(e, c[m + 1], i[d]), d++, m--;
-		else if (s[f] === o[p]) c[p] = Y(i[f], a[p]), _t(e, i[d], i[f]), f--, p++;
-		else if (l === void 0 && (l = St(o, p, m), u = St(s, d, f)), l.has(s[d])) if (l.has(s[f])) {
+		else if (s[d] === o[p]) c[p] = X(i[d], a[p]), d++, p++;
+		else if (s[f] === o[m]) c[m] = X(i[f], a[m]), f--, m--;
+		else if (s[d] === o[m]) c[m] = X(i[d], a[m]), Ft(e, c[m + 1], i[d]), d++, m--;
+		else if (s[f] === o[p]) c[p] = X(i[f], a[p]), Ft(e, i[d], i[f]), f--, p++;
+		else if (l === void 0 && (l = Bt(o, p, m), u = Bt(s, d, f)), l.has(s[d])) if (l.has(s[f])) {
 			let t = u.get(o[p]), n = t === void 0 ? null : i[t];
 			if (n === null) {
-				let t = _t(e, i[d]);
-				Y(t, a[p]), c[p] = t;
-			} else c[p] = Y(n, a[p]), _t(e, i[d], n), i[t] = null;
+				let t = Ft(e, i[d]);
+				X(t, a[p]), c[p] = t;
+			} else c[p] = X(n, a[p]), Ft(e, i[d], n), i[t] = null;
 			p++;
-		} else xt(i[f]), f--;
-		else xt(i[d]), d++;
+		} else zt(i[f]), f--;
+		else zt(i[d]), d++;
 		for (; p <= m;) {
-			let t = _t(e, c[m + 1]);
-			Y(t, a[p]), c[p++] = t;
+			let t = Ft(e, c[m + 1]);
+			X(t, a[p]), c[p++] = t;
 		}
 		for (; d <= f;) {
 			let e = i[d++];
-			e !== null && xt(e);
+			e !== null && zt(e);
 		}
-		return this.ut = o, yt(e, c), x;
-	}
-}), Ct = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), wt = (e, t) => e.status === t.status && e.submitCount === t.submitCount && e.hasFormErrors === t.hasFormErrors && e.hasLastResult === t.hasLastResult && e.submissionLoaded === t.submissionLoaded && e.submissionTotal === t.submissionTotal && e.submissionMessage === t.submissionMessage && e.submissionSessionMessageCount === t.submissionSessionMessageCount && Ct(e.visibleFieldIds, t.visibleFieldIds) && Ct(e.visibleReportIds, t.visibleReportIds) && Ct(e.explanationIds, t.explanationIds), Z = class extends E {
-	static styles = s`
-    :host {
-      display: block;
-      flex: 1 1 auto;
-      align-self: stretch;
-      inline-size: 100%;
-      block-size: 100%;
-      max-inline-size: 100%;
-      max-block-size: 100%;
-      color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
-      background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
-      font-family: var(--mlf-font-family-body);
-      min-width: 0;
-      min-height: 0;
-    }
+		return this.ut = o, Lt(e, c), C;
+	}
+}), Ht = (e, t, n) => S`
+  <div class="collection" part="field-list">
+    ${Vt(e, (e) => e.controller.id, (e) => S`
+        <mlf-field-frame
+          data-field-id=${e.controller.id}
+          .controller=${e.controller}
+          .descriptor=${e.descriptor}
+          .registry=${t}
+          .text=${n}
+        ></mlf-field-frame>
+      `)}
+  </div>
+`, Ut = (e, t, n, r, i) => S`
+  <div class="collection" part="report-list">
+    ${Vt(e, (e) => e.controller.id, (e) => S`
+        <mlf-report-frame
+          .controller=${e.controller}
+          .descriptor=${e.descriptor}
+          .registry=${t}
+          .text=${n}
+          .transport=${r}
+          .lastResult=${i}
+        ></mlf-report-frame>
+      `)}
+  </div>
+`, Wt = (e, t, n, r, i) => {
+	let a = Ot(e, t.explanationIds, r);
+	return a.length === 0 ? w : S`
+    <div class="collection" part="explanation-list">
+      ${Vt(a, (e) => e.controller.id, (t) => S`
+          <mlf-explanation-panel
+            .controller=${t.controller}
+            .descriptor=${t.descriptor}
+            .registry=${n}
+            .text=${i}
+            .lastResult=${e.state.lastResult ?? null}
+          ></mlf-explanation-panel>
+        `)}
+    </div>
+  `;
+}, Gt = (e) => S`
+  <div class="root stacked">
+    <section class="panel form-pane" part="form-pane">
+      <header class="pane-header">
+        <div class="pane-copy">
+          <p class="eyebrow">${e.text.formEyebrow}</p>
+          <h1 class="pane-title">${e.formLabel}</h1>
+        </div>
+        <span class="status">${e.text.formStatusLabel(e.state.status)}</span>
+      </header>
+
+      <div class="pane-body">
+        <div class="meta">
+          <span>${e.text.formMetaFields(e.visibleFields.length)}</span>
+          <span>${e.text.formMetaReports(e.form.reports.length)}</span>
+          <span>${e.text.formMetaSubmits(e.state.submitCount)}</span>
+        </div>
 
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
+        <mlf-form-errors .form=${e.form} .text=${e.text}></mlf-form-errors>
+        ${Ht(e.visibleFields, e.registry, e.text)}
+      </div>
 
-    .root {
-      display: grid;
-      gap: var(--mlf-shell-gap, 1rem);
-      inline-size: 100%;
-      block-size: 100%;
-      min-width: 0;
-      min-height: 0;
-    }
+      <div class="actions" part="actions">
+        <mlf-submit-button
+          .status=${e.state.status}
+          .idleLabel=${e.submitLabel}
+          .validatingLabel=${e.validatingLabel}
+          .submittingLabel=${e.submittingLabel}
+          .loaded=${e.state.submissionLoaded}
+          .total=${e.state.submissionTotal}
+          .progressMessage=${e.state.submissionMessage}
+          .sessionMessageCount=${e.state.submissionSessionMessageCount}
+          @mlf-submit-request=${e.onSubmitRequest}
+        ></mlf-submit-button>
+      </div>
+    </section>
 
-    .root.split {
-      display: flex;
-      flex: 1 1 auto;
-      gap: 0;
-      overflow: hidden;
-      inline-size: 100%;
-      block-size: 100%;
-      background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
-    }
+    ${e.showReports ? S`
+          <aside class="panel report-pane" part="report-pane">
+            <header class="pane-header">
+              <div class="pane-copy">
+                <p class="eyebrow">${e.text.reportEyebrow}</p>
+                <h2 class="pane-title">${e.reportsLabel}</h2>
+              </div>
+              <span class="status">${e.reportsToRender.length}</span>
+            </header>
 
-    .panel {
-      display: grid;
-      gap: 0;
-      min-width: 0;
-      overflow: hidden;
-      border-radius: var(--mlf-panel-radius, 12px);
-      border: var(--mlf-border-width, 1px) solid
-        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
-      background: var(--mlf-panel-bg, var(--mlf-color-surface, #ffffff));
-      box-shadow:
-        0 2px 4px var(--mlf-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
-        0 8px 16px var(--mlf-panel-shadow, rgba(0, 0, 0, 0.04));
-    }
+            <div class="pane-body">
+              ${Ut(e.reportsToRender, e.registry, e.text, e.reportTransport, e.form.state.lastResult ?? null)}
+              ${Wt(e.form, e.state, e.registry, e.presentationRegistry, e.text)}
+            </div>
+          </aside>
+        ` : w}
+  </div>
+`, Kt = (e) => S`
+  <div class="root split">
+    <div class="split-shell">
+      <section class="left-section" part="form-pane">
+        <div class="form-inputs scroll-y">
+          <header class="sticky-header">
+            <h2>${e.formLabel}</h2>
+            <span class="sticky-meta">${e.text.formStatusLabel(e.state.status)}</span>
+          </header>
 
-    .pane-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 1rem;
-      padding: 0.85rem 1.5rem;
-      border-bottom: var(--mlf-border-width, 1px) solid
-        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
-      background: var(--mlf-panel-header-bg, rgba(255, 255, 255, 0.6));
-      backdrop-filter: blur(var(--mlf-header-blur, 3px));
-      -webkit-backdrop-filter: blur(var(--mlf-header-blur, 3px));
-    }
+          <div class="split-content">
+            <div class="meta">
+              <span>${e.text.formMetaFields(e.visibleFields.length)}</span>
+              <span>${e.text.formMetaReports(e.form.reports.length)}</span>
+              <span>${e.text.formMetaSubmits(e.state.submitCount)}</span>
+            </div>
 
-    .pane-copy {
-      display: grid;
-      gap: 0.28rem;
-    }
+            <mlf-form-errors .form=${e.form} .text=${e.text}></mlf-form-errors>
+            ${Ht(e.visibleFields, e.registry, e.text)}
+          </div>
+        </div>
 
-    .eyebrow {
-      margin: 0;
-      font-size: 0.8rem;
-      font-weight: 600;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--mlf-pane-eyebrow-color, var(--mlf-color-text-muted, #475569));
-    }
+        <div class="form-actions" part="actions">
+          <mlf-submit-button
+            .status=${e.state.status}
+            .idleLabel=${e.submitLabel}
+            .validatingLabel=${e.validatingLabel}
+            .submittingLabel=${e.submittingLabel}
+            .loaded=${e.state.submissionLoaded}
+            .total=${e.state.submissionTotal}
+            .progressMessage=${e.state.submissionMessage}
+            .sessionMessageCount=${e.state.submissionSessionMessageCount}
+            @mlf-submit-request=${e.onSubmitRequest}
+          ></mlf-submit-button>
+        </div>
+      </section>
 
-    .pane-title {
-      margin: 0;
-      color: var(--mlf-pane-title-color, var(--mlf-color-text, #0f172a));
-      font-size: 1rem;
-      font-weight: 600;
-    }
+      ${e.showReports ? S`
+            <section class="right-section" part="report-pane">
+              <div class="results-area scroll-y">
+                <header class="sticky-header">
+                  <h2>${e.reportsLabel}</h2>
+                  <span class="sticky-meta">${e.reportsToRender.length}</span>
+                </header>
 
-    .status {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 2rem;
-      padding: 0.35rem 0.75rem;
-      border-radius: 999px;
-      background: var(
-        --mlf-status-bg,
-        color-mix(in srgb, var(--mlf-color-accent, #1e40af) 10%, transparent)
-      );
-      color: var(--mlf-status-color, var(--mlf-color-secondary, #475569));
-      font-size: 0.72rem;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-
-    .pane-body {
-      display: grid;
-      gap: 1rem;
-      padding: 1rem 1rem 0;
-    }
-
-    .meta {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.6rem 1rem;
-      color: var(--mlf-color-text-muted, #475569);
-      font-size: 0.84rem;
-    }
-
-    .collection {
-      display: grid;
-      gap: var(--mlf-section-gap, 1rem);
-    }
-
-    .actions {
-      padding: 1rem 1.5rem 1.25rem;
-      border-top: var(--mlf-border-width, 1px) solid
-        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
-      background: var(--mlf-panel-footer-bg, var(--mlf-color-bg-light, #f5f7fa));
-    }
-
-    .split-shell {
-      display: flex;
-      flex: 1 1 auto;
-      inline-size: 100%;
-      block-size: 100%;
-      min-width: 0;
-      min-height: 0;
-      overflow: hidden;
-      background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
-    }
-
-    .left-section,
-    .right-section,
-    .form-inputs,
-    .results-area {
-      min-width: 0;
-      min-height: 0;
-    }
-
-    .left-section,
-    .right-section {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: hidden;
-      background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
-      box-shadow:
-        0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
-        0 14px 30px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.08));
-    }
-
-    .left-section {
-      flex: 0 1 auto;
-      resize: horizontal;
-      min-width: min-content;
-      max-width: var(--mlf-shell-left-max-width, 48rem);
-      border-right: var(--mlf-border-width, 1px) solid
-        var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
-    }
-
-    .right-section {
-      flex: 1 1 0%;
-      min-width: var(--mlf-shell-right-min-width, 24rem);
-      border-left: var(--mlf-border-width, 1px) solid
-        var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
-    }
-
-    .scroll-y {
-      overflow-y: auto;
-      overflow-x: hidden;
-      overscroll-behavior: contain;
-      scrollbar-color: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 60%, transparent)
-        transparent;
-    }
-
-    .scroll-y::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    .scroll-y::-webkit-scrollbar-thumb {
-      background: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 55%, transparent);
-      border-radius: 999px;
-    }
-
-    .sticky-header {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      padding: 0.75rem 2rem;
-      border-bottom: var(--mlf-border-width, 1px) solid
-        var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
-      background: var(
-        --mlf-shell-header-bg,
-        color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
-      );
-      backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
-      -webkit-backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
-    }
-
-    .sticky-header h2 {
-      margin: 0;
-      color: var(--mlf-color-text, #0f172a);
-      font-size: 1rem;
-      font-weight: 600;
-    }
-
-    .sticky-meta {
-      color: var(--mlf-color-text-muted, #475569);
-      font-size: var(--mlf-font-size-xs, 0.72rem);
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-
-    .form-inputs,
-    .results-area {
-      flex: 1 1 auto;
-    }
-
-    .split-content {
-      display: grid;
-      gap: 1rem;
-      padding: 1.25rem 2rem 2rem;
-    }
-
-    .form-actions {
-      padding: 1rem 2rem;
-      border-top: var(--mlf-border-width, 1px) solid
-        var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
-      background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
-    }
-
-    .empty-report-state {
-      display: grid;
-      gap: 0.35rem;
-      padding: 1.1rem 1.2rem;
-      border: var(--mlf-border-width, 1px) dashed
-        color-mix(in srgb, var(--mlf-color-border, #e2e8f0) 90%, transparent);
-      border-radius: var(--mlf-radius-md, 16px);
-      background: color-mix(in srgb, var(--mlf-color-surface, #ffffff) 84%, transparent);
-      color: var(--mlf-color-text-muted, #475569);
-    }
-
-    .empty-report-title {
-      margin: 0;
-      color: var(--mlf-color-text, #0f172a);
-      font-size: 0.95rem;
-      font-weight: 600;
-    }
-
-    .empty-report-copy {
-      margin: 0;
-      font-size: var(--mlf-font-size-sm, 0.84rem);
-      line-height: var(--mlf-line-height-normal, 1.5);
-    }
-
-    @media (max-width: 900px) {
-      .root.split {
-        display: grid;
-      }
-
-      .split-shell {
-        display: grid;
-      }
-
-      .left-section,
-      .right-section {
-        min-width: 0;
-        max-width: none;
-        resize: none;
-        border-left: none;
-        border-right: none;
-      }
-
-      .sticky-header,
-      .split-content,
-      .form-actions {
-        padding-inline: 1.25rem;
-      }
-    }
-  `;
+                <div class="split-content">
+                  ${e.reportsToRender.length > 0 ? Ut(e.reportsToRender, e.registry, e.text, e.reportTransport, e.form.state.lastResult ?? null) : S`
+                        <div class="empty-report-state">
+                          <p class="empty-report-title">${e.text.reportsEmptyTitle}</p>
+                          <p class="empty-report-copy">${e.text.reportsEmptyBody}</p>
+                        </div>
+                      `}
+                  ${Wt(e.form, e.state, e.registry, e.presentationRegistry, e.text)}
+                </div>
+              </div>
+            </section>
+          ` : w}
+    </div>
+  </div>
+`, qt = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Jt = (e, t) => e.status === t.status && e.submitCount === t.submitCount && e.hasFormErrors === t.hasFormErrors && e.hasLastResult === t.hasLastResult && e.submissionLoaded === t.submissionLoaded && e.submissionTotal === t.submissionTotal && e.submissionMessage === t.submissionMessage && e.submissionSessionMessageCount === t.submissionSessionMessageCount && qt(e.visibleFieldIds, t.visibleFieldIds) && qt(e.visibleReportIds, t.visibleReportIds) && qt(e.explanationIds, t.explanationIds) && qt(e.reportStateKeys, t.reportStateKeys) && qt(e.explanationStateKeys, t.explanationStateKeys), Yt = (e) => {
+	let t = e.state;
+	return {
+		status: t.status,
+		submitCount: t.submitCount,
+		hasFormErrors: t.errors.form.length > 0,
+		hasLastResult: t.lastResult !== null,
+		submissionLoaded: t.submissionProgress?.loaded,
+		submissionTotal: t.submissionProgress?.total,
+		submissionMessage: t.submissionProgress?.message,
+		submissionSessionMessageCount: t.submissionProgress?.sessionMessageCount,
+		visibleFieldIds: e.fields.filter((e) => e.state.visible).map((e) => e.id),
+		visibleReportIds: e.reports.map((e) => e.id),
+		explanationIds: t.lastResult === null ? [] : e.explanations.map((e) => e.id),
+		reportStateKeys: e.reports.map((e) => `${e.id}:${e.state.status}:${e.state.payload === void 0}:${e.state.error === null}`),
+		explanationStateKeys: e.explanations.map((e) => `${e.id}:${e.state.status}:${e.state.result === void 0}:${e.state.error === null}`)
+	};
+}, Z = class extends O {
+	static styles = xt;
 	#e;
 	get form() {
 		return this.#e;
@@ -2869,268 +3105,135 @@ var dt = {
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = "stacked";
-	get layout() {
+	#n;
+	get presentationRegistry() {
 		return this.#n;
 	}
-	set layout(e) {
+	set presentationRegistry(e) {
 		this.#n = e;
 	}
-	#r = j.form;
-	get formLabel() {
+	#r = "stacked";
+	get layout() {
 		return this.#r;
 	}
-	set formLabel(e) {
+	set layout(e) {
 		this.#r = e;
 	}
-	#i = j.reports;
-	get reportsLabel() {
+	#i = N.form;
+	get formLabel() {
 		return this.#i;
 	}
-	set reportsLabel(e) {
+	set formLabel(e) {
 		this.#i = e;
 	}
-	#a = j.submit;
-	get submitLabel() {
+	#a = N.reports;
+	get reportsLabel() {
 		return this.#a;
 	}
-	set submitLabel(e) {
+	set reportsLabel(e) {
 		this.#a = e;
 	}
-	#o = j.validating;
-	get validatingLabel() {
+	#o = N.submit;
+	get submitLabel() {
 		return this.#o;
 	}
-	set validatingLabel(e) {
+	set submitLabel(e) {
 		this.#o = e;
 	}
-	#s = j.submitting;
-	get submittingLabel() {
+	#s = N.validating;
+	get validatingLabel() {
 		return this.#s;
 	}
-	set submittingLabel(e) {
+	set validatingLabel(e) {
 		this.#s = e;
 	}
-	#c = "auto";
-	get reportPane() {
+	#c = N.submitting;
+	get submittingLabel() {
 		return this.#c;
 	}
-	set reportPane(e) {
+	set submittingLabel(e) {
 		this.#c = e;
 	}
-	#l = M;
-	get text() {
+	#l = "auto";
+	get reportPane() {
 		return this.#l;
 	}
-	set text(e) {
+	set reportPane(e) {
 		this.#l = e;
 	}
-	#u;
-	get reportTransport() {
+	#u = P;
+	get text() {
 		return this.#u;
 	}
-	set reportTransport(e) {
+	set text(e) {
 		this.#u = e;
 	}
-	#d = null;
-	get formState() {
+	#d;
+	get reportTransport() {
 		return this.#d;
 	}
-	set formState(e) {
+	set reportTransport(e) {
 		this.#d = e;
 	}
 	#f = null;
-	#p;
+	get formState() {
+		return this.#f;
+	}
+	set formState(e) {
+		this.#f = e;
+	}
+	#p = null;
+	#m;
 	willUpdate(e) {
-		e.has("form") && this.#_();
+		e.has("form") && this.#g();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#_();
+		super.connectedCallback(), this.#g();
 	}
 	disconnectedCallback() {
-		this.#f?.(), this.#f = null, this.#p = void 0, super.disconnectedCallback();
+		this.#p?.(), this.#p = null, this.#m = void 0, super.disconnectedCallback();
 	}
 	render() {
 		let e = this.form, t = this.formState;
-		if (!e || !t) return b``;
-		let n = this.text, r = this.reportTransport, i = t.visibleFieldIds.map((t) => e.getField(t)).filter((e) => e !== void 0), a = t.visibleReportIds.map((t) => e.getReport(t)).filter((e) => e !== void 0), o = this.reportPane === "always" ? e.reports : a, s = this.reportPane !== "hidden" && (e.reports.length > 0 || t.hasFormErrors), c = this.layout === "split" ? s : this.reportPane === "always" ? e.reports.length > 0 : this.reportPane === "auto" ? o.length > 0 : !1;
-		return this.layout === "split" ? this.#m(e, t, i, o, c) : b`
-      <div class="root ${this.layout}">
-        <section class="panel form-pane" part="form-pane">
-          <header class="pane-header">
-            <div class="pane-copy">
-              <p class="eyebrow">${n.formEyebrow}</p>
-              <h1 class="pane-title">${this.formLabel}</h1>
-            </div>
-            <span class="status">${n.formStatusLabel(t.status)}</span>
-          </header>
-
-          <div class="pane-body">
-            <div class="meta">
-              <span>${n.formMetaFields(i.length)}</span>
-              <span>${n.formMetaReports(e.reports.length)}</span>
-              <span>${n.formMetaSubmits(t.submitCount)}</span>
-            </div>
-
-            <mlf-form-errors .form=${e} .text=${n}></mlf-form-errors>
-
-            <div class="collection" part="field-list">
-              ${X(i, (e) => e.id, (e) => b`
-                  <mlf-field-frame
-                    .controller=${e}
-                    .registry=${this.registry}
-                    .text=${n}
-                  ></mlf-field-frame>
-                `)}
-            </div>
-          </div>
-
-          <div class="actions" part="actions">
-            <mlf-submit-button
-              .status=${t.status}
-              .idleLabel=${this.submitLabel}
-              .validatingLabel=${this.validatingLabel}
-              .submittingLabel=${this.submittingLabel}
-              .loaded=${t.submissionLoaded}
-              .total=${t.submissionTotal}
-              .progressMessage=${t.submissionMessage}
-              .sessionMessageCount=${t.submissionSessionMessageCount}
-              @mlf-submit-request=${this.#g}
-            ></mlf-submit-button>
-          </div>
-        </section>
-
-        ${c ? b`
-              <aside class="panel report-pane" part="report-pane">
-                <header class="pane-header">
-                  <div class="pane-copy">
-                    <p class="eyebrow">${n.reportEyebrow}</p>
-                    <h2 class="pane-title">${this.reportsLabel}</h2>
-                  </div>
-                  <span class="status">${o.length}</span>
-                </header>
-
-                <div class="pane-body">
-                  <div class="collection" part="report-list">
-                    ${X(o, (e) => e.id, (e) => b`
-                        <mlf-report-frame
-                          .controller=${e}
-                          .registry=${this.registry}
-                          .text=${n}
-                          .transport=${r}
-                          .lastResult=${this.form?.state.lastResult ?? null}
-                        ></mlf-report-frame>
-                      `)}
-                  </div>
-                  ${this.#h(e, t, n)}
-                </div>
-              </aside>
-            ` : b``}
-      </div>
-    `;
-	}
-	#m(e, t, n, r, i) {
-		let a = this.text, o = this.reportTransport;
-		return b`
-      <div class="root split">
-        <div class="split-shell">
-          <section class="left-section" part="form-pane">
-            <div class="form-inputs scroll-y">
-              <header class="sticky-header">
-                <h2>${this.formLabel}</h2>
-                <span class="sticky-meta">${a.formStatusLabel(t.status)}</span>
-              </header>
-
-              <div class="split-content">
-                <div class="meta">
-                  <span>${a.formMetaFields(n.length)}</span>
-                  <span>${a.formMetaReports(e.reports.length)}</span>
-                  <span>${a.formMetaSubmits(t.submitCount)}</span>
-                </div>
-
-                <mlf-form-errors .form=${e} .text=${a}></mlf-form-errors>
-
-                <div class="collection" part="field-list">
-                  ${X(n, (e) => e.id, (e) => b`
-                      <mlf-field-frame
-                        .controller=${e}
-                        .registry=${this.registry}
-                        .text=${a}
-                      ></mlf-field-frame>
-                    `)}
-                </div>
-              </div>
-            </div>
-
-            <div class="form-actions" part="actions">
-              <mlf-submit-button
-                .status=${t.status}
-                .idleLabel=${this.submitLabel}
-                .validatingLabel=${this.validatingLabel}
-                .submittingLabel=${this.submittingLabel}
-                .loaded=${t.submissionLoaded}
-                .total=${t.submissionTotal}
-                .progressMessage=${t.submissionMessage}
-                .sessionMessageCount=${t.submissionSessionMessageCount}
-                @mlf-submit-request=${this.#g}
-              ></mlf-submit-button>
-            </div>
-          </section>
-
-          ${i ? b`
-                <section class="right-section" part="report-pane">
-                  <div class="results-area scroll-y">
-                    <header class="sticky-header">
-                      <h2>${this.reportsLabel}</h2>
-                      <span class="sticky-meta">${r.length}</span>
-                    </header>
-
-                    <div class="split-content">
-                      ${r.length > 0 ? b`
-                            <div class="collection" part="report-list">
-                              ${X(r, (e) => e.id, (e) => b`
-                                  <mlf-report-frame
-                                    .controller=${e}
-                                    .registry=${this.registry}
-                                    .text=${a}
-                                    .transport=${o}
-                                    .lastResult=${this.form?.state.lastResult ?? null}
-                                  ></mlf-report-frame>
-                                `)}
-                            </div>
-                          ` : b`
-                            <div class="empty-report-state">
-                              <p class="empty-report-title">${a.reportsEmptyTitle}</p>
-                              <p class="empty-report-copy">${a.reportsEmptyBody}</p>
-                            </div>
-                          `}
-                      ${this.#h(e, t, a)}
-                    </div>
-                  </div>
-                </section>
-              ` : b``}
-        </div>
-      </div>
-    `;
-	}
-	#h(e, t, n) {
-		let r = t.explanationIds.map((t) => e.getExplanation(t)).filter((e) => e !== void 0);
-		return r.length === 0 ? b`` : b`
-      <div class="collection" part="explanation-list">
-        ${X(r, (e) => e.id, (t) => b`
-            <mlf-explanation-panel
-              .controller=${t}
-              .registry=${this.registry}
-              .text=${n}
-              .lastResult=${e.state.lastResult ?? null}
-            ></mlf-explanation-panel>
-          `)}
-      </div>
-    `;
-	}
-	#g = async () => {
+		if (!e || !t) return S``;
+		let n = this.text, r = Et(e, t.visibleFieldIds, this.presentationRegistry), i = Dt(e, t.visibleReportIds, this.reportPane, this.presentationRegistry), a = this.reportPane !== "hidden" && (e.reports.length > 0 || t.hasFormErrors), o = this.layout === "split" ? a : this.reportPane === "always" ? e.reports.length > 0 : this.reportPane === "auto" ? i.length > 0 : !1;
+		return this.layout === "split" ? Kt({
+			form: e,
+			state: t,
+			visibleFields: r,
+			reportsToRender: i,
+			showReports: o,
+			registry: this.registry,
+			presentationRegistry: this.presentationRegistry,
+			text: n,
+			formLabel: this.formLabel,
+			reportsLabel: this.reportsLabel,
+			submitLabel: this.submitLabel,
+			validatingLabel: this.validatingLabel,
+			submittingLabel: this.submittingLabel,
+			reportTransport: this.reportTransport,
+			onSubmitRequest: this.#h
+		}) : Gt({
+			form: e,
+			state: t,
+			visibleFields: r,
+			reportsToRender: i,
+			showReports: o,
+			registry: this.registry,
+			presentationRegistry: this.presentationRegistry,
+			text: n,
+			formLabel: this.formLabel,
+			reportsLabel: this.reportsLabel,
+			submitLabel: this.submitLabel,
+			validatingLabel: this.validatingLabel,
+			submittingLabel: this.submittingLabel,
+			reportTransport: this.reportTransport,
+			onSubmitRequest: this.#h
+		});
+	}
+	#h = async () => {
 		if (this.form) {
-			this.dispatchEvent(new CustomEvent(Ue.submitStart, {
+			this.dispatchEvent(new CustomEvent(He.submitStart, {
 				detail: {
 					form: this.form,
 					state: this.form.state
@@ -3140,7 +3243,7 @@ var dt = {
 			}));
 			try {
 				let e = await this.form.submit();
-				this.dispatchEvent(new CustomEvent(Ue.submitSuccess, {
+				this.dispatchEvent(new CustomEvent(He.submitSuccess, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
@@ -3150,7 +3253,8 @@ var dt = {
 					composed: !0
 				}));
 			} catch (t) {
-				this.dispatchEvent(new CustomEvent(t instanceof e ? Ue.submitAbort : Ue.submitError, {
+				let n = this.form ? bt(this.form.fields) : null;
+				n && await yt(vt(this.shadowRoot ?? this, n.id)), this.dispatchEvent(new CustomEvent(t instanceof e ? He.submitAbort : He.submitError, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
@@ -3163,74 +3267,58 @@ var dt = {
 			}
 		}
 	};
-	#_() {
+	#g() {
 		if (!this.isConnected) return;
-		if (this.#p === this.form) {
-			this.formState = this.form ? this.#v(this.form) : null;
+		if (this.#m === this.form) {
+			this.formState = this.form ? Yt(this.form) : null;
 			return;
 		}
-		if (this.#f?.(), this.#f = null, this.#p = this.form, this.formState = this.form ? this.#v(this.form) : null, !this.form) return;
+		if (this.#p?.(), this.#p = null, this.#m = this.form, this.formState = this.form ? Yt(this.form) : null, !this.form) return;
 		let e = this.form;
-		this.#f = e.subscribeSelector(() => this.#v(e), (e) => {
+		this.#p = e.subscribeSelector(() => Yt(e), (e) => {
 			this.formState = e;
-		}, { equality: wt });
-	}
-	#v(e) {
-		let t = e.state;
-		return {
-			status: t.status,
-			submitCount: t.submitCount,
-			hasFormErrors: t.errors.form.length > 0,
-			hasLastResult: t.lastResult !== null,
-			submissionLoaded: t.submissionProgress?.loaded,
-			submissionTotal: t.submissionProgress?.total,
-			submissionMessage: t.submissionProgress?.message,
-			submissionSessionMessageCount: t.submissionProgress?.sessionMessageCount,
-			visibleFieldIds: e.fields.filter((e) => e.state.visible).map((e) => e.id),
-			visibleReportIds: e.reports.filter((e) => e.descriptor !== null || e.state.status !== "idle").map((e) => e.id),
-			explanationIds: t.lastResult === null ? [] : e.explanations.map((e) => e.id)
-		};
+		}, { equality: Jt });
 	}
 };
-P([O({ attribute: !1 })], Z.prototype, "form", null), P([O({ attribute: !1 })], Z.prototype, "registry", null), P([O({ type: String })], Z.prototype, "layout", null), P([O({
+I([A({ attribute: !1 })], Z.prototype, "form", null), I([A({ attribute: !1 })], Z.prototype, "registry", null), I([A({ attribute: !1 })], Z.prototype, "presentationRegistry", null), I([A({ type: String })], Z.prototype, "layout", null), I([A({
 	type: String,
 	attribute: "form-label"
-})], Z.prototype, "formLabel", null), P([O({
+})], Z.prototype, "formLabel", null), I([A({
 	type: String,
 	attribute: "reports-label"
-})], Z.prototype, "reportsLabel", null), P([O({
+})], Z.prototype, "reportsLabel", null), I([A({
 	type: String,
 	attribute: "submit-label"
-})], Z.prototype, "submitLabel", null), P([O({
+})], Z.prototype, "submitLabel", null), I([A({
 	type: String,
 	attribute: "validating-label"
-})], Z.prototype, "validatingLabel", null), P([O({
+})], Z.prototype, "validatingLabel", null), I([A({
 	type: String,
 	attribute: "submitting-label"
-})], Z.prototype, "submittingLabel", null), P([O({
+})], Z.prototype, "submittingLabel", null), I([A({
 	type: String,
 	attribute: "report-pane"
-})], Z.prototype, "reportPane", null), P([O({ attribute: !1 })], Z.prototype, "text", null), P([O({ attribute: !1 })], Z.prototype, "reportTransport", null), P([k()], Z.prototype, "formState", null), Z = P([D(A.form)], Z);
+})], Z.prototype, "reportPane", null), I([A({ attribute: !1 })], Z.prototype, "text", null), I([A({ attribute: !1 })], Z.prototype, "reportTransport", null), I([j()], Z.prototype, "formState", null), Z = I([k(M.form)], Z);
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js
-var Q = (e) => e ?? S, Tt = class extends W {
-	static styles = [W.styles, s`
+var Q = (e) => e ?? w, Xt = class extends G {
+	static styles = [G.styles, c`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
     `];
 	render() {
 		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "";
-		return b`
+		return S`
       <input
         class="control"
         type="text"
         id=${t?.controlId ?? ""}
         .value=${n}
-        aria-label=${t?.label ?? B(e.label)}
+        aria-label=${t?.label ?? V(e.label)}
         aria-describedby=${Q(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
-        placeholder=${B(e.placeholder)}
+        placeholder=${V(e.placeholder)}
         ?required=${!!e.required}
         ?disabled=${!!this.fieldContext?.disabled}
         ?readonly=${!!this.fieldContext?.readOnly}
@@ -3250,11 +3338,11 @@ var Q = (e) => e ?? S, Tt = class extends W {
 		this.commitBlur();
 	};
 };
-Tt = P([D(A.textField)], Tt);
+Xt = I([k(M.textField)], Xt);
 //#endregion
 //#region src/primitives/fields/number-field.ts
-var Et = class extends W {
-	static styles = [W.styles, s`
+var Zt = class extends G {
+	static styles = [G.styles, c`
       .input-wrapper {
         position: relative;
         min-width: 0;
@@ -3410,8 +3498,8 @@ var Et = class extends W {
 		this.#t = e;
 	}
 	render() {
-		let e = this.props, t = this.fieldContext, n = e.input === "range" ? "range" : "text", r = typeof e.value == "number" ? String(e.value) : e.value === null || e.value === void 0 ? "" : B(e.value), i = this.focused && this.draftValue !== null ? this.draftValue : r, a = typeof e.unit == "string" ? e.unit : "", o = `${Math.max(a.length * .56 + .8, 2.2)}rem`, s = this.fieldContext?.disabled ? "input-wrapper is-disabled" : this.fieldContext?.readOnly ? "input-wrapper is-readonly" : "input-wrapper", c = typeof e.value == "number" ? e.value : void 0, l = typeof e.min == "number" ? e.min : void 0, u = typeof e.max == "number" ? e.max : void 0, d = i.length > 0 ? i : r;
-		return n === "range" ? b`
+		let e = this.props, t = this.fieldContext, n = e.input === "range" ? "range" : "text", r = typeof e.value == "number" ? String(e.value) : e.value === null || e.value === void 0 ? "" : V(e.value), i = this.focused && this.draftValue !== null ? this.draftValue : r, a = typeof e.unit == "string" ? e.unit : "", o = `${Math.max(a.length * .56 + .8, 2.2)}rem`, s = this.fieldContext?.disabled ? "input-wrapper is-disabled" : this.fieldContext?.readOnly ? "input-wrapper is-readonly" : "input-wrapper", c = typeof e.value == "number" ? e.value : void 0, l = typeof e.min == "number" ? e.min : void 0, u = typeof e.max == "number" ? e.max : void 0, d = i.length > 0 ? i : r;
+		return n === "range" ? S`
         <div class="range-wrapper">
           <div class="range-header">
             <span class="range-value">${d}${a ? ` ${a}` : ""}</span>
@@ -3424,7 +3512,7 @@ var Et = class extends W {
             min=${Q(l)}
             max=${Q(u)}
             step=${Q(typeof e.step == "number" ? String(e.step) : void 0)}
-            aria-label=${t?.label ?? B(e.label)}
+            aria-label=${t?.label ?? V(e.label)}
             aria-describedby=${Q(t?.describedBy)}
             aria-invalid=${String(t?.invalid ?? !1)}
             aria-valuenow=${Q(c)}
@@ -3438,7 +3526,7 @@ var Et = class extends W {
           />
         </div>
         ${this.renderAssistiveText()}
-      ` : b`
+      ` : S`
       <div class=${s} style=${`--mlf-number-unit-width: ${o};`}>
         <input
           class="control"
@@ -3448,8 +3536,8 @@ var Et = class extends W {
           autocomplete="off"
           id=${t?.controlId ?? ""}
           .value=${i}
-          placeholder=${B(e.placeholder)}
-          aria-label=${t?.label ?? B(e.label)}
+          placeholder=${V(e.placeholder)}
+          aria-label=${t?.label ?? V(e.label)}
           aria-describedby=${Q(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
           aria-valuenow=${Q(c)}
@@ -3475,7 +3563,7 @@ var Et = class extends W {
 		this.focused = !1, this.commitValue(this.draftValue === null || this.draftValue === "" ? null : this.draftValue), this.draftValue = null, this.commitBlur();
 	};
 	#i = () => {
-		this.focused = !0, this.draftValue = typeof this.props.value == "number" ? String(this.props.value) : this.props.value === null || this.props.value === void 0 ? "" : B(this.props.value);
+		this.focused = !0, this.draftValue = typeof this.props.value == "number" ? String(this.props.value) : this.props.value === null || this.props.value === void 0 ? "" : V(this.props.value);
 	};
 	#a = (e) => {
 		let t = e.target.value, n = Number(t);
@@ -3491,11 +3579,11 @@ var Et = class extends W {
 		return e;
 	}
 };
-P([k()], Et.prototype, "draftValue", null), P([k()], Et.prototype, "focused", null), Et = P([D(A.numberField)], Et);
+I([j()], Zt.prototype, "draftValue", null), I([j()], Zt.prototype, "focused", null), Zt = I([k(M.numberField)], Zt);
 //#endregion
 //#region src/primitives/fields/boolean-field.ts
-var Dt = class extends W {
-	static styles = [W.styles, s`
+var Qt = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         display: flex;
         width: 100%;
@@ -3562,11 +3650,11 @@ var Dt = class extends W {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, n = e.checked === !0, r = this.text, i = N.booleanGroup, a = `${t?.controlId ?? i}-true`, o = `${t?.controlId ?? i}-false`, s = B(e.trueLabel, r.booleanTrue), c = B(e.falseLabel, r.booleanFalse), l = !!(this.fieldContext?.disabled || this.fieldContext?.readOnly);
-		return b`
+		let e = this.props, t = this.fieldContext, n = e.checked === !0, r = this.text, i = F.booleanGroup, a = `${t?.controlId ?? i}-true`, o = `${t?.controlId ?? i}-false`, s = V(e.trueLabel, r.booleanTrue), c = V(e.falseLabel, r.booleanFalse), l = !!(this.fieldContext?.disabled || this.fieldContext?.readOnly);
+		return S`
       <fieldset
         role="radiogroup"
-        aria-label=${t?.label ?? B(e.label)}
+        aria-label=${t?.label ?? V(e.label)}
         aria-describedby=${Q(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         aria-readonly=${String(!!this.fieldContext?.readOnly)}
@@ -3605,14 +3693,14 @@ var Dt = class extends W {
 		this.commitBlur();
 	};
 };
-Dt = P([D(A.booleanField)], Dt);
+Qt = I([k(M.booleanField)], Qt);
 //#endregion
 //#region src/primitives/fields/category-field.ts
-var Ot = (e) => typeof e == "string" ? {
+var $t = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, kt = (e, t) => typeof e != "string" || e.length === 0 ? "" : t.some((t) => Ot(t).value === e) ? e : "", At = class extends W {
-	static styles = [W.styles, s`
+} : e, en = (e, t) => typeof e != "string" || e.length === 0 ? "" : t.some((t) => $t(t).value === e) ? e : "", tn = class extends G {
+	static styles = [G.styles, c`
       .select-wrap {
         position: relative;
         min-width: 0;
@@ -3642,13 +3730,13 @@ var Ot = (e) => typeof e == "string" ? {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "", r = Array.isArray(e.options) ? e.options : [], i = kt(n, r), a = this.text;
-		return b`
+		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "", r = Array.isArray(e.options) ? e.options : [], i = en(n, r), a = this.text;
+		return S`
       <div class="select-wrap">
         <select
           class="control"
           id=${t?.controlId ?? ""}
-          aria-label=${t?.label ?? B(e.label)}
+          aria-label=${t?.label ?? V(e.label)}
           aria-describedby=${Q(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
           aria-readonly=${String(!!this.fieldContext?.readOnly)}
@@ -3661,8 +3749,8 @@ var Ot = (e) => typeof e == "string" ? {
             &#8212; ${a.categoryPlaceholder} &#8212;
           </option>
           ${r.map((e) => {
-			let t = Ot(e);
-			return b`
+			let t = $t(e);
+			return S`
               <option value=${t.value} ?selected=${t.value === i}>
                 ${t.label}
               </option>
@@ -3688,11 +3776,11 @@ var Ot = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-At = P([D(A.categoryField)], At);
+tn = I([k(M.categoryField)], tn);
 //#endregion
 //#region src/primitives/fields/date-field.ts
-var jt = class extends W {
-	static styles = [W.styles, s`
+var nn = class extends G {
+	static styles = [G.styles, c`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
@@ -3703,13 +3791,13 @@ var jt = class extends W {
     `];
 	render() {
 		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "";
-		return b`
+		return S`
       <input
         class="control"
         type="date"
         id=${t?.controlId ?? ""}
         .value=${n}
-        aria-label=${t?.label ?? B(e.label)}
+        aria-label=${t?.label ?? V(e.label)}
         aria-describedby=${Q(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         ?required=${!!e.required}
@@ -3732,189 +3820,313 @@ var jt = class extends W {
 		this.commitBlur();
 	};
 };
-jt = P([D(A.dateField)], jt);
+nn = I([k(M.dateField)], nn);
 //#endregion
-//#region src/primitives/fields/series-field.ts
-var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ? e : e === "true" ? !0 : e === "false" ? !1 : "", Ft = (e, t) => {
+//#region src/primitives/fields/series-field-helpers.ts
+var rn = 0, an = () => `series-row-${++rn}`, on = (e) => e === !0 || e === !1 ? e : e === "true" ? !0 : e === "false" ? !1 : "", sn = (e, t) => {
 	switch (e.kind) {
 		case "number": return typeof t == "number" ? String(t) : typeof t == "string" ? t : "";
 		case "date": return typeof t == "string" ? t : "";
 		case "category":
 		case "text": return typeof t == "string" ? t : "";
-		case "boolean": return Pt(t);
+		case "boolean": return on(t);
 		default: return typeof t == "string" ? t : t ?? "";
 	}
-}, It = (e, t, n) => Array.isArray(e) ? e.map((e) => {
+}, cn = (e, t, n) => Array.isArray(e) ? e.map((e) => {
 	let r = e;
 	return {
-		key: Nt(),
-		field1: Ft(t, r.field1),
-		field2: Ft(n, r.field2)
+		key: an(),
+		field1: sn(t, r.field1),
+		field2: sn(n, r.field2)
 	};
-}) : [], Lt = class extends W {
-	static styles = [W.styles, s`
-      .series {
-        display: grid;
-        gap: 0.9rem;
-      }
-
-      .toolbar {
-        display: flex;
-        justify-content: flex-end;
-      }
-
-      .add-btn,
-      .remove-btn {
-        border: var(--mlf-border-width, 1px) solid
-          var(--mlf-series-action-border, var(--mlf-color-border, #cbd5e1));
-        background: var(
-          --mlf-series-action-bg,
-          color-mix(in srgb, var(--mlf-color-accent, #1e40af) 9%, var(--mlf-color-surface, #ffffff))
-        );
-        color: var(--mlf-series-action-text, var(--mlf-color-text, #0f172a));
-        font: inherit;
-        line-height: 1;
-        cursor: pointer;
-        transition:
-          background 0.2s ease,
-          border-color 0.2s ease,
-          transform 0.2s ease;
-      }
-
-      .add-btn {
-        padding: 0.7rem 1rem;
-        border-radius: 999px;
-        font-size: 0.85rem;
-        font-weight: 700;
-        letter-spacing: 0.01em;
-      }
-
-      .remove-btn {
-        width: 2.25rem;
-        height: 2.25rem;
-        border-radius: 0.8rem;
-        font-size: 1.15rem;
-      }
-
-      .add-btn:hover:not(:disabled),
-      .remove-btn:hover:not(:disabled) {
-        background: var(
-          --mlf-series-action-bg-hover,
-          color-mix(
-            in srgb,
-            var(--mlf-color-accent, #1e40af) 16%,
-            var(--mlf-color-surface, #ffffff)
-          )
-        );
-        border-color: var(--mlf-series-action-border-hover, var(--mlf-color-accent, #1e40af));
-        transform: translateY(-1px);
-      }
-
-      .add-btn:disabled,
-      .remove-btn:disabled {
-        cursor: not-allowed;
-        opacity: 0.65;
-        transform: none;
-      }
-
-      .grid {
-        display: grid;
-        gap: 0.65rem;
-      }
-
-      .header,
-      .row {
-        display: grid;
-        grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
-        gap: 0.65rem;
-        align-items: start;
-      }
-
-      .header {
-        padding: 0 0.15rem;
-        color: var(--mlf-series-heading, var(--mlf-color-text-muted, #475569));
-        font-size: 0.72rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-
-      .row {
-        padding: 0.55rem;
-        border-radius: 1rem;
-        background: var(
-          --mlf-series-row-bg,
-          color-mix(
-            in srgb,
-            var(--mlf-color-surface, #ffffff) 80%,
-            var(--mlf-color-bg-light, #f8fafc)
-          )
-        );
-        border: var(--mlf-border-width, 1px) solid
-          var(
-            --mlf-series-row-border,
-            color-mix(in srgb, var(--mlf-color-border, #e2e8f0) 90%, transparent)
-          );
-      }
-
-      .cell {
-        min-width: 0;
-      }
-
-      .cell select,
-      .cell input {
-        min-height: var(--mlf-control-height, 3rem);
-      }
-
-      .value-wrap {
-        position: relative;
-      }
-
-      .value-wrap input {
-        padding-right: calc(var(--mlf-series-unit-width, 2rem) + 1.8rem);
-      }
-
-      .unit {
-        position: absolute;
-        top: 50%;
-        right: 0.85rem;
-        transform: translateY(-50%);
-        max-width: 42%;
-        overflow: hidden;
-        color: var(--mlf-series-unit-color, var(--mlf-color-text-muted, #475569));
-        font-size: 0.82rem;
-        font-weight: 700;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        pointer-events: none;
-      }
-
-      .unit:empty {
-        display: none;
-      }
-
-      .empty {
-        padding: 0.95rem 1rem;
-        border-radius: 0.9rem;
-        border: 1px dashed var(--mlf-series-empty-border, var(--mlf-color-border, #cbd5e1));
-        color: var(--mlf-series-empty-text, var(--mlf-color-text-muted, #475569));
-        font-size: 0.9rem;
-      }
-
-      @media (max-width: 640px) {
-        .header {
-          display: none;
-        }
+}) : [], ln = (e, t) => {
+	switch (e.kind) {
+		case "number":
+		case "date":
+		case "category":
+		case "text":
+		case "boolean": return t === "" ? null : t;
+		default: return t === "" ? null : t;
+	}
+}, un = (e) => typeof e.unit == "string" ? e.unit : "", dn = (e, t) => {
+	let n = typeof e == "string" ? {
+		label: e,
+		value: e
+	} : e;
+	if (!n || typeof n != "object") return null;
+	let r = n;
+	return S`
+    <option value=${String(r.value)} ?selected=${String(r.value) === t}>
+      ${String(r.label)}
+    </option>
+  `;
+}, fn = (e) => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" || typeof e == "bigint" ? `${e}` : "", pn = ({ config: e, value: t, index: n, id: r, disabled: i, readOnly: a, field: o, context: s, text: c, onInput: l, onBlur: u, label: d }) => {
+	let f = !!e.required;
+	switch (e.kind) {
+		case "date": return S`
+        <input
+          class="control"
+          id=${r}
+          type="date"
+          .value=${typeof t == "string" ? t : ""}
+          aria-label=${d}
+          aria-describedby=${Q(s?.describedBy)}
+          aria-invalid=${String(s?.invalid ?? !1)}
+          ?required=${f}
+          ?disabled=${i}
+          ?readonly=${a}
+          min=${Q(typeof e.min == "string" ? e.min : void 0)}
+          max=${Q(typeof e.max == "string" ? e.max : void 0)}
+          @input=${(e) => l(n, o, e.target.value)}
+          @blur=${u}
+        />
+      `;
+		case "category": {
+			let p = Array.isArray(e.options) ? e.options : [], m = typeof t == "string" ? t : "";
+			return S`
+        <select
+          class="control"
+          id=${r}
+          aria-label=${d}
+          aria-describedby=${Q(s?.describedBy)}
+          aria-invalid=${String(s?.invalid ?? !1)}
+          ?required=${f}
+          ?disabled=${!!(i || a)}
+          @change=${(e) => l(n, o, e.target.value)}
+          @blur=${u}
+        >
+          <option value="" ?selected=${m === ""}>
+            &#8212; ${c.categoryPlaceholder} &#8212;
+          </option>
+          ${p.map((e) => dn(e, m))}
+        </select>
+      `;
+		}
+		case "boolean": {
+			let p = V(e.trueLabel, c.booleanTrue), m = V(e.falseLabel, c.booleanFalse), h = t === !0 ? "true" : t === !1 ? "false" : "";
+			return S`
+        <select
+          class="control"
+          id=${r}
+          aria-label=${d}
+          aria-describedby=${Q(s?.describedBy)}
+          aria-invalid=${String(s?.invalid ?? !1)}
+          ?required=${f}
+          ?disabled=${!!(i || a)}
+          @change=${(e) => {
+				let t = e.target.value;
+				l(n, o, t === "" ? "" : t === "true");
+			}}
+          @blur=${u}
+        >
+          <option value="" ?selected=${h === ""}>&#8212; Select &#8212;</option>
+          <option value="true" ?selected=${h === "true"}>${p}</option>
+          <option value="false" ?selected=${h === "false"}>${m}</option>
+        </select>
+      `;
+		}
+		case "number": {
+			let c = un(e);
+			return S`
+        <div class="value-wrap">
+          <input
+            class="control"
+            id=${r}
+            type="text"
+            inputmode="decimal"
+            spellcheck="false"
+            autocomplete="off"
+            .value=${typeof t == "string" ? t : ""}
+            placeholder=${V(e.placeholder)}
+            aria-label=${d}
+            aria-describedby=${Q(s?.describedBy)}
+            aria-invalid=${String(s?.invalid ?? !1)}
+            aria-valuemin=${Q(typeof e.min == "number" ? e.min : void 0)}
+            aria-valuemax=${Q(typeof e.max == "number" ? e.max : void 0)}
+            ?required=${f}
+            ?disabled=${i}
+            ?readonly=${a}
+            @input=${(e) => l(n, o, e.target.value)}
+            @blur=${u}
+          />
+          <span class="unit" aria-hidden="true">${c}</span>
+        </div>
+      `;
+		}
+		default: return S`
+        <input
+          class="control"
+          id=${r}
+          type="text"
+          .value=${fn(t)}
+          placeholder=${V(e.placeholder)}
+          aria-label=${d}
+          aria-describedby=${Q(s?.describedBy)}
+          aria-invalid=${String(s?.invalid ?? !1)}
+          ?required=${f}
+          ?disabled=${i}
+          ?readonly=${a}
+          @input=${(e) => l(n, o, e.target.value)}
+          @blur=${u}
+        />
+      `;
+	}
+}, mn = c`
+  .series {
+    display: grid;
+    gap: 0.9rem;
+  }
+
+  .toolbar {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .add-btn,
+  .remove-btn {
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-series-action-border, var(--mlf-color-border, #cbd5e1));
+    background: var(
+      --mlf-series-action-bg,
+      color-mix(in srgb, var(--mlf-color-accent, #1e40af) 9%, var(--mlf-color-surface, #ffffff))
+    );
+    color: var(--mlf-series-action-text, var(--mlf-color-text, #0f172a));
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background 0.2s ease,
+      border-color 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .add-btn {
+    padding: 0.7rem 1rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+  }
+
+  .remove-btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 0.8rem;
+    font-size: 1.15rem;
+  }
+
+  .add-btn:hover:not(:disabled),
+  .remove-btn:hover:not(:disabled) {
+    background: var(
+      --mlf-series-action-bg-hover,
+      color-mix(in srgb, var(--mlf-color-accent, #1e40af) 16%, var(--mlf-color-surface, #ffffff))
+    );
+    border-color: var(--mlf-series-action-border-hover, var(--mlf-color-accent, #1e40af));
+    transform: translateY(-1px);
+  }
+
+  .add-btn:disabled,
+  .remove-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+    transform: none;
+  }
+
+  .grid {
+    display: grid;
+    gap: 0.65rem;
+  }
+
+  .header,
+  .row {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
+    gap: 0.65rem;
+    align-items: start;
+  }
+
+  .header {
+    padding: 0 0.15rem;
+    color: var(--mlf-series-heading, var(--mlf-color-text-muted, #475569));
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .row {
+    padding: 0.55rem;
+    border-radius: 1rem;
+    background: var(
+      --mlf-series-row-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 80%, var(--mlf-color-bg-light, #f8fafc))
+    );
+    border: var(--mlf-border-width, 1px) solid
+      var(
+        --mlf-series-row-border,
+        color-mix(in srgb, var(--mlf-color-border, #e2e8f0) 90%, transparent)
+      );
+  }
+
+  .cell {
+    min-width: 0;
+  }
+
+  .cell select,
+  .cell input {
+    min-height: var(--mlf-control-height, 3rem);
+  }
+
+  .value-wrap {
+    position: relative;
+  }
+
+  .value-wrap input {
+    padding-right: calc(var(--mlf-series-unit-width, 2rem) + 1.8rem);
+  }
+
+  .unit {
+    position: absolute;
+    top: 50%;
+    right: 0.85rem;
+    transform: translateY(-50%);
+    max-width: 42%;
+    overflow: hidden;
+    color: var(--mlf-series-unit-color, var(--mlf-color-text-muted, #475569));
+    font-size: 0.82rem;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .unit:empty {
+    display: none;
+  }
+
+  .empty {
+    padding: 0.95rem 1rem;
+    border-radius: 0.9rem;
+    border: 1px dashed var(--mlf-series-empty-border, var(--mlf-color-border, #cbd5e1));
+    color: var(--mlf-series-empty-text, var(--mlf-color-text-muted, #475569));
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 640px) {
+    .header {
+      display: none;
+    }
 
-        .row {
-          grid-template-columns: 1fr;
-        }
+    .row {
+      grid-template-columns: 1fr;
+    }
 
-        .remove-btn {
-          justify-self: end;
-        }
-      }
-    `];
+    .remove-btn {
+      justify-self: end;
+    }
+  }
+`, hn = class extends G {
+	static styles = [G.styles, mn];
 	#e = [];
 	get rows() {
 		return this.#e;
@@ -3927,8 +4139,8 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
 		super.willUpdate(e), e.has("descriptor") && this.#i();
 	}
 	render() {
-		let e = this.fieldContext, t = !!this.fieldContext?.disabled, n = !!this.fieldContext?.readOnly, r = t || n, i = this.#n, a = this.#r, o = `${Math.max(this.#d(a).length * .56 + .8, 2.3)}rem`, s = this.text;
-		return b`
+		let e = this.fieldContext, t = !!this.fieldContext?.disabled, n = !!this.fieldContext?.readOnly, r = t || n, i = this.#n, a = this.#r, o = `${Math.max(un(a).length * .56 + .8, 2.3)}rem`, s = this.text;
+		return S`
       <div class="series" style=${`--mlf-series-unit-width: ${o};`}>
         <div class="toolbar">
           <button
@@ -3942,22 +4154,22 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
           </button>
         </div>
 
-        ${this.rows.length > 0 ? b`
+        ${this.rows.length > 0 ? S`
               <div class="grid">
                 <div class="header" aria-hidden="true">
-                  <div>${B(i.label, "field1")}</div>
-                  <div>${B(a.label, "field2")}</div>
+                  <div>${V(i.label, "field1")}</div>
+                  <div>${V(a.label, "field2")}</div>
                   <div></div>
                 </div>
                 ${this.rows.map((o, c) => {
 			let l = `${e?.controlId ?? "mlf-series"}-${o.key}-field1`, u = `${e?.controlId ?? "mlf-series"}-${o.key}-field2`;
-			return b`
+			return S`
                     <div class="row">
                       <div class="cell">
-                        ${this.#f(i, o.field1, c, l, t, n, 1)}
+                        ${this.#u(i, o.field1, c, l, t, n, 1)}
                       </div>
                       <div class="cell">
-                        ${this.#f(a, o.field2, c, u, t, n, 2)}
+                        ${this.#u(a, o.field2, c, u, t, n, 2)}
                       </div>
                       <button
                         class="remove-btn"
@@ -3972,7 +4184,7 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
                   `;
 		})}
               </div>
-            ` : b`<div class="empty">${s.seriesEmpty}</div>`}
+            ` : S`<div class="empty">${s.seriesEmpty}</div>`}
       </div>
       ${this.renderAssistiveText()}
     `;
@@ -3984,11 +4196,11 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
 		return this.props.field2 ?? {};
 	}
 	#i() {
-		this.rows = It(this.props.value, this.#n, this.#r), this.#t = !1;
+		this.rows = cn(this.props.value, this.#n, this.#r), this.#t = !1;
 	}
 	#a = () => {
 		this.rows = [...this.rows, {
-			key: Nt(),
+			key: an(),
 			field1: "",
 			field2: ""
 		}], this.#t = !0, this.#l();
@@ -4007,154 +4219,33 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
 	};
 	#l() {
 		this.#t &&= (this.commitValue(this.rows.map((e) => ({
-			field1: this.#u(this.#n, e.field1),
-			field2: this.#u(this.#r, e.field2)
+			field1: ln(this.#n, e.field1),
+			field2: ln(this.#r, e.field2)
 		}))), !1);
 	}
-	#u(e, t) {
-		switch (e.kind) {
-			case "number":
-			case "date":
-			case "category":
-			case "text": return t === "" ? null : t;
-			case "boolean": return t === "" ? null : t;
-			default: return t === "" ? null : t;
-		}
-	}
-	#d(e) {
-		return typeof e.unit == "string" ? e.unit : "";
-	}
-	#f(e, t, n, r, i, a, o) {
-		let s = this.fieldContext, c = `${s?.label ?? B(this.props.label)} ${B(e.label, `field${o}`)} ${n + 1}`, l = !!e.required;
-		switch (e.kind) {
-			case "date": return b`
-          <input
-            class="control"
-            id=${r}
-            type="date"
-            .value=${typeof t == "string" ? t : ""}
-            aria-label=${c}
-            aria-describedby=${Q(s?.describedBy)}
-            aria-invalid=${String(s?.invalid ?? !1)}
-            ?required=${l}
-            ?disabled=${i}
-            ?readonly=${a}
-            min=${Q(typeof e.min == "string" ? e.min : void 0)}
-            max=${Q(typeof e.max == "string" ? e.max : void 0)}
-            @input=${(e) => this.#s(n, o, e.target.value)}
-            @blur=${this.#c}
-          />
-        `;
-			case "category": {
-				let u = Array.isArray(e.options) ? e.options : [], d = typeof t == "string" ? t : "";
-				return b`
-          <select
-            class="control"
-            id=${r}
-            aria-label=${c}
-            aria-describedby=${Q(s?.describedBy)}
-            aria-invalid=${String(s?.invalid ?? !1)}
-            ?required=${l}
-            ?disabled=${!!(i || a)}
-            @change=${(e) => this.#s(n, o, e.target.value)}
-            @blur=${this.#c}
-          >
-            <option value="" ?selected=${d === ""}>
-              &#8212; ${this.text.categoryPlaceholder} &#8212;
-            </option>
-            ${u.map((e) => {
-					let t = typeof e == "string" ? {
-						label: e,
-						value: e
-					} : e;
-					return b`
-                <option
-                  value=${String(t.value)}
-                  ?selected=${String(t.value) === d}
-                >
-                  ${String(t.label)}
-                </option>
-              `;
-				})}
-          </select>
-        `;
-			}
-			case "boolean": {
-				let u = B(e.trueLabel, this.text.booleanTrue), d = B(e.falseLabel, this.text.booleanFalse), f = t === !0 ? "true" : t === !1 ? "false" : "";
-				return b`
-          <select
-            class="control"
-            id=${r}
-            aria-label=${c}
-            aria-describedby=${Q(s?.describedBy)}
-            aria-invalid=${String(s?.invalid ?? !1)}
-            ?required=${l}
-            ?disabled=${!!(i || a)}
-            @change=${(e) => {
-					let t = e.target.value;
-					this.#s(n, o, t === "" ? "" : t === "true");
-				}}
-            @blur=${this.#c}
-          >
-            <option value="" ?selected=${f === ""}>&#8212; Select &#8212;</option>
-            <option value="true" ?selected=${f === "true"}>${u}</option>
-            <option value="false" ?selected=${f === "false"}>${d}</option>
-          </select>
-        `;
-			}
-			case "number": {
-				let u = this.#d(e);
-				return b`
-          <div class="value-wrap">
-            <input
-              class="control"
-              id=${r}
-              type="text"
-              inputmode="decimal"
-              spellcheck="false"
-              autocomplete="off"
-              .value=${typeof t == "string" ? t : ""}
-              placeholder=${B(e.placeholder)}
-              aria-label=${c}
-              aria-describedby=${Q(s?.describedBy)}
-              aria-invalid=${String(s?.invalid ?? !1)}
-              aria-valuemin=${Q(typeof e.min == "number" ? e.min : void 0)}
-              aria-valuemax=${Q(typeof e.max == "number" ? e.max : void 0)}
-              ?required=${l}
-              ?disabled=${i}
-              ?readonly=${a}
-              @input=${(e) => this.#s(n, o, e.target.value)}
-              @blur=${this.#c}
-            />
-            <span class="unit" aria-hidden="true">${u}</span>
-          </div>
-        `;
-			}
-			default: return b`
-          <input
-            class="control"
-            id=${r}
-            type="text"
-            .value=${typeof t == "string" ? t : typeof t == "number" || typeof t == "boolean" || typeof t == "bigint" ? `${t}` : ""}
-            placeholder=${B(e.placeholder)}
-            aria-label=${c}
-            aria-describedby=${Q(s?.describedBy)}
-            aria-invalid=${String(s?.invalid ?? !1)}
-            ?required=${l}
-            ?disabled=${i}
-            ?readonly=${a}
-            @input=${(e) => this.#s(n, o, e.target.value)}
-            @blur=${this.#c}
-          />
-        `;
-		}
+	#u(e, t, n, r, i, a, o) {
+		let s = this.fieldContext, c = `${s?.label ?? V(this.props.label)} ${V(e.label, `field${o}`)} ${n + 1}`;
+		return pn({
+			config: e,
+			value: t,
+			index: n,
+			id: r,
+			disabled: i,
+			readOnly: a,
+			field: o,
+			context: s,
+			text: this.text,
+			onInput: (e, t, n) => this.#s(e, t, n),
+			onBlur: this.#c,
+			label: c
+		});
 	}
 };
-P([k()], Lt.prototype, "rows", null), Lt = P([D(A.seriesField)], Lt);
+I([j()], hn.prototype, "rows", null), hn = I([k(M.seriesField)], hn);
 //#endregion
 //#region src/primitives/fields/long-text-field.ts
-var Rt = class extends W {
-	static styles = [W.styles, s`
+var gn = class extends G {
+	static styles = [G.styles, c`
       textarea.control {
         resize: vertical;
         min-height: 6rem;
@@ -4163,14 +4254,14 @@ var Rt = class extends W {
     `];
 	render() {
 		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "", r = typeof e.rows == "number" && e.rows > 0 ? e.rows : 4;
-		return b`
+		return S`
       <textarea
         class="control"
         id=${t?.controlId ?? ""}
         .value=${n}
-        placeholder=${B(e.placeholder)}
+        placeholder=${V(e.placeholder)}
         rows=${r}
-        aria-label=${t?.label ?? B(e.label)}
+        aria-label=${t?.label ?? V(e.label)}
         aria-describedby=${Q(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         ?required=${!!e.required}
@@ -4189,14 +4280,14 @@ var Rt = class extends W {
 		this.commitBlur();
 	};
 };
-Rt = P([D(A.longTextField)], Rt);
+gn = I([k(M.longTextField)], gn);
 //#endregion
 //#region src/primitives/fields/single-choice-field.ts
-var zt = (e) => typeof e == "string" ? {
+var _n = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Bt = class extends W {
-	static styles = [W.styles, s`
+} : e, vn = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         border: none;
         padding: 0;
@@ -4257,8 +4348,8 @@ var zt = (e) => typeof e == "string" ? {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : null, r = Array.isArray(e.options) ? e.options : [], i = e.layout === "horizontal" ? "horizontal" : "vertical", a = t?.label ?? B(e.label), o = !!(t?.disabled || t?.readOnly);
-		return b`
+		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : null, r = Array.isArray(e.options) ? e.options : [], i = e.layout === "horizontal" ? "horizontal" : "vertical", a = t?.label ?? V(e.label), o = !!(t?.disabled || t?.readOnly);
+		return S`
       <fieldset>
         <legend>${a}</legend>
         <div
@@ -4270,8 +4361,8 @@ var zt = (e) => typeof e == "string" ? {
           aria-required=${String(!!e.required)}
         >
           ${r.map((e) => {
-			let { label: r, value: i } = zt(e), a = `${t?.controlId ?? "sc"}-${i}`;
-			return b`
+			let { label: r, value: i } = _n(e), a = `${t?.controlId ?? "sc"}-${i}`;
+			return S`
               <label class=${o ? "disabled" : ""} for=${a}>
                 <input
                   type="radio"
@@ -4299,14 +4390,14 @@ var zt = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Bt = P([D(A.singleChoiceField)], Bt);
+vn = I([k(M.singleChoiceField)], vn);
 //#endregion
 //#region src/primitives/fields/multi-choice-field.ts
-var Vt = (e) => typeof e == "string" ? {
+var yn = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Ht = class extends W {
-	static styles = [W.styles, s`
+} : e, bn = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         border: none;
         padding: 0;
@@ -4368,8 +4459,8 @@ var Vt = (e) => typeof e == "string" ? {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, n = Array.isArray(e.value) ? e.value : [], r = Array.isArray(e.options) ? e.options : [], i = e.layout === "horizontal" ? "horizontal" : "vertical", a = t?.label ?? B(e.label), o = !!(t?.disabled || t?.readOnly);
-		return b`
+		let e = this.props, t = this.fieldContext, n = Array.isArray(e.value) ? e.value : [], r = Array.isArray(e.options) ? e.options : [], i = e.layout === "horizontal" ? "horizontal" : "vertical", a = t?.label ?? V(e.label), o = !!(t?.disabled || t?.readOnly);
+		return S`
       <fieldset>
         <legend>${a}</legend>
         <div
@@ -4381,8 +4472,8 @@ var Vt = (e) => typeof e == "string" ? {
           aria-required=${String(!!e.required)}
         >
           ${r.map((e) => {
-			let { label: r, value: i } = Vt(e), a = `${t?.controlId ?? "mc"}-${i}`;
-			return b`
+			let { label: r, value: i } = yn(e), a = `${t?.controlId ?? "mc"}-${i}`;
+			return S`
               <label class=${o ? "disabled" : ""} for=${a}>
                 <input
                   type="checkbox"
@@ -4410,11 +4501,11 @@ var Vt = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Ht = P([D(A.multiChoiceField)], Ht);
+bn = I([k(M.multiChoiceField)], bn);
 //#endregion
 //#region src/primitives/fields/rating-field.ts
-var Ut = class extends W {
-	static styles = [W.styles, s`
+var xn = class extends G {
+	static styles = [G.styles, c`
       .rating-container {
         display: inline-flex;
         gap: 0.25rem;
@@ -4467,9 +4558,9 @@ var Ut = class extends W {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, n = typeof e.value == "number" ? e.value : null, r = typeof e.min == "number" ? e.min : 1, i = typeof e.max == "number" ? e.max : 5, a = typeof e.step == "number" && e.step > 0 ? e.step : 1, o = !!(t?.disabled || t?.readOnly), s = t?.label ?? B(e.label), c = [];
+		let e = this.props, t = this.fieldContext, n = typeof e.value == "number" ? e.value : null, r = typeof e.min == "number" ? e.min : 1, i = typeof e.max == "number" ? e.max : 5, a = typeof e.step == "number" && e.step > 0 ? e.step : 1, o = !!(t?.disabled || t?.readOnly), s = t?.label ?? V(e.label), c = [];
 		for (let e = r; e <= i; e += a) c.push(e);
-		return b`
+		return S`
       <div
         role="slider"
         aria-label=${s}
@@ -4483,7 +4574,7 @@ var Ut = class extends W {
         tabindex="-1"
       >
         <div class="rating-container">
-          ${c.map((e) => b`
+          ${c.map((e) => S`
               <button
                 type="button"
                 class="rating-btn ${n === e ? "selected" : ""}"
@@ -4521,18 +4612,18 @@ var Ut = class extends W {
 		}
 	};
 };
-Ut = P([D(A.ratingField)], Ut);
+xn = I([k(M.ratingField)], xn);
 //#endregion
 //#region src/primitives/base-async-report-element.ts
-var Wt = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim().length > 0 ? e : String(e), Gt = (e) => {
+var Sn = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim().length > 0 ? e : String(e), Cn = (e) => {
 	if (typeof e == "string") return e;
 	try {
 		return JSON.stringify(e, null, 2);
 	} catch {
 		return String(e);
 	}
-}, $ = class extends G {
-	static styles = [G.styles, s`
+}, $ = class extends K {
+	static styles = [K.styles, c`
       .transport-divider {
         border: none;
         border-top: var(--mlf-border-width, 1px) solid
@@ -4662,7 +4753,7 @@ var Wt = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim(
 		return this.transportErrorValue;
 	}
 	renderTransportPanel(e) {
-		return this.transportResultStatus === "idle" ? S : b`
+		return this.transportResultStatus === "idle" ? w : S`
       <hr class="transport-divider" />
       <div class="transport-panel">
         <p class="transport-heading">${e.explanationLabel}</p>
@@ -4672,19 +4763,19 @@ var Wt = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim(
 	}
 	#a(e) {
 		switch (this.transportResultStatus) {
-			case "loading": return b`<div
+			case "loading": return S`<div
           class="transport-skeleton"
           aria-label=${e.explanationLoadingLabel}
         ></div>`;
-			case "error": return b`<div class="transport-error">Error: ${this.transportError}</div>`;
-			case "done": return b`<pre
+			case "error": return S`<div class="transport-error">Error: ${this.transportError}</div>`;
+			case "done": return S`<pre
           class="transport-content"
           role="region"
           aria-label=${e.explanationAriaLabel}
         >
-${Gt(this.transportResult)}</pre
+${Cn(this.transportResult)}</pre
         >`;
-			default: return S;
+			default: return w;
 		}
 	}
 	async #o() {
@@ -4706,15 +4797,15 @@ ${Gt(this.transportResult)}</pre
 			this.transportResultValue = r, this.transportStatus = "done";
 		} catch (e) {
 			if (n.signal.aborted) return;
-			this.transportErrorValue = Wt(e), this.transportStatus = "error";
+			this.transportErrorValue = Sn(e), this.transportStatus = "error";
 		}
 	}
 };
-P([k()], $.prototype, "transportStatus", null), P([k()], $.prototype, "transportResultValue", null), P([k()], $.prototype, "transportErrorValue", null);
+I([j()], $.prototype, "transportStatus", null), I([j()], $.prototype, "transportResultValue", null), I([j()], $.prototype, "transportErrorValue", null);
 //#endregion
 //#region src/primitives/reports/classifier-report.ts
-var Kt = (e, t, n) => {
-	if (!z(e) || !Array.isArray(e.probabilities)) return [];
+var wn = (e, t, n) => {
+	if (!B(e) || !Array.isArray(e.probabilities)) return [];
 	let r = Array.isArray(t) ? t : e.labels, i = Array.isArray(r) ? r : [];
 	return e.probabilities.map((e, t) => {
 		let r = typeof e == "number" ? e : Number(e);
@@ -4723,8 +4814,8 @@ var Kt = (e, t, n) => {
 			value: r
 		};
 	}).filter((e) => e !== null);
-}, qt = class extends $ {
-	static styles = [$.styles, s`
+}, Tn = class extends $ {
+	static styles = [$.styles, c`
       .rows {
         display: grid;
         gap: 0.5rem;
@@ -4792,21 +4883,21 @@ var Kt = (e, t, n) => {
       }
     `];
 	render() {
-		let e = this.props.payload, t = typeof this.props.error == "string" ? this.props.error : null, n = this.reportContext, r = this.props.details !== !1, i = this.text;
-		if (t) return b`<div class="error">${t}</div>`;
-		if (e == null) return b`<div class="empty">${i.classifierEmpty}</div>`;
-		let a = z(e) ? e.prediction ?? e.className ?? e.label ?? i.classifierUnknownPrediction : e, o = Kt(e, this.props.labels, i.classifierClassLabel);
-		return b`
+		let e = this.props.payload, t = typeof this.props.error == "string" ? this.props.error : null, n = this.reportContext, r = this.props.showClassProbabilities !== !1, i = this.text;
+		if (t) return S`<div class="error">${t}</div>`;
+		if (e == null) return S`<div class="empty">${i.classifierEmpty}</div>`;
+		let a = B(e) ? e.prediction ?? e.className ?? e.label ?? i.classifierUnknownPrediction : e, o = wn(e, this.props.labels, i.classifierClassLabel);
+		return S`
       <section
         part="classifier-report"
         id=${n?.regionId ?? ""}
         aria-label=${n?.label ?? i.classifierAriaLabel}
       >
-        ${r && o.length > 0 ? b`
+        ${r && o.length > 0 ? S`
               <div class="rows">
                 ${o.map((e) => {
 			let t = `${Math.max(0, Math.min(e.value, 1)) * 100}%`;
-			return b`
+			return S`
                     <div class="item">
                       <div class="label">${e.label}</div>
                       <div class="bar" style=${`--w: ${t};`} aria-hidden="true"></div>
@@ -4815,36 +4906,36 @@ var Kt = (e, t, n) => {
                   `;
 		})}
               </div>
-            ` : b`
-              <div class="compact">${B(a, i.classifierUnknownPrediction)}</div>
+            ` : S`
+              <div class="compact">${V(a, i.classifierUnknownPrediction)}</div>
             `}
         ${this.renderTransportPanel(i)}
       </section>
     `;
 	}
 };
-qt = P([D(A.classifierReport)], qt);
+Tn = I([k(M.classifierReport)], Tn);
 //#endregion
 //#region src/primitives/reports/regressor-report.ts
-var Jt = (e, t, n) => {
+var En = (e, t, n) => {
 	if (typeof e == "number") return `${e.toFixed(t)}${n ? ` ${n}` : ""}`;
 	let r = Number(e);
 	return Number.isNaN(r) ? String(e) : `${r.toFixed(t)}${n ? ` ${n}` : ""}`;
-}, Yt = (e) => {
-	if (z(e) && Array.isArray(e.values)) return e.values.map((e) => Number(e)).filter((e) => !Number.isNaN(e));
-	if (z(e) && "value" in e) {
+}, Dn = (e) => {
+	if (B(e) && Array.isArray(e.values)) return e.values.map((e) => Number(e)).filter((e) => !Number.isNaN(e));
+	if (B(e) && "value" in e) {
 		let t = Number(e.value);
 		return Number.isNaN(t) ? [] : [t];
 	}
 	let t = Number(e);
 	return Number.isNaN(t) ? [] : [t];
-}, Xt = (e) => {
-	if (z(e) && Array.isArray(e.interval) && e.interval.length === 2) {
+}, On = (e) => {
+	if (B(e) && Array.isArray(e.interval) && e.interval.length === 2) {
 		let t = Number(e.interval[0]), n = Number(e.interval[1]);
 		if (!Number.isNaN(t) && !Number.isNaN(n)) return [t, n];
 	}
-	return z(e) && typeof e.min == "number" && typeof e.max == "number" ? [e.min, e.max] : null;
-}, Zt = (e, t) => {
+	return B(e) && typeof e.min == "number" && typeof e.max == "number" ? [e.min, e.max] : null;
+}, kn = (e, t) => {
 	if (t <= e) return "linear-gradient(to right, #ffea00 0%, #00c853 50%, #ffea00 100%)";
 	let n = t - e, r = e - n, i = t + n, a = (e) => (e - r) / (i - r) * 100, o = a(e), s = a(t), c = a((e + t) / 2);
 	return `linear-gradient(to right,
@@ -4855,12 +4946,12 @@ var Jt = (e, t, n) => {
     #ffea00 ${s}%,
     #ff6d00 ${Math.min(s + 10, 100)}%,
     #c62828 100%)`;
-}, Qt = (e, t, n) => {
+}, An = (e, t, n) => {
 	if (n <= t) return 49;
 	let r = n - t, i = t - r, a = n + r;
 	return Math.min(Math.max((e - i) / (a - i) * 100, 0), 98.45);
-}, $t = class extends $ {
-	static styles = [$.styles, s`
+}, jn = class extends $ {
+	static styles = [$.styles, c`
       :host {
         --marker-size: 14px;
         --limit-line-width: 3px;
@@ -4937,62 +5028,62 @@ var Jt = (e, t, n) => {
     `];
 	render() {
 		let e = this.props.payload, t = typeof this.props.error == "string" ? this.props.error : null, n = this.reportContext, r = this.text;
-		if (t) return b`<div class="error">${t}</div>`;
-		if (e == null) return b`<div class="empty">${r.regressorEmpty}</div>`;
-		let i = typeof this.props.unit == "string" ? this.props.unit : "", a = typeof this.props.precision == "number" && this.props.precision >= 0 ? this.props.precision : 2, o = Yt(e), s = Xt(e), c = z(e) && typeof e.execution_time == "number" ? `${e.execution_time} ms` : null;
-		return b`
+		if (t) return S`<div class="error">${t}</div>`;
+		if (e == null) return S`<div class="empty">${r.regressorEmpty}</div>`;
+		let i = typeof this.props.unit == "string" ? this.props.unit : "", a = typeof this.props.precision == "number" && this.props.precision >= 0 ? this.props.precision : 2, o = Dn(e), s = On(e), c = B(e) && typeof e.execution_time == "number" ? `${e.execution_time} ms` : null;
+		return S`
       <section
         part="regressor-report"
         id=${n?.regionId ?? ""}
         aria-label=${n?.label ?? r.regressorAriaLabel}
       >
-        ${o.length > 0 ? o.map((e) => b`
+        ${o.length > 0 ? o.map((e) => S`
                 <div class="item">
-                  <div class="value">${Jt(e, a, i)}</div>
+                  <div class="value">${En(e, a, i)}</div>
 
-                  ${s ? b`
+                  ${s ? S`
                         <div
                           class="bar-wrapper"
-                          style=${`background: ${Zt(s[0], s[1])};`}
+                          style=${`background: ${kn(s[0], s[1])};`}
                         >
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Qt(s[0], s[0], s[1])}%;`}
+                            style=${`left: ${An(s[0], s[0], s[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${Jt(s[0], a, i)}
+                              ${En(s[0], a, i)}
                             </div>
                           </div>
 
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Qt(s[1], s[0], s[1])}%;`}
+                            style=${`left: ${An(s[1], s[0], s[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${Jt(s[1], a, i)}
+                              ${En(s[1], a, i)}
                             </div>
                           </div>
 
                           <span
                             class="value-marker"
-                            style=${`left: ${Qt(e, s[0], s[1])}%;`}
+                            style=${`left: ${An(e, s[0], s[1])}%;`}
                           ></span>
                         </div>
-                      ` : b``}
+                      ` : S``}
                 </div>
-              `) : b`<div class="value">${Jt(e, a, i)}</div>`}
-        ${c ? b`<div class="meta">${r.regressorExecutionTime(c)}</div>` : b``}
+              `) : S`<div class="value">${En(e, a, i)}</div>`}
+        ${c ? S`<div class="meta">${r.regressorExecutionTime(c)}</div>` : S``}
         ${this.renderTransportPanel(r)}
       </section>
     `;
 	}
 };
-$t = P([D(A.regressorReport)], $t);
+jn = I([k(M.regressorReport)], jn);
 //#endregion
 //#region src/primitives/registry.ts
-var en = new Set([
+var Mn = new Set([
 	"annotation-xml",
 	"color-profile",
 	"font-face",
@@ -5001,26 +5092,26 @@ var en = new Set([
 	"font-face-format",
 	"font-face-name",
 	"missing-glyph"
-]), tn = (e) => /^[a-z][-.0-9_a-z]*-[-.0-9_a-z]*[a-z0-9]$/.test(e) && !en.has(e), nn = (e) => {
-	if (!tn(e)) throw TypeError(`Invalid primitive renderer tag name "${e}". Expected a valid custom element name.`);
-}, rn = class e {
+]), Nn = (e) => /^[a-z][-.0-9_a-z]*-[-.0-9_a-z]*[a-z0-9]$/.test(e) && !Mn.has(e), Pn = (e) => {
+	if (!Nn(e)) throw TypeError(`Invalid primitive renderer tag name "${e}". Expected a valid custom element name.`);
+}, Fn = class e {
 	#e = /* @__PURE__ */ new Map();
 	#t = /* @__PURE__ */ new Map();
 	#n = /* @__PURE__ */ new Map();
 	registerField(e, t) {
-		return nn(t), this.#e.set(e, t), this;
+		return Pn(t), this.#e.set(e, t), this;
 	}
 	unregisterField(e) {
 		return this.#e.delete(e), this;
 	}
 	registerReport(e, t) {
-		return nn(t), this.#t.set(e, t), this;
+		return Pn(t), this.#t.set(e, t), this;
 	}
 	unregisterReport(e) {
 		return this.#t.delete(e), this;
 	}
 	registerExplanation(e, t) {
-		return nn(t), this.#n.set(e, t), this;
+		return Pn(t), this.#n.set(e, t), this;
 	}
 	unregisterExplanation(e) {
 		return this.#n.delete(e), this;
@@ -5041,23 +5132,24 @@ var en = new Set([
 		for (let [e, n] of this.#n) t.registerExplanation(e, n);
 		return t;
 	}
-}, an = () => new rn(), on = () => an().registerField("declarative-field", A.declarativeField).registerField("text-field", A.textField).registerField("number-field", A.numberField).registerField("boolean-field", A.booleanField).registerField("category-field", A.categoryField).registerField("date-field", A.dateField).registerField("series-field", A.seriesField).registerField("long-text-field", A.longTextField).registerField("single-choice-field", A.singleChoiceField).registerField("multi-choice-field", A.multiChoiceField).registerField("rating-field", A.ratingField).registerReport("declarative-report", A.declarativeReport).registerReport("classifier-report", A.classifierReport).registerReport("regressor-report", A.regressorReport).registerExplanation("declarative-explanation", A.declarativeExplanation), sn = (e, t) => {
+}, In = () => new Fn(), Ln = () => In().registerField("declarative-field", M.declarativeField).registerField("text-field", M.textField).registerField("number-field", M.numberField).registerField("boolean-field", M.booleanField).registerField("category-field", M.categoryField).registerField("date-field", M.dateField).registerField("series-field", M.seriesField).registerField("long-text-field", M.longTextField).registerField("single-choice-field", M.singleChoiceField).registerField("multi-choice-field", M.multiChoiceField).registerField("rating-field", M.ratingField).registerReport("declarative-report", M.declarativeReport).registerReport("classifier-report", M.classifierReport).registerReport("regressor-report", M.regressorReport).registerExplanation("declarative-explanation", M.declarativeExplanation), Rn = (e, t) => {
 	if (e.childNodes.length > 0 && t !== "replace") throw TypeError("Mount into an empty container or pass `containerStrategy: \"replace\"`.");
-}, cn = (e) => e ? e.clone() : on(), ln = (e, t, n = {}) => {
-	let r = document.createElement(A.form), i = cn(n.registry), a = We(n.text), o = n.containerStrategy ?? "error", s = o === "replace" ? Array.from(e.childNodes) : [];
-	sn(e, o), r.form = t, r.registry = i, r.layout = n.layout ?? "stacked", r.formLabel = n.formLabel ?? j.form, r.reportsLabel = n.reportsLabel ?? j.reports, r.submitLabel = n.submitLabel ?? j.submit, r.validatingLabel = n.validatingLabel ?? j.validating, r.submittingLabel = n.submittingLabel ?? j.submitting, r.reportPane = n.reportPane ?? "auto", r.text = a, r.reportTransport = n.reportTransport, e.replaceChildren(r);
-	let c = !1;
+}, zn = (e) => e ? e.clone() : Ln(), Bn = (e) => e?.clone() ?? t().presentationRegistry, Vn = (e, t, n = {}) => {
+	let r = document.createElement(M.form), i = zn(n.registry), a = Bn(n.presentationRegistry), o = Ue(n.text), s = n.containerStrategy ?? "error", c = s === "replace" ? Array.from(e.childNodes) : [];
+	Rn(e, s), r.form = t, r.registry = i, r.presentationRegistry = a, r.layout = n.layout ?? "stacked", r.formLabel = n.formLabel ?? N.form, r.reportsLabel = n.reportsLabel ?? N.reports, r.submitLabel = n.submitLabel ?? N.submit, r.validatingLabel = n.validatingLabel ?? N.validating, r.submittingLabel = n.submittingLabel ?? N.submitting, r.reportPane = n.reportPane ?? "auto", r.text = o, r.reportTransport = n.reportTransport, e.replaceChildren(r);
+	let l = !1;
 	return Object.freeze({
 		form: t,
 		host: r,
 		registry: i,
-		text: a,
+		presentationRegistry: a,
+		text: o,
 		unmount() {
-			c || (c = !0, r.parentNode === e ? o === "replace" && s.length > 0 ? e.replaceChildren(...s) : e.removeChild(r) : (r.remove(), o === "replace" && s.length > 0 && e.childNodes.length === 0 && e.replaceChildren(...s)));
+			l || (l = !0, r.parentNode === e ? s === "replace" && c.length > 0 ? e.replaceChildren(...c) : e.removeChild(r) : (r.remove(), s === "replace" && c.length > 0 && e.childNodes.length === 0 && e.replaceChildren(...c)));
 		}
 	});
-}, un = (e) => {
+}, Hn = (e) => {
 	e.unmount();
 };
 //#endregion
-export { D as _, $ as a, b, G as c, P as d, j as f, O as g, k as h, an as i, W as l, We as m, un as n, X as o, M as p, on as r, J as s, ln as t, Ye as u, E as v, s as x, S as y };
+export { c as C, S, j as _, $ as a, O as b, vt as c, K as d, G as f, Ue as g, P as h, In as i, yt as l, N as m, Hn as n, Vt as o, I as p, Ln as r, St as s, Vn as t, Y as u, A as v, w as x, k as y };