mlform 0.1.2 → 0.1.4

package/dist/design-system-CrrSGfFB.js

@@ -0,0 +1,1352 @@
+//#region src/design-system/contract/component-keys.ts
+var e = [
+	"shell",
+	"hero",
+	"field",
+	"report",
+	"input",
+	"submit",
+	"error",
+	"toggle",
+	"status",
+	"chart"
+], t = {
+	shell: { tokens: {
+		"--mlf-shell-color": "var(--mlf-color-text)",
+		"--mlf-shell-bg": "transparent",
+		"--mlf-shell-overlay": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 0%, transparent), var(--mlf-color-overlay) 50%)",
+		"--mlf-shell-panel-bg": "var(--mlf-color-surface)",
+		"--mlf-shell-panel-border": "var(--mlf-color-border)",
+		"--mlf-shell-panel-shadow-soft": "var(--mlf-shadow-sm)",
+		"--mlf-shell-panel-shadow": "var(--mlf-shadow-md)",
+		"--mlf-shell-header-bg": "color-mix(in srgb, var(--mlf-color-surface) 76%, transparent)",
+		"--mlf-shell-header-blur": "3px",
+		"--mlf-shell-action-bg": "var(--mlf-color-surface-muted)",
+		"--mlf-shell-left-min-width": "22rem",
+		"--mlf-shell-left-max-width": "48rem",
+		"--mlf-shell-right-min-width": "24rem"
+	} },
+	hero: { tokens: {
+		"--mlf-hero-bg": "radial-gradient(circle at top left, var(--mlf-color-accent-soft), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--mlf-color-surface) 95%, transparent), color-mix(in srgb, var(--mlf-color-surface) 95%, var(--mlf-color-surface-muted)))",
+		"--mlf-hero-border": "color-mix(in srgb, var(--mlf-color-border) 90%, var(--mlf-color-surface))",
+		"--mlf-hero-shadow": "var(--mlf-shadow-lg)",
+		"--mlf-hero-radius": "var(--mlf-radius-xl)",
+		"--mlf-hero-eyebrow-color": "var(--mlf-color-text-muted)",
+		"--mlf-hero-status-bg": "var(--mlf-color-accent-soft)"
+	} },
+	field: { tokens: {
+		"--mlf-field-bg": "radial-gradient(circle at top left, color-mix(in srgb, var(--mlf-color-accent) 8%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 96%, transparent), color-mix(in srgb, var(--mlf-color-surface) 98%, var(--mlf-color-surface-muted)))",
+		"--mlf-field-border": "var(--mlf-color-border)",
+		"--mlf-field-border-invalid": "color-mix(in srgb, var(--mlf-color-danger) 34%, transparent)",
+		"--mlf-field-shadow": "var(--mlf-shadow-md)",
+		"--mlf-field-radius": "var(--mlf-radius-lg)",
+		"--mlf-field-label-color": "var(--mlf-color-text)",
+		"--mlf-field-description-color": "var(--mlf-color-text-muted)",
+		"--mlf-field-meta-bg": "var(--mlf-color-accent-soft)",
+		"--mlf-field-meta-color": "var(--mlf-color-text-muted)",
+		"--mlf-field-error-bg": "var(--mlf-color-danger-soft)",
+		"--mlf-field-error-color": "var(--mlf-color-danger)"
+	} },
+	report: { tokens: {
+		"--mlf-report-bg": "radial-gradient(circle at top right, color-mix(in srgb, var(--mlf-color-accent) 10%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 96%, transparent), color-mix(in srgb, var(--mlf-color-surface) 98%, var(--mlf-color-surface-muted)))",
+		"--mlf-report-border": "var(--mlf-color-border)",
+		"--mlf-report-shadow": "var(--mlf-shadow-md)",
+		"--mlf-report-radius": "var(--mlf-radius-lg)",
+		"--mlf-report-label-color": "var(--mlf-color-text)",
+		"--mlf-report-description-color": "var(--mlf-color-text-muted)",
+		"--mlf-report-meta-bg": "var(--mlf-color-accent-soft)",
+		"--mlf-report-meta-color": "var(--mlf-color-text-muted)",
+		"--mlf-report-empty-bg": "color-mix(in srgb, var(--mlf-color-accent) 6%, transparent)",
+		"--mlf-report-empty-color": "var(--mlf-color-text-muted)",
+		"--mlf-report-hero-bg": "linear-gradient(135deg, color-mix(in srgb, var(--mlf-color-accent) 12%, transparent), color-mix(in srgb, var(--mlf-color-accent) 6%, transparent))",
+		"--mlf-report-error-bg": "var(--mlf-color-danger-soft)",
+		"--mlf-report-error-color": "var(--mlf-color-danger)"
+	} },
+	input: { tokens: {
+		"--mlf-input-bg": "var(--mlf-color-surface-elevated)",
+		"--mlf-input-bg-disabled": "var(--mlf-color-surface-muted)",
+		"--mlf-input-border": "var(--mlf-color-border)",
+		"--mlf-input-border-focus": "var(--mlf-color-accent)",
+		"--mlf-input-text": "var(--mlf-color-text)",
+		"--mlf-input-placeholder": "var(--mlf-color-text-muted)",
+		"--mlf-input-radius": "var(--mlf-radius-md)",
+		"--mlf-input-shadow-focus": "0 0 0 var(--mlf-ring-width) var(--mlf-color-focus-ring)"
+	} },
+	submit: { tokens: {
+		"--mlf-submit-bg": "linear-gradient(135deg, var(--mlf-color-accent), color-mix(in srgb, var(--mlf-color-accent) 70%, #0f8cff))",
+		"--mlf-submit-bg-hover": "linear-gradient(135deg, var(--mlf-color-accent-hover), color-mix(in srgb, var(--mlf-color-accent-hover) 75%, #0f8cff))",
+		"--mlf-submit-color": "var(--mlf-color-text-inverse)",
+		"--mlf-submit-shadow": "0 18px 32px color-mix(in srgb, var(--mlf-color-accent) 28%, transparent)",
+		"--mlf-submit-shadow-hover": "0 24px 36px color-mix(in srgb, var(--mlf-color-accent) 34%, transparent)",
+		"--mlf-submit-radius": "var(--mlf-radius-md)",
+		"--mlf-submit-focus-ring": "0 0 0 var(--mlf-ring-width) color-mix(in srgb, var(--mlf-color-accent) 18%, transparent)"
+	} },
+	error: { tokens: {
+		"--mlf-error-bg": "radial-gradient(circle at top left, color-mix(in srgb, var(--mlf-color-danger) 14%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 94%, transparent), color-mix(in srgb, var(--mlf-color-surface) 88%, transparent))",
+		"--mlf-error-border": "color-mix(in srgb, var(--mlf-color-danger) 20%, transparent)",
+		"--mlf-error-color": "var(--mlf-color-danger)"
+	} },
+	toggle: { tokens: {
+		"--mlf-toggle-bg": "var(--mlf-input-bg)",
+		"--mlf-toggle-border": "var(--mlf-input-border)",
+		"--mlf-toggle-text": "var(--mlf-color-text)",
+		"--mlf-toggle-accent": "var(--mlf-color-accent)"
+	} },
+	status: { tokens: {
+		"--mlf-status-bg": "var(--mlf-color-accent-soft)",
+		"--mlf-status-color": "var(--mlf-color-text-muted)"
+	} },
+	chart: { tokens: {
+		"--mlf-chart-track-bg": "var(--mlf-color-chart-track)",
+		"--mlf-chart-fill-bg": "linear-gradient(90deg, var(--mlf-color-accent), color-mix(in srgb, var(--mlf-color-accent) 72%, #0f8cff))"
+	} }
+}, n = {
+	"--mlf-color-bg": "#f6f3ee",
+	"--mlf-color-surface": "#fffdf9",
+	"--mlf-color-surface-muted": "#f1ece4",
+	"--mlf-color-surface-elevated": "#ffffff",
+	"--mlf-color-text": "#1f2933",
+	"--mlf-color-text-muted": "#5b6673",
+	"--mlf-color-text-inverse": "#ffffff",
+	"--mlf-color-border": "#ddd4c7",
+	"--mlf-color-border-strong": "#c6baa9",
+	"--mlf-color-accent": "#145c9e",
+	"--mlf-color-accent-hover": "#0f4d84",
+	"--mlf-color-accent-soft": "rgba(20, 92, 158, 0.12)",
+	"--mlf-color-success": "#1f8a5b",
+	"--mlf-color-warning": "#c17c1f",
+	"--mlf-color-danger": "#be3a34",
+	"--mlf-color-danger-soft": "rgba(190, 58, 52, 0.12)",
+	"--mlf-color-focus-ring": "rgba(20, 92, 158, 0.24)",
+	"--mlf-color-overlay": "rgba(255, 253, 249, 0.82)",
+	"--mlf-color-hover-surface": "#ebe2d4",
+	"--mlf-color-chart-track": "rgba(96, 120, 168, 0.12)"
+}, r = {
+	"--mlf-font-family-body": "\"Iowan Old Style\", \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Times New Roman\", serif",
+	"--mlf-font-family-heading": "\"Iowan Old Style\", \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Times New Roman\", serif",
+	"--mlf-font-family-ui": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+	"--mlf-font-family-mono": "ui-monospace, \"SFMono-Regular\", \"SF Mono\", Consolas, \"Liberation Mono\", monospace",
+	"--mlf-font-size-xs": "0.72rem",
+	"--mlf-font-size-sm": "0.84rem",
+	"--mlf-font-size-md": "1rem",
+	"--mlf-font-size-lg": "1.125rem",
+	"--mlf-font-size-xl": "1.55rem",
+	"--mlf-font-size-2xl": "2.15rem",
+	"--mlf-line-height-tight": "1.12",
+	"--mlf-line-height-normal": "1.5",
+	"--mlf-space-1": "0.25rem",
+	"--mlf-space-2": "0.5rem",
+	"--mlf-space-3": "0.75rem",
+	"--mlf-space-4": "1rem",
+	"--mlf-space-5": "1.25rem",
+	"--mlf-space-6": "1.5rem",
+	"--mlf-space-7": "2rem",
+	"--mlf-space-8": "3rem",
+	"--mlf-radius-sm": "12px",
+	"--mlf-radius-md": "16px",
+	"--mlf-radius-lg": "22px",
+	"--mlf-radius-xl": "28px",
+	"--mlf-radius-pill": "999px",
+	"--mlf-border-width": "1px",
+	"--mlf-ring-width": "4px",
+	"--mlf-shadow-sm": "0 1px 3px rgba(17, 24, 39, 0.08)",
+	"--mlf-shadow-md": "0 14px 30px rgba(17, 24, 39, 0.08)",
+	"--mlf-shadow-lg": "0 24px 60px rgba(17, 24, 39, 0.12)",
+	"--mlf-motion-fast": "140ms ease",
+	"--mlf-motion-base": "180ms ease",
+	"--mlf-motion-slow": "260ms ease",
+	"--mlf-transition-duration": "200ms",
+	"--mlf-transition-easing": "ease-in-out",
+	"--mlf-layout-gap": "1rem",
+	"--mlf-section-gap": "1rem",
+	"--mlf-pane-gap": "1rem",
+	"--mlf-shell-gap": "1.2rem",
+	"--mlf-control-height": "3rem",
+	"--mlf-control-padding-inline": "0.92rem",
+	"--mlf-control-padding-block": "0.78rem",
+	"--mlf-pane-min-width": "20rem",
+	...n
+}, i = /* @__PURE__ */ "--mlf-font-family-body.--mlf-font-family-heading.--mlf-font-family-ui.--mlf-font-family-mono.--mlf-font-size-xs.--mlf-font-size-sm.--mlf-font-size-md.--mlf-font-size-lg.--mlf-font-size-xl.--mlf-font-size-2xl.--mlf-line-height-tight.--mlf-line-height-normal.--mlf-space-1.--mlf-space-2.--mlf-space-3.--mlf-space-4.--mlf-space-5.--mlf-space-6.--mlf-space-7.--mlf-space-8.--mlf-radius-sm.--mlf-radius-md.--mlf-radius-lg.--mlf-radius-xl.--mlf-radius-pill.--mlf-border-width.--mlf-ring-width.--mlf-shadow-sm.--mlf-shadow-md.--mlf-shadow-lg.--mlf-motion-fast.--mlf-motion-base.--mlf-motion-slow.--mlf-transition-duration.--mlf-transition-easing.--mlf-layout-gap.--mlf-section-gap.--mlf-pane-gap.--mlf-shell-gap.--mlf-control-height.--mlf-control-padding-inline.--mlf-control-padding-block.--mlf-pane-min-width.--mlf-color-bg.--mlf-color-surface.--mlf-color-surface-muted.--mlf-color-surface-elevated.--mlf-color-text.--mlf-color-text-muted.--mlf-color-text-inverse.--mlf-color-border.--mlf-color-border-strong.--mlf-color-accent.--mlf-color-accent-hover.--mlf-color-accent-soft.--mlf-color-success.--mlf-color-warning.--mlf-color-danger.--mlf-color-danger-soft.--mlf-color-focus-ring.--mlf-color-overlay.--mlf-color-hover-surface.--mlf-color-chart-track.--mlf-shell-color.--mlf-shell-bg.--mlf-shell-overlay.--mlf-shell-panel-bg.--mlf-shell-panel-border.--mlf-shell-panel-shadow-soft.--mlf-shell-panel-shadow.--mlf-shell-header-bg.--mlf-shell-header-blur.--mlf-shell-action-bg.--mlf-shell-left-min-width.--mlf-shell-left-max-width.--mlf-shell-right-min-width.--mlf-hero-bg.--mlf-hero-border.--mlf-hero-shadow.--mlf-hero-radius.--mlf-hero-eyebrow-color.--mlf-hero-status-bg.--mlf-field-bg.--mlf-field-border.--mlf-field-border-invalid.--mlf-field-shadow.--mlf-field-radius.--mlf-field-label-color.--mlf-field-description-color.--mlf-field-meta-bg.--mlf-field-meta-color.--mlf-field-error-bg.--mlf-field-error-color.--mlf-report-bg.--mlf-report-border.--mlf-report-shadow.--mlf-report-radius.--mlf-report-label-color.--mlf-report-description-color.--mlf-report-meta-bg.--mlf-report-meta-color.--mlf-report-empty-bg.--mlf-report-empty-color.--mlf-report-hero-bg.--mlf-report-error-bg.--mlf-report-error-color.--mlf-input-bg.--mlf-input-bg-disabled.--mlf-input-border.--mlf-input-border-focus.--mlf-input-text.--mlf-input-placeholder.--mlf-input-radius.--mlf-input-shadow-focus.--mlf-submit-bg.--mlf-submit-bg-hover.--mlf-submit-color.--mlf-submit-shadow.--mlf-submit-shadow-hover.--mlf-submit-radius.--mlf-submit-focus-ring.--mlf-error-bg.--mlf-error-border.--mlf-error-color.--mlf-toggle-bg.--mlf-toggle-border.--mlf-toggle-text.--mlf-toggle-accent.--mlf-status-bg.--mlf-status-color.--mlf-chart-track-bg.--mlf-chart-fill-bg".split("."), a = {
+	id: "contrast",
+	label: "Contrast",
+	density: "spacious",
+	motion: "standard",
+	tokens: {
+		"--mlf-border-width": "1.5px",
+		"--mlf-color-border-strong": "var(--mlf-color-text)"
+	},
+	components: {
+		field: { tokens: { "--mlf-field-border": "var(--mlf-color-border-strong)" } },
+		report: { tokens: { "--mlf-report-border": "var(--mlf-color-border-strong)" } },
+		input: { tokens: { "--mlf-input-border": "var(--mlf-color-border-strong)" } },
+		submit: { tokens: { "--mlf-submit-radius": "var(--mlf-radius-sm)" } }
+	}
+}, o = {
+	id: "default",
+	label: "Default",
+	density: "comfortable",
+	motion: "subtle",
+	tokens: { "--mlf-shell-bg": "transparent" }
+}, s = {
+	id: "minimal",
+	label: "Minimal",
+	density: "compact",
+	motion: "none",
+	tokens: {
+		"--mlf-shadow-md": "none",
+		"--mlf-shadow-lg": "none"
+	},
+	components: {
+		hero: { tokens: {
+			"--mlf-hero-bg": "var(--mlf-color-surface)",
+			"--mlf-hero-shadow": "none"
+		} },
+		field: { tokens: {
+			"--mlf-field-bg": "var(--mlf-color-surface)",
+			"--mlf-field-shadow": "none"
+		} },
+		report: { tokens: {
+			"--mlf-report-bg": "var(--mlf-color-surface)",
+			"--mlf-report-shadow": "none"
+		} },
+		submit: { tokens: {
+			"--mlf-submit-shadow": "none",
+			"--mlf-submit-shadow-hover": "none"
+		} }
+	}
+}, c = {
+	id: "soft",
+	label: "Soft",
+	density: "comfortable",
+	motion: "subtle",
+	components: {
+		hero: { tokens: { "--mlf-hero-bg": "radial-gradient(circle at top left, color-mix(in srgb, var(--mlf-color-accent) 10%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 92%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 88%, var(--mlf-color-surface-elevated)))" } },
+		field: { tokens: { "--mlf-field-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 96%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 94%, var(--mlf-color-surface-elevated)))" } },
+		report: { tokens: { "--mlf-report-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 95%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 92%, var(--mlf-color-surface-elevated)))" } }
+	}
+}, l = {
+	id: "cobalt",
+	label: "Cobalt",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-color-bg": "#eef4fb",
+				"--mlf-color-surface": "#ffffff",
+				"--mlf-color-surface-muted": "#e5eef8",
+				"--mlf-color-surface-elevated": "#ffffff",
+				"--mlf-color-text": "#11243a",
+				"--mlf-color-text-muted": "#49627d",
+				"--mlf-color-border": "#c6d7ea",
+				"--mlf-color-border-strong": "#afc6dd",
+				"--mlf-color-accent": "#1f5eff",
+				"--mlf-color-accent-hover": "#174fdc",
+				"--mlf-color-accent-soft": "rgba(31, 94, 255, 0.12)",
+				"--mlf-color-success": "#198754",
+				"--mlf-color-warning": "#d4861b",
+				"--mlf-color-danger": "#d64545",
+				"--mlf-color-danger-soft": "rgba(214, 69, 69, 0.12)",
+				"--mlf-color-focus-ring": "rgba(31, 94, 255, 0.24)",
+				"--mlf-color-overlay": "rgba(255, 255, 255, 0.78)",
+				"--mlf-color-hover-surface": "#d8e5f6",
+				"--mlf-color-chart-track": "rgba(17, 36, 58, 0.12)"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+				"--mlf-color-bg": "#0d1524",
+				"--mlf-color-surface": "#111c30",
+				"--mlf-color-surface-muted": "#16233b",
+				"--mlf-color-surface-elevated": "#1a2944",
+				"--mlf-color-text": "#edf4ff",
+				"--mlf-color-text-muted": "#a3b5cf",
+				"--mlf-color-border": "#243552",
+				"--mlf-color-border-strong": "#304465",
+				"--mlf-color-accent": "#68a0ff",
+				"--mlf-color-accent-hover": "#8ab7ff",
+				"--mlf-color-accent-soft": "rgba(104, 160, 255, 0.16)",
+				"--mlf-color-success": "#3ad38a",
+				"--mlf-color-warning": "#ffbb5d",
+				"--mlf-color-danger": "#ff7f86",
+				"--mlf-color-danger-soft": "rgba(255, 127, 134, 0.14)",
+				"--mlf-color-focus-ring": "rgba(104, 160, 255, 0.3)",
+				"--mlf-color-overlay": "rgba(13, 21, 36, 0.82)",
+				"--mlf-color-hover-surface": "#1f3151",
+				"--mlf-color-chart-track": "rgba(163, 181, 207, 0.18)"
+			}
+		}
+	}
+}, u = {
+	id: "graphite",
+	label: "Graphite",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-color-bg": "#f1f4f7",
+				"--mlf-color-surface": "#ffffff",
+				"--mlf-color-surface-muted": "#e6ebf1",
+				"--mlf-color-surface-elevated": "#ffffff",
+				"--mlf-color-text": "#202934",
+				"--mlf-color-text-muted": "#5d6977",
+				"--mlf-color-border": "#cfd7e1",
+				"--mlf-color-border-strong": "#bbc6d3",
+				"--mlf-color-accent": "#375a7f",
+				"--mlf-color-accent-hover": "#27445f",
+				"--mlf-color-accent-soft": "rgba(55, 90, 127, 0.12)",
+				"--mlf-color-success": "#1f8a5b",
+				"--mlf-color-warning": "#c17c1f",
+				"--mlf-color-danger": "#be3a34",
+				"--mlf-color-danger-soft": "rgba(190, 58, 52, 0.12)",
+				"--mlf-color-focus-ring": "rgba(55, 90, 127, 0.24)",
+				"--mlf-color-overlay": "rgba(255, 255, 255, 0.78)",
+				"--mlf-color-hover-surface": "#dbe2ea",
+				"--mlf-color-chart-track": "rgba(32, 41, 52, 0.12)"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+				"--mlf-color-bg": "#0f1318",
+				"--mlf-color-surface": "#171c22",
+				"--mlf-color-surface-muted": "#202731",
+				"--mlf-color-surface-elevated": "#24303d",
+				"--mlf-color-text": "#ebf1f7",
+				"--mlf-color-text-muted": "#9ca8b5",
+				"--mlf-color-border": "#2c3642",
+				"--mlf-color-border-strong": "#3b4754",
+				"--mlf-color-accent": "#4ea1ff",
+				"--mlf-color-accent-hover": "#82bbff",
+				"--mlf-color-accent-soft": "rgba(78, 161, 255, 0.18)",
+				"--mlf-color-success": "#37c78b",
+				"--mlf-color-warning": "#ffb454",
+				"--mlf-color-danger": "#ff6a61",
+				"--mlf-color-danger-soft": "rgba(255, 106, 97, 0.14)",
+				"--mlf-color-focus-ring": "rgba(78, 161, 255, 0.34)",
+				"--mlf-color-overlay": "rgba(23, 28, 34, 0.84)",
+				"--mlf-color-hover-surface": "#24303d",
+				"--mlf-color-chart-track": "rgba(156, 168, 181, 0.18)"
+			}
+		}
+	}
+}, d = {
+	id: "neutral",
+	label: "Neutral",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: n
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+				"--mlf-color-bg": "#12161c",
+				"--mlf-color-surface": "#181d24",
+				"--mlf-color-surface-muted": "#212832",
+				"--mlf-color-surface-elevated": "#202731",
+				"--mlf-color-text": "#ebf1f7",
+				"--mlf-color-text-muted": "#a5b1bd",
+				"--mlf-color-border": "#313a47",
+				"--mlf-color-border-strong": "#414b58",
+				"--mlf-color-accent": "#71a7ff",
+				"--mlf-color-accent-hover": "#93bdff",
+				"--mlf-color-accent-soft": "rgba(113, 167, 255, 0.16)",
+				"--mlf-color-success": "#42c88e",
+				"--mlf-color-warning": "#ffbe5c",
+				"--mlf-color-danger": "#ff7a72",
+				"--mlf-color-danger-soft": "rgba(255, 122, 114, 0.14)",
+				"--mlf-color-focus-ring": "rgba(113, 167, 255, 0.3)",
+				"--mlf-color-overlay": "rgba(18, 22, 28, 0.84)",
+				"--mlf-color-hover-surface": "#2a3440",
+				"--mlf-color-chart-track": "rgba(165, 177, 189, 0.18)"
+			}
+		}
+	}
+}, f = {
+	id: "sage",
+	label: "Sage",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-color-bg": "#f2f6f1",
+				"--mlf-color-surface": "#fbfdfb",
+				"--mlf-color-surface-muted": "#e8efe6",
+				"--mlf-color-surface-elevated": "#ffffff",
+				"--mlf-color-text": "#203126",
+				"--mlf-color-text-muted": "#5e7264",
+				"--mlf-color-border": "#cfdbcf",
+				"--mlf-color-border-strong": "#bbccbc",
+				"--mlf-color-accent": "#2f7d57",
+				"--mlf-color-accent-hover": "#256847",
+				"--mlf-color-accent-soft": "rgba(47, 125, 87, 0.12)",
+				"--mlf-color-success": "#2d8a57",
+				"--mlf-color-warning": "#bd7d29",
+				"--mlf-color-danger": "#b94a48",
+				"--mlf-color-danger-soft": "rgba(185, 74, 72, 0.12)",
+				"--mlf-color-focus-ring": "rgba(47, 125, 87, 0.24)",
+				"--mlf-color-overlay": "rgba(251, 253, 251, 0.78)",
+				"--mlf-color-hover-surface": "#dde9db",
+				"--mlf-color-chart-track": "rgba(32, 49, 38, 0.12)"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+				"--mlf-color-bg": "#121a15",
+				"--mlf-color-surface": "#182119",
+				"--mlf-color-surface-muted": "#203024",
+				"--mlf-color-surface-elevated": "#24372a",
+				"--mlf-color-text": "#edf5ef",
+				"--mlf-color-text-muted": "#a8b9aa",
+				"--mlf-color-border": "#304234",
+				"--mlf-color-border-strong": "#3f5544",
+				"--mlf-color-accent": "#59b07d",
+				"--mlf-color-accent-hover": "#74c492",
+				"--mlf-color-accent-soft": "rgba(89, 176, 125, 0.16)",
+				"--mlf-color-success": "#67d595",
+				"--mlf-color-warning": "#efbb67",
+				"--mlf-color-danger": "#ff8e8a",
+				"--mlf-color-danger-soft": "rgba(255, 142, 138, 0.14)",
+				"--mlf-color-focus-ring": "rgba(89, 176, 125, 0.3)",
+				"--mlf-color-overlay": "rgba(18, 26, 21, 0.84)",
+				"--mlf-color-hover-surface": "#2a3d30",
+				"--mlf-color-chart-track": "rgba(168, 185, 170, 0.18)"
+			}
+		}
+	}
+}, p = {
+	id: "sunset",
+	label: "Sunset",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-color-bg": "#fff6f0",
+				"--mlf-color-surface": "#fffdfb",
+				"--mlf-color-surface-muted": "#ffe9dd",
+				"--mlf-color-surface-elevated": "#ffffff",
+				"--mlf-color-text": "#3b241d",
+				"--mlf-color-text-muted": "#7f5a50",
+				"--mlf-color-border": "#f0cdbb",
+				"--mlf-color-border-strong": "#e0b59f",
+				"--mlf-color-accent": "#d96a3a",
+				"--mlf-color-accent-hover": "#be5628",
+				"--mlf-color-accent-soft": "rgba(217, 106, 58, 0.14)",
+				"--mlf-color-success": "#2e8c63",
+				"--mlf-color-warning": "#d18a20",
+				"--mlf-color-danger": "#ca4a45",
+				"--mlf-color-danger-soft": "rgba(202, 74, 69, 0.12)",
+				"--mlf-color-focus-ring": "rgba(217, 106, 58, 0.24)",
+				"--mlf-color-overlay": "rgba(255, 253, 251, 0.8)",
+				"--mlf-color-hover-surface": "#ffdcca",
+				"--mlf-color-chart-track": "rgba(59, 36, 29, 0.12)"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+				"--mlf-color-bg": "#1e1512",
+				"--mlf-color-surface": "#261b18",
+				"--mlf-color-surface-muted": "#32231f",
+				"--mlf-color-surface-elevated": "#392925",
+				"--mlf-color-text": "#fff1ea",
+				"--mlf-color-text-muted": "#d3b0a3",
+				"--mlf-color-border": "#513830",
+				"--mlf-color-border-strong": "#68473d",
+				"--mlf-color-accent": "#ff986b",
+				"--mlf-color-accent-hover": "#ffb089",
+				"--mlf-color-accent-soft": "rgba(255, 152, 107, 0.16)",
+				"--mlf-color-success": "#57c694",
+				"--mlf-color-warning": "#ffc36d",
+				"--mlf-color-danger": "#ff8d86",
+				"--mlf-color-danger-soft": "rgba(255, 141, 134, 0.14)",
+				"--mlf-color-focus-ring": "rgba(255, 152, 107, 0.3)",
+				"--mlf-color-overlay": "rgba(30, 21, 18, 0.84)",
+				"--mlf-color-hover-surface": "#422d27",
+				"--mlf-color-chart-track": "rgba(211, 176, 163, 0.18)"
+			}
+		}
+	}
+}, m = (e) => {
+	if (typeof e == "object" && e && !Object.isFrozen(e)) {
+		Object.freeze(e);
+		for (let t of Object.values(e)) m(t);
+	}
+	return e;
+}, h = (e) => {
+	if (!e.id?.trim()) throw Error("[mlform] RecipeManifest missing or empty \"id\"");
+	if (!e.label?.trim()) throw Error(`[mlform] Recipe "${e.id}" missing or empty "label"`);
+	if (!e.density) throw Error(`[mlform] Recipe "${e.id}" missing "density"`);
+	if (!e.motion) throw Error(`[mlform] Recipe "${e.id}" missing "motion"`);
+	return m({
+		...e,
+		tokens: e.tokens ? { ...e.tokens } : void 0,
+		components: e.components ? Object.fromEntries(Object.entries(e.components).map(([e, t]) => [e, t && { tokens: { ...t.tokens } }])) : void 0
+	});
+}, g = (e) => {
+	if (!e.id?.trim()) throw Error("[mlform] ThemeManifest missing or empty \"id\"");
+	if (!e.label?.trim()) throw Error(`[mlform] Theme "${e.id}" missing or empty "label"`);
+	if (!e.schemes?.light?.tokens) throw Error(`[mlform] Theme "${e.id}" missing "schemes.light.tokens"`);
+	return m({
+		...e,
+		schemes: {
+			light: {
+				...e.schemes.light,
+				tokens: { ...e.schemes.light.tokens }
+			},
+			...e.schemes.dark ? { dark: {
+				...e.schemes.dark,
+				tokens: { ...e.schemes.dark.tokens }
+			} } : {}
+		},
+		variants: e.variants ? Object.fromEntries(Object.entries(e.variants).map(([e, t]) => [e, {
+			baseScheme: t.baseScheme,
+			tokens: { ...t.tokens }
+		}])) : void 0,
+		sharedTokens: e.sharedTokens ? { ...e.sharedTokens } : void 0
+	});
+}, _ = class e {
+	#e = /* @__PURE__ */ new Map();
+	#t = /* @__PURE__ */ new Map();
+	#n = /* @__PURE__ */ new Map();
+	#r = /* @__PURE__ */ new Set();
+	#i(e) {
+		for (let t of this.#r) t(e);
+	}
+	registerTheme(e) {
+		let t = g(e), n = this.#n.get(e.id);
+		if (n && n.size > 0) {
+			let r = { ...t.variants };
+			for (let [e, t] of n) r[e] = t;
+			t = m({
+				...t,
+				variants: r
+			}), this.#n.delete(e.id);
+		}
+		return this.#e.set(e.id, t), this.#i({
+			type: "theme-registered",
+			id: e.id
+		}), this;
+	}
+	registerVariant(e, t, n) {
+		let r = m({
+			baseScheme: n.baseScheme,
+			tokens: { ...n.tokens }
+		}), i = this.#e.get(e);
+		if (i) {
+			let n = {
+				...i.variants,
+				[t]: r
+			};
+			this.#e.set(e, m({
+				...i,
+				variants: n
+			})), this.#i({
+				type: "theme-registered",
+				id: e
+			});
+		} else this.#n.has(e) || this.#n.set(e, /* @__PURE__ */ new Map()), this.#n.get(e).set(t, r);
+		return this;
+	}
+	registerRecipe(e) {
+		return this.#t.set(e.id, h(e)), this.#i({
+			type: "recipe-registered",
+			id: e.id
+		}), this;
+	}
+	removeTheme(e) {
+		return this.#n.delete(e), this.#e.delete(e) && this.#i({
+			type: "theme-removed",
+			id: e
+		}), this;
+	}
+	removeRecipe(e) {
+		return this.#t.delete(e) && this.#i({
+			type: "recipe-removed",
+			id: e
+		}), this;
+	}
+	getTheme(e) {
+		return this.#e.get(e);
+	}
+	getRecipe(e) {
+		return this.#t.get(e);
+	}
+	listThemes() {
+		return [...this.#e.values()];
+	}
+	listRecipes() {
+		return [...this.#t.values()];
+	}
+	onChange(e) {
+		return this.#r.add(e), () => {
+			this.#r.delete(e);
+		};
+	}
+	clone() {
+		let t = new e();
+		for (let [e, n] of this.#e) t.#e.set(e, n);
+		for (let [e, n] of this.#t) t.#t.set(e, n);
+		for (let [e, n] of this.#n) t.#n.set(e, new Map(n));
+		return t;
+	}
+}, v = () => new _(), y = [
+	d,
+	l,
+	f,
+	p,
+	u
+], b = [
+	o,
+	s,
+	c,
+	a
+], x = () => {
+	let e = v();
+	for (let t of y) e.registerTheme(t);
+	for (let t of b) e.registerRecipe(t);
+	return e;
+}, S = x(), C = new Set(i), ee = (t) => {
+	for (let n of e) if (t.startsWith(`--mlf-${n}-`)) return n;
+	return null;
+}, te = (e) => {
+	for (let t of Object.keys(e)) {
+		if (!C.has(t)) throw Error(`[mlform] Unknown global token "${t}"`);
+		let e = ee(t);
+		if (e) throw Error(`[mlform] Token "${t}" belongs to component "${e}". Use defineComponentTokens("${e}", ...)`);
+	}
+	return { ...e };
+}, ne = (e, t) => {
+	for (let n of Object.keys(t)) {
+		if (!C.has(n)) throw Error(`[mlform] Unknown token "${n}" for component "${e}"`);
+		if (!n.startsWith(`--mlf-${e}-`)) throw Error(`[mlform] Token "${n}" does not belong to component "${e}"`);
+	}
+	return { tokens: { ...t } };
+}, w = new Set(i), T = /var\(\s*(--mlf-[a-z0-9-]+)\s*[,)]/g, E = (e, t, n) => {
+	if (n) for (let r of Object.keys(n)) !r.startsWith("--mlf-") || w.has(r) || e.push({
+		code: "unknown-token-key",
+		path: t,
+		value: r,
+		message: `[mlform] Unknown design-system token "${r}" at ${t}`
+	});
+}, D = (e, t, n, r) => {
+	if (r) for (let i of Object.keys(r)) !i.startsWith("--mlf-") || !w.has(i) || i.startsWith(`--mlf-${t}-`) || e.push({
+		code: "misplaced-component-token",
+		path: n,
+		value: i,
+		message: `[mlform] Token "${i}" does not belong to component "${t}" at ${n}`
+	});
+}, re = (e, t, n) => {
+	if (n) for (let [r, i] of Object.entries(n)) {
+		T.lastIndex = 0;
+		let n;
+		for (; (n = T.exec(i)) !== null;) {
+			let i = n[1];
+			!t.has(i) && w.has(i) && e.push({
+				code: "broken-token-reference",
+				path: r,
+				value: i,
+				message: `[mlform] Token "${r}" references "${i}" which is not present in the resolved token set`
+			});
+		}
+	}
+}, O = (e) => {
+	let t = /* @__PURE__ */ new Set();
+	return e.filter((e) => {
+		let n = [
+			e.code,
+			e.path ?? "",
+			e.value ?? "",
+			e.message
+		].join("|");
+		return t.has(n) ? !1 : (t.add(n), !0);
+	});
+}, k = (t, n, r, i) => {
+	let a = [];
+	typeof t.theme == "string" && !n.getTheme(t.theme) && a.push({
+		code: "unknown-theme-id",
+		path: "theme",
+		value: t.theme,
+		message: `[mlform] Unknown theme "${t.theme}". Falling back to "${r.id}"`
+	}), typeof t.recipe == "string" && !n.getRecipe(t.recipe) && a.push({
+		code: "unknown-recipe-id",
+		path: "recipe",
+		value: t.recipe,
+		message: `[mlform] Unknown recipe "${t.recipe}". Falling back to "${i.id}"`
+	}), E(a, `theme "${r.id}".sharedTokens`, r.sharedTokens), E(a, `theme "${r.id}".schemes.light.tokens`, r.schemes.light.tokens), E(a, `theme "${r.id}".schemes.dark.tokens`, r.schemes.dark?.tokens);
+	for (let [e, t] of Object.entries(r.variants ?? {})) E(a, `theme "${r.id}".variants.${e}.tokens`, t.tokens);
+	E(a, `recipe "${i.id}".tokens`, i.tokens);
+	for (let [e, t] of Object.entries(i.components ?? {})) E(a, `recipe "${i.id}".components.${e}.tokens`, t?.tokens), D(a, e, `recipe "${i.id}".components.${e}.tokens`, t?.tokens);
+	E(a, "overrides.tokens", t.overrides?.tokens);
+	for (let n of e) {
+		let e = t.overrides?.components?.[n];
+		E(a, `overrides.components.${n}.tokens`, e?.tokens), D(a, n, `overrides.components.${n}.tokens`, e?.tokens);
+	}
+	return O(a);
+}, ie = (e, t, n) => {
+	if (!e.variant) return [];
+	let r = t.variants?.[e.variant];
+	return r ? r.baseScheme === n ? [] : [{
+		code: "invalid-theme-variant",
+		path: "variant",
+		value: e.variant,
+		message: `[mlform] Theme variant "${e.variant}" targets "${r.baseScheme}" but effective scheme is "${n}". Variant was ignored.`
+	}] : [{
+		code: "invalid-theme-variant",
+		path: "variant",
+		value: e.variant,
+		message: `[mlform] Theme "${t.id}" does not define variant "${e.variant}"`
+	}];
+}, ae = (e) => {
+	let t = [];
+	return re(t, new Set(Object.keys(e)), e), O(t);
+}, A = (e, t) => {
+	if (t.length !== 0) {
+		for (let n of t) e.onWarning?.(n);
+		if (e.strict) throw Error(t.map((e) => e.message).join("\n"));
+	}
+}, j = "light", M = (e, t) => t === "light" || !!e.schemes.dark, oe = (e, t, n = {}) => {
+	let r = e.mode ?? "auto";
+	return r === "light" || r === "dark" ? r === "dark" && !t.schemes.dark ? {
+		requestedMode: r,
+		effectiveScheme: j,
+		effectiveModeSource: "theme-fallback"
+	} : {
+		requestedMode: r,
+		effectiveScheme: r,
+		effectiveModeSource: "explicit"
+	} : r === "auto" ? n.systemScheme && M(t, n.systemScheme) ? {
+		requestedMode: r,
+		effectiveScheme: n.systemScheme,
+		effectiveModeSource: "system"
+	} : {
+		requestedMode: r,
+		effectiveScheme: j,
+		effectiveModeSource: "theme-fallback"
+	} : n.inheritedScheme && M(t, n.inheritedScheme) ? {
+		requestedMode: r,
+		effectiveScheme: n.inheritedScheme,
+		effectiveModeSource: n.inheritedSource ?? "default"
+	} : {
+		requestedMode: r,
+		effectiveScheme: j,
+		effectiveModeSource: "theme-fallback"
+	};
+}, se = (e, t) => {
+	let n = e.recipe, r = t.getRecipe("default") ?? o;
+	return n && typeof n != "string" ? n : typeof n == "string" ? t.getRecipe(n) ?? r : r;
+}, ce = (e, t) => {
+	let n = e.theme, r = t.getTheme("neutral") ?? d;
+	return n && typeof n != "string" ? n : typeof n == "string" ? t.getTheme(n) ?? r : r;
+}, N = (t) => {
+	let n = {};
+	for (let r of e) {
+		let e = t[r]?.tokens;
+		e && Object.assign(n, e);
+	}
+	return n;
+}, le = {
+	...r,
+	...N(t)
+}, ue = {
+	"--mlf-border-width": "1.5px",
+	"--mlf-ring-width": "5px",
+	"--mlf-color-border": "var(--mlf-color-border-strong)"
+}, de = {
+	compact: {
+		"--mlf-shell-gap": "1rem",
+		"--mlf-layout-gap": "0.85rem",
+		"--mlf-section-gap": "0.85rem",
+		"--mlf-pane-gap": "0.85rem",
+		"--mlf-control-height": "2.625rem",
+		"--mlf-control-padding-inline": "0.8rem",
+		"--mlf-control-padding-block": "0.65rem",
+		"--mlf-pane-min-width": "18rem"
+	},
+	comfortable: {
+		"--mlf-shell-gap": "1.2rem",
+		"--mlf-layout-gap": "1rem",
+		"--mlf-section-gap": "1rem",
+		"--mlf-pane-gap": "1rem",
+		"--mlf-control-height": "3rem",
+		"--mlf-control-padding-inline": "0.92rem",
+		"--mlf-control-padding-block": "0.78rem",
+		"--mlf-pane-min-width": "20rem"
+	},
+	spacious: {
+		"--mlf-shell-gap": "1.4rem",
+		"--mlf-layout-gap": "1.2rem",
+		"--mlf-section-gap": "1.2rem",
+		"--mlf-pane-gap": "1.2rem",
+		"--mlf-control-height": "3.125rem",
+		"--mlf-control-padding-inline": "1rem",
+		"--mlf-control-padding-block": "0.9rem",
+		"--mlf-pane-min-width": "22rem"
+	}
+}, fe = {
+	"--mlf-color-bg": "Canvas",
+	"--mlf-color-surface": "Canvas",
+	"--mlf-color-surface-muted": "Canvas",
+	"--mlf-color-surface-elevated": "Canvas",
+	"--mlf-color-text": "CanvasText",
+	"--mlf-color-text-muted": "CanvasText",
+	"--mlf-color-text-inverse": "Canvas",
+	"--mlf-color-border": "ButtonBorder",
+	"--mlf-color-border-strong": "CanvasText",
+	"--mlf-color-accent": "LinkText",
+	"--mlf-color-accent-hover": "ActiveText",
+	"--mlf-color-accent-soft": "Highlight",
+	"--mlf-color-success": "CanvasText",
+	"--mlf-color-warning": "CanvasText",
+	"--mlf-color-danger": "CanvasText",
+	"--mlf-color-danger-soft": "Canvas",
+	"--mlf-color-focus-ring": "Highlight",
+	"--mlf-color-overlay": "Canvas",
+	"--mlf-color-hover-surface": "Highlight",
+	"--mlf-color-chart-track": "ButtonBorder",
+	"--mlf-border-width": "2px",
+	"--mlf-ring-width": "3px",
+	"--mlf-shadow-sm": "none",
+	"--mlf-shadow-md": "none",
+	"--mlf-shadow-lg": "none",
+	"--mlf-shell-overlay": "Canvas",
+	"--mlf-shell-header-bg": "Canvas",
+	"--mlf-hero-bg": "Canvas",
+	"--mlf-hero-border": "ButtonBorder",
+	"--mlf-hero-shadow": "none",
+	"--mlf-field-bg": "Canvas",
+	"--mlf-field-border-invalid": "CanvasText",
+	"--mlf-field-shadow": "none",
+	"--mlf-report-bg": "Canvas",
+	"--mlf-report-shadow": "none",
+	"--mlf-report-hero-bg": "Canvas",
+	"--mlf-input-shadow-focus": "0 0 0 var(--mlf-ring-width) Highlight",
+	"--mlf-submit-bg": "ButtonFace",
+	"--mlf-submit-bg-hover": "Highlight",
+	"--mlf-submit-color": "ButtonText",
+	"--mlf-submit-shadow": "none",
+	"--mlf-submit-shadow-hover": "none",
+	"--mlf-submit-focus-ring": "0 0 0 var(--mlf-ring-width) Highlight",
+	"--mlf-error-bg": "Canvas",
+	"--mlf-error-border": "CanvasText",
+	"--mlf-chart-fill-bg": "Highlight"
+}, pe = {
+	none: {
+		"--mlf-motion-fast": "0ms linear",
+		"--mlf-motion-base": "0ms linear",
+		"--mlf-motion-slow": "0ms linear",
+		"--mlf-transition-duration": "0ms",
+		"--mlf-transition-easing": "linear"
+	},
+	subtle: {
+		"--mlf-motion-fast": "120ms ease",
+		"--mlf-motion-base": "180ms ease",
+		"--mlf-motion-slow": "240ms ease",
+		"--mlf-transition-duration": "180ms",
+		"--mlf-transition-easing": "ease-in-out"
+	},
+	standard: {
+		"--mlf-motion-fast": "160ms ease",
+		"--mlf-motion-base": "220ms ease",
+		"--mlf-motion-slow": "300ms ease",
+		"--mlf-transition-duration": "250ms",
+		"--mlf-transition-easing": "ease-in-out"
+	}
+}, me = (e, t, n) => {
+	let r = t === "dark" ? e.schemes.dark?.tokens ?? e.schemes.light.tokens : e.schemes.light.tokens, i = n && e.variants?.[n]?.baseScheme === t ? e.variants[n].tokens : {};
+	return {
+		...e.sharedTokens,
+		...r,
+		...i
+	};
+}, he = e.map((e) => [`--mlf-${e}-`, e]), ge = (t) => {
+	let n = Object.fromEntries(e.map((e) => [e, {}]));
+	for (let [e, r] of Object.entries(t)) for (let [t, i] of he) if (e.startsWith(t)) {
+		n[i][e] = r;
+		break;
+	}
+	return Object.fromEntries(e.map((e) => [e, { tokens: n[e] }]));
+}, _e = (e, t, n, r, i, a, o, s = {}) => {
+	let c = e.overrides?.density ?? (s.prefersMoreContrast ? "spacious" : n.density), l = e.overrides?.motion ?? (s.prefersReducedMotion ? "none" : n.motion), u = {
+		...e.overrides?.tokens,
+		...N(e.overrides?.components ?? {})
+	}, d = (e.variant && t.variants?.[e.variant]?.baseScheme === r ? e.variant : null) ?? (s.prefersMoreContrast && t.variants?.[`high-contrast-${r}`] ? `high-contrast-${r}` : null), f = s.prefersMoreContrast ? ue : {}, p = s.forcedColors ? fe : {}, m = {
+		...le,
+		...de[c],
+		...pe[l],
+		...f,
+		...me(t, r, d),
+		...n.tokens,
+		...N(n.components ?? {}),
+		...e.overrides?.tokens,
+		...N(e.overrides?.components ?? {}),
+		...p
+	}, h = ge(m);
+	return {
+		requestedMode: i,
+		effectiveScheme: r,
+		effectiveModeSource: a,
+		themeId: t.id,
+		variant: d,
+		recipeId: n.id,
+		density: c,
+		motion: l,
+		tokens: m,
+		tokenOverrides: u,
+		components: h,
+		warnings: o
+	};
+}, ve = (e, t) => {
+	if (!e && !t) return;
+	let n = /* @__PURE__ */ new Map();
+	for (let r of [e?.components, t?.components]) if (r) for (let [e, t] of Object.entries(r)) t && n.set(e, { tokens: {
+		...n.get(e)?.tokens,
+		...t.tokens
+	} });
+	return {
+		density: t?.density ?? e?.density,
+		motion: t?.motion ?? e?.motion,
+		tokens: {
+			...e?.tokens,
+			...t?.tokens
+		},
+		components: n.size > 0 ? Object.fromEntries(n) : void 0
+	};
+}, P = (...e) => e.reduce((e, t) => ({
+	mode: t?.mode ?? e.mode,
+	theme: t?.theme ?? e.theme,
+	recipe: t?.recipe ?? e.recipe,
+	variant: t?.variant ?? e.variant,
+	hostSchemeResolver: t?.hostSchemeResolver ?? e.hostSchemeResolver,
+	strict: t?.strict ?? e.strict,
+	onWarning: t?.onWarning ?? e.onWarning,
+	overrides: ve(e.overrides, t?.overrides)
+}), {}), F = (e, t, n = "source-wins") => {
+	let r = new Map(t.map((e) => [e.from, e.to])), i = { ...e }, a = {};
+	for (let [o, s] of Object.entries(e)) {
+		let e = r.get(o) ?? o;
+		if (e in a) if (n === "source-wins") o !== e && (a[e] = s);
+		else if (n === "target-wins") o === e && (a[e] = s);
+		else {
+			let r = t.find((t) => t.to === e), o = r ? i[r.from] : void 0, c = i[e];
+			a[e] = o !== void 0 && c !== void 0 ? n(o, c, e) : n(a[e], s, e);
+		}
+		else a[e] = s;
+	}
+	return a;
+}, ye = (e, t) => {
+	let n = Object.fromEntries(Object.entries(e.schemes).map(([e, n]) => [e, n && {
+		...n,
+		tokens: F(n.tokens, t)
+	}]));
+	return {
+		...e,
+		schemes: n,
+		sharedTokens: e.sharedTokens ? F(e.sharedTokens, t) : void 0
+	};
+}, I = (e = {}, t = S, n = {}) => {
+	let r = ce(e, t), i = se(e, t), a = k(e, t, r, i);
+	A(e, a);
+	let o = oe(e, r, n), s = ie(e, r, o.effectiveScheme);
+	s.length > 0 && (a.push(...s), A(e, s));
+	let c = _e(e, r, i, o.effectiveScheme, o.requestedMode, o.effectiveModeSource, a, n), l = ae(c.tokens);
+	return l.length > 0 && (c.warnings.push(...l), A(e, l)), c;
+}, be = { change: "ml-design-system-change" }, L = {
+	prefersDarkScheme: "(prefers-color-scheme: dark)",
+	prefersReducedMotion: "(prefers-reduced-motion: reduce)",
+	prefersMoreContrast: "(prefers-contrast: more)",
+	forcedColors: "(forced-colors: active)"
+}, R = {
+	explicitScheme: "data-color-scheme",
+	inheritedScheme: "data-mlf-scheme",
+	effectiveScheme: "data-mlf-effective-scheme",
+	themeId: "data-mlf-theme-id",
+	variantId: "data-mlf-variant-id",
+	recipeId: "data-mlf-recipe-id",
+	density: "data-mlf-density",
+	motion: "data-mlf-motion",
+	signature: "data-mlf-signature",
+	style: "style",
+	class: "class"
+}, xe = [R.explicitScheme], Se = [
+	R.inheritedScheme,
+	R.effectiveScheme,
+	R.explicitScheme,
+	R.style,
+	R.class
+], Ce = (e) => {
+	let t = 2166136261;
+	for (let n = 0; n < e.length; n += 1) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
+	return (t >>> 0).toString(16).padStart(8, "0");
+}, z = (e) => `v1:${Ce([
+	e.effectiveScheme,
+	e.themeId,
+	e.variant ?? "",
+	e.recipeId,
+	e.density,
+	e.motion,
+	...Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`)
+].join("|"))}`, B = (e) => {
+	let t = {
+		[R.themeId]: e.themeId,
+		[R.recipeId]: e.recipeId,
+		[R.effectiveScheme]: e.effectiveScheme,
+		[R.inheritedScheme]: e.effectiveScheme,
+		[R.density]: e.density,
+		[R.motion]: e.motion,
+		[R.signature]: z(e)
+	};
+	return e.variant && (t[R.variantId] = e.variant), t;
+}, V = (e) => {
+	for (let t = 0; t < e.length; t += 1) if (e.charCodeAt(t) <= 31) return !0;
+	return !1;
+}, we = (e) => {
+	if (!e.trim()) throw Error("[mlform] createDesignSystemStylesheet requires a non-empty selector");
+	if (e.includes("{") || e.includes("}") || e.includes(";") || V(e)) throw Error("[mlform] createDesignSystemStylesheet selector contains unsafe characters");
+}, H = (e, t) => {
+	if (!e.startsWith("--")) throw Error(`[mlform] Invalid design-system token "${e}"`);
+	if (t.includes("{") || t.includes("}") || t.includes(";") || V(t)) throw Error(`[mlform] Token "${e}" contains unsafe stylesheet characters`);
+}, U = (e) => Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => (H(e, t), [e, t])), W = (e, t) => {
+	let n = /* @__PURE__ */ new Set();
+	for (let [r, i] of U(t)) e.setProperty(r, i), n.add(r);
+	return n;
+}, G = [
+	R.themeId,
+	R.variantId,
+	R.recipeId,
+	R.effectiveScheme,
+	R.inheritedScheme,
+	R.density,
+	R.motion,
+	R.signature
+], K = (e, t, n) => {
+	let r = B(t);
+	for (let t of G) {
+		let n = r[t];
+		n === void 0 ? e.removeAttribute(t) : e.setAttribute(t, n);
+	}
+	return n === "view-transition" && (e.style.viewTransitionName = "mlf-design-system"), e.style.colorScheme = t.effectiveScheme, W(e.style, t);
+}, Te = (e, t, n, r, i) => {
+	for (let n of t) {
+		let t = r.get(n) ?? null;
+		t === null ? e.style.removeProperty(n) : e.style.setProperty(n, t);
+	}
+	for (let t of G) {
+		let r = n.get(t) ?? null;
+		r === null ? e.removeAttribute(t) : e.setAttribute(t, r);
+	}
+	i === null ? e.style.removeProperty("color-scheme") : e.style.colorScheme = i, e.style.removeProperty("view-transition-name");
+}, q = (e) => e ? Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`).join(",") : "", Ee = (e) => {
+	let t = Object.entries(e.variants ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t.baseScheme}:${q(t.tokens)}`).join(";");
+	return [
+		e.id,
+		e.label,
+		e.schemes.light.colorScheme ?? "",
+		q(e.schemes.light.tokens),
+		e.schemes.dark?.colorScheme ?? "",
+		q(e.schemes.dark?.tokens),
+		q(e.sharedTokens),
+		t
+	].join("|");
+}, De = (e) => {
+	let t = Object.entries(e.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${q(t?.tokens)}`).join(";");
+	return [
+		e.id,
+		e.label,
+		e.density,
+		e.motion,
+		q(e.tokens),
+		t
+	].join("|");
+}, Oe = (e) => {
+	let t = typeof e.theme == "string" ? `ref:${e.theme}` : e.theme ? `inline:${Ee(e.theme)}` : "", n = typeof e.recipe == "string" ? `ref:${e.recipe}` : e.recipe ? `inline:${De(e.recipe)}` : "", r = e.overrides, i = q(r?.tokens), a = Object.entries(r?.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).filter(([, e]) => !!e?.tokens).map(([e, t]) => `${e}:${q(t.tokens)}`).join(";");
+	return `${e.mode ?? ""}|${t}|${n}|${e.variant ?? ""}|${e.strict ?? ""}|${r?.density ?? ""}|${r?.motion ?? ""}|${i}|${a}`;
+}, J = (e, t) => `${t.prefersDarkScheme}|${t.prefersReducedMotion}|${t.prefersMoreContrast}|${t.forcedColors}|${Oe(e)}`, Y = (e) => {
+	if (!e) return null;
+	let t = e.trim().toLowerCase();
+	return t === "light" || t === "dark" ? t : null;
+}, X = (e, t) => {
+	typeof e.addEventListener == "function" ? e.addEventListener("change", t) : e.addListener?.(t);
+}, Z = (e, t) => {
+	typeof e.removeEventListener == "function" ? e.removeEventListener("change", t) : e.removeListener?.(t);
+}, Q = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	#m;
+	#h;
+	#g = /* @__PURE__ */ new Set();
+	#_ = /* @__PURE__ */ new Map();
+	#v = /* @__PURE__ */ new Map();
+	#y;
+	#b = /* @__PURE__ */ new Set();
+	#x = !1;
+	#S = "";
+	#C = null;
+	#w = null;
+	#T = "";
+	#E = null;
+	constructor({ host: e, registry: t, getConfig: n, onChange: r, transition: i, hydrate: a }) {
+		this.#e = e, this.#t = t ?? S, this.#n = n, this.#r = r, this.#p = i ?? "none", this.#f = a ?? !1, this.#y = e.style.colorScheme || null;
+		let o = typeof window < "u" && typeof window.matchMedia == "function";
+		this.#i = o ? window.matchMedia(L.prefersDarkScheme) : null, this.#o = o ? window.matchMedia(L.prefersReducedMotion) : null, this.#c = o ? window.matchMedia(L.prefersMoreContrast) : null, this.#u = o ? window.matchMedia(L.forcedColors) : null, this.#a = () => this.refresh(), this.#s = () => this.refresh(), this.#l = () => this.refresh(), this.#d = () => this.refresh(), this.#m = typeof MutationObserver < "u" ? new MutationObserver(() => this.refresh()) : null, this.#h = this.#t.onChange(() => {
+			this.#S = "", this.#T = "", this.refresh();
+		});
+		for (let t of G) this.#_.set(t, e.getAttribute(t));
+	}
+	get resolved() {
+		return this.#E;
+	}
+	connect() {
+		this.#x || (this.#x = !0, this.#i && X(this.#i, this.#a), this.#o && X(this.#o, this.#s), this.#c && X(this.#c, this.#l), this.#u && X(this.#u, this.#d), this.#k(), !(this.#f && this.#P()) && this.refresh());
+	}
+	disconnect() {
+		this.#x && (this.#x = !1, this.#i && Z(this.#i, this.#a), this.#o && Z(this.#o, this.#s), this.#c && Z(this.#c, this.#l), this.#u && Z(this.#u, this.#d), this.#I(), this.#m?.disconnect(), this.#h?.(), this.#g.clear(), Te(this.#e, this.#b, this.#_, this.#v, this.#y), this.#b.clear(), this.#S = "", this.#T = "", this.#E = null);
+	}
+	refresh() {
+		if (!this.#x) return;
+		this.#k();
+		let e = this.#n(), t = this.#N(), n = J(e, t);
+		if (n === this.#T && (e.mode ?? "auto") !== "inherit") return;
+		let r = this.#O(), i = I(e, this.#t, {
+			inheritedScheme: r.scheme,
+			inheritedSource: r.source ?? void 0,
+			systemScheme: t.prefersDarkScheme ? "dark" : "light",
+			prefersReducedMotion: t.prefersReducedMotion,
+			prefersMoreContrast: t.prefersMoreContrast,
+			forcedColors: t.forcedColors
+		}), a = z(i);
+		if (this.#T = n, a === this.#S) return;
+		let o = this.#E;
+		this.#S = a, this.#E = i, this.#D(() => {
+			this.#j(i.tokens), this.#M(i.tokens), this.#b = K(this.#e, i, this.#p), this.#r?.(i), this.#e.dispatchEvent(new CustomEvent(be.change, {
+				detail: { designSystem: i },
+				bubbles: !0,
+				composed: !0
+			}));
+		}, i, o);
+	}
+	#D(e, t, n) {
+		this.#I();
+		let r = new AbortController();
+		if (this.#C = r, this.#p === "none") {
+			r.signal.aborted || e(), this.#C = null;
+			return;
+		}
+		if (this.#p === "view-transition") {
+			let t = this.#e.ownerDocument, n = () => {
+				r.signal.aborted || (e(), this.#C === r && (this.#C = null));
+			};
+			t && typeof t.startViewTransition == "function" ? t.startViewTransition(n) : n();
+			return;
+		}
+		let i = {
+			host: this.#e,
+			resolved: t,
+			previous: n,
+			signal: r.signal
+		}, a = this.#p(() => {
+			r.signal.aborted || (e(), this.#C === r && (this.#C = null));
+		}, i);
+		this.#w = typeof a == "function" ? a : null;
+	}
+	#O() {
+		let e = this.#n();
+		if ((e.mode ?? "auto") !== "inherit") return {
+			scheme: null,
+			source: null
+		};
+		if (e.hostSchemeResolver) {
+			let t = e.hostSchemeResolver(this.#e);
+			if (t) return {
+				scheme: t,
+				source: "host-resolver"
+			};
+		}
+		let t = Y(this.#e.getAttribute(R.explicitScheme));
+		if (t) return {
+			scheme: t,
+			source: "host-attribute"
+		};
+		let n = this.#e.parentElement;
+		for (; n;) {
+			let e = Y(n.getAttribute(R.inheritedScheme)) ?? Y(n.getAttribute(R.effectiveScheme)) ?? Y(n.getAttribute(R.explicitScheme));
+			if (e) return {
+				scheme: e,
+				source: "host-attribute"
+			};
+			n = n.parentElement;
+		}
+		if (typeof window > "u") return {
+			scheme: null,
+			source: null
+		};
+		let r = window.getComputedStyle(this.#e).colorScheme;
+		return r.includes("dark") ? {
+			scheme: "dark",
+			source: "host-style"
+		} : r.includes("light") ? {
+			scheme: "light",
+			source: "host-style"
+		} : {
+			scheme: null,
+			source: null
+		};
+	}
+	#k() {
+		if (!this.#m) return;
+		let e = [this.#e], t = this.#e.parentElement;
+		for (; t;) e.push(t), t = t.parentElement;
+		if (e.length === this.#g.size && e.every((e) => this.#g.has(e))) return;
+		this.#m.disconnect(), this.#g.clear(), this.#g.add(this.#e), this.#m.observe(this.#e, {
+			attributes: !0,
+			childList: !1,
+			subtree: !1,
+			attributeFilter: [...xe]
+		});
+		let n = this.#e.parentElement;
+		for (; n;) this.#A(n, !0), n = n.parentElement;
+	}
+	#A(e, t) {
+		!this.#m || this.#g.has(e) || (this.#g.add(e), this.#m.observe(e, {
+			attributes: !0,
+			childList: t,
+			subtree: !1,
+			attributeFilter: [...Se]
+		}));
+	}
+	#j(e) {
+		for (let t of Object.keys(e)) {
+			if (this.#v.has(t)) continue;
+			let e = this.#e.style.getPropertyValue(t);
+			this.#v.set(t, e === "" ? null : e);
+		}
+	}
+	#M(e) {
+		let t = new Set(Object.keys(e));
+		for (let e of this.#b) {
+			if (t.has(e)) continue;
+			let n = this.#v.get(e) ?? null;
+			n === null ? this.#e.style.removeProperty(e) : this.#e.style.setProperty(e, n);
+		}
+	}
+	#N() {
+		return {
+			prefersDarkScheme: this.#i?.matches ?? !1,
+			prefersReducedMotion: this.#o?.matches ?? !1,
+			prefersMoreContrast: this.#c?.matches ?? !1,
+			forcedColors: this.#u?.matches ?? !1
+		};
+	}
+	#P() {
+		let e = this.#n(), t = this.#N(), n = this.#O(), r = I(e, this.#t, {
+			inheritedScheme: n.scheme,
+			inheritedSource: n.source ?? void 0,
+			systemScheme: t.prefersDarkScheme ? "dark" : "light",
+			prefersReducedMotion: t.prefersReducedMotion,
+			prefersMoreContrast: t.prefersMoreContrast,
+			forcedColors: t.forcedColors
+		});
+		return this.#F(r) ? (this.#j(r.tokens), this.#b = new Set(Object.keys(r.tokens)), this.#E = r, this.#S = z(r), this.#T = J(e, t), !0) : !1;
+	}
+	#F(e) {
+		let t = B(e);
+		for (let e of G) {
+			let n = t[e];
+			if (n === void 0) {
+				if (this.#e.hasAttribute(e)) return !1;
+				continue;
+			}
+			if (this.#e.getAttribute(e) !== n) return !1;
+		}
+		if (this.#e.getAttribute(R.signature) === t[R.signature]) return !0;
+		if (this.#e.style.colorScheme !== e.effectiveScheme) return !1;
+		let n = /* @__PURE__ */ new Map();
+		for (let e = 0; e < this.#e.style.length; e += 1) {
+			let t = this.#e.style.item(e);
+			t.startsWith("--mlf-") && n.set(t, this.#e.style.getPropertyValue(t).trim());
+		}
+		let r = Object.entries(e.tokens);
+		if (n.size === r.length) {
+			for (let [e, t] of r) if (n.get(e) !== t) return !1;
+			return !0;
+		}
+		if (typeof window > "u") return !1;
+		let i = window.getComputedStyle(this.#e);
+		for (let [e, t] of r) if (i.getPropertyValue(e).trim() !== t) return !1;
+		return !0;
+	}
+	#I() {
+		this.#C?.abort(), this.#C = null, this.#w?.(), this.#w = null;
+	}
+}, $ = (e, t = {}, n = !1) => {
+	let r = (...e) => m(P(...e)), i = r(t.config), a = i, o = t.registry?.clone() ?? S.clone(), s = new Q({
+		host: e,
+		registry: o,
+		getConfig: () => a,
+		onChange: t.onChange,
+		hydrate: n,
+		transition: t.transition
+	});
+	return s.connect(), Object.freeze({
+		host: e,
+		registry: o,
+		get config() {
+			return a;
+		},
+		get resolved() {
+			return s.resolved;
+		},
+		update(e) {
+			a = r(a, e), s.refresh();
+		},
+		replace(e) {
+			a = r(e), s.refresh();
+		},
+		reset() {
+			a = i, s.refresh();
+		},
+		disconnect() {
+			s.disconnect();
+		}
+	});
+}, ke = (e, t = {}) => $(e, t), Ae = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, je = (e) => {
+	if (!e.trim()) throw Error("[mlform] createDesignSystemStylesheet layer name must be non-empty");
+	if (e.includes("{") || e.includes("}") || e.includes(";")) throw Error("[mlform] createDesignSystemStylesheet layer name contains unsafe characters");
+	if (e.split(".").some((e) => !Ae.test(e))) throw Error("[mlform] createDesignSystemStylesheet layer name is not a valid CSS layer name");
+}, Me = (e, t = ":host") => {
+	let n = typeof t == "string" ? { selector: t } : t, r = n.selector ?? ":host", i = n.layer;
+	we(r), i && je(i);
+	let a = `${r} {\n${U(e).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
+	return i ? `@layer ${i} {\n${a}\n}` : a;
+}, Ne = (e, t = {}) => $(e, t, !0);
+//#endregion
+export { r as C, i as S, e as T, y as _, K as a, g as b, B as c, F as d, P as f, b as g, S as h, Q as i, I as l, te as m, Me as n, W as o, ne as p, ke as r, z as s, Ne as t, ye as u, x as v, t as w, h as x, v as y };