mlform 0.1.18 → 0.1.20

package/dist/{primitives-BcXt2QWI.js → primitives-CgFaSmAm.js}

@@ -1,10 +1,10 @@
 import { LitElement as e, css as t, html as n, nothing as r } from "lit";
-import { customElement as i, property as a, state as o } from "lit/decorators.js";
-import { repeat as s } from "lit/directives/repeat.js";
-import { html as c, unsafeStatic as l } from "lit/static-html.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
+import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
+import { repeat as c } from "lit/directives/repeat.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
 //#region src/primitives/constants.ts
-var d = {
+var f = {
 	form: "mlf-form",
 	formErrors: "mlf-form-errors",
 	submitButton: "mlf-submit-button",
@@ -13,6 +13,7 @@ var d = {
 	reportFrame: "mlf-report-frame",
 	declarativeField: "mlf-declarative-field",
 	declarativeReport: "mlf-declarative-report",
+	mountedReport: "mlf-mounted-report",
 	textField: "mlf-text-field",
 	numberField: "mlf-number-field",
 	booleanField: "mlf-boolean-field",
@@ -25,19 +26,19 @@ var d = {
 	singleChoiceField: "mlf-single-choice-field",
 	multiChoiceField: "mlf-multi-choice-field",
 	ratingField: "mlf-rating-field"
-}, f = {
+}, p = {
 	submitRequest: "mlf-submit-request",
 	submitStart: "mlf-submit-start",
 	submitSuccess: "mlf-submit-success",
 	submitAbort: "mlf-submit-abort",
 	submitError: "mlf-submit-error"
-}, p = {
+}, m = {
 	form: "Inputs",
 	reports: "Reports",
 	submit: "Submit",
 	validating: "Validating...",
 	submitting: "Submitting..."
-}, m = Object.freeze({
+}, h = Object.freeze({
 	formEyebrow: "Form",
 	reportEyebrow: "Report",
 	formErrorsTitle: "Form errors",
@@ -89,15 +90,16 @@ var d = {
 			case "idle": return "Idle";
 			case "loading": return "Loading";
 			case "ready": return "Ready";
+			case "skipped": return "Skipped";
 			case "error": return "Error";
 		}
 	},
 	reportsEmptyTitle: "Results",
 	reportsEmptyBody: "Reports will appear here after the form is submitted."
-}), h = (e) => e ? Object.freeze({
-	...m,
+}), g = (e) => e ? Object.freeze({
+	...h,
 	...e
-}) : m, g = {
+}) : h, _ = {
 	booleanGroup: "mlf-boolean",
 	fieldDescription: "mlf-field-description",
 	fieldErrors: "mlf-field-errors",
@@ -105,8 +107,8 @@ var d = {
 	reportRegion: "mlf-report-region"
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
-function _(e, t, n, r) {
+//#region \0@oxc-project+runtime@0.135.0/helpers/esm/decorate.js
+function v(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);
@@ -114,7 +116,7 @@ function _(e, t, n, r) {
 }
 //#endregion
 //#region src/primitives/base-field-element.ts
-var v = class extends e {
+var y = class extends e {
 	static styles = t`
     :host {
       display: block;
@@ -201,7 +203,7 @@ var v = class extends e {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = m;
+	#r = h;
 	get text() {
 		return this.#r;
 	}
@@ -240,10 +242,10 @@ var v = class extends e {
 		};
 	}
 };
-_([a({ attribute: !1 })], v.prototype, "controller", null), _([a({ attribute: !1 })], v.prototype, "descriptor", null), _([a({ attribute: !1 })], v.prototype, "context", null), _([a({ attribute: !1 })], v.prototype, "text", null);
+v([a({ attribute: !1 })], y.prototype, "controller", null), v([a({ attribute: !1 })], y.prototype, "descriptor", null), v([a({ attribute: !1 })], y.prototype, "context", null), v([a({ attribute: !1 })], y.prototype, "text", null);
 //#endregion
 //#region src/primitives/base-report-element.ts
-var y = class extends e {
+var b = class extends e {
 	static styles = t`
     :host {
       display: block;
@@ -281,7 +283,7 @@ var y = class extends e {
 	set context(e) {
 		this.#n = e;
 	}
-	#r = m;
+	#r = h;
 	get text() {
 		return this.#r;
 	}
@@ -309,7 +311,7 @@ var y = class extends e {
 		return this.context;
 	}
 };
-_([a({ attribute: !1 })], y.prototype, "controller", null), _([a({ attribute: !1 })], y.prototype, "descriptor", null), _([a({ attribute: !1 })], y.prototype, "context", null), _([a({ attribute: !1 })], y.prototype, "text", null), _([a({ attribute: !1 })], y.prototype, "transport", null), _([a({ attribute: !1 })], y.prototype, "request", null);
+v([a({ attribute: !1 })], b.prototype, "controller", null), v([a({ attribute: !1 })], b.prototype, "descriptor", null), v([a({ attribute: !1 })], b.prototype, "context", null), v([a({ attribute: !1 })], b.prototype, "text", null), v([a({ attribute: !1 })], b.prototype, "transport", null), v([a({ attribute: !1 })], b.prototype, "request", null);
 //#endregion
 //#region src/primitives/request-runner.ts
 var ee = (e) => e instanceof Error ? e.message : String(e), te = () => {
@@ -344,8 +346,8 @@ var ee = (e) => e instanceof Error ? e.message : String(e), te = () => {
 	} catch {
 		return String(e);
 	}
-}, b = class extends y {
-	static styles = [y.styles, t`
+}, x = class extends b {
+	static styles = [b.styles, t`
       .transport-divider {
         border: none;
         border-top: var(--mlf-border-width, 1px) solid
@@ -518,25 +520,25 @@ ${ne(this.transportResult)}</pre
 		}
 	}
 };
-_([o()], b.prototype, "transportStatus", null), _([o()], b.prototype, "transportResultValue", null), _([o()], b.prototype, "transportErrorValue", null);
+v([s()], x.prototype, "transportStatus", null), v([s()], x.prototype, "transportResultValue", null), v([s()], x.prototype, "transportErrorValue", null);
 //#endregion
 //#region src/primitives/components/error-focus.ts
 var re = () => new Promise((e) => {
 	window.setTimeout(e, 0);
-}), ie = (e) => e instanceof HTMLElement && (e.matches("input, select, textarea, button, [tabindex]") || e.getAttribute("role") === "textbox"), x = (e) => {
+}), ie = (e) => e instanceof HTMLElement && (e.matches("input, select, textarea, button, [tabindex]") || e.getAttribute("role") === "textbox"), S = (e) => {
 	for (let t of e.querySelectorAll("*")) {
 		if (ie(t)) return t;
 		if (t instanceof HTMLElement && t.shadowRoot) {
-			let e = x(t.shadowRoot);
+			let e = S(t.shadowRoot);
 			if (e) return e;
 		}
 	}
 	return null;
-}, S = (e, t) => Array.from(e.querySelectorAll("mlf-field-frame")).find((e) => e.dataset.fieldId === t) ?? null, C = async (e) => e ? (e.scrollIntoView?.({
+}, C = (e, t) => Array.from(e.querySelectorAll("mlf-field-frame")).find((e) => e.dataset.fieldId === t) ?? null, ae = async (e) => e ? (e.scrollIntoView?.({
 	behavior: "smooth",
 	block: "center",
 	inline: "nearest"
-}), await re(), x(e.shadowRoot ?? e)?.focus(), !0) : !1, ae = async (e, t) => C(S(e.shadowRoot ?? e, t)), oe = (e) => e.find((e) => e.state.visible && e.state.errors.length > 0) ?? null, se = t`
+}), await re(), S(e.shadowRoot ?? e)?.focus(), !0) : !1, oe = async (e, t) => ae(C(e.shadowRoot ?? e, t)), se = (e) => e.find((e) => e.state.visible && e.state.errors.length > 0) ?? null, ce = t`
   :host {
     display: block;
     flex: 1 1 auto;
@@ -839,14 +841,14 @@ var re = () => new Promise((e) => {
     }
   }
 `}
-`, ce = (e) => ({
+`, le = (e) => ({
 	component: "unsupported-field",
 	props: { label: e.config.label ?? e.id }
 }), w = (e, t) => t?.getField(e.kind)?.describe(e.config, {
 	fieldId: e.id,
 	state: e.state,
 	value: e.state.value
-}) ?? ce(e), le = (e, t, n) => {
+}) ?? le(e), ue = (e, t, n) => {
 	let r = n?.getReport(e.kind);
 	return r ? r.describe(e.config, {
 		reportId: e.id,
@@ -854,15 +856,15 @@ var re = () => new Promise((e) => {
 		payload: e.state.payload,
 		result: t.state.lastResult
 	}) : null;
-}, ue = (e, t, n) => t.map((t) => e.getField(t)).filter((e) => e !== void 0).map((e) => ({
+}, de = (e, t, n) => t.map((t) => e.getField(t)).filter((e) => e !== void 0).map((e) => ({
 	controller: e,
 	descriptor: w(e, n)
-})), de = (e, t, n, r) => (n === "always" ? e.reports : t.map((t) => e.getReport(t)).filter((e) => e !== void 0)).map((t) => ({
+})), fe = (e, t, n, r) => (n === "always" ? e.reports : t.map((t) => e.getReport(t)).filter((e) => e !== void 0)).map((t) => ({
 	controller: t,
-	descriptor: le(t, e, r)
-})).filter((e) => e.descriptor !== null), fe = (e, t, r, i) => n`
+	descriptor: ue(t, e, r)
+})).filter((e) => e.descriptor !== null), T = (e, t, r, i) => n`
   <div class="collection" part="field-list">
-    ${s(e, (e) => e.controller.id, (e) => n`
+    ${c(e, (e) => e.controller.id, (e) => n`
         <mlf-field-frame
           data-field-id=${e.controller.id}
           .controller=${e.controller}
@@ -875,7 +877,7 @@ var re = () => new Promise((e) => {
   </div>
 `, pe = (e, t, r, i, a, o) => n`
   <div class="collection" part="report-list">
-    ${s(e, (e) => e.controller.id, (e) => n`
+    ${c(e, (e) => e.controller.id, (e) => n`
         <mlf-report-frame
           .controller=${e.controller}
           .descriptor=${e.descriptor}
@@ -906,7 +908,7 @@ var re = () => new Promise((e) => {
         </div>
 
         <mlf-form-errors .form=${e.form} .text=${e.text}></mlf-form-errors>
-        ${fe(e.visibleFields, e.registry, e.descriptorRegistry, e.text)}
+        ${T(e.visibleFields, e.registry, e.descriptorRegistry, e.text)}
       </div>
 
       <div class="actions" part="actions">
@@ -915,10 +917,6 @@ var re = () => new Promise((e) => {
           .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>
@@ -958,7 +956,7 @@ var re = () => new Promise((e) => {
             </div>
 
             <mlf-form-errors .form=${e.form} .text=${e.text}></mlf-form-errors>
-            ${fe(e.visibleFields, e.registry, e.descriptorRegistry, e.text)}
+            ${T(e.visibleFields, e.registry, e.descriptorRegistry, e.text)}
           </div>
         </div>
 
@@ -968,10 +966,6 @@ var re = () => new Promise((e) => {
             .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>
@@ -998,23 +992,19 @@ var re = () => new Promise((e) => {
           ` : r}
     </div>
   </div>
-`, T = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), ge = (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 && T(e.visibleFieldIds, t.visibleFieldIds) && T(e.visibleReportIds, t.visibleReportIds) && T(e.reportStateKeys, t.reportStateKeys), E = (e) => {
+`, E = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), ge = (e, t) => e.status === t.status && e.submitCount === t.submitCount && e.hasFormErrors === t.hasFormErrors && e.hasLastResult === t.hasLastResult && E(e.visibleFieldIds, t.visibleFieldIds) && E(e.visibleReportIds, t.visibleReportIds) && E(e.reportStateKeys, t.reportStateKeys), D = (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),
 		reportStateKeys: e.reports.map((e) => `${e.id}:${e.state.status}:${e.state.payload === void 0}:${e.state.error === null}`)
 	};
-}, D = class extends e {
-	static styles = se;
+}, O = class extends e {
+	static styles = ce;
 	#e;
 	get form() {
 		return this.#e;
@@ -1043,35 +1033,35 @@ var re = () => new Promise((e) => {
 	set layout(e) {
 		this.#r = e;
 	}
-	#i = p.form;
+	#i = m.form;
 	get formLabel() {
 		return this.#i;
 	}
 	set formLabel(e) {
 		this.#i = e;
 	}
-	#a = p.reports;
+	#a = m.reports;
 	get reportsLabel() {
 		return this.#a;
 	}
 	set reportsLabel(e) {
 		this.#a = e;
 	}
-	#o = p.submit;
+	#o = m.submit;
 	get submitLabel() {
 		return this.#o;
 	}
 	set submitLabel(e) {
 		this.#o = e;
 	}
-	#s = p.validating;
+	#s = m.validating;
 	get validatingLabel() {
 		return this.#s;
 	}
 	set validatingLabel(e) {
 		this.#s = e;
 	}
-	#c = p.submitting;
+	#c = m.submitting;
 	get submittingLabel() {
 		return this.#c;
 	}
@@ -1085,7 +1075,7 @@ var re = () => new Promise((e) => {
 	set reportPane(e) {
 		this.#l = e;
 	}
-	#u = m;
+	#u = h;
 	get text() {
 		return this.#u;
 	}
@@ -1134,7 +1124,7 @@ var re = () => new Promise((e) => {
 	render() {
 		let e = this.form, t = this.formState;
 		if (!e || !t) return n``;
-		let r = this.text, i = ue(e, t.visibleFieldIds, this.descriptorRegistry), a = de(e, t.visibleReportIds, this.reportPane, this.descriptorRegistry), o = this.reportPane !== "hidden" && (e.reports.length > 0 || t.hasFormErrors), s = this.layout === "split" ? o : this.reportPane === "always" ? e.reports.length > 0 : this.reportPane === "auto" ? a.length > 0 : !1;
+		let r = this.text, i = de(e, t.visibleFieldIds, this.descriptorRegistry), a = fe(e, t.visibleReportIds, this.reportPane, this.descriptorRegistry), o = this.reportPane !== "hidden" && (e.reports.length > 0 || t.hasFormErrors), s = this.layout === "split" ? o : this.reportPane === "always" ? e.reports.length > 0 : this.reportPane === "auto" ? a.length > 0 : !1;
 		return this.layout === "split" ? he({
 			form: e,
 			state: t,
@@ -1173,7 +1163,7 @@ var re = () => new Promise((e) => {
 	}
 	#_ = async () => {
 		if (this.form) {
-			this.dispatchEvent(new CustomEvent(f.submitStart, {
+			this.dispatchEvent(new CustomEvent(p.submitStart, {
 				detail: {
 					form: this.form,
 					state: this.form.state
@@ -1183,7 +1173,7 @@ var re = () => new Promise((e) => {
 			}));
 			try {
 				let e = this.submitHandler ? await this.submitHandler() : { result: await this.form.submit() };
-				this.dispatchEvent(new CustomEvent(f.submitSuccess, {
+				this.dispatchEvent(new CustomEvent(p.submitSuccess, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
@@ -1194,8 +1184,8 @@ var re = () => new Promise((e) => {
 					composed: !0
 				}));
 			} catch (e) {
-				let t = this.form ? oe(this.form.fields) : null;
-				t && await C(S(this.shadowRoot ?? this, t.id)), this.dispatchEvent(new CustomEvent(_e(e) ? f.submitAbort : f.submitError, {
+				let t = this.form ? se(this.form.fields) : null;
+				t && await ae(C(this.shadowRoot ?? this, t.id)), this.dispatchEvent(new CustomEvent(_e(e) ? p.submitAbort : p.submitError, {
 					detail: {
 						form: this.form,
 						state: this.form.state,
@@ -1211,36 +1201,36 @@ var re = () => new Promise((e) => {
 	#v() {
 		if (!this.isConnected) return;
 		if (this.#g === this.form) {
-			this.formState = this.form ? E(this.form) : null;
+			this.formState = this.form ? D(this.form) : null;
 			return;
 		}
-		if (this.#h?.(), this.#h = null, this.#g = this.form, this.formState = this.form ? E(this.form) : null, !this.form) return;
+		if (this.#h?.(), this.#h = null, this.#g = this.form, this.formState = this.form ? D(this.form) : null, !this.form) return;
 		let e = this.form;
-		this.#h = e.subscribeSelector(() => E(e), (e) => {
+		this.#h = e.subscribeSelector(() => D(e), (e) => {
 			this.formState = e;
 		}, { equality: ge });
 	}
 };
-_([a({ attribute: !1 })], D.prototype, "form", null), _([a({ attribute: !1 })], D.prototype, "registry", null), _([a({ attribute: !1 })], D.prototype, "descriptorRegistry", null), _([a({ type: String })], D.prototype, "layout", null), _([a({
+v([a({ attribute: !1 })], O.prototype, "form", null), v([a({ attribute: !1 })], O.prototype, "registry", null), v([a({ attribute: !1 })], O.prototype, "descriptorRegistry", null), v([a({ type: String })], O.prototype, "layout", null), v([a({
 	type: String,
 	attribute: "form-label"
-})], D.prototype, "formLabel", null), _([a({
+})], O.prototype, "formLabel", null), v([a({
 	type: String,
 	attribute: "reports-label"
-})], D.prototype, "reportsLabel", null), _([a({
+})], O.prototype, "reportsLabel", null), v([a({
 	type: String,
 	attribute: "submit-label"
-})], D.prototype, "submitLabel", null), _([a({
+})], O.prototype, "submitLabel", null), v([a({
 	type: String,
 	attribute: "validating-label"
-})], D.prototype, "validatingLabel", null), _([a({
+})], O.prototype, "validatingLabel", null), v([a({
 	type: String,
 	attribute: "submitting-label"
-})], D.prototype, "submittingLabel", null), _([a({
+})], O.prototype, "submittingLabel", null), v([a({
 	type: String,
 	attribute: "report-pane"
-})], D.prototype, "reportPane", null), _([a({ attribute: !1 })], D.prototype, "text", null), _([a({ attribute: !1 })], D.prototype, "reportTransport", null), _([a({ attribute: !1 })], D.prototype, "reportFetchMode", null), _([a({ attribute: !1 })], D.prototype, "submitHandler", null), _([o()], D.prototype, "formState", null), D = _([i(d.form)], D);
-var _e = (e) => e instanceof Error && e.name === "SubmissionAbortedError", O = class e {
+})], O.prototype, "reportPane", null), v([a({ attribute: !1 })], O.prototype, "text", null), v([a({ attribute: !1 })], O.prototype, "reportTransport", null), v([a({ attribute: !1 })], O.prototype, "reportFetchMode", null), v([a({ attribute: !1 })], O.prototype, "submitHandler", null), v([s()], O.prototype, "formState", null), O = v([i(f.form)], O);
+var _e = (e) => e instanceof Error && e.name === "SubmissionAbortedError", ve = class e {
 	fieldPresenters = /* @__PURE__ */ new Map();
 	reportPresenters = /* @__PURE__ */ new Map();
 	registerField(e) {
@@ -1263,7 +1253,7 @@ var _e = (e) => e instanceof Error && e.name === "SubmissionAbortedError", O = c
 		for (let e of this.reportPresenters.values()) t.registerReport(e);
 		return t;
 	}
-}, k = () => new O(), ve = (e) => e ? Array.isArray(e) ? e : [e] : [], A = class extends e {
+}, k = () => new ve(), ye = (e) => e ? Array.isArray(e) ? e : [e] : [], A = class extends e {
 	static styles = t`
     :host {
       display: block;
@@ -1304,7 +1294,7 @@ var _e = (e) => e instanceof Error && e.name === "SubmissionAbortedError", O = c
 	set form(e) {
 		this.#e = e;
 	}
-	#t = m;
+	#t = h;
 	get text() {
 		return this.#t;
 	}
@@ -1352,7 +1342,7 @@ var _e = (e) => e instanceof Error && e.name === "SubmissionAbortedError", O = c
 		}
 	}
 };
-_([a({ attribute: !1 })], A.prototype, "form", null), _([a({ attribute: !1 })], A.prototype, "text", null), _([o()], A.prototype, "formErrors", null), A = _([i(d.formErrors)], A);
+v([a({ attribute: !1 })], A.prototype, "form", null), v([a({ attribute: !1 })], A.prototype, "text", null), v([s()], A.prototype, "formErrors", null), A = v([i(f.formErrors)], A);
 //#endregion
 //#region src/primitives/components/submit-button.ts
 var j = class extends e {
@@ -1406,76 +1396,48 @@ var j = class extends e {
 	set status(e) {
 		this.#e = e;
 	}
-	#t = p.submit;
+	#t = m.submit;
 	get idleLabel() {
 		return this.#t;
 	}
 	set idleLabel(e) {
 		this.#t = e;
 	}
-	#n = p.validating;
+	#n = m.validating;
 	get validatingLabel() {
 		return this.#n;
 	}
 	set validatingLabel(e) {
 		this.#n = e;
 	}
-	#r = p.submitting;
+	#r = m.submitting;
 	get submittingLabel() {
 		return this.#r;
 	}
 	set submittingLabel(e) {
 		this.#r = e;
 	}
-	#i = void 0;
-	get loaded() {
-		return this.#i;
-	}
-	set loaded(e) {
-		this.#i = e;
-	}
-	#a = void 0;
-	get total() {
-		return this.#a;
-	}
-	set total(e) {
-		this.#a = e;
-	}
-	#o = void 0;
-	get progressMessage() {
-		return this.#o;
-	}
-	set progressMessage(e) {
-		this.#o = e;
-	}
-	#s = void 0;
-	get sessionMessageCount() {
-		return this.#s;
-	}
-	set sessionMessageCount(e) {
-		this.#s = e;
-	}
 	render() {
-		let e = this.progressMessage ?? (typeof this.loaded == "number" && typeof this.total == "number" && this.total > 0 ? `${Math.round(this.loaded / this.total * 100)}%` : typeof this.sessionMessageCount == "number" && this.sessionMessageCount > 0 ? `${this.sessionMessageCount} msgs` : void 0), t = this.status === "validating" ? this.validatingLabel : this.status === "submitting" ? e ? `${this.submittingLabel} ${e}` : this.submittingLabel : this.idleLabel;
+		let e = this.status === "validating" ? this.validatingLabel : this.status === "submitting" ? this.submittingLabel : this.idleLabel;
 		return n`
       <button
         type="button"
         ?disabled=${this.status === "validating" || this.status === "submitting"}
         aria-busy=${String(this.status === "validating" || this.status === "submitting")}
-        @click=${this.#c}
+        @click=${this.#i}
       >
-        ${t}
+        ${e}
       </button>
     `;
 	}
-	#c = () => {
-		this.dispatchEvent(new CustomEvent(f.submitRequest, {
+	#i = () => {
+		this.dispatchEvent(new CustomEvent(p.submitRequest, {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
 };
-_([a({ type: String })], j.prototype, "status", null), _([a({ type: String })], j.prototype, "idleLabel", null), _([a({ type: String })], j.prototype, "validatingLabel", null), _([a({ type: String })], j.prototype, "submittingLabel", null), _([a({ type: Number })], j.prototype, "loaded", null), _([a({ type: Number })], j.prototype, "total", null), _([a({ type: String })], j.prototype, "progressMessage", null), _([a({ type: Number })], j.prototype, "sessionMessageCount", null), j = _([i(d.submitButton)], j);
+v([a({ type: String })], j.prototype, "status", null), v([a({ type: String })], j.prototype, "idleLabel", null), v([a({ type: String })], j.prototype, "validatingLabel", null), v([a({ type: String })], j.prototype, "submittingLabel", null), j = v([i(f.submitButton)], j);
 //#endregion
 //#region src/primitives/components/unsupported-component.ts
 var M = class extends e {
@@ -1516,7 +1478,7 @@ var M = class extends e {
 	set role(e) {
 		this.#t = e;
 	}
-	#n = m;
+	#n = h;
 	get text() {
 		return this.#n;
 	}
@@ -1532,7 +1494,7 @@ var M = class extends e {
     `;
 	}
 };
-_([a({ type: String })], M.prototype, "component", null), _([a({ type: String })], M.prototype, "role", null), _([a({ attribute: !1 })], M.prototype, "text", null), M = _([i(d.unsupportedComponent)], M);
+v([a({ type: String })], M.prototype, "component", null), v([a({ type: String })], M.prototype, "role", null), v([a({ attribute: !1 })], M.prototype, "text", null), M = v([i(f.unsupportedComponent)], M);
 //#endregion
 //#region src/primitives/controller-binding.ts
 var N = class {
@@ -1561,7 +1523,7 @@ var N = class {
 	hostDisconnected() {
 		this.#r?.(), this.#r = null;
 	}
-}, P = (e) => typeof e == "object" && !!e, ye = (e) => e.join(" "), F = (e, t = "") => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : t, be = t`
+}, P = (e) => typeof e == "object" && !!e, be = (e) => e.join(" "), F = (e, t = "") => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : t, xe = t`
   :host {
     display: block;
   }
@@ -1684,7 +1646,7 @@ var N = class {
   .feedback.error {
     color: var(--mlf-field-feedback-error, var(--mlf-color-danger, #dc2626));
   }
-`, xe = (e) => typeof e == "string" ? {
+`, Se = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
 } : e, I = (e, t) => {
@@ -1698,7 +1660,7 @@ var N = class {
 		case "series": return "series-field";
 		default: return e;
 	}
-}, L = (e, t) => typeof t != "string" || t.length === 0 ? null : (Array.isArray(e.options) ? e.options : []).map(xe).find((e) => e.value === t) ?? null, Se = (e, t, n, r) => {
+}, L = (e, t) => typeof t != "string" || t.length === 0 ? null : (Array.isArray(e.options) ? e.options : []).map(Se).find((e) => e.value === t) ?? null, Ce = (e, t, n, r) => {
 	switch (I(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;
@@ -1708,7 +1670,7 @@ var N = class {
 		case "series-field": return Array.isArray(t.value) && t.value.length > 0;
 		default: return n.value !== null && n.value !== void 0 && n.value !== "";
 	}
-}, Ce = (e, t, n, r) => {
+}, we = (e, t, n, r) => {
 	switch (I(e, t)) {
 		case "text-field": {
 			let e = typeof t.value == "string" ? t.value : "";
@@ -1736,8 +1698,8 @@ var N = class {
 		}
 		default: return r.fieldReady;
 	}
-}, we = 0, R = class extends e {
-	static styles = be;
+}, Te = 0, R = class extends e {
+	static styles = xe;
 	#e;
 	get controller() {
 		return this.#e;
@@ -1766,7 +1728,7 @@ var N = class {
 	set registry(e) {
 		this.#r = e;
 	}
-	#i = m;
+	#i = h;
 	get text() {
 		return this.#i;
 	}
@@ -1794,7 +1756,7 @@ var N = class {
 	set descriptionVisibilityOverride(e) {
 		this.#s = e;
 	}
-	#c = ++we;
+	#c = ++Te;
 	#l;
 	#u = null;
 	#d = null;
@@ -1808,15 +1770,15 @@ var N = class {
 	}
 	render() {
 		let e = this.resolvedDescriptor, t = this.fieldState;
-		if (!e || !t || !t.visible) return c``;
-		let n = e.props, r = this.registry?.resolveField(e.component), i = F(n.label, this.controller?.config.label ?? ""), a = F(n.description), o = this.#b(a), s = Se(e.component, n, t, this.controller?.config.defaultValue), l = ye(t.errors), u = Ce(e.component, n, t, this.text), d = l.length > 0 && (t.touched || s), f = d ? {
+		if (!e || !t || !t.visible) return l``;
+		let n = e.props, r = this.registry?.resolveField(e.component), i = F(n.label, this.controller?.config.label ?? ""), a = F(n.description), o = this.#b(a), s = Ce(e.component, n, t, this.controller?.config.defaultValue), c = be(t.errors), u = we(e.component, n, t, this.text), d = c.length > 0 && (t.touched || s), f = d ? {
 			tone: "error",
-			message: l
+			message: c
 		} : s && t.valid ? {
 			tone: "success",
 			message: u
-		} : null, p = d ? "error" : s && t.valid ? "success" : "", m = `${g.fieldControl}-${this.controller?.id}-${this.#c}`, h = `${g.fieldErrors}-${this.controller?.id}-${this.#c}`, _ = `${g.fieldDescription}-${this.controller?.id}-${this.#c}-details`;
-		return c`
+		} : null, p = d ? "error" : s && t.valid ? "success" : "", m = `${_.fieldControl}-${this.controller?.id}-${this.#c}`, h = `${_.fieldErrors}-${this.controller?.id}-${this.#c}`, g = `${_.fieldDescription}-${this.controller?.id}-${this.#c}-details`;
+		return l`
       <section
         class="tile ${p}"
         aria-busy=${String(t.status === "validating")}
@@ -1829,7 +1791,7 @@ var N = class {
             type="button"
             aria-label=${this.text.helpActionLabel}
             aria-expanded=${String(o)}
-            aria-controls=${_}
+            aria-controls=${g}
             ?disabled=${a.length === 0}
             @click=${this.#y}
           >
@@ -1837,14 +1799,14 @@ var N = class {
           </button>
         </div>
 
-        ${a ? c`
-              <div id=${_} class="description ${o ? "show" : ""}">
+        ${a ? l`
+              <div id=${g} class="description ${o ? "show" : ""}">
                 ${a}
               </div>
-            ` : c``}
+            ` : l``}
 
         <div class="control-slot">
-          ${r ? this.#h(r, m, h) : c`
+          ${r ? this.#h(r, m, h) : l`
                 <mlf-unsupported-component
                   role="field"
                   component=${e.component}
@@ -1853,7 +1815,7 @@ var N = class {
               `}
         </div>
 
-        ${f ? c`
+        ${f ? l`
               <div
                 class="feedback ${f.tone}"
                 role=${f.tone === "error" ? "alert" : "status"}
@@ -1861,13 +1823,13 @@ var N = class {
               >
                 ${f.message}
               </div>
-            ` : c``}
+            ` : l``}
       </section>
     `;
 	}
 	#h(e, t, n) {
-		let r = l(e), i = this.#_(t, n), a = this.resolvedDescriptor;
-		return c`
+		let r = u(e), i = this.#_(t, n), a = this.resolvedDescriptor;
+		return l`
       <${r}
         .controller=${this.controller}
         .descriptor=${a}
@@ -1886,7 +1848,7 @@ var N = class {
 	}
 	#v(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 ? `${g.fieldDescription}-${this.controller.id}-${this.#c}` : 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 ? `${_.fieldDescription}-${this.controller.id}-${this.#c}` : void 0, o = [a, r].filter(Boolean).join(" ") || void 0;
 		return {
 			controlId: n,
 			label: F(e.label, this.controller.config.label),
@@ -1908,10 +1870,10 @@ var N = class {
 		return e.length === 0 ? !1 : this.descriptionVisibilityOverride ?? this.resolvedDescriptor?.props.showDescriptionInline === !0;
 	}
 };
-_([a({ attribute: !1 })], R.prototype, "controller", null), _([a({ attribute: !1 })], R.prototype, "descriptor", null), _([a({ attribute: !1 })], R.prototype, "descriptorRegistry", null), _([a({ attribute: !1 })], R.prototype, "registry", null), _([a({ attribute: !1 })], R.prototype, "text", null), _([o()], R.prototype, "resolvedDescriptor", null), _([o()], R.prototype, "fieldState", null), _([o()], R.prototype, "descriptionVisibilityOverride", null), R = _([i(d.fieldFrame)], R);
+v([a({ attribute: !1 })], R.prototype, "controller", null), v([a({ attribute: !1 })], R.prototype, "descriptor", null), v([a({ attribute: !1 })], R.prototype, "descriptorRegistry", null), v([a({ attribute: !1 })], R.prototype, "registry", null), v([a({ attribute: !1 })], R.prototype, "text", null), v([s()], R.prototype, "resolvedDescriptor", null), v([s()], R.prototype, "fieldState", null), v([s()], R.prototype, "descriptionVisibilityOverride", null), R = v([i(f.fieldFrame)], R);
 //#endregion
 //#region src/primitives/controller-types.ts
-var Te = (e, t = {}) => ({
+var Ee = (e, t = {}) => ({
 	reportId: t.reportId ?? "",
 	backend: e.backend,
 	inputs: e.inputs ?? [],
@@ -1927,7 +1889,7 @@ var Te = (e, t = {}) => ({
 	meta: e.meta,
 	raw: e.raw,
 	signal: t.signal
-}), Ee = 0, z = class extends e {
+}), De = 0, z = class extends e {
 	static styles = t`
     :host {
       display: block;
@@ -2011,7 +1973,7 @@ var Te = (e, t = {}) => ({
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = m;
+	#n = h;
 	get text() {
 		return this.#n;
 	}
@@ -2060,7 +2022,7 @@ var Te = (e, t = {}) => ({
 	set reportState(e) {
 		this.#c = e;
 	}
-	#l = ++Ee;
+	#l = ++De;
 	#u;
 	#d;
 	#f = null;
@@ -2074,19 +2036,19 @@ var Te = (e, t = {}) => ({
 	}
 	render() {
 		let e = this.resolvedDescriptor, t = this.reportState;
-		if (!e || !t) return c``;
+		if (!e || !t) return l``;
 		let n = e.props, r = this.registry?.resolveReport(e.component);
-		return c`
+		return l`
       <section class="report">
         <div class="header">
           <div class="copy">
             <p class="label">${F(n.label, this.controller?.config.label ?? "")}</p>
-            ${n.description ? c`<p class="description">${F(n.description)}</p>` : c``}
+            ${n.description ? l`<p class="description">${F(n.description)}</p>` : l``}
           </div>
           <span class="meta">${this.text.reportStatusLabel(t.status)}</span>
         </div>
 
-        ${r ? this.#g(r) : c`
+        ${r ? this.#g(r) : l`
               <mlf-unsupported-component
                 role="report"
                 component=${e.component}
@@ -2097,8 +2059,8 @@ var Te = (e, t = {}) => ({
     `;
 	}
 	#g(e) {
-		let t = l(e), n = this.#_(), r = this.transport, i = this.#y(), a = this.resolvedDescriptor;
-		return c`
+		let t = u(e), n = this.#_(), r = this.transport, i = this.#y(), a = this.resolvedDescriptor;
+		return l`
       <${t}
         .controller=${this.controller}
         .descriptor=${a}
@@ -2116,7 +2078,7 @@ var Te = (e, t = {}) => ({
 	}
 	#v(e) {
 		if (this.controller) return {
-			regionId: `${g.reportRegion}-${this.controller.id}-${this.#l}`,
+			regionId: `${_.reportRegion}-${this.controller.id}-${this.#l}`,
 			label: F(e.label, this.controller.config.label ?? this.controller.id),
 			description: typeof e.description == "string" && e.description.length > 0 ? e.description : void 0
 		};
@@ -2125,7 +2087,7 @@ var Te = (e, t = {}) => ({
 		let e = this.lastResult;
 		if (!e || !this.controller) return null;
 		if (e === this.#p && this.#m?.reportId === this.controller.id) return this.#m;
-		let t = Te(e, { reportId: this.controller.id });
+		let t = Ee(e, { reportId: this.controller.id });
 		return this.#p = e, this.#m = t, t;
 	}
 	#b() {
@@ -2133,36 +2095,36 @@ var Te = (e, t = {}) => ({
 		this.fetchMode !== "lazy" || !e?.canFetch || !t || e.state.status !== "idle" || e.fetch(t);
 	}
 };
-_([a({ attribute: !1 })], z.prototype, "controller", null), _([a({ attribute: !1 })], z.prototype, "registry", null), _([a({ attribute: !1 })], z.prototype, "text", null), _([a({ attribute: !1 })], z.prototype, "transport", null), _([a({ attribute: !1 })], z.prototype, "fetchMode", null), _([a({ attribute: !1 })], z.prototype, "lastResult", null), _([a({ attribute: !1 })], z.prototype, "descriptor", null), _([o()], z.prototype, "resolvedDescriptor", null), _([o()], z.prototype, "reportState", null), z = _([i(d.reportFrame)], z);
+v([a({ attribute: !1 })], z.prototype, "controller", null), v([a({ attribute: !1 })], z.prototype, "registry", null), v([a({ attribute: !1 })], z.prototype, "text", null), v([a({ attribute: !1 })], z.prototype, "transport", null), v([a({ attribute: !1 })], z.prototype, "fetchMode", null), v([a({ attribute: !1 })], z.prototype, "lastResult", null), v([a({ attribute: !1 })], z.prototype, "descriptor", null), v([s()], z.prototype, "resolvedDescriptor", null), v([s()], z.prototype, "reportState", null), z = v([i(f.reportFrame)], z);
 //#endregion
 //#region src/primitives/components/declarative-field.ts
 var B = {
 	text: {
 		component: "text-field",
-		tagName: d.textField
+		tagName: f.textField
 	},
 	number: {
 		component: "number-field",
-		tagName: d.numberField
+		tagName: f.numberField
 	},
 	boolean: {
 		component: "boolean-field",
-		tagName: d.booleanField
+		tagName: f.booleanField
 	},
 	select: {
 		component: "category-field",
-		tagName: d.categoryField
+		tagName: f.categoryField
 	},
 	date: {
 		component: "date-field",
-		tagName: d.dateField
+		tagName: f.dateField
 	},
 	series: {
 		component: "series-field",
-		tagName: d.seriesField
+		tagName: f.seriesField
 	}
-}, V = class extends v {
-	static styles = [v.styles, t`
+}, V = class extends y {
+	static styles = [y.styles, t`
       :host {
         display: block;
       }
@@ -2170,11 +2132,11 @@ var B = {
 	render() {
 		let e = this.#e();
 		if (!e) return this.renderAssistiveText();
-		let t = B[e], n = l(t.tagName), r = {
+		let t = B[e], n = u(t.tagName), r = {
 			component: t.component,
 			props: this.#t(e)
 		};
-		return c`
+		return l`
       <${n}
         .controller=${this.controller}
         .descriptor=${r}
@@ -2192,7 +2154,7 @@ var B = {
 		return delete t.widget, e === "boolean" && (t.checked = t.value === !0 ? !0 : t.value === !1 ? !1 : null), t;
 	}
 };
-V = _([i(d.declarativeField)], V);
+V = v([i(f.declarativeField)], V);
 //#endregion
 //#region src/primitives/components/descriptor-content.ts
 var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutral", U = (e) => {
@@ -2204,10 +2166,10 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
 	} catch {
 		return Object.prototype.toString.call(e);
 	}
-}, De = (e) => Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
+}, Oe = (e) => Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
 	label: e,
 	value: t
-})), Oe = (e) => n`<span>${U(e)}</span>`, ke = (e, t) => {
+})), ke = (e) => n`<span>${U(e)}</span>`, Ae = (e, t) => {
 	switch (e.type) {
 		case "text": return typeof e.value == "string" && e.value.includes("\n") ? n`
           <section class="node text ${H(e.tone)}" data-node-index=${t}>
@@ -2231,7 +2193,7 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
         <section class="node kv" data-node-index=${t}>
           ${e.label ? n`<p class="node-label">${e.label}</p>` : r}
           <dl class="kv-list">
-            ${De(e.entries).map((e) => n`
+            ${Oe(e.entries).map((e) => n`
                 <div class="kv-row">
                   <dt>${e.label}</dt>
                   <dd>${U(e.value)}</dd>
@@ -2266,7 +2228,7 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
               <tbody>
                 ${e.rows.map((t) => n`
                     <tr>
-                      ${(Array.isArray(t) ? t : e.columns.map((e) => t[e])).map((e) => n`<td>${Oe(e)}</td>`)}
+                      ${(Array.isArray(t) ? t : e.columns.map((e) => t[e])).map((e) => n`<td>${ke(e)}</td>`)}
                     </tr>
                   `)}
               </tbody>
@@ -2292,7 +2254,7 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
         </section>
       `;
 	}
-}, Ae = (e, t) => {
+}, je = (e, t) => {
 	if (!e && !t) return r;
 	let i = F(e?.title, t ?? ""), a = F(e?.description), o = e?.value, s = F(e?.badge);
 	return n`
@@ -2307,8 +2269,8 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
       </div>
     </section>
   `;
-}, je = (e) => e.length === 0 ? r : n`<div class="Descriptor">${e.map((e, t) => ke(e, t))}</div>`, W = class extends y {
-	static styles = [y.styles, t`
+}, Me = (e) => e.length === 0 ? r : n`<div class="Descriptor">${e.map((e, t) => Ae(e, t))}</div>`, W = class extends b {
+	static styles = [b.styles, t`
       :host {
         display: block;
       }
@@ -2456,15 +2418,67 @@ var H = (e) => typeof e == "string" && e.length > 0 ? `tone-${e}` : "tone-neutra
 	render() {
 		let e = this.props, t = Array.isArray(e.content) ? e.content : [];
 		return n`
-      ${Ae(e.summary && typeof e.summary == "object" ? e.summary : null, this.reportContext?.label)} ${je(t)}
+      ${je(e.summary && typeof e.summary == "object" ? e.summary : null, this.reportContext?.label)} ${Me(t)}
     `;
 	}
 };
-W = _([i(d.declarativeReport)], W);
+W = v([i(f.declarativeReport)], W);
+//#endregion
+//#region src/primitives/components/mounted-report.ts
+var Ne = (e) => e instanceof Error ? e.message : String(e), G = class extends b {
+	static styles = [b.styles, t`
+      :host {
+        display: block;
+      }
+
+      .mount-host {
+        display: block;
+        min-width: 0;
+      }
+    `];
+	#e;
+	get mountHost() {
+		return this.#e;
+	}
+	set mountHost(e) {
+		this.#e = e;
+	}
+	#t = null;
+	#n = null;
+	#r = null;
+	updated() {
+		if (this.descriptor === this.#n) return;
+		this.#i(), this.#n = this.descriptor, this.mountHost.replaceChildren();
+		let e = this.props.mount, t = this.props.mountContext;
+		if (!(typeof e != "function" || !t)) {
+			this.#r = new AbortController();
+			try {
+				let n = e({
+					...t,
+					element: this.mountHost,
+					signal: this.#r.signal
+				});
+				this.#t = typeof n == "function" ? n : null;
+			} catch (e) {
+				this.mountHost.textContent = `Report render failed: ${Ne(e)}`;
+			}
+		}
+	}
+	disconnectedCallback() {
+		this.#i(), super.disconnectedCallback();
+	}
+	#i() {
+		this.#r?.abort(), this.#r = null, this.#t?.(), this.#t = null;
+	}
+	render() {
+		return n`<div class="mount-host" part="mount-host"></div>`;
+	}
+};
+v([o(".mount-host")], G.prototype, "mountHost", null), G = v([i(f.mountedReport)], G);
 //#endregion
 //#region src/primitives/fields/text-field.ts
-var G = class extends v {
-	static styles = [v.styles, t`
+var K = class extends y {
+	static styles = [y.styles, t`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
@@ -2478,15 +2492,15 @@ var G = class extends v {
         id=${t?.controlId ?? ""}
         .value=${r}
         aria-label=${t?.label ?? F(e.label)}
-        aria-describedby=${u(t?.describedBy)}
+        aria-describedby=${d(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         placeholder=${F(e.placeholder)}
         ?required=${!!e.required}
         ?disabled=${!!this.fieldContext?.disabled}
         ?readonly=${!!this.fieldContext?.readOnly}
-        minlength=${u(typeof e.minLength == "number" ? String(e.minLength) : void 0)}
-        maxlength=${u(typeof e.maxLength == "number" ? String(e.maxLength) : void 0)}
-        pattern=${u(typeof e.pattern == "string" ? e.pattern : void 0)}
+        minlength=${d(typeof e.minLength == "number" ? String(e.minLength) : void 0)}
+        maxlength=${d(typeof e.maxLength == "number" ? String(e.maxLength) : void 0)}
+        pattern=${d(typeof e.pattern == "string" ? e.pattern : void 0)}
         @input=${this.#e}
         @blur=${this.#t}
       />
@@ -2500,11 +2514,11 @@ var G = class extends v {
 		this.commitBlur();
 	};
 };
-G = _([i(d.textField)], G);
+K = v([i(f.textField)], K);
 //#endregion
 //#region src/primitives/fields/number-field.ts
-var K = class extends v {
-	static styles = [v.styles, t`
+var q = class extends y {
+	static styles = [y.styles, t`
       .input-wrapper {
         position: relative;
         min-width: 0;
@@ -2660,7 +2674,7 @@ var K = class extends v {
 		this.#t = e;
 	}
 	render() {
-		let e = this.props, t = this.fieldContext, r = e.input === "range" ? "range" : "text", i = typeof e.value == "number" ? String(e.value) : e.value === null || e.value === void 0 ? "" : F(e.value), a = this.focused && this.draftValue !== null ? this.draftValue : i, o = typeof e.unit == "string" ? e.unit : "", s = `${Math.max(o.length * .56 + .8, 2.2)}rem`, c = this.fieldContext?.disabled ? "input-wrapper is-disabled" : this.fieldContext?.readOnly ? "input-wrapper is-readonly" : "input-wrapper", l = typeof e.value == "number" ? e.value : void 0, d = typeof e.min == "number" ? e.min : void 0, f = typeof e.max == "number" ? e.max : void 0, p = a.length > 0 ? a : i;
+		let e = this.props, t = this.fieldContext, r = e.input === "range" ? "range" : "text", i = typeof e.value == "number" ? String(e.value) : e.value === null || e.value === void 0 ? "" : F(e.value), a = this.focused && this.draftValue !== null ? this.draftValue : i, o = typeof e.unit == "string" ? e.unit : "", s = `${Math.max(o.length * .56 + .8, 2.2)}rem`, c = this.fieldContext?.disabled ? "input-wrapper is-disabled" : this.fieldContext?.readOnly ? "input-wrapper is-readonly" : "input-wrapper", l = typeof e.value == "number" ? e.value : void 0, u = typeof e.min == "number" ? e.min : void 0, f = typeof e.max == "number" ? e.max : void 0, p = a.length > 0 ? a : i;
 		return r === "range" ? n`
         <div class="range-wrapper">
           <div class="range-header">
@@ -2671,15 +2685,15 @@ var K = class extends v {
             type="range"
             id=${t?.controlId ?? ""}
             .value=${p}
-            min=${u(d)}
-            max=${u(f)}
-            step=${u(typeof e.step == "number" ? String(e.step) : void 0)}
+            min=${d(u)}
+            max=${d(f)}
+            step=${d(typeof e.step == "number" ? String(e.step) : void 0)}
             aria-label=${t?.label ?? F(e.label)}
-            aria-describedby=${u(t?.describedBy)}
+            aria-describedby=${d(t?.describedBy)}
             aria-invalid=${String(t?.invalid ?? !1)}
-            aria-valuenow=${u(l)}
-            aria-valuemin=${u(d)}
-            aria-valuemax=${u(f)}
+            aria-valuenow=${d(l)}
+            aria-valuemin=${d(u)}
+            aria-valuemax=${d(f)}
             ?required=${!!e.required}
             ?disabled=${!!this.fieldContext?.disabled}
             ?readonly=${!!this.fieldContext?.readOnly}
@@ -2700,11 +2714,11 @@ var K = class extends v {
           .value=${a}
           placeholder=${F(e.placeholder)}
           aria-label=${t?.label ?? F(e.label)}
-          aria-describedby=${u(t?.describedBy)}
+          aria-describedby=${d(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
-          aria-valuenow=${u(l)}
-          aria-valuemin=${u(d)}
-          aria-valuemax=${u(f)}
+          aria-valuenow=${d(l)}
+          aria-valuemin=${d(u)}
+          aria-valuemax=${d(f)}
           ?required=${!!e.required}
           ?disabled=${!!this.fieldContext?.disabled}
           ?readonly=${!!this.fieldContext?.readOnly}
@@ -2741,11 +2755,11 @@ var K = class extends v {
 		return e;
 	}
 };
-_([o()], K.prototype, "draftValue", null), _([o()], K.prototype, "focused", null), K = _([i(d.numberField)], K);
+v([s()], q.prototype, "draftValue", null), v([s()], q.prototype, "focused", null), q = v([i(f.numberField)], q);
 //#endregion
 //#region src/primitives/fields/boolean-field.ts
-var q = class extends v {
-	static styles = [v.styles, t`
+var J = class extends y {
+	static styles = [y.styles, t`
       fieldset {
         display: flex;
         width: 100%;
@@ -2812,12 +2826,12 @@ var q = class extends v {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, r = e.checked === !0 ? !0 : e.checked === !1 ? !1 : null, i = this.text, a = g.booleanGroup, o = `${t?.controlId ?? a}-true`, s = `${t?.controlId ?? a}-false`, c = F(e.trueLabel, i.booleanTrue), l = F(e.falseLabel, i.booleanFalse), d = !!(this.fieldContext?.disabled || this.fieldContext?.readOnly);
+		let e = this.props, t = this.fieldContext, r = e.checked === !0 ? !0 : e.checked === !1 ? !1 : null, i = this.text, a = _.booleanGroup, o = `${t?.controlId ?? a}-true`, s = `${t?.controlId ?? a}-false`, c = F(e.trueLabel, i.booleanTrue), l = F(e.falseLabel, i.booleanFalse), u = !!(this.fieldContext?.disabled || this.fieldContext?.readOnly);
 		return n`
       <fieldset
         role="radiogroup"
         aria-label=${t?.label ?? F(e.label)}
-        aria-describedby=${u(t?.describedBy)}
+        aria-describedby=${d(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         aria-readonly=${String(!!this.fieldContext?.readOnly)}
       >
@@ -2827,7 +2841,7 @@ var q = class extends v {
           name=${t?.controlId ?? a}
           value="true"
           .checked=${r === !0}
-          ?disabled=${d}
+          ?disabled=${u}
           @change=${this.#e}
           @blur=${this.#t}
         />
@@ -2839,7 +2853,7 @@ var q = class extends v {
           name=${t?.controlId ?? a}
           value="false"
           .checked=${r === !1}
-          ?disabled=${d}
+          ?disabled=${u}
           @change=${this.#e}
           @blur=${this.#t}
         />
@@ -2855,14 +2869,14 @@ var q = class extends v {
 		this.commitBlur();
 	};
 };
-q = _([i(d.booleanField)], q);
+J = v([i(f.booleanField)], J);
 //#endregion
 //#region src/primitives/fields/category-field.ts
-var J = (e) => typeof e == "string" ? {
+var Y = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Me = (e, t) => typeof e != "string" || e.length === 0 ? "" : t.some((t) => J(t).value === e) ? e : "", Ne = class extends v {
-	static styles = [v.styles, t`
+} : e, Pe = (e, t) => typeof e != "string" || e.length === 0 ? "" : t.some((t) => Y(t).value === e) ? e : "", X = class extends y {
+	static styles = [y.styles, t`
       .select-wrap {
         position: relative;
         min-width: 0;
@@ -2892,14 +2906,14 @@ var J = (e) => typeof e == "string" ? {
       }
     `];
 	render() {
-		let e = this.props, t = this.fieldContext, r = typeof e.value == "string" ? e.value : "", i = Array.isArray(e.options) ? e.options : [], a = Me(r, i), o = this.text;
+		let e = this.props, t = this.fieldContext, r = typeof e.value == "string" ? e.value : "", i = Array.isArray(e.options) ? e.options : [], a = Pe(r, i), o = this.text;
 		return n`
       <div class="select-wrap">
         <select
           class="control"
           id=${t?.controlId ?? ""}
           aria-label=${t?.label ?? F(e.label)}
-          aria-describedby=${u(t?.describedBy)}
+          aria-describedby=${d(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
           aria-readonly=${String(!!this.fieldContext?.readOnly)}
           ?required=${!!e.required}
@@ -2911,7 +2925,7 @@ var J = (e) => typeof e == "string" ? {
             &#8212; ${o.categoryPlaceholder} &#8212;
           </option>
           ${i.map((e) => {
-			let t = J(e);
+			let t = Y(e);
 			return n`
               <option value=${t.value} ?selected=${t.value === a}>
                 ${t.label}
@@ -2938,11 +2952,11 @@ var J = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Ne = _([i(d.categoryField)], Ne);
+X = v([i(f.categoryField)], X);
 //#endregion
 //#region src/primitives/fields/date-field.ts
-var Pe = class extends v {
-	static styles = [v.styles, t`
+var Fe = class extends y {
+	static styles = [y.styles, t`
       input {
         min-height: var(--mlf-control-height, 3rem);
       }
@@ -2960,14 +2974,14 @@ var Pe = class extends v {
         id=${t?.controlId ?? ""}
         .value=${r}
         aria-label=${t?.label ?? F(e.label)}
-        aria-describedby=${u(t?.describedBy)}
+        aria-describedby=${d(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         ?required=${!!e.required}
         ?disabled=${!!this.fieldContext?.disabled}
         ?readonly=${!!this.fieldContext?.readOnly}
-        min=${u(typeof e.min == "string" ? e.min : void 0)}
-        max=${u(typeof e.max == "string" ? e.max : void 0)}
-        step=${u(typeof e.step == "number" ? String(e.step) : void 0)}
+        min=${d(typeof e.min == "string" ? e.min : void 0)}
+        max=${d(typeof e.max == "string" ? e.max : void 0)}
+        step=${d(typeof e.step == "number" ? String(e.step) : void 0)}
         @input=${this.#e}
         @blur=${this.#t}
       />
@@ -2982,26 +2996,26 @@ var Pe = class extends v {
 		this.commitBlur();
 	};
 };
-Pe = _([i(d.dateField)], Pe);
+Fe = v([i(f.dateField)], Fe);
 //#endregion
 //#region src/primitives/fields/series-field-helpers.ts
-var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ? e : e === "true" ? !0 : e === "false" ? !1 : "", Re = (e, t) => {
+var Ie = 0, Le = () => `series-row-${++Ie}`, Re = (e) => e === !0 || e === !1 ? e : e === "true" ? !0 : e === "false" ? !1 : "", ze = (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 Le(t);
+		case "boolean": return Re(t);
 		default: return typeof t == "string" ? t : t ?? "";
 	}
-}, ze = (e, t, n) => Array.isArray(e) ? e.map((e) => {
+}, Be = (e, t, n) => Array.isArray(e) ? e.map((e) => {
 	let r = e;
 	return {
-		key: Ie(),
-		field1: Re(t, r.field1),
-		field2: Re(n, r.field2)
+		key: Le(),
+		field1: ze(t, r.field1),
+		field2: ze(n, r.field2)
 	};
-}) : [], Be = (e, t) => {
+}) : [], Ve = (e, t) => {
 	switch (e.kind) {
 		case "number":
 		case "date":
@@ -3010,7 +3024,7 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
 		case "boolean": return t === "" ? null : t;
 		default: return t === "" ? null : t;
 	}
-}, Ve = (e) => typeof e.unit == "string" ? e.unit : "", He = (e, t) => {
+}, He = (e) => typeof e.unit == "string" ? e.unit : "", Ue = (e, t) => {
 	let r = typeof e == "string" ? {
 		label: e,
 		value: e
@@ -3022,7 +3036,7 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
       ${String(i.label)}
     </option>
   `;
-}, Ue = (e) => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" || typeof e == "bigint" ? `${e}` : "", We = ({ config: e, value: t, index: r, id: i, disabled: a, readOnly: o, field: s, context: c, text: l, onInput: d, onBlur: f, label: p }) => {
+}, We = (e) => typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" || typeof e == "bigint" ? `${e}` : "", Ge = ({ config: e, value: t, index: r, id: i, disabled: a, readOnly: o, field: s, context: c, text: l, onInput: u, onBlur: f, label: p }) => {
 	let m = !!e.required;
 	switch (e.kind) {
 		case "date": return n`
@@ -3032,14 +3046,14 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
           type="date"
           .value=${typeof t == "string" ? t : ""}
           aria-label=${p}
-          aria-describedby=${u(c?.describedBy)}
+          aria-describedby=${d(c?.describedBy)}
           aria-invalid=${String(c?.invalid ?? !1)}
           ?required=${m}
           ?disabled=${a}
           ?readonly=${o}
-          min=${u(typeof e.min == "string" ? e.min : void 0)}
-          max=${u(typeof e.max == "string" ? e.max : void 0)}
-          @input=${(e) => d(r, s, e.target.value)}
+          min=${d(typeof e.min == "string" ? e.min : void 0)}
+          max=${d(typeof e.max == "string" ? e.max : void 0)}
+          @input=${(e) => u(r, s, e.target.value)}
           @blur=${f}
         />
       `;
@@ -3050,17 +3064,17 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
           class="control"
           id=${i}
           aria-label=${p}
-          aria-describedby=${u(c?.describedBy)}
+          aria-describedby=${d(c?.describedBy)}
           aria-invalid=${String(c?.invalid ?? !1)}
           ?required=${m}
           ?disabled=${!!(a || o)}
-          @change=${(e) => d(r, s, e.target.value)}
+          @change=${(e) => u(r, s, e.target.value)}
           @blur=${f}
         >
           <option value="" ?selected=${g === ""}>
             &#8212; ${l.categoryPlaceholder} &#8212;
           </option>
-          ${h.map((e) => He(e, g))}
+          ${h.map((e) => Ue(e, g))}
         </select>
       `;
 		}
@@ -3071,13 +3085,13 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
           class="control"
           id=${i}
           aria-label=${p}
-          aria-describedby=${u(c?.describedBy)}
+          aria-describedby=${d(c?.describedBy)}
           aria-invalid=${String(c?.invalid ?? !1)}
           ?required=${m}
           ?disabled=${!!(a || o)}
           @change=${(e) => {
 				let t = e.target.value;
-				d(r, s, t === "" ? "" : t === "true");
+				u(r, s, t === "" ? "" : t === "true");
 			}}
           @blur=${f}
         >
@@ -3088,7 +3102,7 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
       `;
 		}
 		case "number": {
-			let l = Ve(e);
+			let l = He(e);
 			return n`
         <div class="value-wrap">
           <input
@@ -3101,14 +3115,14 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
             .value=${typeof t == "string" ? t : ""}
             placeholder=${F(e.placeholder)}
             aria-label=${p}
-            aria-describedby=${u(c?.describedBy)}
+            aria-describedby=${d(c?.describedBy)}
             aria-invalid=${String(c?.invalid ?? !1)}
-            aria-valuemin=${u(typeof e.min == "number" ? e.min : void 0)}
-            aria-valuemax=${u(typeof e.max == "number" ? e.max : void 0)}
+            aria-valuemin=${d(typeof e.min == "number" ? e.min : void 0)}
+            aria-valuemax=${d(typeof e.max == "number" ? e.max : void 0)}
             ?required=${m}
             ?disabled=${a}
             ?readonly=${o}
-            @input=${(e) => d(r, s, e.target.value)}
+            @input=${(e) => u(r, s, e.target.value)}
             @blur=${f}
           />
           <span class="unit" aria-hidden="true">${l}</span>
@@ -3120,20 +3134,20 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
           class="control"
           id=${i}
           type="text"
-          .value=${Ue(t)}
+          .value=${We(t)}
           placeholder=${F(e.placeholder)}
           aria-label=${p}
-          aria-describedby=${u(c?.describedBy)}
+          aria-describedby=${d(c?.describedBy)}
           aria-invalid=${String(c?.invalid ?? !1)}
           ?required=${m}
           ?disabled=${a}
           ?readonly=${o}
-          @input=${(e) => d(r, s, e.target.value)}
+          @input=${(e) => u(r, s, e.target.value)}
           @blur=${f}
         />
       `;
 	}
-}, Ge = t`
+}, Ke = t`
   .series {
     display: grid;
     gap: 0.9rem;
@@ -3287,8 +3301,8 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
       justify-self: end;
     }
   }
-`, Y = class extends v {
-	static styles = [v.styles, Ge];
+`, Z = class extends y {
+	static styles = [y.styles, Ke];
 	#e = [];
 	get rows() {
 		return this.#e;
@@ -3301,7 +3315,7 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
 		super.willUpdate(e), e.has("descriptor") && this.#i();
 	}
 	render() {
-		let e = this.fieldContext, t = !!this.fieldContext?.disabled, r = !!this.fieldContext?.readOnly, i = t || r, a = this.#n, o = this.#r, s = `${Math.max(Ve(o).length * .56 + .8, 2.3)}rem`, c = this.text;
+		let e = this.fieldContext, t = !!this.fieldContext?.disabled, r = !!this.fieldContext?.readOnly, i = t || r, a = this.#n, o = this.#r, s = `${Math.max(He(o).length * .56 + .8, 2.3)}rem`, c = this.text;
 		return n`
       <div class="series" style=${`--mlf-series-unit-width: ${s};`}>
         <div class="toolbar">
@@ -3358,11 +3372,11 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
 		return this.props.field2 ?? {};
 	}
 	#i() {
-		this.rows = ze(this.props.value, this.#n, this.#r), this.#t = !1;
+		this.rows = Be(this.props.value, this.#n, this.#r), this.#t = !1;
 	}
 	#a = () => {
 		this.rows = [...this.rows, {
-			key: Ie(),
+			key: Le(),
 			field1: "",
 			field2: ""
 		}], this.#t = !0, this.#l();
@@ -3381,13 +3395,13 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
 	};
 	#l() {
 		this.#t &&= (this.commitValue(this.rows.map((e) => ({
-			field1: Be(this.#n, e.field1),
-			field2: Be(this.#r, e.field2)
+			field1: Ve(this.#n, e.field1),
+			field2: Ve(this.#r, e.field2)
 		}))), !1);
 	}
 	#u(e, t, n, r, i, a, o) {
 		let s = this.fieldContext, c = `${s?.label ?? F(this.props.label)} ${F(e.label, `field${o}`)} ${n + 1}`;
-		return We({
+		return Ge({
 			config: e,
 			value: t,
 			index: n,
@@ -3403,11 +3417,11 @@ var Fe = 0, Ie = () => `series-row-${++Fe}`, Le = (e) => e === !0 || e === !1 ?
 		});
 	}
 };
-_([o()], Y.prototype, "rows", null), Y = _([i(d.seriesField)], Y);
+v([s()], Z.prototype, "rows", null), Z = v([i(f.seriesField)], Z);
 //#endregion
 //#region src/primitives/fields/long-text-field.ts
-var Ke = class extends v {
-	static styles = [v.styles, t`
+var qe = class extends y {
+	static styles = [y.styles, t`
       textarea.control {
         resize: vertical;
         min-height: 6rem;
@@ -3424,7 +3438,7 @@ var Ke = class extends v {
         placeholder=${F(e.placeholder)}
         rows=${i}
         aria-label=${t?.label ?? F(e.label)}
-        aria-describedby=${u(t?.describedBy)}
+        aria-describedby=${d(t?.describedBy)}
         aria-invalid=${String(t?.invalid ?? !1)}
         ?required=${!!e.required}
         ?disabled=${!!t?.disabled}
@@ -3442,14 +3456,14 @@ var Ke = class extends v {
 		this.commitBlur();
 	};
 };
-Ke = _([i(d.longTextField)], Ke);
+qe = v([i(f.longTextField)], qe);
 //#endregion
 //#region src/primitives/fields/single-choice-field.ts
-var qe = (e) => typeof e == "string" ? {
+var Je = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Je = class extends v {
-	static styles = [v.styles, t`
+} : e, Ye = class extends y {
+	static styles = [y.styles, t`
       fieldset {
         border: none;
         padding: 0;
@@ -3518,12 +3532,12 @@ var qe = (e) => typeof e == "string" ? {
           class="options ${a}"
           role="radiogroup"
           aria-label=${o}
-          aria-describedby=${u(t?.describedBy)}
+          aria-describedby=${d(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
           aria-required=${String(!!e.required)}
         >
           ${i.map((e) => {
-			let { label: i, value: a } = qe(e), o = `${t?.controlId ?? "sc"}-${a}`;
+			let { label: i, value: a } = Je(e), o = `${t?.controlId ?? "sc"}-${a}`;
 			return n`
               <label class=${s ? "disabled" : ""} for=${o}>
                 <input
@@ -3552,14 +3566,14 @@ var qe = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Je = _([i(d.singleChoiceField)], Je);
+Ye = v([i(f.singleChoiceField)], Ye);
 //#endregion
 //#region src/primitives/fields/multi-choice-field.ts
-var Ye = (e) => typeof e == "string" ? {
+var Xe = (e) => typeof e == "string" ? {
 	label: e,
 	value: e
-} : e, Xe = class extends v {
-	static styles = [v.styles, t`
+} : e, Ze = class extends y {
+	static styles = [y.styles, t`
       fieldset {
         border: none;
         padding: 0;
@@ -3629,12 +3643,12 @@ var Ye = (e) => typeof e == "string" ? {
           class="options ${a}"
           role="group"
           aria-label=${o}
-          aria-describedby=${u(t?.describedBy)}
+          aria-describedby=${d(t?.describedBy)}
           aria-invalid=${String(t?.invalid ?? !1)}
           aria-required=${String(!!e.required)}
         >
           ${i.map((e) => {
-			let { label: i, value: a } = Ye(e), o = `${t?.controlId ?? "mc"}-${a}`;
+			let { label: i, value: a } = Xe(e), o = `${t?.controlId ?? "mc"}-${a}`;
 			return n`
               <label class=${s ? "disabled" : ""} for=${o}>
                 <input
@@ -3663,11 +3677,11 @@ var Ye = (e) => typeof e == "string" ? {
 		this.commitBlur();
 	};
 };
-Xe = _([i(d.multiChoiceField)], Xe);
+Ze = v([i(f.multiChoiceField)], Ze);
 //#endregion
 //#region src/primitives/fields/rating-field.ts
-var Ze = class extends v {
-	static styles = [v.styles, t`
+var Qe = class extends y {
+	static styles = [y.styles, t`
       .rating-container {
         display: inline-flex;
         gap: 0.25rem;
@@ -3726,12 +3740,12 @@ var Ze = class extends v {
       <div
         role="slider"
         aria-label=${c}
-        aria-valuenow=${u(r === null ? void 0 : r)}
+        aria-valuenow=${d(r === null ? void 0 : r)}
         aria-valuemin=${i}
         aria-valuemax=${a}
         aria-invalid=${String(t?.invalid ?? !1)}
         aria-required=${String(!!e.required)}
-        aria-describedby=${u(t?.describedBy)}
+        aria-describedby=${d(t?.describedBy)}
         aria-disabled=${String(s)}
         tabindex="-1"
       >
@@ -3774,10 +3788,10 @@ var Ze = class extends v {
 		}
 	};
 };
-Ze = _([i(d.ratingField)], Ze);
+Qe = v([i(f.ratingField)], Qe);
 //#endregion
 //#region src/primitives/reports/classifier-report.ts
-var Qe = (e, t, n) => {
+var $e = (e, t, n) => {
 	if (!P(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) => {
@@ -3787,8 +3801,8 @@ var Qe = (e, t, n) => {
 			value: r
 		};
 	}).filter((e) => e !== null);
-}, $e = class extends b {
-	static styles = [b.styles, t`
+}, et = class extends x {
+	static styles = [x.styles, t`
       .rows {
         display: grid;
         gap: 0.5rem;
@@ -3859,7 +3873,7 @@ var Qe = (e, t, n) => {
 		let e = this.props.payload, t = typeof this.props.error == "string" ? this.props.error : null, r = this.reportContext, i = this.props.showClassProbabilities !== !1, a = this.text;
 		if (t) return n`<div class="error">${t}</div>`;
 		if (e == null) return n`<div class="empty">${a.classifierEmpty}</div>`;
-		let o = P(e) ? e.prediction ?? e.className ?? e.label ?? a.classifierUnknownPrediction : e, s = Qe(e, this.props.labels, a.classifierClassLabel);
+		let o = P(e) ? e.prediction ?? e.className ?? e.label ?? a.classifierUnknownPrediction : e, s = $e(e, this.props.labels, a.classifierClassLabel);
 		return n`
       <section
         part="classifier-report"
@@ -3887,14 +3901,14 @@ var Qe = (e, t, n) => {
     `;
 	}
 };
-$e = _([i(d.classifierReport)], $e);
+et = v([i(f.classifierReport)], et);
 //#endregion
 //#region src/primitives/reports/regressor-report.ts
-var X = (e, t, n) => {
+var Q = (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}` : ""}`;
-}, et = (e) => {
+}, tt = (e) => {
 	if (P(e) && Array.isArray(e.values)) return e.values.map((e) => Number(e)).filter((e) => !Number.isNaN(e));
 	if (P(e) && "value" in e) {
 		let t = Number(e.value);
@@ -3902,13 +3916,13 @@ var X = (e, t, n) => {
 	}
 	let t = Number(e);
 	return Number.isNaN(t) ? [] : [t];
-}, tt = (e) => {
+}, nt = (e) => {
 	if (P(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 P(e) && typeof e.min == "number" && typeof e.max == "number" ? [e.min, e.max] : null;
-}, nt = (e, t) => {
+}, rt = (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,
@@ -3919,12 +3933,12 @@ var X = (e, t, n) => {
     #ffea00 ${s}%,
     #ff6d00 ${Math.min(s + 10, 100)}%,
     #c62828 100%)`;
-}, Z = (e, t, n) => {
+}, $ = (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);
-}, Q = class extends b {
-	static styles = [b.styles, t`
+}, it = class extends x {
+	static styles = [x.styles, t`
       :host {
         --marker-size: 14px;
         --limit-line-width: 3px;
@@ -4003,7 +4017,7 @@ var X = (e, t, n) => {
 		let e = this.props.payload, t = typeof this.props.error == "string" ? this.props.error : null, r = this.reportContext, i = this.text;
 		if (t) return n`<div class="error">${t}</div>`;
 		if (e == null) return n`<div class="empty">${i.regressorEmpty}</div>`;
-		let a = typeof this.props.unit == "string" ? this.props.unit : "", o = typeof this.props.precision == "number" && this.props.precision >= 0 ? this.props.precision : 2, s = et(e), c = tt(e), l = P(e) && typeof e.execution_time == "number" ? `${e.execution_time} ms` : null;
+		let a = typeof this.props.unit == "string" ? this.props.unit : "", o = typeof this.props.precision == "number" && this.props.precision >= 0 ? this.props.precision : 2, s = tt(e), c = nt(e), l = P(e) && typeof e.execution_time == "number" ? `${e.execution_time} ms` : null;
 		return n`
       <section
         part="regressor-report"
@@ -4012,51 +4026,51 @@ var X = (e, t, n) => {
       >
         ${s.length > 0 ? s.map((e) => n`
                 <div class="item">
-                  <div class="value">${X(e, o, a)}</div>
+                  <div class="value">${Q(e, o, a)}</div>
 
                   ${c ? n`
                         <div
                           class="bar-wrapper"
-                          style=${`background: ${nt(c[0], c[1])};`}
+                          style=${`background: ${rt(c[0], c[1])};`}
                         >
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Z(c[0], c[0], c[1])}%;`}
+                            style=${`left: ${$(c[0], c[0], c[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${X(c[0], o, a)}
+                              ${Q(c[0], o, a)}
                             </div>
                           </div>
 
                           <div
                             class="limit-wrapper"
-                            style=${`left: ${Z(c[1], c[0], c[1])}%;`}
+                            style=${`left: ${$(c[1], c[0], c[1])}%;`}
                           >
                             <div class="limit-line"></div>
                             <div class="limit-label">
-                              ${X(c[1], o, a)}
+                              ${Q(c[1], o, a)}
                             </div>
                           </div>
 
                           <span
                             class="value-marker"
-                            style=${`left: ${Z(e, c[0], c[1])}%;`}
+                            style=${`left: ${$(e, c[0], c[1])}%;`}
                           ></span>
                         </div>
                       ` : n``}
                 </div>
-              `) : n`<div class="value">${X(e, o, a)}</div>`}
+              `) : n`<div class="value">${Q(e, o, a)}</div>`}
         ${l ? n`<div class="meta">${i.regressorExecutionTime(l)}</div>` : n``}
         ${this.renderTransportPanel(i)}
       </section>
     `;
 	}
 };
-Q = _([i(d.regressorReport)], Q);
+it = v([i(f.regressorReport)], it);
 //#endregion
 //#region src/primitives/registry.ts
-var rt = new Set([
+var at = new Set([
 	"annotation-xml",
 	"color-profile",
 	"font-face",
@@ -4065,19 +4079,19 @@ var rt = new Set([
 	"font-face-format",
 	"font-face-name",
 	"missing-glyph"
-]), it = (e) => /^[a-z][-.0-9_a-z]*-[-.0-9_a-z]*[a-z0-9]$/.test(e) && !rt.has(e), at = (e) => {
-	if (!it(e)) throw TypeError(`Invalid primitive renderer tag name "${e}". Expected a valid custom element name.`);
-}, ot = class e {
+]), ot = (e) => /^[a-z][-.0-9_a-z]*-[-.0-9_a-z]*[a-z0-9]$/.test(e) && !at.has(e), st = (e) => {
+	if (!ot(e)) throw TypeError(`Invalid primitive renderer tag name "${e}". Expected a valid custom element name.`);
+}, ct = class e {
 	#e = /* @__PURE__ */ new Map();
 	#t = /* @__PURE__ */ new Map();
 	registerField(e, t) {
-		return at(t), this.#e.set(e, t), this;
+		return st(t), this.#e.set(e, t), this;
 	}
 	unregisterField(e) {
 		return this.#e.delete(e), this;
 	}
 	registerReport(e, t) {
-		return at(t), this.#t.set(e, t), this;
+		return st(t), this.#t.set(e, t), this;
 	}
 	unregisterReport(e) {
 		return this.#t.delete(e), this;
@@ -4094,11 +4108,11 @@ var rt = new Set([
 		for (let [e, n] of this.#t) t.registerReport(e, n);
 		return t;
 	}
-}, st = () => new ot(), $ = () => st().registerField("declarative-field", d.declarativeField).registerField("text-field", d.textField).registerField("number-field", d.numberField).registerField("boolean-field", d.booleanField).registerField("category-field", d.categoryField).registerField("date-field", d.dateField).registerField("series-field", d.seriesField).registerField("long-text-field", d.longTextField).registerField("single-choice-field", d.singleChoiceField).registerField("multi-choice-field", d.multiChoiceField).registerField("rating-field", d.ratingField).registerReport("declarative-report", d.declarativeReport).registerReport("classifier-report", d.classifierReport).registerReport("regressor-report", d.regressorReport), ct = (e, t) => {
+}, lt = () => new ct(), ut = () => lt().registerField("declarative-field", f.declarativeField).registerField("text-field", f.textField).registerField("number-field", f.numberField).registerField("boolean-field", f.booleanField).registerField("category-field", f.categoryField).registerField("date-field", f.dateField).registerField("series-field", f.seriesField).registerField("long-text-field", f.longTextField).registerField("single-choice-field", f.singleChoiceField).registerField("multi-choice-field", f.multiChoiceField).registerField("rating-field", f.ratingField).registerReport("declarative-report", f.declarativeReport).registerReport("mounted-report", f.mountedReport).registerReport("classifier-report", f.classifierReport).registerReport("regressor-report", f.regressorReport), dt = (e, t) => {
 	if (e.childNodes.length > 0 && t !== "replace") throw TypeError("Mount into an empty container or pass `containerStrategy: \"replace\"`.");
-}, lt = (e) => e ? e.clone() : $(), ut = (e) => e?.clone() ?? k(), dt = (e, t, n = {}) => {
-	let r = document.createElement(d.form), i = lt(n.registry), a = ut(n.descriptorRegistry), o = h(n.text), s = n.containerStrategy ?? "error", c = s === "replace" ? Array.from(e.childNodes) : [];
-	ct(e, s), r.form = t, r.registry = i, r.descriptorRegistry = a, r.layout = n.layout ?? "stacked", r.formLabel = n.formLabel ?? p.form, r.reportsLabel = n.reportsLabel ?? p.reports, r.submitLabel = n.submitLabel ?? p.submit, r.validatingLabel = n.validatingLabel ?? p.validating, r.submittingLabel = n.submittingLabel ?? p.submitting, r.reportPane = n.reportPane ?? "auto", r.text = o, r.reportTransport = n.reportTransport, r.reportFetchMode = n.reportFetchMode ?? "lazy", r.submitHandler = n.submitHandler, e.replaceChildren(r);
+}, ft = (e) => e ? e.clone() : ut(), pt = (e) => e?.clone() ?? k(), mt = (e, t, n = {}) => {
+	let r = document.createElement(f.form), i = ft(n.registry), a = pt(n.descriptorRegistry), o = g(n.text), s = n.containerStrategy ?? "error", c = s === "replace" ? Array.from(e.childNodes) : [];
+	dt(e, s), r.form = t, r.registry = i, r.descriptorRegistry = 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, r.reportFetchMode = n.reportFetchMode ?? "lazy", r.submitHandler = n.submitHandler, e.replaceChildren(r);
 	let l = !1;
 	return Object.freeze({
 		form: t,
@@ -4110,8 +4124,8 @@ var rt = new Set([
 			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)));
 		}
 	});
-}, ft = (e) => {
+}, ht = (e) => {
 	e.unmount();
 };
 //#endregion
-export { h as _, ve as a, D as c, y as d, v as f, d as g, m as h, st as i, ae as l, p as m, ft as n, O as o, _ as p, $ as r, k as s, dt as t, b as u };
+export { g as _, ye as a, O as c, b as d, y as f, f as g, h, lt as i, oe as l, m, ht as n, ve as o, v as p, ut as r, k as s, mt as t, x as u };