mlform 0.1.6 → 0.1.8

package/dist/{primitives-BtI1xyZz.js → primitives-Duag8Lj0.js}

@@ -1,40 +1,41 @@
-import { L as e } from "./engine-tP-QTA_5.js";
+import { n as e } from "./builtins-ml-9qB2MOxt.js";
+import { f as t } from "./runtime-DMjDVo0H.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: ee, getPrototypeOf: te } = Object, ne = globalThis, re = ne.trustedTypes, ie = re ? re.emptyScript : "", ae = ne.reactiveElementPolyfillSupport, h = (e, t) => e, oe = {
 	toAttribute(e, t) {
 		switch (t) {
 			case Boolean:
-				e = e ? re : null;
+				e = e ? ie : null;
 				break;
 			case Object:
 			case Array: e = e == null ? e : JSON.stringify(e);
@@ -59,7 +60,7 @@ var t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nat
 		}
 		return n;
 	}
-}, se = (e, t) => !u(e, t), ce = {
+}, se = (e, t) => !d(e, t), ce = {
 	attribute: !0,
 	type: String,
 	converter: oe,
@@ -67,8 +68,8 @@ var t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nat
 	useDefault: !1,
 	hasChanged: se
 };
-Symbol.metadata ??= Symbol("metadata"), te.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-var h = class extends HTMLElement {
+Symbol.metadata ??= Symbol("metadata"), ne.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+var g = class extends HTMLElement {
 	static addInitializer(e) {
 		this._$Ei(), (this.l ??= []).push(e);
 	}
@@ -78,11 +79,11 @@ var h = class extends HTMLElement {
 	static createProperty(e, t = ce) {
 		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];
 			},
@@ -104,14 +105,14 @@ var h = class extends HTMLElement {
 		return this.elementProperties.get(e) ?? ce;
 	}
 	static _$Ei() {
-		if (this.hasOwnProperty(ae("elementProperties"))) return;
-		let e = ee(this);
+		if (this.hasOwnProperty(h("elementProperties"))) return;
+		let e = te(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(h("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(h("properties"))) {
+			let e = this.properties, t = [...m(e), ...ee(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?.());
@@ -252,32 +253,32 @@ 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");
+g.elementStyles = [], g.shadowRootOptions = { mode: "open" }, g[h("elementProperties")] = /* @__PURE__ */ new Map(), g[h("finalized")] = /* @__PURE__ */ new Map(), ae?.({ ReactiveElement: g }), (ne.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 le = globalThis, ue = (e) => e, de = le.trustedTypes, fe = de ? de.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pe = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, me = "?" + _, he = `<${me}>`, v = document, ge = () => v.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]", xe = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Se = /-->/g, Ce = />/g, y = RegExp(`>|${be}(?:([^\\s"'>=/]+)(${be}*=${be}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), we = /'/g, Te = /"/g, Ee = /^(?:script|style|textarea|title)$/i, b = ((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) {
+}))(1), x = Symbol.for("lit-noChange"), S = Symbol.for("lit-nothing"), De = /* @__PURE__ */ new WeakMap(), C = v.createTreeWalker(v, 129);
+function Oe(e, t) {
 	if (!ve(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
 	return fe === void 0 ? t : fe.createHTML(t);
 }
-var Oe = (e, t) => {
-	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = v;
+var ke = (e, t) => {
+	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = xe;
 	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);
+		for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === xe ? c[1] === "!--" ? o = Se : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = y) : (Ee.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = y) : o = Ce : o === y ? c[0] === ">" ? (o = i ?? xe, 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] === "\"" ? Te : we) : o === Te || o === we ? o = y : o === Se || o === Ce ? o = xe : (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);
+		a += o === xe ? n + he : l >= 0 ? (r.push(s), n.slice(0, l) + pe + n.slice(l) + _ + d) : n + _ + (l === -2 ? t : d);
 	}
-	return [De(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
-}, ke = class e {
+	return [Oe(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
+}, Ae = 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);
+		let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = ke(t, n);
 		if (this.el = e.createElement(l, r), C.currentNode = this.el.content, n === 2 || n === 3) {
 			let e = this.el.content.firstChild;
 			e.replaceWith(...e.childNodes);
@@ -285,20 +286,20 @@ var Oe = (e, t) => {
 		for (; (i = C.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);
+					let t = u[o++], n = i.getAttribute(e).split(_), 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] === "." ? Ne : r[1] === "?" ? Pe : r[1] === "@" ? Fe : T
 					}), i.removeAttribute(e);
-				} else e.startsWith(g) && (c.push({
+				} else e.startsWith(_) && (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 (Ee.test(i.tagName)) {
+					let e = i.textContent.split(_), 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({
@@ -314,16 +315,16 @@ var Oe = (e, t) => {
 			});
 			else {
 				let e = -1;
-				for (; (e = i.data.indexOf(g, e + 1)) !== -1;) c.push({
+				for (; (e = i.data.indexOf(_, e + 1)) !== -1;) c.push({
 					type: 7,
 					index: a
-				}), e += g.length - 1;
+				}), e += _.length - 1;
 			}
 			a++;
 		}
 	}
 	static createElement(e, t) {
-		let n = _.createElement("template");
+		let n = v.createElement("template");
 		return n.innerHTML = e, n;
 	}
 };
@@ -332,7 +333,7 @@ function w(e, t, n = e, r) {
 	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;
 }
-var Ae = class {
+var je = class {
 	constructor(e, t) {
 		this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
 	}
@@ -343,23 +344,23 @@ var Ae = class {
 		return this._$AM._$AU;
 	}
 	u(e) {
-		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? _).importNode(t, !0);
+		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? v).importNode(t, !0);
 		C.currentNode = r;
 		let i = C.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 Me(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new Ie(i, this, e)), this._$AV.push(t), s = n[++o];
 			}
 			a !== s?.index && (i = C.nextNode(), a++);
 		}
-		return C.currentNode = _, r;
+		return C.currentNode = v, 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 {
+}, Me = class e {
 	get _$AU() {
 		return this._$AM?._$AU ?? this._$Cv;
 	}
@@ -386,19 +387,19 @@ 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 !== S && _e(this._$AH) ? this._$AA.nextSibling.data = e : this.T(v.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 = Ae.createElement(Oe(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 je(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 = De.get(e.strings);
+		return t === void 0 && De.set(e.strings, t = new Ae(e)), t;
 	}
 	k(t) {
 		ve(this._$AH) || (this._$AH = [], this._$AR());
@@ -437,21 +438,21 @@ var Ae = class {
 	j(e) {
 		e === S ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
 	}
-}, Me = class extends T {
+}, Ne = class extends T {
 	constructor() {
 		super(...arguments), this.type = 3;
 	}
 	j(e) {
 		this.element[this.name] = e === S ? void 0 : e;
 	}
-}, Ne = class extends T {
+}, Pe = class extends T {
 	constructor() {
 		super(...arguments), this.type = 4;
 	}
 	j(e) {
 		this.element.toggleAttribute(this.name, !!e && e !== S);
 	}
-}, Pe = class extends T {
+}, Fe = class extends T {
 	constructor(e, t, n, r, i) {
 		super(e, t, n, r, i), this.type = 5;
 	}
@@ -463,7 +464,7 @@ var Ae = class {
 	handleEvent(e) {
 		typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
 	}
-}, Fe = class {
+}, Ie = class {
 	constructor(e, t, n) {
 		this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
 	}
@@ -473,31 +474,31 @@ var Ae = class {
 	_$AI(e) {
 		w(this, e);
 	}
-}, Ie = {
+}, Le = {
 	M: pe,
-	P: g,
+	P: _,
 	A: me,
 	C: 1,
-	L: Oe,
-	R: Ae,
+	L: ke,
+	R: je,
 	D: ye,
 	V: w,
-	I: je,
+	I: Me,
 	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) => {
+	N: Pe,
+	U: Fe,
+	B: Ne,
+	F: Ie
+}, Re = le.litHtmlPolyfillSupport;
+Re?.(Ae, Me), (le.litHtmlVersions ??= []).push("3.3.2");
+var ze = (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 Me(t.insertBefore(ge(), e), e, void 0, n ?? {});
 	}
 	return i._$AI(e), i;
-}, ze = globalThis, E = class extends h {
+}, Be = globalThis, E = class extends g {
 	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 = ze(t, this.renderRoot, this.renderOptions);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -519,22 +520,22 @@ var Re = (e, t, n) => {
 		return x;
 	}
 };
-E._$litElement$ = !0, E.finalized = !0, ze.litElementHydrateSupport?.({ LitElement: E });
-var Be = ze.litElementPolyfillSupport;
-Be?.({ LitElement: E }), (ze.litElementVersions ??= []).push("4.2.2");
+E._$litElement$ = !0, E.finalized = !0, Be.litElementHydrateSupport?.({ LitElement: E });
+var Ve = Be.litElementPolyfillSupport;
+Ve?.({ LitElement: E }), (Be.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) => {
 	n === void 0 ? customElements.define(e, t) : n.addInitializer(() => {
 		customElements.define(e, t);
 	});
-}, Ve = {
+}, He = {
 	attribute: !0,
 	type: String,
 	converter: oe,
 	reflect: !1,
 	hasChanged: se
-}, He = (e = Ve, t, n) => {
+}, Ue = (e = He, 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;
@@ -558,7 +559,7 @@ 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) => {
+	return (t, n) => typeof n == "object" ? Ue(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);
@@ -597,19 +598,19 @@ var A = {
 	singleChoiceField: "mlf-single-choice-field",
 	multiChoiceField: "mlf-multi-choice-field",
 	ratingField: "mlf-rating-field"
-}, Ue = {
+}, j = {
 	submitRequest: "mlf-submit-request",
 	submitStart: "mlf-submit-start",
 	submitSuccess: "mlf-submit-success",
 	submitAbort: "mlf-submit-abort",
 	submitError: "mlf-submit-error"
-}, j = {
+}, M = {
 	form: "Inputs",
 	reports: "Reports",
 	submit: "Submit",
 	validating: "Validating...",
 	submitting: "Submitting..."
-}, M = Object.freeze({
+}, N = Object.freeze({
 	formEyebrow: "Form",
 	reportEyebrow: "Report",
 	formErrorsTitle: "Form errors",
@@ -667,9 +668,9 @@ var A = {
 	reportsEmptyTitle: "Results",
 	reportsEmptyBody: "Reports will appear here after the form is submitted."
 }), We = (e) => e ? Object.freeze({
-	...M,
+	...N,
 	...e
-}) : M, N = {
+}) : N, P = {
 	booleanGroup: "mlf-boolean",
 	fieldDescription: "mlf-field-description",
 	fieldErrors: "mlf-field-errors",
@@ -679,7 +680,7 @@ var A = {
 };
 //#endregion
 //#region \0@oxc-project+runtime@0.123.0/helpers/decorate.js
-function P(e, t, n, r) {
+function F(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 I = class extends E {
+	static styles = c`
     :host {
       display: block;
     }
@@ -728,7 +729,7 @@ var F = class extends E {
 	set form(e) {
 		this.#e = e;
 	}
-	#t = M;
+	#t = N;
 	get text() {
 		return this.#t;
 	}
@@ -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);
+F([O({ attribute: !1 })], I.prototype, "form", null), F([O({ attribute: !1 })], I.prototype, "text", null), F([k()], I.prototype, "formErrors", null), I = F([D(A.formErrors)], I);
 //#endregion
 //#region src/primitives/components/submit-button.ts
-var I = class extends E {
-	static styles = s`
+var L = class extends E {
+	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 = M.submit;
 	get idleLabel() {
 		return this.#t;
 	}
 	set idleLabel(e) {
 		this.#t = e;
 	}
-	#n = j.validating;
+	#n = M.validating;
 	get validatingLabel() {
 		return this.#n;
 	}
 	set validatingLabel(e) {
 		this.#n = e;
 	}
-	#r = j.submitting;
+	#r = M.submitting;
 	get submittingLabel() {
 		return this.#r;
 	}
@@ -893,17 +894,17 @@ var I = class extends E {
     `;
 	}
 	#c = () => {
-		this.dispatchEvent(new CustomEvent(Ue.submitRequest, {
+		this.dispatchEvent(new CustomEvent(j.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);
+F([O({ type: String })], L.prototype, "status", null), F([O({ type: String })], L.prototype, "idleLabel", null), F([O({ type: String })], L.prototype, "validatingLabel", null), F([O({ type: String })], L.prototype, "submittingLabel", null), F([O({ type: Number })], L.prototype, "loaded", null), F([O({ type: Number })], L.prototype, "total", null), F([O({ type: String })], L.prototype, "progressMessage", null), F([O({ type: Number })], L.prototype, "sessionMessageCount", null), L = F([D(A.submitButton)], L);
 //#endregion
 //#region src/primitives/components/unsupported-component.ts
-var L = class extends E {
-	static styles = s`
+var R = class extends E {
+	static styles = c`
     :host {
       display: block;
     }
@@ -940,7 +941,7 @@ var L = class extends E {
 	set role(e) {
 		this.#t = e;
 	}
-	#n = M;
+	#n = N;
 	get text() {
 		return this.#n;
 	}
@@ -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);
+F([O({ type: String })], R.prototype, "component", null), F([O({ type: String })], R.prototype, "role", null), F([O({ attribute: !1 })], R.prototype, "text", null), R = F([D(A.unsupportedComponent)], R);
 //#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;
@@ -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 E {
+	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 = N;
+	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 = `${P.fieldControl}-${this.controller?.id}-${this.#s}`, m = `${P.fieldErrors}-${this.controller?.id}-${this.#s}`, ee = `${P.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=${ee}
             ?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=${ee} 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 ? `${P.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);
+F([O({ attribute: !1 })], H.prototype, "controller", null), F([O({ attribute: !1 })], H.prototype, "descriptor", null), F([O({ attribute: !1 })], H.prototype, "registry", null), F([O({ attribute: !1 })], H.prototype, "text", null), F([k()], H.prototype, "resolvedDescriptor", null), F([k()], H.prototype, "fieldState", null), F([k()], H.prototype, "descriptionVisibilityOverride", null), H = F([D(A.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 E {
+	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 = N;
 	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: `${P.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);
+F([O({ attribute: !1 })], U.prototype, "controller", null), F([O({ attribute: !1 })], U.prototype, "registry", null), F([O({ attribute: !1 })], U.prototype, "text", null), F([O({ attribute: !1 })], U.prototype, "transport", null), F([O({ attribute: !1 })], U.prototype, "lastResult", null), F([O({ attribute: !1 })], U.prototype, "descriptor", null), F([k()], U.prototype, "resolvedDescriptor", null), F([k()], U.prototype, "reportState", null), U = F([D(A.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 E {
+	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 = N;
 	get text() {
 		return this.#r;
 	}
@@ -1648,29 +1657,36 @@ 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;
+		let e = this.resolvedDescriptor, t = this.explanationState;
 		if (!e || !t) return b``;
 		let n = e.props, r = this.registry?.resolveExplanation(e.component);
 		return b`
@@ -1678,14 +1694,14 @@ var tt = 0, U = class extends E {
         <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 ? b`<p class="description">${V(n.description)}</p>` : b``}
           </div>
           <span class="status">${t.status}</span>
         </div>
 
-        ${r ? this.#p(r) : b`
+        ${r ? this.#m(r) : b`
               <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: `${P.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);
+F([O({ attribute: !1 })], W.prototype, "controller", null), F([O({ attribute: !1 })], W.prototype, "registry", null), F([O({ attribute: !1 })], W.prototype, "lastResult", null), F([O({ attribute: !1 })], W.prototype, "text", null), F([O({ attribute: !1 })], W.prototype, "descriptor", null), F([k()], W.prototype, "resolvedDescriptor", null), F([k()], W.prototype, "explanationState", null), W = F([D(A.explanationPanel)], W);
 //#endregion
 //#region src/primitives/base-field-element.ts
-var W = class extends E {
-	static styles = s`
+var G = class extends E {
+	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 = N;
 	get text() {
 		return this.#r;
 	}
@@ -1869,10 +1885,10 @@ 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);
+F([O({ attribute: !1 })], G.prototype, "controller", null), F([O({ attribute: !1 })], G.prototype, "descriptor", null), F([O({ attribute: !1 })], G.prototype, "context", null), F([O({ 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
@@ -1897,8 +1913,8 @@ var nt = {
 		component: "series-field",
 		tagName: A.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 = F([D(A.declarativeField)], st);
 //#endregion
 //#region src/primitives/base-report-element.ts
-var G = class extends E {
-	static styles = s`
+var K = class extends E {
+	static styles = c`
     :host {
       display: block;
     }
@@ -1969,7 +1985,7 @@ var G = class extends E {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = N;
 	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);
+F([O({ attribute: !1 })], K.prototype, "controller", null), F([O({ attribute: !1 })], K.prototype, "descriptor", null), F([O({ attribute: !1 })], K.prototype, "context", null), F([O({ attribute: !1 })], K.prototype, "text", null), F([O({ attribute: !1 })], K.prototype, "transport", null), F([O({ 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,26 +2025,26 @@ 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) => b`<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}>
+          <section class="node text ${q(e.tone)}" data-node-index=${t}>
             ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
             <pre class="node-text">${e.value}</pre>
           </section>
         ` : b`
-        <section class="node text ${K(e.tone)}" data-node-index=${t}>
+        <section class="node text ${q(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>
+          <p class="node-text">${J(e.value)}</p>
         </section>
       `;
 		case "metric": return b`
-        <section class="node metric ${K(e.tone)}" data-node-index=${t}>
+        <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>
+          <p class="metric-value">${J(e.value)}</p>
           ${e.hint ? b`<p class="node-hint">${e.hint}</p>` : S}
         </section>
       `;
@@ -2036,10 +2052,10 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
         <section class="node kv" data-node-index=${t}>
           ${e.label ? b`<p class="node-label">${e.label}</p>` : S}
           <dl class="kv-list">
-            ${it(e.entries).map((e) => b`
+            ${ct(e.entries).map((e) => b`
                 <div class="kv-row">
                   <dt>${e.label}</dt>
-                  <dd>${q(e.value)}</dd>
+                  <dd>${J(e.value)}</dd>
                 </div>
               `)}
           </dl>
@@ -2051,9 +2067,9 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
         <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>`)}
+                ${e.items.map((e) => b`<li>${J(e)}</li>`)}
               </ol>` : b`<ul class="node-list">
-                ${e.items.map((e) => b`<li>${q(e)}</li>`)}
+                ${e.items.map((e) => b`<li>${J(e)}</li>`)}
               </ul>`}
         </section>
       `;
@@ -2071,7 +2087,7 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
               <tbody>
                 ${e.rows.map((t) => b`
                     <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) => b`<td>${lt(e)}</td>`)}
                     </tr>
                   `)}
               </tbody>
@@ -2081,13 +2097,13 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
       `;
 		case "badge": return b`
         <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}>
+        <section class="node notice ${q(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>
+          <p class="node-text">${J(e.body)}</p>
         </section>
       `;
 		case "json": return b`
@@ -2097,25 +2113,25 @@ var K = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
         </section>
       `;
 	}
-}, st = (e, t) => {
+}, dt = (e, t) => {
 	if (!e && !t) return S;
-	let n = B(e?.title, t ?? ""), r = B(e?.description), i = e?.value, a = B(e?.badge);
+	let n = V(e?.title, t ?? ""), r = V(e?.description), i = e?.value, a = V(e?.badge);
 	return b`
-    <section class="summary ${K(e?.tone)}">
+    <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}
       </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 ? b`<strong class="summary-value">${J(i)}</strong>` : S}
+        ${a ? b`<span class="badge ${q(e?.tone)}">${a}</span>` : S}
       </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 ? S : b`<div class="presentation">
+    ${e.map((e, t) => ut(e, t))}
+  </div>`, pt = class extends K {
+	static styles = [K.styles, c`
       :host {
         display: block;
       }
@@ -2263,16 +2279,16 @@ 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)}
+      ${dt(e.summary && typeof e.summary == "object" ? e.summary : null, this.reportContext?.label)}
+      ${ft(t)}
     `;
 	}
 };
-lt = P([D(A.declarativeReport)], lt);
+pt = F([D(A.declarativeReport)], pt);
 //#endregion
 //#region src/primitives/base-explanation-element.ts
-var J = class extends E {
-	static styles = s`
+var Y = class extends E {
+	static styles = c`
     :host {
       display: block;
     }
@@ -2298,7 +2314,7 @@ var J = class extends E {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = M;
+	#r = N;
 	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);
+F([O({ attribute: !1 })], Y.prototype, "controller", null), F([O({ attribute: !1 })], Y.prototype, "descriptor", null), F([O({ attribute: !1 })], Y.prototype, "context", null), F([O({ 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,354 @@ 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 ? b`<pre class="chromeless-text">${V(r.value)}</pre>` : b`
+      ${dt(i, n ? void 0 : this.explanationContext?.label)}
+      ${ft(t)}
     `;
 	}
 };
-ut = P([D(A.declarativeExplanation)], ut);
+mt = F([D(A.declarativeExplanation)], mt);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive.js
-var dt = {
+//#region src/primitives/components/form-root-styles.ts
+var ht = 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-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));
+  }
+
+  .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));
+  }
+
+  .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-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;
+    }
+  }
+`, gt = (e) => ({
+	component: "unsupported-field",
+	props: { label: e.config.label ?? e.id }
+}), _t = (e, t) => t?.getField(e.kind)?.describe(e.config, {
+	fieldId: e.id,
+	state: e.state,
+	value: e.state.value
+}) ?? gt(e), vt = (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;
+}, yt = (e, t) => {
+	let n = t?.getExplanation(e.kind);
+	return n ? n.describe(e.config, {
+		explanationId: e.id,
+		state: e.state
+	}) : null;
+}, bt = (e, t, n) => t.map((t) => e.getField(t)).filter((e) => e !== void 0).map((e) => ({
+	controller: e,
+	descriptor: _t(e, n)
+})), xt = (e, t, n, r) => (n === "always" ? e.reports : t.map((t) => e.getReport(t)).filter((e) => e !== void 0)).map((t) => ({
+	controller: t,
+	descriptor: vt(t, e, r)
+})).filter((e) => e.descriptor !== null), St = (e, t, n) => t.map((t) => e.getExplanation(t)).filter((e) => e !== void 0).map((e) => ({
+	controller: e,
+	descriptor: yt(e, n)
+})), Ct = {
 	ATTRIBUTE: 1,
 	CHILD: 2,
 	PROPERTY: 3,
 	BOOLEAN_ATTRIBUTE: 4,
 	EVENT: 5,
 	ELEMENT: 6
-}, ft = (e) => (...t) => ({
+}, wt = (e) => (...t) => ({
 	_$litDirective$: e,
 	values: t
-}), pt = class {
+}), Tt = class {
 	constructor(e) {}
 	get _$AU() {
 		return this._$AM._$AU;
@@ -2485,9 +2829,9 @@ var dt = {
 	update(e, t) {
 		return this.render(...t);
 	}
-}, { I: mt } = Ie, ht = (e) => e, gt = () => document.createComment(""), _t = (e, t, n) => {
+}, { I: Et } = Le, Dt = (e) => e, Ot = () => document.createComment(""), kt = (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 Et(r.insertBefore(Ot(), i), r.insertBefore(Ot(), i), e, e.options);
 	else {
 		let t = n._$AB.nextSibling, a = n._$AM, o = a !== e;
 		if (o) {
@@ -2497,21 +2841,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 = Dt(e).nextSibling;
+				Dt(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), At = {}, jt = (e, t = At) => e._$AH = t, Mt = (e) => e._$AH, Nt = (e) => {
 	e._$AR(), e._$AA.remove();
-}, St = (e, t, n) => {
+}, Pt = (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 {
+}, Ft = wt(class extends Tt {
 	constructor(e) {
-		if (super(e), e.type !== dt.CHILD) throw Error("repeat() can only be used in text expressions");
+		if (super(e), e.type !== Ct.CHILD) throw Error("repeat() can only be used in text expressions");
 	}
 	dt(e, t, n) {
 		let r;
@@ -2527,334 +2871,205 @@ 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 = Mt(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]), kt(e, c[m + 1], i[d]), d++, m--;
+		else if (s[f] === o[p]) c[p] = X(i[f], a[p]), kt(e, i[d], i[f]), f--, p++;
+		else if (l === void 0 && (l = Pt(o, p, m), u = Pt(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 = kt(e, i[d]);
+				X(t, a[p]), c[p] = t;
+			} else c[p] = X(n, a[p]), kt(e, i[d], n), i[t] = null;
 			p++;
-		} else xt(i[f]), f--;
-		else xt(i[d]), d++;
+		} else Nt(i[f]), f--;
+		else Nt(i[d]), d++;
 		for (; p <= m;) {
-			let t = _t(e, c[m + 1]);
-			Y(t, a[p]), c[p++] = t;
+			let t = kt(e, c[m + 1]);
+			X(t, a[p]), c[p++] = t;
 		}
 		for (; d <= f;) {
 			let e = i[d++];
-			e !== null && xt(e);
+			e !== null && Nt(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, jt(e, c), x;
+	}
+}), It = (e, t, n) => b`
+  <div class="collection" part="field-list">
+    ${Ft(e, (e) => e.controller.id, (e) => b`
+        <mlf-field-frame
+          .controller=${e.controller}
+          .descriptor=${e.descriptor}
+          .registry=${t}
+          .text=${n}
+        ></mlf-field-frame>
+      `)}
+  </div>
+`, Lt = (e, t, n, r, i) => b`
+  <div class="collection" part="report-list">
+    ${Ft(e, (e) => e.controller.id, (e) => b`
+        <mlf-report-frame
+          .controller=${e.controller}
+          .descriptor=${e.descriptor}
+          .registry=${t}
+          .text=${n}
+          .transport=${r}
+          .lastResult=${i}
+        ></mlf-report-frame>
+      `)}
+  </div>
+`, Rt = (e, t, n, r, i) => {
+	let a = St(e, t.explanationIds, r);
+	return a.length === 0 ? S : b`
+    <div class="collection" part="explanation-list">
+      ${Ft(a, (e) => e.controller.id, (t) => b`
+          <mlf-explanation-panel
+            .controller=${t.controller}
+            .descriptor=${t.descriptor}
+            .registry=${n}
+            .text=${i}
+            .lastResult=${e.state.lastResult ?? null}
+          ></mlf-explanation-panel>
+        `)}
+    </div>
+  `;
+}, zt = (e) => b`
+  <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>
+        ${It(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 ? b`
+          <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">
+              ${Lt(e.reportsToRender, e.registry, e.text, e.reportTransport, e.form.state.lastResult ?? null)}
+              ${Rt(e.form, e.state, e.registry, e.presentationRegistry, e.text)}
+            </div>
+          </aside>
+        ` : S}
+  </div>
+`, Bt = (e) => 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>${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>
+            ${It(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 ? b`
+            <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 ? Lt(e.reportsToRender, e.registry, e.text, e.reportTransport, e.form.state.lastResult ?? null) : b`
+                        <div class="empty-report-state">
+                          <p class="empty-report-title">${e.text.reportsEmptyTitle}</p>
+                          <p class="empty-report-copy">${e.text.reportsEmptyBody}</p>
+                        </div>
+                      `}
+                  ${Rt(e.form, e.state, e.registry, e.presentationRegistry, e.text)}
+                </div>
+              </div>
+            </section>
+          ` : S}
+    </div>
+  </div>
+`, Vt = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Ht = (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 && Vt(e.visibleFieldIds, t.visibleFieldIds) && Vt(e.visibleReportIds, t.visibleReportIds) && Vt(e.explanationIds, t.explanationIds) && Vt(e.reportStateKeys, t.reportStateKeys) && Vt(e.explanationStateKeys, t.explanationStateKeys), Ut = (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 E {
+	static styles = ht;
 	#e;
 	get form() {
 		return this.#e;
@@ -2869,268 +3084,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 = M.form;
+	get formLabel() {
 		return this.#i;
 	}
-	set reportsLabel(e) {
+	set formLabel(e) {
 		this.#i = e;
 	}
-	#a = j.submit;
-	get submitLabel() {
+	#a = M.reports;
+	get reportsLabel() {
 		return this.#a;
 	}
-	set submitLabel(e) {
+	set reportsLabel(e) {
 		this.#a = e;
 	}
-	#o = j.validating;
-	get validatingLabel() {
+	#o = M.submit;
+	get submitLabel() {
 		return this.#o;
 	}
-	set validatingLabel(e) {
+	set submitLabel(e) {
 		this.#o = e;
 	}
-	#s = j.submitting;
-	get submittingLabel() {
+	#s = M.validating;
+	get validatingLabel() {
 		return this.#s;
 	}
-	set submittingLabel(e) {
+	set validatingLabel(e) {
 		this.#s = e;
 	}
-	#c = "auto";
-	get reportPane() {
+	#c = M.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 = N;
+	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 () => {
+		let n = this.text, r = bt(e, t.visibleFieldIds, this.presentationRegistry), i = xt(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" ? Bt({
+			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
+		}) : zt({
+			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(j.submitStart, {
 				detail: {
 					form: this.form,
 					state: this.form.state
@@ -3140,7 +3222,7 @@ var dt = {
 			}));
 			try {
 				let e = await this.form.submit();
-				this.dispatchEvent(new CustomEvent(Ue.submitSuccess, {
+				this.dispatchEvent(new CustomEvent(j.submitSuccess, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
@@ -3149,13 +3231,13 @@ var dt = {
 					bubbles: !0,
 					composed: !0
 				}));
-			} catch (t) {
-				this.dispatchEvent(new CustomEvent(t instanceof e ? Ue.submitAbort : Ue.submitError, {
+			} catch (e) {
+				this.dispatchEvent(new CustomEvent(e instanceof t ? j.submitAbort : j.submitError, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
 						status: this.form.state.status,
-						error: t
+						error: e
 					},
 					bubbles: !0,
 					composed: !0
@@ -3163,58 +3245,42 @@ 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 ? Ut(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 ? Ut(this.form) : null, !this.form) return;
 		let e = this.form;
-		this.#f = e.subscribeSelector(() => this.#v(e), (e) => {
+		this.#p = e.subscribeSelector(() => Ut(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: Ht });
 	}
 };
-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({
+F([O({ attribute: !1 })], Z.prototype, "form", null), F([O({ attribute: !1 })], Z.prototype, "registry", null), F([O({ attribute: !1 })], Z.prototype, "presentationRegistry", null), F([O({ type: String })], Z.prototype, "layout", null), F([O({
 	type: String,
 	attribute: "form-label"
-})], Z.prototype, "formLabel", null), P([O({
+})], Z.prototype, "formLabel", null), F([O({
 	type: String,
 	attribute: "reports-label"
-})], Z.prototype, "reportsLabel", null), P([O({
+})], Z.prototype, "reportsLabel", null), F([O({
 	type: String,
 	attribute: "submit-label"
-})], Z.prototype, "submitLabel", null), P([O({
+})], Z.prototype, "submitLabel", null), F([O({
 	type: String,
 	attribute: "validating-label"
-})], Z.prototype, "validatingLabel", null), P([O({
+})], Z.prototype, "validatingLabel", null), F([O({
 	type: String,
 	attribute: "submitting-label"
-})], Z.prototype, "submittingLabel", null), P([O({
+})], Z.prototype, "submittingLabel", null), F([O({
 	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), F([O({ attribute: !1 })], Z.prototype, "text", null), F([O({ attribute: !1 })], Z.prototype, "reportTransport", null), F([k()], Z.prototype, "formState", null), Z = F([D(A.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 ?? S, Wt = class extends G {
+	static styles = [G.styles, c`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
@@ -3227,10 +3293,10 @@ var Q = (e) => e ?? S, Tt = class extends W {
         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 +3316,11 @@ var Q = (e) => e ?? S, Tt = class extends W {
 		this.commitBlur();
 	};
 };
-Tt = P([D(A.textField)], Tt);
+Wt = F([D(A.textField)], Wt);
 //#endregion
 //#region src/primitives/fields/number-field.ts
-var Et = class extends W {
-	static styles = [W.styles, s`
+var Gt = class extends G {
+	static styles = [G.styles, c`
       .input-wrapper {
         position: relative;
         min-width: 0;
@@ -3410,7 +3476,7 @@ 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;
+		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" ? b`
         <div class="range-wrapper">
           <div class="range-header">
@@ -3424,7 +3490,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)}
@@ -3448,8 +3514,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 +3541,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 +3557,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);
+F([k()], Gt.prototype, "draftValue", null), F([k()], Gt.prototype, "focused", null), Gt = F([D(A.numberField)], Gt);
 //#endregion
 //#region src/primitives/fields/boolean-field.ts
-var Dt = class extends W {
-	static styles = [W.styles, s`
+var Kt = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         display: flex;
         width: 100%;
@@ -3562,11 +3628,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);
+		let e = this.props, t = this.fieldContext, n = e.checked === !0, r = this.text, i = P.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 b`
       <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 +3671,14 @@ var Dt = class extends W {
 		this.commitBlur();
 	};
 };
-Dt = P([D(A.booleanField)], Dt);
+Kt = F([D(A.booleanField)], Kt);
 //#endregion
 //#region src/primitives/fields/category-field.ts
-var Ot = (e) => typeof e == "string" ? {
+var qt = (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, Jt = (e, t) => typeof e != "string" || e.length === 0 ? "" : t.some((t) => qt(t).value === e) ? e : "", Yt = class extends G {
+	static styles = [G.styles, c`
       .select-wrap {
         position: relative;
         min-width: 0;
@@ -3642,13 +3708,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;
+		let e = this.props, t = this.fieldContext, n = typeof e.value == "string" ? e.value : "", r = Array.isArray(e.options) ? e.options : [], i = Jt(n, r), a = this.text;
 		return b`
       <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,7 +3727,7 @@ var Ot = (e) => typeof e == "string" ? {
             &#8212; ${a.categoryPlaceholder} &#8212;
           </option>
           ${r.map((e) => {
-			let t = Ot(e);
+			let t = qt(e);
 			return b`
               <option value=${t.value} ?selected=${t.value === i}>
                 ${t.label}
@@ -3688,11 +3754,11 @@ var Ot = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-At = P([D(A.categoryField)], At);
+Yt = F([D(A.categoryField)], Yt);
 //#endregion
 //#region src/primitives/fields/date-field.ts
-var jt = class extends W {
-	static styles = [W.styles, s`
+var Xt = class extends G {
+	static styles = [G.styles, c`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
@@ -3709,7 +3775,7 @@ var jt = class extends W {
         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 +3798,190 @@ var jt = class extends W {
 		this.commitBlur();
 	};
 };
-jt = P([D(A.dateField)], jt);
+Xt = F([D(A.dateField)], Xt);
 //#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 Zt = 0, Qt = () => `series-row-${++Zt}`, $t = (e) => e === !0 || e === !1 ? e : e === "true" ? !0 : e === "false" ? !1 : "", en = (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 $t(t);
 		default: return typeof t == "string" ? t : t ?? "";
 	}
-}, It = (e, t, n) => Array.isArray(e) ? e.map((e) => {
+}, tn = (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: Qt(),
+		field1: en(t, r.field1),
+		field2: en(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;
-        }
+}) : [], nn = (e, t) => {
+	switch (e.kind) {
+		case "number":
+		case "date":
+		case "category":
+		case "text":
+		case "boolean": return t === "" ? null : t;
+		default: return t === "" ? null : t;
+	}
+}, rn = (e) => typeof e.unit == "string" ? e.unit : "", an = 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;
+    }
+  }
+`, on = class extends G {
+	static styles = [G.styles, an];
 	#e = [];
 	get rows() {
 		return this.#e;
@@ -3927,7 +3994,7 @@ 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;
+		let e = this.fieldContext, t = !!this.fieldContext?.disabled, n = !!this.fieldContext?.readOnly, r = t || n, i = this.#n, a = this.#r, o = `${Math.max(rn(a).length * .56 + .8, 2.3)}rem`, s = this.text;
 		return b`
       <div class="series" style=${`--mlf-series-unit-width: ${o};`}>
         <div class="toolbar">
@@ -3945,8 +4012,8 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
         ${this.rows.length > 0 ? b`
               <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) => {
@@ -3954,10 +4021,10 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
 			return b`
                     <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"
@@ -3984,11 +4051,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 = tn(this.props.value, this.#n, this.#r), this.#t = !1;
 	}
 	#a = () => {
 		this.rows = [...this.rows, {
-			key: Nt(),
+			key: Qt(),
 			field1: "",
 			field2: ""
 		}], this.#t = !0, this.#l();
@@ -4007,25 +4074,12 @@ 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: nn(this.#n, e.field1),
+			field2: nn(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;
+	#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}`, l = !!e.required;
 		switch (e.kind) {
 			case "date": return b`
           <input
@@ -4080,7 +4134,7 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
         `;
 			}
 			case "boolean": {
-				let u = B(e.trueLabel, this.text.booleanTrue), d = B(e.falseLabel, this.text.booleanFalse), f = t === !0 ? "true" : t === !1 ? "false" : "";
+				let u = V(e.trueLabel, this.text.booleanTrue), d = V(e.falseLabel, this.text.booleanFalse), f = t === !0 ? "true" : t === !1 ? "false" : "";
 				return b`
           <select
             class="control"
@@ -4103,7 +4157,7 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
         `;
 			}
 			case "number": {
-				let u = this.#d(e);
+				let u = rn(e);
 				return b`
           <div class="value-wrap">
             <input
@@ -4114,7 +4168,7 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
               spellcheck="false"
               autocomplete="off"
               .value=${typeof t == "string" ? t : ""}
-              placeholder=${B(e.placeholder)}
+              placeholder=${V(e.placeholder)}
               aria-label=${c}
               aria-describedby=${Q(s?.describedBy)}
               aria-invalid=${String(s?.invalid ?? !1)}
@@ -4136,7 +4190,7 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
             id=${r}
             type="text"
             .value=${typeof t == "string" ? t : typeof t == "number" || typeof t == "boolean" || typeof t == "bigint" ? `${t}` : ""}
-            placeholder=${B(e.placeholder)}
+            placeholder=${V(e.placeholder)}
             aria-label=${c}
             aria-describedby=${Q(s?.describedBy)}
             aria-invalid=${String(s?.invalid ?? !1)}
@@ -4150,11 +4204,11 @@ var Mt = 0, Nt = () => `series-row-${++Mt}`, Pt = (e) => e === !0 || e === !1 ?
 		}
 	}
 };
-P([k()], Lt.prototype, "rows", null), Lt = P([D(A.seriesField)], Lt);
+F([k()], on.prototype, "rows", null), on = F([D(A.seriesField)], on);
 //#endregion
 //#region src/primitives/fields/long-text-field.ts
-var Rt = class extends W {
-	static styles = [W.styles, s`
+var sn = class extends G {
+	static styles = [G.styles, c`
       textarea.control {
         resize: vertical;
         min-height: 6rem;
@@ -4168,9 +4222,9 @@ var Rt = class extends W {
         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 +4243,14 @@ var Rt = class extends W {
 		this.commitBlur();
 	};
 };
-Rt = P([D(A.longTextField)], Rt);
+sn = F([D(A.longTextField)], sn);
 //#endregion
 //#region src/primitives/fields/single-choice-field.ts
-var zt = (e) => typeof e == "string" ? {
+var cn = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Bt = class extends W {
-	static styles = [W.styles, s`
+} : e, ln = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         border: none;
         padding: 0;
@@ -4257,7 +4311,7 @@ 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);
+		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 b`
       <fieldset>
         <legend>${a}</legend>
@@ -4270,7 +4324,7 @@ 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}`;
+			let { label: r, value: i } = cn(e), a = `${t?.controlId ?? "sc"}-${i}`;
 			return b`
               <label class=${o ? "disabled" : ""} for=${a}>
                 <input
@@ -4299,14 +4353,14 @@ var zt = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Bt = P([D(A.singleChoiceField)], Bt);
+ln = F([D(A.singleChoiceField)], ln);
 //#endregion
 //#region src/primitives/fields/multi-choice-field.ts
-var Vt = (e) => typeof e == "string" ? {
+var un = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Ht = class extends W {
-	static styles = [W.styles, s`
+} : e, dn = class extends G {
+	static styles = [G.styles, c`
       fieldset {
         border: none;
         padding: 0;
@@ -4368,7 +4422,7 @@ 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);
+		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 b`
       <fieldset>
         <legend>${a}</legend>
@@ -4381,7 +4435,7 @@ 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}`;
+			let { label: r, value: i } = un(e), a = `${t?.controlId ?? "mc"}-${i}`;
 			return b`
               <label class=${o ? "disabled" : ""} for=${a}>
                 <input
@@ -4410,11 +4464,11 @@ var Vt = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Ht = P([D(A.multiChoiceField)], Ht);
+dn = F([D(A.multiChoiceField)], dn);
 //#endregion
 //#region src/primitives/fields/rating-field.ts
-var Ut = class extends W {
-	static styles = [W.styles, s`
+var fn = class extends G {
+	static styles = [G.styles, c`
       .rating-container {
         display: inline-flex;
         gap: 0.25rem;
@@ -4467,7 +4521,7 @@ 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`
       <div
@@ -4521,18 +4575,18 @@ var Ut = class extends W {
 		}
 	};
 };
-Ut = P([D(A.ratingField)], Ut);
+fn = F([D(A.ratingField)], fn);
 //#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 pn = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim().length > 0 ? e : String(e), mn = (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
@@ -4682,7 +4736,7 @@ var Wt = (e) => e instanceof Error ? e.message : typeof e == "string" && e.trim(
           role="region"
           aria-label=${e.explanationAriaLabel}
         >
-${Gt(this.transportResult)}</pre
+${mn(this.transportResult)}</pre
         >`;
 			default: return S;
 		}
@@ -4706,15 +4760,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 = pn(e), this.transportStatus = "error";
 		}
 	}
 };
-P([k()], $.prototype, "transportStatus", null), P([k()], $.prototype, "transportResultValue", null), P([k()], $.prototype, "transportErrorValue", null);
+F([k()], $.prototype, "transportStatus", null), F([k()], $.prototype, "transportResultValue", null), F([k()], $.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 hn = (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 +4777,8 @@ var Kt = (e, t, n) => {
 			value: r
 		};
 	}).filter((e) => e !== null);
-}, qt = class extends $ {
-	static styles = [$.styles, s`
+}, gn = class extends $ {
+	static styles = [$.styles, c`
       .rows {
         display: grid;
         gap: 0.5rem;
@@ -4792,10 +4846,10 @@ 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;
+		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 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);
+		let a = B(e) ? e.prediction ?? e.className ?? e.label ?? i.classifierUnknownPrediction : e, o = hn(e, this.props.labels, i.classifierClassLabel);
 		return b`
       <section
         part="classifier-report"
@@ -4816,35 +4870,35 @@ var Kt = (e, t, n) => {
 		})}
               </div>
             ` : b`
-              <div class="compact">${B(a, i.classifierUnknownPrediction)}</div>
+              <div class="compact">${V(a, i.classifierUnknownPrediction)}</div>
             `}
         ${this.renderTransportPanel(i)}
       </section>
     `;
 	}
 };
-qt = P([D(A.classifierReport)], qt);
+gn = F([D(A.classifierReport)], gn);
 //#endregion
 //#region src/primitives/reports/regressor-report.ts
-var Jt = (e, t, n) => {
+var _n = (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) {
+}, vn = (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) {
+}, yn = (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;
+}, bn = (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 +4909,12 @@ var Jt = (e, t, n) => {
     #ffea00 ${s}%,
     #ff6d00 ${Math.min(s + 10, 100)}%,
     #c62828 100%)`;
-}, Qt = (e, t, n) => {
+}, xn = (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`
+}, Sn = class extends $ {
+	static styles = [$.styles, c`
       :host {
         --marker-size: 14px;
         --limit-line-width: 3px;
@@ -4939,7 +4993,7 @@ var Jt = (e, t, n) => {
 		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;
+		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 = vn(e), s = yn(e), c = B(e) && typeof e.execution_time == "number" ? `${e.execution_time} ms` : null;
 		return b`
       <section
         part="regressor-report"
@@ -4948,51 +5002,51 @@ var Jt = (e, t, n) => {
       >
         ${o.length > 0 ? o.map((e) => b`
                 <div class="item">
-                  <div class="value">${Jt(e, a, i)}</div>
+                  <div class="value">${_n(e, a, i)}</div>
 
                   ${s ? b`
                         <div
                           class="bar-wrapper"
-                          style=${`background: ${Zt(s[0], s[1])};`}
+                          style=${`background: ${bn(s[0], s[1])};`}
                         >
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Qt(s[0], s[0], s[1])}%;`}
+                            style=${`left: ${xn(s[0], s[0], s[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${Jt(s[0], a, i)}
+                              ${_n(s[0], a, i)}
                             </div>
                           </div>
 
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Qt(s[1], s[0], s[1])}%;`}
+                            style=${`left: ${xn(s[1], s[0], s[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${Jt(s[1], a, i)}
+                              ${_n(s[1], a, i)}
                             </div>
                           </div>
 
                           <span
                             class="value-marker"
-                            style=${`left: ${Qt(e, s[0], s[1])}%;`}
+                            style=${`left: ${xn(e, s[0], s[1])}%;`}
                           ></span>
                         </div>
                       ` : b``}
                 </div>
-              `) : b`<div class="value">${Jt(e, a, i)}</div>`}
+              `) : b`<div class="value">${_n(e, a, i)}</div>`}
         ${c ? b`<div class="meta">${r.regressorExecutionTime(c)}</div>` : b``}
         ${this.renderTransportPanel(r)}
       </section>
     `;
 	}
 };
-$t = P([D(A.regressorReport)], $t);
+Sn = F([D(A.regressorReport)], Sn);
 //#endregion
 //#region src/primitives/registry.ts
-var en = new Set([
+var Cn = new Set([
 	"annotation-xml",
 	"color-profile",
 	"font-face",
@@ -5001,26 +5055,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 {
+]), wn = (e) => /^[a-z][-.0-9_a-z]*-[-.0-9_a-z]*[a-z0-9]$/.test(e) && !Cn.has(e), Tn = (e) => {
+	if (!wn(e)) throw TypeError(`Invalid primitive renderer tag name "${e}". Expected a valid custom element name.`);
+}, En = 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 Tn(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 Tn(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 Tn(t), this.#n.set(e, t), this;
 	}
 	unregisterExplanation(e) {
 		return this.#n.delete(e), this;
@@ -5041,23 +5095,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) => {
+}, Dn = () => new En(), On = () => Dn().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), kn = (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;
+}, An = (e) => e ? e.clone() : On(), jn = (t) => t?.clone() ?? e().presentationRegistry, Mn = (e, t, n = {}) => {
+	let r = document.createElement(A.form), i = An(n.registry), a = jn(n.presentationRegistry), o = We(n.text), s = n.containerStrategy ?? "error", c = s === "replace" ? Array.from(e.childNodes) : [];
+	kn(e, s), r.form = t, r.registry = i, r.presentationRegistry = a, r.layout = n.layout ?? "stacked", r.formLabel = n.formLabel ?? M.form, r.reportsLabel = n.reportsLabel ?? M.reports, r.submitLabel = n.submitLabel ?? M.submit, r.validatingLabel = n.validatingLabel ?? M.validating, r.submittingLabel = n.submittingLabel ?? M.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) => {
+}, Nn = (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 { D as _, $ as a, b, Y as c, F as d, M as f, O as g, k as h, Dn as i, K as l, We as m, Nn as n, Ft as o, N as p, On as r, gt as s, Mn as t, G as u, E as v, c as x, S as y };