mlform 0.1.8 → 0.1.9

package/dist/{kit-CuRF6dhL.js → kit-QY6zff-h.js}

@@ -1,24 +1,24 @@
-import { f as e, h as t, r as n } from "./design-system-Dxx1Sh7r.js";
+import { f as e, h as t, r as n } from "./design-system-CIU_vH6O.js";
 import { t as r } from "./strings-CWwrrYzz.js";
-import { i, n as a } from "./builtins-ml-9qB2MOxt.js";
-import { a as o, t as s } from "./runtime-DMjDVo0H.js";
-import { _ as c, b as l, d as u, f as d, g as f, h as p, m, o as h, p as g, r as _, s as v, t as y, v as b, x, y as S } from "./primitives-Duag8Lj0.js";
+import { createRegistry as i } from "./mlform/schema.mjs";
+import { C as a, S as o, _ as s, b as c, c as l, g as u, h as d, l as f, m as p, o as m, p as h, r as g, s as _, t as v, v as y, x as b, y as x } from "./primitives-Di95y_ur.js";
+import { t as ee } from "./runtime-C5iTM3uu.js";
+import { n as te } from "./builtins-ml-pjab8_gu.js";
 //#region src/kit/defaults.ts
-var C = { ...d }, w = {
+var S = { ...p }, ne = {
 	mode: "auto",
 	theme: "neutral",
 	recipe: "default"
-}, ee = (e) => {
-	if (!e) return a().registry;
-	let t = s();
+}, re = (e) => {
+	let t = i();
 	for (let n of e.listFields()) t.registerField(n);
 	for (let n of e.listReports()) t.registerReport(n);
 	for (let n of e.listExplanations()) t.registerExplanation(n);
 	return t;
-}, te = (e) => e?.clone() ?? _(), ne = (e) => e?.clone() ?? t.clone(), T = (e = {}) => ({
-	...C,
+}, ie = (e) => e?.clone() ?? g(), ae = (e) => e?.clone() ?? t.clone(), C = (e = {}) => ({
+	...S,
 	...e
-}), E = (t = {}) => e(w, t), re = x`
+}), w = (t = {}) => e(ne, t), oe = a`
   :host {
     display: block;
     inline-size: 100%;
@@ -38,11 +38,11 @@ var C = { ...d }, w = {
     min-height: 100%;
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
     box-shadow:
-      0 2px 4px var(--mlf-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
-      0 8px 16px var(--mlf-panel-shadow, rgba(0, 0, 0, 0.04));
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
     overflow: hidden;
   }
   .header,
@@ -52,15 +52,18 @@ var C = { ...d }, w = {
     justify-content: space-between;
     gap: 0.75rem;
     padding: 0.85rem 1rem;
-    background: var(--mlf-panel-header-bg, rgba(255, 255, 255, 0.6));
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
     border-bottom: var(--mlf-border-width, 1px) solid
-      var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
   }
   .footer {
     border-bottom: none;
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
   }
   .title {
     margin: 0;
@@ -151,7 +154,7 @@ var C = { ...d }, w = {
     padding: 0.5rem 1rem;
     border-radius: var(--mlf-input-radius, 12px);
     border: var(--mlf-border-width, 1px) solid var(--mlf-input-border, #e2e8f0);
-    background: #fff;
+    background: var(--mlf-input-bg, var(--mlf-color-surface-elevated, #ffffff));
     color: var(--mlf-color-text, #0f172a);
     font: inherit;
     font-size: 0.92rem;
@@ -178,7 +181,7 @@ var C = { ...d }, w = {
       align-items: stretch;
     }
   }
-`, D = {
+`, T = {
 	invalidDesignSystemSnapshot: "replaceDesignSystem requires an explicit mode, theme, and recipe.",
 	fieldDuplicateInLayout: (e) => `Field "${e}" appears multiple times in layout.`,
 	fieldMissingInLayout: (e) => `Field "${e}" is missing from layout.`,
@@ -203,70 +206,86 @@ var C = { ...d }, w = {
 	unknownTab: (e) => `Unknown tab "${e}".`,
 	unknownWizardStep: (e) => `Unknown wizard step "${e}".`,
 	unknownAccordionSection: (e) => `Unknown accordion section "${e}".`
-}, O = {
+}, E = {
 	wizard: "mlf-kit-wizard",
 	tabs: "mlf-kit-tabs",
 	accordion: "mlf-kit-accordion",
 	stepIndicator: "mlf-kit-step-indicator"
-}, k = ({ node: e, snapshot: t, registry: n, primitiveText: r = g, sectionClass: i, sectionCopyClass: a, sectionTitleClass: o, sectionDescriptionClass: s, childrenClass: c, groupBaseClass: u }) => {
+}, se = async (e) => {
+	await Promise.resolve(), "updateComplete" in e && await e.updateComplete, await Promise.resolve();
+}, ce = (e, t) => e.some((e) => e.kind === "field" ? e.field === t : "children" in e && ce(e.children, t)), le = (e, t) => {
+	let n = e.getSnapshot().layout;
+	return n.kind === "accordion" ? n.sections.find((e) => ce(e.children, t))?.id ?? null : null;
+}, ue = (e) => {
+	let t = e.getSnapshot().fields.filter((e) => e.state.visible && e.state.errors.length > 0), n = new Map(e.getLayoutReferences().fields.map((e, t) => [e, t]));
+	return t.sort((e, t) => (n.get(e.id) ?? 0) - (n.get(t.id) ?? 0)), t[0] ?? null;
+}, D = async (e, t) => {
+	let n = ue(t);
+	if (!n) return !1;
+	let r = t.getSnapshot().layout.kind;
+	r === "wizard" && n.stepId && await t.goToStep(n.stepId), r === "tabs" && n.tabId && t.setActiveTab(n.tabId);
+	let i = le(t, n.id);
+	return i && t.openSection(i), await se(e), f(l(e.shadowRoot ?? e, n.id));
+}, O = ({ node: e, snapshot: t, registry: n, primitiveText: r = d, sectionClass: i, sectionCopyClass: a, sectionTitleClass: s, sectionDescriptionClass: c, childrenClass: l, groupBaseClass: u }) => {
 	switch (e.kind) {
-		case "section": return l`
+		case "section": return o`
         <section class=${i} data-section-id=${e.id}>
-          ${e.title || e.description ? l`
+          ${e.title || e.description ? o`
                 <div class=${a}>
-                  ${e.title ? l`<h2 class=${o}>${e.title}</h2>` : S}
-                  ${e.description ? l`<p class=${s}>${e.description}</p>` : S}
+                  ${e.title ? o`<h2 class=${s}>${e.title}</h2>` : b}
+                  ${e.description ? o`<p class=${c}>${e.description}</p>` : b}
                 </div>
-              ` : S}
-          <div class=${c}>
-            ${h(e.children, (t, n) => `${e.id}-${n}`, (e) => k({
+              ` : b}
+          <div class=${l}>
+            ${m(e.children, (t, n) => `${e.id}-${n}`, (e) => O({
 			node: e,
 			snapshot: t,
 			registry: n,
 			primitiveText: r,
 			sectionClass: i,
 			sectionCopyClass: a,
-			sectionTitleClass: o,
-			sectionDescriptionClass: s,
-			childrenClass: c,
+			sectionTitleClass: s,
+			sectionDescriptionClass: c,
+			childrenClass: l,
 			groupBaseClass: u
 		}))}
           </div>
         </section>
       `;
-		case "group": return l`
+		case "group": return o`
         <div
           class=${`${u}${e.columns ? ` columns-${e.columns}` : ""}`}
           data-group-id=${e.id}
         >
-          ${h(e.children, (t, n) => `${e.id}-${n}`, (e) => k({
+          ${m(e.children, (t, n) => `${e.id}-${n}`, (e) => O({
 			node: e,
 			snapshot: t,
 			registry: n,
 			primitiveText: r,
 			sectionClass: i,
 			sectionCopyClass: a,
-			sectionTitleClass: o,
-			sectionDescriptionClass: s,
-			childrenClass: c,
+			sectionTitleClass: s,
+			sectionDescriptionClass: c,
+			childrenClass: l,
 			groupBaseClass: u
 		}))}
         </div>
       `;
 		case "field": {
 			let i = t.fields.find((t) => t.id === e.field);
-			return i ? l`
+			return i ? o`
         <mlf-field-frame
+          data-field-id=${i.id}
           .controller=${i.controller}
           .descriptor=${i.descriptor}
           .registry=${n}
           .text=${r}
         ></mlf-field-frame>
-      ` : S;
+      ` : b;
 		}
 		case "report": {
 			let i = t.reports.find((t) => t.id === e.report);
-			return i ? l`
+			return i ? o`
         <mlf-report-frame
           .controller=${i.controller}
           .descriptor=${i.descriptor}
@@ -274,11 +293,11 @@ var C = { ...d }, w = {
           .text=${r}
           .lastResult=${t.form.lastResult}
         ></mlf-report-frame>
-      ` : S;
+      ` : b;
 		}
 		case "explanation": {
 			let i = t.explanations.find((t) => t.id === e.explanation);
-			return i ? l`
+			return i ? o`
         <mlf-explanation-panel
           .controller=${i.controller}
           .descriptor=${i.descriptor}
@@ -286,11 +305,11 @@ var C = { ...d }, w = {
           .text=${r}
           .lastResult=${t.form.lastResult}
         ></mlf-explanation-panel>
-      ` : S;
+      ` : b;
 		}
 	}
-}, A = class extends b {
-	static styles = re;
+}, k = class extends c {
+	static styles = oe;
 	#e;
 	get view() {
 		return this.#e;
@@ -305,7 +324,7 @@ var C = { ...d }, w = {
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = g;
+	#n = d;
 	get primitiveText() {
 		return this.#n;
 	}
@@ -351,9 +370,9 @@ var C = { ...d }, w = {
 	}
 	render() {
 		let e = this.snapshot, t = e?.accordion;
-		if (!e || !t || e.layout.kind !== "accordion") return l``;
+		if (!e || !t || e.layout.kind !== "accordion") return o``;
 		let n = e.form.status, r = n === "validating" ? this.validatingLabel : n === "submitting" ? this.submittingLabel : this.submitLabel;
-		return l`
+		return o`
       <section class="root" part="accordion-panel">
         <header class="header">
           <h1 class="title">Accordion Form</h1>
@@ -364,9 +383,9 @@ var C = { ...d }, w = {
         </header>
 
         <div class="body">
-          ${h(e.layout.sections, (e) => e.id, (n) => {
+          ${m(e.layout.sections, (e) => e.id, (n) => {
 			let r = t.openSectionIds.includes(n.id);
-			return l`
+			return o`
                 <section class="section">
                   <button
                     type="button"
@@ -376,14 +395,14 @@ var C = { ...d }, w = {
                   >
                     <span class="section-copy">
                       <span class="section-title">${n.title}</span>
-                      ${n.description ? l`<span class="section-description">${n.description}</span>` : S}
+                      ${n.description ? o`<span class="section-description">${n.description}</span>` : b}
                     </span>
                     <span class="chevron">${r ? "−" : "+"}</span>
                   </button>
-                  ${r ? l`
+                  ${r ? o`
                         <div class="section-panel">
                           <div class="collection">
-                            ${h(n.children, (e, t) => `${n.id}-${t}`, (t) => k({
+                            ${m(n.children, (e, t) => `${n.id}-${t}`, (t) => O({
 				node: t,
 				snapshot: e,
 				registry: this.registry,
@@ -397,7 +416,7 @@ var C = { ...d }, w = {
 			}))}
                           </div>
                         </div>
-                      ` : S}
+                      ` : b}
                 </section>
               `;
 		})}
@@ -424,17 +443,21 @@ var C = { ...d }, w = {
 		this.view?.closeAllSections();
 	};
 	#u = async () => {
-		await this.view?.submit();
+		if (this.view) try {
+			await this.view.submit();
+		} catch (e) {
+			if (!await D(this, this.view)) throw e;
+		}
 	};
 };
-u([f({ attribute: !1 })], A.prototype, "view", null), u([f({ attribute: !1 })], A.prototype, "registry", null), u([f({ attribute: !1 })], A.prototype, "primitiveText", null), u([f({ type: String })], A.prototype, "submitLabel", null), u([f({ type: String })], A.prototype, "validatingLabel", null), u([f({ type: String })], A.prototype, "submittingLabel", null), u([p()], A.prototype, "snapshot", null), A = u([c(O.accordion)], A);
+h([y({ attribute: !1 })], k.prototype, "view", null), h([y({ attribute: !1 })], k.prototype, "registry", null), h([y({ attribute: !1 })], k.prototype, "primitiveText", null), h([y({ type: String })], k.prototype, "submitLabel", null), h([y({ type: String })], k.prototype, "validatingLabel", null), h([y({ type: String })], k.prototype, "submittingLabel", null), h([s()], k.prototype, "snapshot", null), k = h([x(E.accordion)], k);
 //#endregion
 //#region src/kit/layout-helpers.ts
-var ie = (e, t, n) => ({
+var de = (e, t, n) => ({
 	fieldIds: new Set(e.map((e) => e.id)),
 	reportIds: new Set(t.map((e) => e.id)),
 	explanationIds: new Set(n.map((e) => e.id))
-}), ae = () => ({
+}), fe = () => ({
 	fieldStepIds: /* @__PURE__ */ new Map(),
 	reportStepIds: /* @__PURE__ */ new Map(),
 	explanationStepIds: /* @__PURE__ */ new Map(),
@@ -444,25 +467,25 @@ var ie = (e, t, n) => ({
 	fieldIdsInLayout: /* @__PURE__ */ new Set(),
 	reportIdsInLayout: /* @__PURE__ */ new Set(),
 	explanationIdsInLayout: /* @__PURE__ */ new Set()
-}), j = (e, t, n) => {
+}), A = (e, t, n) => {
 	let i = r(t ?? e) || e, a = n.get(i) ?? 0;
 	return n.set(i, a + 1), a === 0 ? i : `${i}-${a + 1}`;
-}, oe = (e, t) => {
-	if (!t.fieldIds.has(e)) throw TypeError(D.unknownFieldReference(e));
-}, se = (e, t) => {
-	if (!t.reportIds.has(e)) throw TypeError(D.unknownReportReference(e));
-}, ce = (e, t) => {
-	if (!t.explanationIds.has(e)) throw TypeError(D.unknownExplanationReference(e));
-}, le = (e, t, n, r) => {
-	if (t.fieldIdsInLayout.has(e)) throw TypeError(D.fieldDuplicateInLayout(e));
+}, pe = (e, t) => {
+	if (!t.fieldIds.has(e)) throw TypeError(T.unknownFieldReference(e));
+}, me = (e, t) => {
+	if (!t.reportIds.has(e)) throw TypeError(T.unknownReportReference(e));
+}, he = (e, t) => {
+	if (!t.explanationIds.has(e)) throw TypeError(T.unknownExplanationReference(e));
+}, ge = (e, t, n, r) => {
+	if (t.fieldIdsInLayout.has(e)) throw TypeError(T.fieldDuplicateInLayout(e));
 	t.fieldIdsInLayout.add(e), n && t.fieldStepIds.set(e, n), r && t.fieldTabIds.set(e, r);
-}, ue = (e, t, n, r) => {
-	if (t.reportIdsInLayout.has(e)) throw TypeError(D.reportDuplicateInLayout(e));
+}, _e = (e, t, n, r) => {
+	if (t.reportIdsInLayout.has(e)) throw TypeError(T.reportDuplicateInLayout(e));
 	t.reportIdsInLayout.add(e), n && t.reportStepIds.set(e, n), r && t.reportTabIds.set(e, r);
-}, de = (e, t, n, r) => {
-	if (t.explanationIdsInLayout.has(e)) throw TypeError(D.explanationDuplicateInLayout(e));
+}, ve = (e, t, n, r) => {
+	if (t.explanationIdsInLayout.has(e)) throw TypeError(T.explanationDuplicateInLayout(e));
 	t.explanationIdsInLayout.add(e), n && t.explanationStepIds.set(e, n), r && t.explanationTabIds.set(e, r);
-}, fe = (e, t, n) => [
+}, ye = (e, t, n) => [
 	...e.map((e) => ({
 		kind: "field",
 		field: e.id
@@ -475,41 +498,41 @@ var ie = (e, t, n) => ({
 		kind: "report",
 		report: e.id
 	}))
-], M = (e, t) => {
-	for (let n of e) if (!t.fieldIdsInLayout.has(n.id)) throw TypeError(D.fieldMissingInLayout(n.id));
-}, N = (e, t, n, r, i, a) => e.map((e) => {
+], j = (e, t) => {
+	for (let n of e) if (!t.fieldIdsInLayout.has(n.id)) throw TypeError(T.fieldMissingInLayout(n.id));
+}, M = (e, t, n, r, i, a) => e.map((e) => {
 	switch (e.kind) {
 		case "section": return {
 			kind: "section",
-			id: j("section", e.id ?? e.title, r),
+			id: A("section", e.id ?? e.title, r),
 			title: e.title,
 			description: e.description,
-			children: N(e.children, t, n, r, i, a)
+			children: M(e.children, t, n, r, i, a)
 		};
 		case "group": return {
 			kind: "group",
-			id: j("group", e.id, r),
+			id: A("group", e.id, r),
 			columns: e.columns,
-			children: N(e.children, t, n, r, i, a)
+			children: M(e.children, t, n, r, i, a)
 		};
-		case "field": return oe(e.field, t), le(e.field, n, i, a), {
+		case "field": return pe(e.field, t), ge(e.field, n, i, a), {
 			kind: "field",
 			field: e.field
 		};
-		case "report": return se(e.report, t), ue(e.report, n, i, a), {
+		case "report": return me(e.report, t), _e(e.report, n, i, a), {
 			kind: "report",
 			report: e.report
 		};
-		case "explanation": return ce(e.explanation, t), de(e.explanation, n, i, a), {
+		case "explanation": return he(e.explanation, t), ve(e.explanation, n, i, a), {
 			kind: "explanation",
 			explanation: e.explanation
 		};
 	}
-}), pe = (e, t, n, r) => {
-	let i = ie(t, n, r), a = ae(), o = /* @__PURE__ */ new Map();
+}), be = (e, t, n, r) => {
+	let i = de(t, n, r), a = fe(), o = /* @__PURE__ */ new Map();
 	if (!e || e.kind === void 0 || e.kind === "single-page") {
-		let s = N(e?.children ?? fe(t, r, n), i, a, o, null, null);
-		return M(t, a), {
+		let s = M(e?.children ?? ye(t, r, n), i, a, o, null, null);
+		return j(t, a), {
 			layout: {
 				kind: "single-page",
 				children: s
@@ -518,10 +541,10 @@ var ie = (e, t, n) => ({
 		};
 	}
 	if (e.kind === "tabs") {
-		if (e.tabs.length === 0) throw TypeError(D.tabsRequiresTabs);
+		if (e.tabs.length === 0) throw TypeError(T.tabsRequiresTabs);
 		let n = /* @__PURE__ */ new Map(), r = e.tabs.map((e, t) => {
-			let r = j("tab", e.id ?? e.title ?? `tab-${t + 1}`, n), s = N(e.children, i, a, o, null, r);
-			if (s.length === 0) throw TypeError(D.tabEmpty(r));
+			let r = A("tab", e.id ?? e.title ?? `tab-${t + 1}`, n), s = M(e.children, i, a, o, null, r);
+			if (s.length === 0) throw TypeError(T.tabEmpty(r));
 			return {
 				id: r,
 				title: e.title,
@@ -529,7 +552,7 @@ var ie = (e, t, n) => ({
 				children: s
 			};
 		});
-		return M(t, a), {
+		return j(t, a), {
 			layout: {
 				kind: "tabs",
 				tabs: r
@@ -538,10 +561,10 @@ var ie = (e, t, n) => ({
 		};
 	}
 	if (e.kind === "accordion") {
-		if (e.sections.length === 0) throw TypeError(D.accordionRequiresSections);
+		if (e.sections.length === 0) throw TypeError(T.accordionRequiresSections);
 		let n = /* @__PURE__ */ new Map(), r = e.sections.map((e, t) => {
-			let r = j("section", e.id ?? e.title ?? `section-${t + 1}`, n), s = N(e.children, i, a, o, null, r);
-			if (s.length === 0) throw TypeError(D.accordionSectionEmpty(r));
+			let r = A("section", e.id ?? e.title ?? `section-${t + 1}`, n), s = M(e.children, i, a, o, null, r);
+			if (s.length === 0) throw TypeError(T.accordionSectionEmpty(r));
 			return {
 				id: r,
 				title: e.title,
@@ -550,7 +573,7 @@ var ie = (e, t, n) => ({
 				children: s
 			};
 		});
-		return M(t, a), {
+		return j(t, a), {
 			layout: {
 				kind: "accordion",
 				sections: r
@@ -559,10 +582,10 @@ var ie = (e, t, n) => ({
 		};
 	}
 	let s = e;
-	if (s.steps.length === 0) throw TypeError(D.wizardRequiresSteps);
+	if (s.steps.length === 0) throw TypeError(T.wizardRequiresSteps);
 	let c = /* @__PURE__ */ new Map(), l = s.steps.map((e, t) => {
-		let n = j("step", e.id ?? e.title ?? `step-${t + 1}`, c), r = N(e.children, i, a, o, n, null);
-		if (r.length === 0) throw TypeError(D.wizardStepEmpty(n));
+		let n = A("step", e.id ?? e.title ?? `step-${t + 1}`, c), r = M(e.children, i, a, o, n, null);
+		if (r.length === 0) throw TypeError(T.wizardStepEmpty(n));
 		return {
 			id: n,
 			title: e.title,
@@ -570,40 +593,40 @@ var ie = (e, t, n) => ({
 			children: r
 		};
 	});
-	return M(t, a), {
+	return j(t, a), {
 		layout: {
 			kind: "wizard",
 			steps: l
 		},
 		maps: a
 	};
+}, N = (e, t) => {
+	if (t(e), "children" in e) for (let n of e.children) N(n, t);
 }, P = (e, t) => {
-	if (t(e), "children" in e) for (let n of e.children) P(n, t);
-}, F = (e, t) => {
 	switch (e.kind) {
 		case "single-page":
-			for (let n of e.children) P(n, t);
+			for (let n of e.children) N(n, t);
 			return;
 		case "wizard":
-			for (let n of e.steps) for (let e of n.children) P(e, t);
+			for (let n of e.steps) for (let e of n.children) N(e, t);
 			return;
 		case "tabs":
-			for (let n of e.tabs) for (let e of n.children) P(e, t);
+			for (let n of e.tabs) for (let e of n.children) N(e, t);
 			return;
-		case "accordion": for (let n of e.sections) for (let e of n.children) P(e, t);
+		case "accordion": for (let n of e.sections) for (let e of n.children) N(e, t);
 	}
-}, I = (e) => {
+}, F = (e) => {
 	let t = [];
-	return F(e, (e) => {
+	return P(e, (e) => {
 		t.push(e);
 	}), t;
-}, L = (e) => {
+}, I = (e) => {
 	let t = {
 		fields: [],
 		reports: [],
 		explanations: []
 	};
-	for (let n of I(e)) switch (n.kind) {
+	for (let n of F(e)) switch (n.kind) {
 		case "field":
 			t.fields.push(n.field);
 			break;
@@ -616,7 +639,7 @@ var ie = (e, t, n) => ({
 		default: break;
 	}
 	return t;
-}, R = (e, t, n) => {
+}, L = (e, t, n) => {
 	if (n.length === 0) return null;
 	let r = Math.min(Math.max(t, 0), n.length - 1);
 	return {
@@ -627,8 +650,8 @@ var ie = (e, t, n) => ({
 		canGoNext: r < n.length - 1,
 		canGoPrev: r > 0
 	};
-}, z = ({ layout: e, stepIndex: t, formState: n }) => {
-	let r = R("wizard-step", t, (e.kind === "wizard" ? e.steps : []).map((e) => e.id));
+}, R = ({ layout: e, stepIndex: t, formState: n }) => {
+	let r = L("wizard-step", t, (e.kind === "wizard" ? e.steps : []).map((e) => e.id));
 	return r ? {
 		stepIndex: r.index,
 		stepCount: r.count,
@@ -637,8 +660,8 @@ var ie = (e, t, n) => ({
 		canPrev: r.canGoPrev,
 		isLastStep: r.index === r.count - 1
 	} : null;
-}, B = ({ layout: e, activeTabIndex: t }) => {
-	let n = R("tab", t, (e.kind === "tabs" ? e.tabs : []).map((e) => e.id));
+}, z = ({ layout: e, activeTabIndex: t }) => {
+	let n = L("tab", t, (e.kind === "tabs" ? e.tabs : []).map((e) => e.id));
 	return n ? {
 		activeTabIndex: n.index,
 		tabCount: n.count,
@@ -646,18 +669,18 @@ var ie = (e, t, n) => ({
 		canGoNext: n.canGoNext,
 		canGoPrev: n.canGoPrev
 	} : null;
-}, V = ({ layout: e, openSectionIds: t }) => {
+}, B = ({ layout: e, openSectionIds: t }) => {
 	let n = e.kind === "accordion" ? e.sections : [];
 	return n.length === 0 ? null : {
 		openSectionIds: n.map((e) => e.id).filter((e) => t.has(e)),
 		sectionCount: n.length
 	};
-}, me = (e) => ({
+}, xe = (e) => ({
 	form: e.formState,
-	wizard: z(e),
-	tabs: B(e),
-	accordion: V(e)
-}), H = (e, t, n, r, i, a) => e.kind === "wizard" ? i === (e.steps[t]?.id ?? null) : e.kind === "tabs" ? a === (e.tabs[n]?.id ?? null) : e.kind === "accordion" ? a !== null && r.has(a) : !0, he = (e, t, n, r, i, a) => {
+	wizard: R(e),
+	tabs: z(e),
+	accordion: B(e)
+}), V = (e, t, n, r, i, a) => e.kind === "wizard" ? i === (e.steps[t]?.id ?? null) : e.kind === "tabs" ? a === (e.tabs[n]?.id ?? null) : e.kind === "accordion" ? a !== null && r.has(a) : !0, Se = (e, t, n, r, i, a) => {
 	let o = n.maps.fieldStepIds.get(e.id) ?? null, s = n.maps.fieldTabIds.get(e.id) ?? null, c = t.getField(e.kind);
 	return {
 		id: e.id,
@@ -669,12 +692,12 @@ var ie = (e, t, n) => ({
 			fieldId: e.id,
 			state: e.state,
 			value: e.state.value
-		}) ?? v(e),
+		}) ?? _(e),
 		stepId: o,
 		tabId: s,
-		visibleInLayout: H(n.layout, r, i, a, o, s)
+		visibleInLayout: V(n.layout, r, i, a, o, s)
 	};
-}, ge = (e, t, n, r, i, a, o) => {
+}, Ce = (e, t, n, r, i, a, o) => {
 	let s = r.maps.reportStepIds.get(e.id) ?? null, c = r.maps.reportTabIds.get(e.id) ?? null, l = n.getReport(e.kind);
 	return {
 		id: e.id,
@@ -690,9 +713,9 @@ var ie = (e, t, n) => ({
 		}) : null,
 		stepId: s,
 		tabId: c,
-		visibleInLayout: H(r.layout, i, a, o, s, c)
+		visibleInLayout: V(r.layout, i, a, o, s, c)
 	};
-}, _e = (e, t, n, r, i, a) => {
+}, we = (e, t, n, r, i, a) => {
 	let o = n.maps.explanationStepIds.get(e.id) ?? null, s = n.maps.explanationTabIds.get(e.id) ?? null, c = t.getExplanation(e.kind);
 	return {
 		id: e.id,
@@ -706,46 +729,46 @@ var ie = (e, t, n) => ({
 		}) : null,
 		stepId: o,
 		tabId: s,
-		visibleInLayout: H(n.layout, r, i, a, o, s)
+		visibleInLayout: V(n.layout, r, i, a, o, s)
 	};
-}, ve = ({ form: e, presentationRegistry: t, resolvedLayout: n, stepIndex: r, activeTabIndex: i, openSectionIds: a }) => ({
+}, Te = ({ form: e, presentationRegistry: t, resolvedLayout: n, stepIndex: r, activeTabIndex: i, openSectionIds: a }) => ({
 	form: e.state,
 	layout: n.layout,
-	fields: e.fields.map((e) => he(e, t, n, r, i, a)),
-	reports: e.reports.map((o) => ge(o, e, t, n, r, i, a)),
-	explanations: e.explanations.map((e) => _e(e, t, n, r, i, a)),
-	wizard: z({
+	fields: e.fields.map((e) => Se(e, t, n, r, i, a)),
+	reports: e.reports.map((o) => Ce(o, e, t, n, r, i, a)),
+	explanations: e.explanations.map((e) => we(e, t, n, r, i, a)),
+	wizard: R({
 		layout: n.layout,
 		stepIndex: r,
 		activeTabIndex: i,
 		openSectionIds: a,
 		formState: e.state
 	}),
-	tabs: B({
+	tabs: z({
 		layout: n.layout,
 		stepIndex: r,
 		activeTabIndex: i,
 		openSectionIds: a,
 		formState: e.state
 	}),
-	accordion: V({
+	accordion: B({
 		layout: n.layout,
 		stepIndex: r,
 		activeTabIndex: i,
 		openSectionIds: a,
 		formState: e.state
 	})
-}), ye = (e, t, n, r, i) => me({
+}), Ee = (e, t, n, r, i) => xe({
 	formState: e.state,
 	layout: t,
 	stepIndex: n,
 	activeTabIndex: r,
 	openSectionIds: i
-}), be = ({ form: e, presentationRegistry: t, resolvedLayout: n, getStepIndex: r, getActiveTabIndex: i, getOpenSectionIds: a }) => {
+}), De = ({ form: e, presentationRegistry: t, resolvedLayout: n, getStepIndex: r, getActiveTabIndex: i, getOpenSectionIds: a }) => {
 	let o = e.state, s = -1, c = -1, l = "", u = null;
 	return () => {
 		let d = r(), f = i(), p = a(), m = e.state, h = Array.from(p).sort().join("|");
-		return u && o === m && s === d && c === f && l === h ? u : (o = m, s = d, c = f, l = h, u = ve({
+		return u && o === m && s === d && c === f && l === h ? u : (o = m, s = d, c = f, l = h, u = Te({
 			form: e,
 			presentationRegistry: t,
 			resolvedLayout: n,
@@ -754,28 +777,26 @@ var ie = (e, t, n) => ({
 			openSectionIds: p
 		}), u);
 	};
-}, xe = async (e, t, n) => {
+}, Oe = async (e, t, n) => {
 	if (t.layout.kind !== "wizard") return !1;
 	let r = t.layout.steps[n]?.id;
 	if (!r) return !1;
 	let i = e.fields.filter((e) => t.maps.fieldStepIds.get(e.id) === r && e.state.visible);
 	return (await Promise.all(i.map((e) => e.validate()))).every((e) => e.errors.length === 0);
-}, Se = (e, t, n, r) => {
+}, ke = (e, t, n, r) => {
 	switch (e.layout.kind) {
 		case "single-page": return e.layout.children;
 		case "wizard": return e.layout.steps[t]?.children ?? [];
 		case "tabs": return e.layout.tabs[n]?.children ?? [];
 		case "accordion": return e.layout.sections.filter((e) => r.has(e.id)).flatMap((e) => e.children);
 	}
-}, U = (e, t, n) => {
-	if (e.layout.kind !== "accordion") throw TypeError(D.nonAccordionToggleSection);
-	if (!t.some((e) => e.id === n)) throw TypeError(D.unknownAccordionSection(n));
+}, H = (e, t, n) => {
+	if (e.layout.kind !== "accordion") throw TypeError(T.nonAccordionToggleSection);
+	if (!t.some((e) => e.id === n)) throw TypeError(T.unknownAccordionSection(n));
+}, U = (e) => {
+	if (e.layout.kind !== "accordion") throw TypeError(T.nonAccordionToggleSection);
 }, W = (e) => {
-	if (e.layout.kind !== "accordion") throw TypeError(D.nonAccordionToggleSection);
-}, G = (e) => {
-	let t = !e.registry || !e.presentationRegistry || !e.behaviors ? a() : null, n = e.registry ? ee(e.registry) : t.registry, r = e.presentationRegistry?.clone() ?? t.presentationRegistry;
-	e.registry && !e.presentationRegistry && i(r, n);
-	let s = te(e.primitiveRegistry), c = ne(e.designSystemRegistry), l = o({
+	let t = !e.registry || !e.presentationRegistry || !e.behaviors ? te() : null, n = e.registry ? re(e.registry) : t.registry, r = e.presentationRegistry?.clone() ?? t.presentationRegistry, i = ie(e.primitiveRegistry), a = ae(e.designSystemRegistry), o = ee({
 		schema: e.schema,
 		registry: n,
 		behaviors: e.behaviors ?? t?.behaviors,
@@ -787,118 +808,118 @@ var ie = (e, t, n) => ({
 		inactiveFieldPolicy: e.inactiveFieldPolicy,
 		listenerErrorPolicy: e.listenerErrorPolicy,
 		onListenerError: e.onListenerError
-	}), u = pe(e.layout, l.fields, l.reports, l.explanations), d = 0, f = 0, p = new Set(u.layout.kind === "accordion" ? u.layout.sections.filter((e) => e.defaultOpen).map((e) => e.id) : []), m = /* @__PURE__ */ new Set(), h = u.layout.kind === "wizard" ? u.layout.steps : [], g = u.layout.kind === "tabs" ? u.layout.tabs : [], _ = u.layout.kind === "accordion" ? u.layout.sections : [], v = L(u.layout), y = /* @__PURE__ */ new Map();
-	for (let e of I(u.layout)) "id" in e && y.set(e.id, e);
-	let b = () => ye(l, u.layout, d, f, p), x = be({
-		form: l,
+	}), s = be(e.layout, o.fields, o.reports, o.explanations), c = 0, l = 0, u = new Set(s.layout.kind === "accordion" ? s.layout.sections.filter((e) => e.defaultOpen).map((e) => e.id) : []), d = /* @__PURE__ */ new Set(), f = s.layout.kind === "wizard" ? s.layout.steps : [], p = s.layout.kind === "tabs" ? s.layout.tabs : [], m = s.layout.kind === "accordion" ? s.layout.sections : [], h = I(s.layout), g = /* @__PURE__ */ new Map();
+	for (let e of F(s.layout)) "id" in e && g.set(e.id, e);
+	let _ = () => Ee(o, s.layout, c, l, u), v = De({
+		form: o,
 		presentationRegistry: r,
-		resolvedLayout: u,
-		getStepIndex: () => d,
-		getActiveTabIndex: () => f,
-		getOpenSectionIds: () => p
-	}), S = () => {
-		let e = x();
-		for (let t of m) t(e);
+		resolvedLayout: s,
+		getStepIndex: () => c,
+		getActiveTabIndex: () => l,
+		getOpenSectionIds: () => u
+	}), y = () => {
+		let e = v();
+		for (let t of d) t(e);
 	};
-	return l.subscribe(() => {
-		S();
+	return o.subscribe(() => {
+		y();
 	}), Object.freeze({
-		form: l,
+		form: o,
 		engineRegistry: n,
 		presentationRegistry: r,
-		primitiveRegistry: s,
-		designSystemRegistry: c,
+		primitiveRegistry: i,
+		designSystemRegistry: a,
 		get state() {
-			return b();
+			return _();
 		},
-		getSnapshot: x,
+		getSnapshot: v,
 		getNodeById(e) {
-			return y.get(e);
+			return g.get(e);
 		},
 		getField(e) {
-			return x().fields.find((t) => t.id === e);
+			return v().fields.find((t) => t.id === e);
 		},
 		getReport(e) {
-			return x().reports.find((t) => t.id === e);
+			return v().reports.find((t) => t.id === e);
 		},
 		getExplanation(e) {
-			return x().explanations.find((t) => t.id === e);
+			return v().explanations.find((t) => t.id === e);
 		},
 		getVisibleFields() {
-			return x().fields.filter((e) => e.visibleInLayout && e.state.visible);
+			return v().fields.filter((e) => e.visibleInLayout && e.state.visible);
 		},
 		getVisibleReports() {
-			return x().reports.filter((e) => e.visibleInLayout);
+			return v().reports.filter((e) => e.visibleInLayout);
 		},
 		getVisibleExplanations() {
-			return x().explanations.filter((e) => e.visibleInLayout);
+			return v().explanations.filter((e) => e.visibleInLayout);
 		},
 		getActiveLayoutNodes() {
-			return Se(u, d, f, p);
+			return ke(s, c, l, u);
 		},
 		getLayoutReferences() {
-			return v;
+			return h;
 		},
 		validate() {
-			return l.validate();
+			return o.validate();
 		},
 		submit(e) {
-			return l.submit(e);
+			return o.submit(e);
 		},
 		reset() {
-			l.reset();
+			o.reset();
 		},
 		subscribe(e) {
-			return m.add(e), () => {
-				m.delete(e);
+			return d.add(e), () => {
+				d.delete(e);
 			};
 		},
 		async nextStep() {
-			return u.layout.kind !== "wizard" || !await xe(l, u, d) ? !1 : (d < h.length - 1 && (d += 1, S()), !0);
+			return s.layout.kind !== "wizard" || !await Oe(o, s, c) ? !1 : (c < f.length - 1 && (c += 1, y()), !0);
 		},
 		prevStep() {
-			u.layout.kind === "wizard" && d > 0 && (--d, S());
+			s.layout.kind === "wizard" && c > 0 && (--c, y());
 		},
 		async goToStep(e) {
-			if (u.layout.kind !== "wizard") throw TypeError(D.nonWizardGoToStep);
-			let t = h.findIndex((t) => t.id === e);
-			if (t < 0) throw TypeError(D.unknownWizardStep(e));
-			if (t <= d) return d = t, S(), !0;
-			for (; d < t;) if (!await this.nextStep()) return !1;
+			if (s.layout.kind !== "wizard") throw TypeError(T.nonWizardGoToStep);
+			let t = f.findIndex((t) => t.id === e);
+			if (t < 0) throw TypeError(T.unknownWizardStep(e));
+			if (t <= c) return c = t, y(), !0;
+			for (; c < t;) if (!await this.nextStep()) return !1;
 			return !0;
 		},
 		setActiveTab(e) {
-			if (u.layout.kind !== "tabs") throw TypeError(D.nonTabsSetActiveTab);
-			let t = g.findIndex((t) => t.id === e);
-			if (t < 0) throw TypeError(D.unknownTab(e));
-			t !== f && (f = t, S());
+			if (s.layout.kind !== "tabs") throw TypeError(T.nonTabsSetActiveTab);
+			let t = p.findIndex((t) => t.id === e);
+			if (t < 0) throw TypeError(T.unknownTab(e));
+			t !== l && (l = t, y());
 		},
 		nextTab() {
-			return u.layout.kind !== "tabs" || f >= g.length - 1 ? !1 : (f += 1, S(), !0);
+			return s.layout.kind !== "tabs" || l >= p.length - 1 ? !1 : (l += 1, y(), !0);
 		},
 		prevTab() {
-			return u.layout.kind !== "tabs" || f <= 0 ? !1 : (--f, S(), !0);
+			return s.layout.kind !== "tabs" || l <= 0 ? !1 : (--l, y(), !0);
 		},
 		toggleSection(e) {
-			U(u, _, e), p.has(e) ? p.delete(e) : p.add(e), S();
+			H(s, m, e), u.has(e) ? u.delete(e) : u.add(e), y();
 		},
 		openSection(e) {
-			U(u, _, e), p.has(e) || (p.add(e), S());
+			H(s, m, e), u.has(e) || (u.add(e), y());
 		},
 		closeSection(e) {
-			U(u, _, e), p.delete(e) && S();
+			H(s, m, e), u.delete(e) && y();
 		},
 		openAllSections() {
-			W(u), p = new Set(_.map((e) => e.id)), S();
+			U(s), u = new Set(m.map((e) => e.id)), y();
 		},
 		closeAllSections() {
-			W(u), p = /* @__PURE__ */ new Set(), S();
+			U(s), u = /* @__PURE__ */ new Set(), y();
 		}
 	});
-}, K = Symbol("mlform.kit.accordion.mounted"), Ce = (e) => "view" in e, we = (e, t) => {
+}, G = Symbol("mlform.kit.accordion.mounted"), Ae = (e) => "view" in e, je = (e, t) => {
 	let r = e;
-	r[K]?.unmount();
-	let i = Ce(t) ? t.view : G({
+	r[G]?.unmount();
+	let i = Ae(t) ? t.view : W({
 		schema: t.schema,
 		transport: t.transport,
 		registry: t.registry,
@@ -914,29 +935,29 @@ var ie = (e, t, n) => ({
 		onListenerError: t.onListenerError,
 		layout: t.layout
 	});
-	if (i.getSnapshot().layout.kind !== "accordion") throw TypeError(D.accordionMissingLayout);
-	let a = T(t.labels), o = m(t.primitiveText), s = E(t.designSystem), c = document.createElement(O.accordion);
+	if (i.getSnapshot().layout.kind !== "accordion") throw TypeError(T.accordionMissingLayout);
+	let a = C(t.labels), o = u(t.primitiveText), s = w(t.designSystem), c = document.createElement(E.accordion);
 	c.view = i, c.registry = i.primitiveRegistry, c.primitiveText = o, c.submitLabel = a.submit, c.validatingLabel = a.validating, c.submittingLabel = a.submitting, e.replaceChildren(c);
 	let l = n(c, {
 		config: s,
 		registry: i.designSystemRegistry,
 		onChange: t.onDesignSystemChange
-	}), u = !1, d = Object.freeze({
+	}), d = !1, f = Object.freeze({
 		view: i,
 		form: i.form,
 		host: c,
 		designSystem: l,
 		unmount() {
-			u || (u = !0, r[K] === d && delete r[K], i.form.abortSubmit("unmount"), l.disconnect(), c.remove());
+			d || (d = !0, r[G] === f && delete r[G], i.form.abortSubmit("unmount"), l.disconnect(), c.remove());
 		}
 	});
-	return r[K] = d, d;
-}, q = Symbol("mlform.kit.mounted"), Te = (e) => {
-	if (!e.mode || !e.theme || !e.recipe) throw TypeError(D.invalidDesignSystemSnapshot);
-}, Ee = (e, t) => {
+	return r[G] = f, f;
+}, K = Symbol("mlform.kit.mounted"), Me = (e) => {
+	if (!e.mode || !e.theme || !e.recipe) throw TypeError(T.invalidDesignSystemSnapshot);
+}, Ne = (e, t) => {
 	let r = e;
-	r[q]?.unmount();
-	let i = G({
+	r[K]?.unmount();
+	let i = W({
 		schema: t.schema,
 		transport: t.transport,
 		registry: t.registry,
@@ -957,7 +978,7 @@ var ie = (e, t, n) => ({
 		primitiveText: t.primitiveText,
 		containerStrategy: t.containerStrategy,
 		onDesignSystemChange: t.onDesignSystemChange
-	}), a = T(t.labels), o = E(t.designSystem), s = y(e, i.form, {
+	}), a = C(t.labels), o = w(t.designSystem), s = v(e, i.form, {
 		registry: i.primitiveRegistry,
 		presentationRegistry: i.presentationRegistry,
 		layout: t.layout,
@@ -986,19 +1007,19 @@ var ie = (e, t, n) => ({
 			c.update(e);
 		},
 		replaceDesignSystem(e) {
-			Te(e), c.replace(e);
+			Me(e), c.replace(e);
 		},
 		resetDesignSystem() {
 			c.reset();
 		},
 		unmount() {
-			l || (l = !0, r[q] === u && delete r[q], i.form.abortSubmit("unmount"), c.disconnect(), s.unmount());
+			l || (l = !0, r[K] === u && delete r[K], i.form.abortSubmit("unmount"), c.disconnect(), s.unmount());
 		}
 	});
-	return r[q] = u, u;
-}, De = (e) => {
+	return r[K] = u, u;
+}, Pe = (e) => {
 	e.unmount();
-}, Oe = x`
+}, Fe = a`
   :host {
     display: block;
     flex: 1 1 auto;
@@ -1026,11 +1047,11 @@ var ie = (e, t, n) => ({
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
     box-shadow:
-      0 2px 4px var(--mlf-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
-      0 8px 16px var(--mlf-panel-shadow, rgba(0, 0, 0, 0.04));
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
   }
   .tablist {
     display: flex;
@@ -1038,8 +1059,11 @@ var ie = (e, t, n) => ({
     overflow-x: auto;
     padding: 0.85rem 1rem 0;
     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));
+      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)
+    );
     scrollbar-width: thin;
   }
   .tab {
@@ -1141,8 +1165,8 @@ var ie = (e, t, n) => ({
     gap: 0.75rem;
     padding: 0.85rem 1rem 1rem;
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
   }
   .nav {
     display: inline-flex;
@@ -1156,7 +1180,7 @@ var ie = (e, t, n) => ({
     padding: 0.5rem 1rem;
     border-radius: var(--mlf-input-radius, 12px);
     border: var(--mlf-border-width, 1px) solid var(--mlf-input-border, #e2e8f0);
-    background: #fff;
+    background: var(--mlf-input-bg, var(--mlf-color-surface-elevated, #ffffff));
     color: var(--mlf-color-text, #0f172a);
     font: inherit;
     font-size: 0.92rem;
@@ -1185,8 +1209,8 @@ var ie = (e, t, n) => ({
       justify-content: space-between;
     }
   }
-`, J = class extends b {
-	static styles = Oe;
+`, q = class extends c {
+	static styles = Fe;
 	#e;
 	get view() {
 		return this.#e;
@@ -1201,7 +1225,7 @@ var ie = (e, t, n) => ({
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = g;
+	#n = d;
 	get primitiveText() {
 		return this.#n;
 	}
@@ -1247,14 +1271,14 @@ var ie = (e, t, n) => ({
 	}
 	render() {
 		let e = this.snapshot, t = e?.tabs;
-		if (!e || !t || e.layout.kind !== "tabs") return l``;
+		if (!e || !t || e.layout.kind !== "tabs") return o``;
 		let n = e.layout.tabs[t.activeTabIndex];
-		if (!n) return l``;
+		if (!n) return o``;
 		let r = e.form.status, i = r === "validating" ? this.validatingLabel : r === "submitting" ? this.submittingLabel : this.submitLabel;
-		return l`
+		return o`
       <section class="root" part="tabs-panel">
         <div class="tablist" role="tablist" aria-label="Form sections">
-          ${h(e.layout.tabs, (e) => e.id, (e, n) => l`
+          ${m(e.layout.tabs, (e) => e.id, (e, n) => o`
               <button
                 type="button"
                 class="tab"
@@ -1275,16 +1299,16 @@ var ie = (e, t, n) => ({
           id=${`panel-${n.id}`}
           aria-labelledby=${`tab-${n.id}`}
         >
-          ${n.title || n.description ? l`
+          ${n.title || n.description ? o`
                 <header class="tab-header">
                   <h1 class="tab-title">${n.title}</h1>
-                  ${n.description ? l`<p class="tab-description">${n.description}</p>` : S}
+                  ${n.description ? o`<p class="tab-description">${n.description}</p>` : b}
                 </header>
-              ` : S}
+              ` : b}
 
           <div class="body">
             <div class="collection">
-              ${h(n.children, (e, t) => `${n.id}-${t}`, (t) => k({
+              ${m(n.children, (e, t) => `${n.id}-${t}`, (t) => O({
 			node: t,
 			snapshot: e,
 			registry: this.registry,
@@ -1332,16 +1356,20 @@ var ie = (e, t, n) => ({
     `;
 	}
 	#c = async () => {
-		await this.view?.submit();
+		if (this.view) try {
+			await this.view.submit();
+		} catch (e) {
+			if (!await D(this, this.view)) throw e;
+		}
 	};
 };
-u([f({ attribute: !1 })], J.prototype, "view", null), u([f({ attribute: !1 })], J.prototype, "registry", null), u([f({ attribute: !1 })], J.prototype, "primitiveText", null), u([f({ type: String })], J.prototype, "submitLabel", null), u([f({ type: String })], J.prototype, "validatingLabel", null), u([f({ type: String })], J.prototype, "submittingLabel", null), u([p()], J.prototype, "snapshot", null), J = u([c(O.tabs)], J);
+h([y({ attribute: !1 })], q.prototype, "view", null), h([y({ attribute: !1 })], q.prototype, "registry", null), h([y({ attribute: !1 })], q.prototype, "primitiveText", null), h([y({ type: String })], q.prototype, "submitLabel", null), h([y({ type: String })], q.prototype, "validatingLabel", null), h([y({ type: String })], q.prototype, "submittingLabel", null), h([s()], q.prototype, "snapshot", null), q = h([x(E.tabs)], q);
 //#endregion
 //#region src/kit/tabs.ts
-var Y = Symbol("mlform.kit.tabs.mounted"), ke = (e) => "view" in e, Ae = (e, t) => {
+var J = Symbol("mlform.kit.tabs.mounted"), Ie = (e) => "view" in e, Le = (e, t) => {
 	let r = e;
-	r[Y]?.unmount();
-	let i = ke(t) ? t.view : G({
+	r[J]?.unmount();
+	let i = Ie(t) ? t.view : W({
 		schema: t.schema,
 		transport: t.transport,
 		registry: t.registry,
@@ -1357,25 +1385,25 @@ var Y = Symbol("mlform.kit.tabs.mounted"), ke = (e) => "view" in e, Ae = (e, t)
 		onListenerError: t.onListenerError,
 		layout: t.layout
 	});
-	if (i.getSnapshot().layout.kind !== "tabs") throw TypeError(D.tabsMissingLayout);
-	let a = T(t.labels), o = m(t.primitiveText), s = E(t.designSystem), c = document.createElement(O.tabs);
+	if (i.getSnapshot().layout.kind !== "tabs") throw TypeError(T.tabsMissingLayout);
+	let a = C(t.labels), o = u(t.primitiveText), s = w(t.designSystem), c = document.createElement(E.tabs);
 	c.view = i, c.registry = i.primitiveRegistry, c.primitiveText = o, c.submitLabel = a.submit, c.validatingLabel = a.validating, c.submittingLabel = a.submitting, e.replaceChildren(c);
 	let l = n(c, {
 		config: s,
 		registry: i.designSystemRegistry,
 		onChange: t.onDesignSystemChange
-	}), u = !1, d = Object.freeze({
+	}), d = !1, f = Object.freeze({
 		view: i,
 		form: i.form,
 		host: c,
 		designSystem: l,
 		unmount() {
-			u || (u = !0, r[Y] === d && delete r[Y], i.form.abortSubmit("unmount"), l.disconnect(), c.remove());
+			d || (d = !0, r[J] === f && delete r[J], i.form.abortSubmit("unmount"), l.disconnect(), c.remove());
 		}
 	});
-	return r[Y] = d, d;
-}, X = class extends b {
-	static styles = x`
+	return r[J] = f, f;
+}, Y = class extends c {
+	static styles = a`
     :host {
       display: block;
       min-width: 0;
@@ -1475,7 +1503,7 @@ var Y = Symbol("mlform.kit.tabs.mounted"), ke = (e) => "view" in e, Ae = (e, t)
 	}
 	render() {
 		let e = this.total > 0 ? Math.round(this.current / this.total * 100) : 0;
-		return l`
+		return o`
       <div
         class="indicator"
         role="status"
@@ -1489,32 +1517,32 @@ var Y = Symbol("mlform.kit.tabs.mounted"), ke = (e) => "view" in e, Ae = (e, t)
           <div class="fill" style="width: ${e}%"></div>
         </div>
         <div class="dots" aria-hidden="true">
-          ${Array.from({ length: this.total }, (e, t) => l`<div class=${t + 1 < this.current ? "dot done" : t + 1 === this.current ? "dot active" : "dot"}></div>`)}
+          ${Array.from({ length: this.total }, (e, t) => o`<div class=${t + 1 < this.current ? "dot done" : t + 1 === this.current ? "dot active" : "dot"}></div>`)}
         </div>
       </div>
     `;
 	}
 };
-u([f({ type: Number })], X.prototype, "current", null), u([f({ type: Number })], X.prototype, "total", null), u([f({ type: String })], X.prototype, "label", null), X = u([c(O.stepIndicator)], X);
+h([y({ type: Number })], Y.prototype, "current", null), h([y({ type: Number })], Y.prototype, "total", null), h([y({ type: String })], Y.prototype, "label", null), Y = h([x(E.stepIndicator)], Y);
 //#endregion
 //#region src/kit/wizard-constants.ts
-var Z = {
+var X = {
 	prev: "Previous",
 	next: "Next",
 	submit: "Submit",
 	validating: "Validating...",
 	submitting: "Submitting..."
-}, je = Object.freeze({
+}, Re = Object.freeze({
 	stepLabel: (e, t) => `Step ${e} of ${t}`,
 	prevLabel: "Previous",
 	nextLabel: "Next",
 	submitLabel: "Submit",
 	validatingLabel: "Validating...",
 	submittingLabel: "Submitting..."
-}), Me = (e) => e ? Object.freeze({
-	...je,
+}), Z = (e) => e ? Object.freeze({
+	...Re,
 	...e
-}) : je, Ne = x`
+}) : Re, ze = a`
   :host {
     display: block;
     flex: 1 1 auto;
@@ -1549,11 +1577,11 @@ var Z = {
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
     box-shadow:
-      0 2px 4px var(--mlf-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
-      0 8px 16px var(--mlf-panel-shadow, rgba(0, 0, 0, 0.04));
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
   }
   .pane-header {
     flex: 0 0 auto;
@@ -1561,10 +1589,13 @@ var Z = {
     gap: 0.85rem;
     padding: 1rem 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));
+      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));
   }
   .step-title {
     margin: 0;
@@ -1626,8 +1657,8 @@ var Z = {
     gap: 1rem;
     padding: 0.75rem 1.5rem;
     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));
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
   }
   .btn {
     display: inline-flex;
@@ -1671,8 +1702,8 @@ var Z = {
       grid-template-columns: minmax(0, 1fr);
     }
   }
-`, Q = class extends b {
-	static styles = Ne;
+`, Q = class extends c {
+	static styles = ze;
 	#e;
 	get view() {
 		return this.#e;
@@ -1687,21 +1718,21 @@ var Z = {
 	set registry(e) {
 		this.#t = e;
 	}
-	#n = g;
+	#n = d;
 	get primitiveText() {
 		return this.#n;
 	}
 	set primitiveText(e) {
 		this.#n = e;
 	}
-	#r = Z;
+	#r = X;
 	get labels() {
 		return this.#r;
 	}
 	set labels(e) {
 		this.#r = e;
 	}
-	#i = Me();
+	#i = Z();
 	get text() {
 		return this.#i;
 	}
@@ -1726,11 +1757,11 @@ var Z = {
 	}
 	render() {
 		let e = this.snapshot, t = e?.wizard;
-		if (!e || !t || e.layout.kind !== "wizard") return l``;
+		if (!e || !t || e.layout.kind !== "wizard") return o``;
 		let n = e.layout.steps[t.stepIndex];
-		if (!n) return l``;
+		if (!n) return o``;
 		let r = e.form.status, i = r === "validating" || r === "submitting", a = t.isLastStep ? r === "validating" ? this.labels.validating : r === "submitting" ? this.labels.submitting : this.labels.submit : this.labels.next;
-		return l`
+		return o`
       <div class="root">
         <section class="panel" part="wizard-panel">
           <header class="pane-header">
@@ -1740,12 +1771,12 @@ var Z = {
               .label=${this.text.stepLabel(t.stepIndex + 1, t.stepCount).split(" ")[0] ?? "Step"}
             ></mlf-kit-step-indicator>
             <h1 class="step-title">${n.title}</h1>
-            ${n.description ? l`<p class="step-description">${n.description}</p>` : S}
+            ${n.description ? o`<p class="step-description">${n.description}</p>` : b}
           </header>
 
           <div class="pane-body">
             <div class="collection">
-              ${h(n.children, (e, t) => `${n.id}-${t}`, (t) => k({
+              ${m(n.children, (e, t) => `${n.id}-${t}`, (t) => O({
 			node: t,
 			snapshot: e,
 			registry: this.registry,
@@ -1787,19 +1818,29 @@ var Z = {
 		this.view?.prevStep();
 	};
 	#c = async () => {
-		await this.view?.nextStep();
+		await this.view?.nextStep() === !1 && this.view && await D(this, this.view);
 	};
 	#l = async () => {
-		this.view && await this.view.nextStep() && await this.view.submit();
+		if (this.view) {
+			if (!await this.view.nextStep()) {
+				await D(this, this.view);
+				return;
+			}
+			try {
+				await this.view.submit();
+			} catch (e) {
+				if (!await D(this, this.view)) throw e;
+			}
+		}
 	};
 };
-u([f({ attribute: !1 })], Q.prototype, "view", null), u([f({ attribute: !1 })], Q.prototype, "registry", null), u([f({ attribute: !1 })], Q.prototype, "primitiveText", null), u([f({ attribute: !1 })], Q.prototype, "labels", null), u([f({ attribute: !1 })], Q.prototype, "text", null), u([p()], Q.prototype, "snapshot", null), Q = u([c(O.wizard)], Q);
+h([y({ attribute: !1 })], Q.prototype, "view", null), h([y({ attribute: !1 })], Q.prototype, "registry", null), h([y({ attribute: !1 })], Q.prototype, "primitiveText", null), h([y({ attribute: !1 })], Q.prototype, "labels", null), h([y({ attribute: !1 })], Q.prototype, "text", null), h([s()], Q.prototype, "snapshot", null), Q = h([x(E.wizard)], Q);
 //#endregion
 //#region src/kit/wizard.ts
-var $ = Symbol("mlform.kit.wizard.mounted"), Pe = (e) => "view" in e, Fe = (e, t) => {
+var $ = Symbol("mlform.kit.wizard.mounted"), Be = (e) => "view" in e, Ve = (e, t) => {
 	let r = e;
 	r[$]?.unmount();
-	let i = Pe(t) ? t.view : G({
+	let i = Be(t) ? t.view : W({
 		schema: t.schema,
 		transport: t.transport,
 		registry: t.registry,
@@ -1815,33 +1856,33 @@ var $ = Symbol("mlform.kit.wizard.mounted"), Pe = (e) => "view" in e, Fe = (e, t
 		onListenerError: t.onListenerError,
 		layout: t.layout
 	});
-	if (i.getSnapshot().layout.kind !== "wizard") throw TypeError(D.wizardMissingLayout);
-	let a = document.createElement(O.wizard), o = {
-		...Z,
+	if (i.getSnapshot().layout.kind !== "wizard") throw TypeError(T.wizardMissingLayout);
+	let a = document.createElement(E.wizard), o = {
+		...X,
 		...t.labels
-	}, s = Me({
+	}, s = Z({
 		...t.text,
 		prevLabel: o.prev,
 		nextLabel: o.next,
 		submitLabel: o.submit,
 		validatingLabel: o.validating,
 		submittingLabel: o.submitting
-	}), c = m(t.primitiveText), l = E(t.designSystem);
+	}), c = u(t.primitiveText), l = w(t.designSystem);
 	a.view = i, a.registry = i.primitiveRegistry, a.primitiveText = c, a.labels = o, a.text = s, e.replaceChildren(a);
-	let u = n(a, {
+	let d = n(a, {
 		config: l,
 		registry: i.designSystemRegistry,
 		onChange: t.onDesignSystemChange
-	}), d = !1, f = Object.freeze({
+	}), f = !1, p = Object.freeze({
 		view: i,
 		form: i.form,
 		host: a,
-		designSystem: u,
+		designSystem: d,
 		unmount() {
-			d || (d = !0, r[$] === f && delete r[$], i.form.abortSubmit("unmount"), u.disconnect(), a.remove());
+			f || (f = !0, r[$] === p && delete r[$], i.form.abortSubmit("unmount"), d.disconnect(), a.remove());
 		}
 	});
-	return r[$] = f, f;
+	return r[$] = p, p;
 };
 //#endregion
-export { we as a, I as c, C as d, De as i, F as l, Ae as n, G as o, Ee as r, L as s, Fe as t, w as u };
+export { je as a, F as c, S as d, Pe as i, P as l, Le as n, W as o, Ne as r, I as s, Ve as t, ne as u };