@elmethis/vue 0.13.0 → 0.14.0

package/lib/index.vue.mjs

@@ -1,25 +1,25 @@
 import "@elmethis/core/tokens.css";
 import { Fragment as e, computed as t, createTextVNode as n, createVNode as r, defineComponent as i, h as a, inject as o, isVNode as s, mergeProps as c, normalizeStyle as l, onBeforeUnmount as u, onMounted as d, onUnmounted as f, provide as p, ref as m, shallowRef as h, useId as g, watch as _ } from "vue";
 import { Catalog as ee, ComponentContext as te, MessageProcessor as v } from "@a2ui/web_core/v0_9";
-import { AudioPlayerApi as ne, BASIC_COMPONENTS as y, BASIC_FUNCTIONS as b, ButtonApi as re, CardApi as ie, CheckBoxApi as ae, ChoicePickerApi as oe, ColumnApi as se, DateTimeInputApi as ce, DividerApi as le, IconApi as ue, ImageApi as de, ListApi as fe, ModalApi as pe, RowApi as me, SliderApi as he, TabsApi as ge, TextApi as _e, TextFieldApi as ve, VideoApi as ye } from "@a2ui/web_core/v0_9/basic_catalog";
-import { clsx as x } from "clsx";
-import { useClipboard as be, useClipboardItems as xe, useVModel as Se } from "@vueuse/core";
+import { AudioPlayerApi as ne, BASIC_COMPONENTS as re, BASIC_FUNCTIONS as y, ButtonApi as ie, CardApi as ae, CheckBoxApi as oe, ChoicePickerApi as se, ColumnApi as ce, DateTimeInputApi as le, DividerApi as ue, IconApi as de, ImageApi as fe, ListApi as pe, ModalApi as me, RowApi as he, SliderApi as ge, TabsApi as _e, TextApi as ve, TextFieldApi as ye, VideoApi as be } from "@a2ui/web_core/v0_9/basic_catalog";
+import { clsx as b } from "clsx";
+import { useClipboard as xe, useClipboardItems as Se, useVModel as Ce } from "@vueuse/core";
 import "zod";
-import { renderToString as Ce } from "katex";
-import { mdiAlert as we, mdiAlertCircleOutline as Te, mdiAlertOctagram as Ee, mdiApplicationOutline as De, mdiArrowDownDropCircleOutline as Oe, mdiCheckCircle as ke, mdiCheckCircleOutline as Ae, mdiChevronRight as je, mdiClipboardCheckOutline as Me, mdiClipboardOutline as Ne, mdiCodeTags as Pe, mdiDownload as Fe, mdiEyeOffOutline as Ie, mdiEyeOutline as Le, mdiFastForward10 as Re, mdiFile as ze, mdiFolderOpen as Be, mdiFormatColorFill as Ve, mdiFormatQuoteClose as He, mdiFormatQuoteOpen as Ue, mdiHexadecimal as We, mdiHome as Ge, mdiInformation as Ke, mdiLightbulbOn as qe, mdiLinkVariant as Je, mdiMenuDown as Ye, mdiMessageImageOutline as Xe, mdiMusicNote as Ze, mdiOpenInNew as Qe, mdiPause as $e, mdiPlay as et, mdiPlus as tt, mdiRewind10 as nt, mdiShieldAlert as rt, mdiText as it, mdiTextLong as at, mdiTrashCanOutline as ot, mdiVolumeHigh as st, mdiVolumeLow as ct, mdiVolumeMedium as lt, mdiVolumeOff as ut } from "@mdi/js";
-import { AudioApi as dt, BlockImageApi as ft, BlockQuoteApi as pt, BookmarkApi as mt, CalloutApi as ht, CodeBlockApi as gt, ColumnApi as _t, ColumnListApi as vt, ContentTabApi as yt, ContentTabsApi as bt, DividerApi as xt, FileApi as St, HeadingApi as Ct, HtmlApi as wt, IconApi as Tt, KatexApi as Et, LANGUAGES as Dt, LinkTextApi as Ot, ListApi as kt, ListItemApi as At, MermaidApi as jt, NotionCalloutApi as Mt, ParagraphApi as Nt, RichTextApi as Pt, TableApi as Ft, TableCellApi as It, TableRowApi as Lt, ToggleApi as Rt, UnsupportedApi as zt, VideoApi as Bt, languageIcons as Vt, normalizeLanguage as Ht } from "@elmethis/core";
-import { codeToHtml as Ut } from "shiki";
-import Wt from "@46ki75/ikuma-theme/dark";
-import Gt from "@46ki75/ikuma-theme/light";
-import { marked as Kt } from "marked";
-var S = {
+import { renderToString as we } from "katex";
+import { mdiAlert as Te, mdiAlertCircleOutline as Ee, mdiAlertOctagram as De, mdiApplicationOutline as Oe, mdiArrowDownDropCircleOutline as ke, mdiCheckCircle as Ae, mdiCheckCircleOutline as je, mdiChevronRight as Me, mdiClipboardCheckOutline as Ne, mdiClipboardOutline as Pe, mdiCodeTags as Fe, mdiDownload as Ie, mdiEyeOffOutline as Le, mdiEyeOutline as Re, mdiFastForward10 as ze, mdiFile as Be, mdiFolderOpen as Ve, mdiFormatColorFill as He, mdiFormatQuoteClose as Ue, mdiFormatQuoteOpen as We, mdiHexadecimal as Ge, mdiHome as Ke, mdiInformation as qe, mdiLightbulbOn as Je, mdiLinkVariant as Ye, mdiMenuDown as Xe, mdiMessageImageOutline as Ze, mdiMusicNote as Qe, mdiOpenInNew as $e, mdiPause as et, mdiPlay as tt, mdiPlus as nt, mdiRewind10 as rt, mdiShieldAlert as it, mdiText as at, mdiTextLong as ot, mdiTrashCanOutline as st, mdiVolumeHigh as ct, mdiVolumeLow as lt, mdiVolumeMedium as ut, mdiVolumeOff as dt } from "@mdi/js";
+import { AudioApi as ft, BlockImageApi as pt, BlockQuoteApi as mt, BookmarkApi as ht, CalloutApi as gt, CodeBlockApi as _t, ColumnApi as vt, ColumnListApi as yt, ContentTabApi as bt, ContentTabsApi as xt, DividerApi as St, FileApi as Ct, HeadingApi as wt, HtmlApi as Tt, IconApi as Et, KatexApi as Dt, LANGUAGES as Ot, LinkTextApi as kt, ListApi as At, ListItemApi as jt, MermaidApi as Mt, NotionCalloutApi as Nt, ParagraphApi as Pt, RichTextApi as Ft, TableApi as It, TableCellApi as Lt, TableRowApi as Rt, ToggleApi as zt, UnsupportedApi as Bt, VideoApi as Vt, languageIcons as Ht, normalizeLanguage as Ut } from "@elmethis/core";
+import { codeToHtml as Wt } from "shiki";
+import Gt from "@46ki75/ikuma-theme/dark";
+import Kt from "@46ki75/ikuma-theme/light";
+import { marked as qt } from "marked";
+var x = {
 	"elm-tabs": "_elm-tabs_whoym_1",
 	"tab-container": "_tab-container_whoym_13",
 	tab: "_tab_whoym_13",
 	active: "_active_whoym_41",
 	"tab-content": "_tab-content_whoym_52",
 	"tab-content-inner": "_tab-content-inner_whoym_57"
-}, qt = {
+}, S = {
 	"elm-collapse": "_elm-collapse_12wiu_1",
 	row: "_row_12wiu_5",
 	open: "_open_12wiu_11",
@@ -44,16 +44,16 @@ var S = {
 	},
 	setup(e, { slots: t }) {
 		return () => r("div", {
-			class: x(qt["elm-collapse"], e.isOpen && qt.open, e.direction === "row" && qt.row, e.direction === "column" && qt.column, e.direction === "both" && qt.both),
+			class: b(S["elm-collapse"], e.isOpen && S.open, e.direction === "row" && S.row, e.direction === "column" && S.column, e.direction === "both" && S.both),
 			style: { "--elmethis-scoped-transition-timing-function": e.transitionTimingFunction }
-		}, [r("div", { class: qt.inner }, [t.default?.()])]);
+		}, [r("div", { class: S.inner }, [t.default?.()])]);
 	}
 });
 //#endregion
 //#region src/hooks/use-bindable-signal.ts
 function Yt(e) {
 	let { props: t, key: n, emit: r, defaultValue: i } = e;
-	return Se(t, n, r, {
+	return Ce(t, n, r, {
 		passive: !0,
 		defaultValue: i
 	});
@@ -95,12 +95,12 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 			get transitionTimingFunction() {
 				return e.transitionTimingFunction;
 			}
-		}), () => r("div", { class: x(S["elm-tabs"]) }, [n.default?.()]);
+		}), () => r("div", { class: b(x["elm-tabs"]) }, [n.default?.()]);
 	}
 }), $t = /* @__PURE__ */ i({
 	name: "ElmTabList",
 	setup(e, { slots: t }) {
-		return () => r("div", { class: x(S["tab-container"]) }, [t.default?.()]);
+		return () => r("div", { class: b(x["tab-container"]) }, [t.default?.()]);
 	}
 }), en = /* @__PURE__ */ i({
 	name: "ElmTab",
@@ -111,7 +111,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 	setup(e, { slots: t }) {
 		let n = Zt(o(Xt));
 		return () => r("div", {
-			class: x(S.tab, n.selectedValue.value === e.value && S.active),
+			class: b(x.tab, n.selectedValue.value === e.value && x.active),
 			onClick: () => n.setSelectedValue(e.value)
 		}, [t.default?.()]);
 	}
@@ -123,11 +123,11 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 	} },
 	setup(e, { slots: t }) {
 		let n = Zt(o(Xt));
-		return () => r("div", { class: x(S["tab-content"]) }, [r(Jt, {
+		return () => r("div", { class: b(x["tab-content"]) }, [r(Jt, {
 			direction: "row",
 			isOpen: n.selectedValue.value === e.value,
 			transitionTimingFunction: n.transitionTimingFunction
-		}, { default: () => [r("div", { class: S["tab-content-inner"] }, [t.default?.()])] })]);
+		}, { default: () => [r("div", { class: x["tab-content-inner"] }, [t.default?.()])] })]);
 	}
 }), nn = {
 	"elm-heading": "_elm-heading_1fuld_1",
@@ -153,7 +153,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 		return () => {
 			let { class: a, ...o } = t;
 			return r("span", c({
-				class: x(rn["elm-fragment-identifier"], a),
+				class: b(rn["elm-fragment-identifier"], a),
 				onClick: () => i(e.id)
 			}, o), [n("#")]);
 		};
@@ -183,7 +183,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 	},
 	setup(e, { slots: t }) {
 		return () => r(`h${e.level}`, {
-			class: x(nn["elm-heading"], C.text, nn[`h${e.level}`]),
+			class: b(nn["elm-heading"], C.text, nn[`h${e.level}`]),
 			style: { "--elmethis-scoped-font-size": `${on[e.level]}em` },
 			id: e.id
 		}, { default: () => [
@@ -233,7 +233,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 	setup(e, { attrs: t }) {
 		return () => {
 			let { class: n, ...i } = t;
-			return r("span", c({ class: x(ln["elm-inline-icon"], n) }, i), [r("img", {
+			return r("span", c({ class: b(ln["elm-inline-icon"], n) }, i), [r("img", {
 				src: e.src,
 				alt: e.alt,
 				class: ln["elm-inline-icon"],
@@ -319,7 +319,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 			})(), s = r("strong", null, [s])), e.code && ((function() {
 				return s;
 			})(), s = r("code", { class: cn.code }, [s])), e.ruby && (s = r("ruby", { class: cn["elm-inline-text"] }, [r("span", null, [s]), r("rt", null, [e.ruby])])), r("span", c({
-				class: x(cn["elm-inline-text"], C.text, i),
+				class: b(cn["elm-inline-text"], C.text, i),
 				style: [a, {
 					"--elmethis-scoped-color": e.color,
 					"--elmethis-scoped-font-size": e.size,
@@ -345,7 +345,7 @@ var Xt = Symbol("elm.tabs"), Zt = (e) => {
 		return () => {
 			let { class: i, style: a, ...o } = t;
 			return r("p", c({
-				class: x(un["elm-paragraph"], C.text, i),
+				class: b(un["elm-paragraph"], C.text, i),
 				style: [a, {
 					"--elmethis-scoped-color": e.color,
 					"--elmethis-scoped-background-color": e.backgroundColor
@@ -498,11 +498,11 @@ function Sn(e) {
 	}
 }
 var Cn = new gn([
-	D(_e, ({ props: e, resolve: t }) => {
+	D(ve, ({ props: e, resolve: t }) => {
 		let n = t(e.text), i = e.variant ?? "body";
 		return i === "caption" ? r(T, null, bn(n) ? n : { default: () => [n] }) : i === "body" ? r(dn, null, bn(n) ? n : { default: () => [n] }) : r(sn, { level: Sn(i) }, bn(n) ? n : { default: () => [n] });
 	}),
-	D(me, ({ props: e, childRefs: t, renderChild: n }) => r("div", {
+	D(he, ({ props: e, childRefs: t, renderChild: n }) => r("div", {
 		class: E.row,
 		style: {
 			justifyContent: _n[e.justify ?? "start"],
@@ -512,31 +512,31 @@ var Cn = new gn([
 		key: `${e}:${i}`,
 		class: E["child-wrap"]
 	}, [n(e, t, i)]))])),
-	D(se, ({ props: e, childRefs: t, renderChild: n }) => r("div", { class: E.column }, [t(e.children).map(({ id: e, path: t }, i) => r("span", {
+	D(ce, ({ props: e, childRefs: t, renderChild: n }) => r("div", { class: E.column }, [t(e.children).map(({ id: e, path: t }, i) => r("span", {
 		key: `${e}:${i}`,
 		class: E["child-wrap"]
 	}, [n(e, t, i)]))])),
-	D(fe, ({ props: e, childRefs: t, renderChild: n }) => r("div", { class: x(E.list, e.direction === "horizontal" && E["list-horizontal"]) }, [t(e.children).map(({ id: e, path: t }, i) => r("div", {
+	D(pe, ({ props: e, childRefs: t, renderChild: n }) => r("div", { class: b(E.list, e.direction === "horizontal" && E["list-horizontal"]) }, [t(e.children).map(({ id: e, path: t }, i) => r("div", {
 		key: `${e}:${i}`,
 		class: E["list-item"]
 	}, [n(e, t, i)]))])),
-	D(ie, ({ props: e, renderChild: t }) => r("div", { class: E.card }, [t(e.child)])),
-	D(re, ({ props: e, renderChild: t, dispatchAction: n }) => r("div", {
+	D(ae, ({ props: e, renderChild: t }) => r("div", { class: E.card }, [t(e.child)])),
+	D(ie, ({ props: e, renderChild: t, dispatchAction: n }) => r("div", {
 		role: "button",
 		tabindex: 0,
-		class: x(E.button, e.variant === "primary" && E["button-primary"]),
+		class: b(E.button, e.variant === "primary" && E["button-primary"]),
 		onClick: e.action ? () => n("action") : void 0,
 		onKeydown: e.action ? (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n("action"));
 		} : void 0
 	}, [t(e.child)])),
-	D(de, ({ props: e, resolve: t }) => r("img", {
+	D(fe, ({ props: e, resolve: t }) => r("img", {
 		class: E.image,
 		src: t(e.url),
 		alt: e.description ? t(e.description) : "",
 		style: { objectFit: yn[e.fit ?? "cover"] }
 	}, null)),
-	D(ue, ({ props: e, resolve: t }) => {
+	D(de, ({ props: e, resolve: t }) => {
 		let n = t(e.name);
 		return r("span", {
 			class: E.icon,
@@ -544,11 +544,11 @@ var Cn = new gn([
 			"data-icon": n
 		}, null);
 	}),
-	D(le, ({ props: e }) => r("div", {
-		class: x(E.divider, e.axis === "vertical" && E["divider-vertical"]),
+	D(ue, ({ props: e }) => r("div", {
+		class: b(E.divider, e.axis === "vertical" && E["divider-vertical"]),
 		role: "separator"
 	}, null)),
-	D(ve, ({ props: e, resolve: t, setBinding: n }) => {
+	D(ye, ({ props: e, resolve: t, setBinding: n }) => {
 		let i = e.variant ?? "shortText", a = e.value ? t(e.value) : "";
 		return r("div", { class: E["text-field"] }, [r("label", { class: E.label }, [t(e.label)]), i === "longText" ? r("textarea", {
 			class: E.input,
@@ -563,7 +563,7 @@ var Cn = new gn([
 			onChange: (e) => n("value", e.target.value)
 		}, null)]);
 	}),
-	D(ae, ({ props: e, ctx: t, resolve: n, setBinding: i }) => {
+	D(oe, ({ props: e, ctx: t, resolve: n, setBinding: i }) => {
 		let a = e.value, o = typeof a == "boolean" ? a : !!(t.dataContext.resolveDynamicValue(a) ?? !1);
 		return r("label", { class: E.checkbox }, [r("input", {
 			type: "checkbox",
@@ -571,7 +571,7 @@ var Cn = new gn([
 			onChange: (e) => i("value", e.target.checked)
 		}, null), r("span", { class: E["checkbox-label"] }, [n(e.label)])]);
 	}),
-	D(he, ({ props: e, ctx: t, setBinding: n }) => {
+	D(ge, ({ props: e, ctx: t, setBinding: n }) => {
 		let i = e.value, a = typeof i == "number" ? i : Number(t.dataContext.resolveDynamicValue(i) ?? 0);
 		return r("input", {
 			class: E.slider,
@@ -583,7 +583,7 @@ var Cn = new gn([
 			onChange: (e) => n("value", Number(e.target.value))
 		}, null);
 	}),
-	D(ge, ({ props: e, resolve: t, renderChild: n }) => {
+	D(_e, ({ props: e, resolve: t, renderChild: n }) => {
 		let i;
 		return r(Qt, { defaultValue: "0" }, { default: () => [r($t, null, bn(i = e.tabs.map((e, n) => {
 			let i;
@@ -599,8 +599,8 @@ var Cn = new gn([
 			}, bn(i = n(e.child)) ? i : { default: () => [i] });
 		})] });
 	}),
-	D(pe, ({ props: e, renderChild: t }) => r("div", { class: E.modal }, [t(e.trigger), r("div", { class: E["modal-content"] }, [t(e.content)])])),
-	D(ye, ({ props: e, resolve: t }) => r("video", {
+	D(me, ({ props: e, renderChild: t }) => r("div", { class: E.modal }, [t(e.trigger), r("div", { class: E["modal-content"] }, [t(e.content)])])),
+	D(be, ({ props: e, resolve: t }) => r("video", {
 		class: E.video,
 		controls: !0,
 		src: t(e.url)
@@ -610,7 +610,7 @@ var Cn = new gn([
 		controls: !0,
 		src: t(e.url)
 	}, null)),
-	D(oe, ({ props: e, componentId: t, ctx: n, resolve: i, setBinding: a }) => {
+	D(se, ({ props: e, componentId: t, ctx: n, resolve: i, setBinding: a }) => {
 		let o = e.value, s = Array.isArray(o) ? o : n.dataContext.resolveDynamicValue(o) ?? [], c = Array.isArray(s) ? s : [], l = (e.variant ?? "mutuallyExclusive") === "multipleSelection";
 		return r("div", {
 			class: E["choice-picker"],
@@ -629,7 +629,7 @@ var Cn = new gn([
 			checked: c.includes(e.value)
 		}, null), r("span", null, [i(e.label)])]))])]);
 	}),
-	D(ce, ({ props: e, resolve: t, setBinding: n }) => {
+	D(le, ({ props: e, resolve: t, setBinding: n }) => {
 		let i = e.enableDate ?? !1, a = e.enableTime ?? !1, o = i && a ? "datetime-local" : i ? "date" : a ? "time" : "text";
 		return r("div", { class: E["datetime-input"] }, [e.label ? r("label", { class: E.label }, [t(e.label)]) : null, r("input", {
 			class: E.input,
@@ -880,7 +880,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				let t = e.createSurface?.catalogId;
 				typeof t == "string" && c.add(t);
 			}
-			let l = new v(Array.from(c).map((e) => new ee(e, y, b))), u = /* @__PURE__ */ new Map(), d = [];
+			let l = new v(Array.from(c).map((e) => new ee(e, re, y))), u = /* @__PURE__ */ new Map(), d = [];
 			d.push(l.model.onSurfaceCreated.subscribe((e) => {
 				u.set(e.id, e), n.value++;
 			})), d.push(l.model.onSurfaceDeleted.subscribe((e) => {
@@ -950,12 +950,12 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 		}
 	},
 	setup(e) {
-		let n = t(() => Ce(e.expression, {
+		let n = t(() => we(e.expression, {
 			displayMode: e.block,
 			output: "mathml"
 		}));
 		return () => r("div", {
-			class: x(C.text, e.block ? Pn["elm-katex"] : void 0),
+			class: b(C.text, e.block ? Pn["elm-katex"] : void 0),
 			innerHTML: n.value
 		}, null);
 	}
@@ -1021,7 +1021,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 		return () => {
 			let { class: n, style: i, ...a } = t;
 			return r("svg", c({
-				class: x(Bn["elm-mdi-icon"], n),
+				class: b(Bn["elm-mdi-icon"], n),
 				style: [{
 					"--elmethis-scoped-color": e.lightColor ?? e.color,
 					"--dark-color": e.darkColor ?? e.color
@@ -1050,12 +1050,12 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 	},
 	setup(e) {
 		return () => {
-			let t = Ht(e.language);
+			let t = Ut(e.language);
 			return t === "file" ? r(O, {
-				d: Pe,
+				d: Fe,
 				size: String(e.size)
 			}, null) : a(zn, {
-				icon: Vt[t],
+				icon: Ht[t],
 				size: e.size
 			});
 		};
@@ -1080,11 +1080,11 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				return;
 			}
 			try {
-				let i = await Ut(e, {
+				let i = await Wt(e, {
 					lang: t,
 					themes: {
-						dark: Wt,
-						light: Gt
+						dark: Gt,
+						light: Kt
 					},
 					defaultColor: !1,
 					colorReplacements: {
@@ -1105,7 +1105,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 		}, { immediate: !0 }), () => {
 			let { class: e, ...i } = t;
 			return r("pre", c({
-				class: x(Hn["elm-shiki-highlighter"], e),
+				class: b(Hn["elm-shiki-highlighter"], e),
 				innerHTML: n.value
 			}, i), null);
 		};
@@ -1114,7 +1114,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 	"use-clipboard": "_use-clipboard_mb0qt_1",
 	"use-clipboard-icon-copied": "_use-clipboard-icon-copied_mb0qt_15"
 }, Gn = (e) => {
-	let n = e.delay ?? 1500, a = be({ copiedDuring: n }), o = xe({ copiedDuring: n }), s = t(() => a.copied.value || o.copied.value), c = async () => {
+	let n = e.delay ?? 1500, a = xe({ copiedDuring: n }), o = Se({ copiedDuring: n }), s = t(() => a.copied.value || o.copied.value), c = async () => {
 		let t = e.content;
 		typeof t == "string" ? await a.copy(t) : await o.copy(t.map((e) => new ClipboardItem(e)));
 	};
@@ -1124,12 +1124,12 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 			name: "CopyButton",
 			setup() {
 				return () => r("span", {
-					class: x(Wn["use-clipboard"], e.class),
+					class: b(Wn["use-clipboard"], e.class),
 					style: e.style,
 					onClick: c
 				}, [r(O, {
-					class: x(s.value && Wn["use-clipboard-icon-copied"]),
-					d: s.value ? Me : Ne,
+					class: b(s.value && Wn["use-clipboard-icon-copied"]),
+					d: s.value ? Ne : Pe,
 					size: "1.25rem"
 				}, null)]);
 			}
@@ -1153,7 +1153,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 	},
 	setup(e, { slots: t }) {
 		let { CopyButton: n } = Gn({ content: e.code });
-		return () => r("figure", { class: x(In["elm-code-block"]) }, [
+		return () => r("figure", { class: b(In["elm-code-block"]) }, [
 			r("span", { class: In["language-icon"] }, [r(Vn, { language: e.language }, null)]),
 			r("span", { class: In.caption }, [r(T, null, { default: () => [e.caption || e.language, t.default?.()] })]),
 			r("div", { class: In["copy-icon"] }, [a(n)]),
@@ -1194,7 +1194,11 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 	props: {
 		html: {
 			type: String,
-			required: !0
+			default: void 0
+		},
+		src: {
+			type: String,
+			default: void 0
 		},
 		autoHeight: {
 			type: Boolean,
@@ -1214,46 +1218,57 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 		}
 	},
 	setup(e, { attrs: t }) {
-		let n = m(null), i = m(void 0);
-		_(() => [e.html, e.autoHeight], ([, e]) => {
+		let n = m(null), i = m(void 0), a = () => e.src !== void 0;
+		_(() => [
+			e.html,
+			e.src,
+			e.autoHeight
+		], ([, , e]) => {
 			e && (i.value = void 0);
 		}, { flush: "pre" });
-		let a, o = (e) => {
+		let o, s = (e) => {
+			if (a()) return;
 			let t = n.value;
 			if (!t) return;
-			let r, o = () => {
+			let r, s = () => {
 				let e = t.contentDocument?.documentElement;
 				e && (i.value = e.scrollHeight);
-			}, s = () => {
-				let e = t.contentDocument?.documentElement;
-				e && (r?.disconnect(), r = new ResizeObserver(o), r.observe(e));
 			}, c = () => {
-				e && (o(), s());
+				let e = t.contentDocument?.documentElement;
+				e && (r?.disconnect(), r = new ResizeObserver(s), r.observe(e));
+			}, l = () => {
+				e && (s(), c());
 			};
-			t.addEventListener("load", c), a = () => {
-				t.removeEventListener("load", c), r?.disconnect();
+			t.addEventListener("load", l), o = () => {
+				t.removeEventListener("load", l), r?.disconnect();
 			};
 		};
-		return d(() => o(e.autoHeight)), _(() => [e.html, e.autoHeight], ([, e]) => {
-			a?.(), o(e);
-		}, { flush: "post" }), u(() => a?.()), () => {
-			let { class: a, style: o, src: s, srcDoc: l, srcdoc: u, ...d } = t, f = Xn(o), p = f?.height, m = new Set(e.sandbox?.split(/\s+/).filter(Boolean) ?? []);
-			if ([...m].some((e) => e.toLowerCase() === "allow-scripts")) for (let e of m) e.toLowerCase() === "allow-same-origin" && m.delete(e);
-			else e.autoHeight && m.add("allow-same-origin");
-			let h = [...m].join(" ");
+		return d(() => s(e.autoHeight)), _(() => [
+			e.html,
+			e.src,
+			e.autoHeight
+		], ([, , e]) => {
+			o?.(), s(e);
+		}, { flush: "post" }), u(() => o?.()), () => {
+			let o = a(), { class: s, style: l, srcDoc: u, srcdoc: d, referrerPolicy: f, referrerpolicy: p, ...m } = t, h = Xn(l), g = h?.height, _ = new Set(e.sandbox?.split(/\s+/).filter(Boolean) ?? []);
+			if ([..._].some((e) => e.toLowerCase() === "allow-scripts")) for (let e of _) e.toLowerCase() === "allow-same-origin" && _.delete(e);
+			else e.autoHeight && !o && _.add("allow-same-origin");
+			let ee = [..._].join(" ");
 			return r("iframe", c({
 				key: String(e.autoHeight),
 				ref: n,
 				title: e.title ?? "Embedded HTML content",
-				class: x(qn["elm-html"], a),
+				class: b(qn["elm-html"], s),
 				style: e.autoHeight ? {
-					...f,
-					height: i.value === void 0 ? p : `${i.value}px`
-				} : f,
-				height: e.autoHeight ? i.value === void 0 && p === void 0 ? e.height : void 0 : e.height
-			}, d, {
-				srcdoc: e.html,
-				sandbox: h
+					...h,
+					height: i.value === void 0 ? g : `${i.value}px`
+				} : h,
+				height: e.autoHeight ? i.value === void 0 && g === void 0 ? e.height : void 0 : e.height
+			}, m, {
+				src: o ? e.src : void 0,
+				srcdoc: o ? void 0 : e.html ?? "",
+				sandbox: ee,
+				referrerpolicy: o ? "no-referrer" : void 0
 			}), null);
 		};
 	}
@@ -1331,7 +1346,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 		}
 	},
 	setup(n) {
-		let i = m(null), a = m(null), o = null, s = m(!1), c = m(!0), l = m(!1), d = m(0), f = m(0), p = m(1), h = m(!1), g = m(null), _ = t(() => d.value > 0 ? Math.min(1, f.value / d.value) : 0), ee = t(() => h.value || p.value === 0 ? ut : p.value < .34 ? ct : p.value < .67 ? lt : st), te = t(() => n.title ?? $n(n.src)), v = () => {
+		let i = m(null), a = m(null), o = null, s = m(!1), c = m(!0), l = m(!1), d = m(0), f = m(0), p = m(1), h = m(!1), g = m(null), _ = t(() => d.value > 0 ? Math.min(1, f.value / d.value) : 0), ee = t(() => h.value || p.value === 0 ? dt : p.value < .34 ? lt : p.value < .67 ? ut : ct), te = t(() => n.title ?? $n(n.src)), v = () => {
 			if (o != null) return;
 			let e = () => {
 				i.value && (f.value = i.value.currentTime), o = requestAnimationFrame(e);
@@ -1341,37 +1356,37 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 			o != null && (cancelAnimationFrame(o), o = null);
 		};
 		u(ne);
-		let y = () => {
+		let re = () => {
 			let e = i.value;
 			e && (e.paused ? e.play().catch(() => s.value = !1) : e.pause());
-		}, b = (e) => {
+		}, y = (e) => {
 			let t = i.value;
 			if (!t || !Number.isFinite(d.value) || d.value <= 0) return;
 			let n = Math.max(0, Math.min(d.value, e));
 			t.currentTime = n, f.value = n;
-		}, re = (e) => {
+		}, ie = (e) => {
 			let t = a.value;
 			if (!t) return 0;
 			let n = t.getBoundingClientRect();
 			return n.width === 0 ? 0 : Math.max(0, Math.min(1, (e - n.left) / n.width));
-		}, ie = (e) => {
-			e.currentTarget.setPointerCapture(e.pointerId), b(re(e.clientX) * d.value);
 		}, ae = (e) => {
-			let t = re(e.clientX);
-			g.value = t, e.currentTarget.hasPointerCapture(e.pointerId) && b(t * d.value);
+			e.currentTarget.setPointerCapture(e.pointerId), y(ie(e.clientX) * d.value);
 		}, oe = (e) => {
-			e.key === "ArrowRight" ? (e.preventDefault(), b(f.value + n.seekStep)) : e.key === "ArrowLeft" ? (e.preventDefault(), b(f.value - n.seekStep)) : e.key === "Home" ? (e.preventDefault(), b(0)) : e.key === "End" && (e.preventDefault(), b(d.value));
+			let t = ie(e.clientX);
+			g.value = t, e.currentTarget.hasPointerCapture(e.pointerId) && y(t * d.value);
 		}, se = (e) => {
+			e.key === "ArrowRight" ? (e.preventDefault(), y(f.value + n.seekStep)) : e.key === "ArrowLeft" ? (e.preventDefault(), y(f.value - n.seekStep)) : e.key === "Home" ? (e.preventDefault(), y(0)) : e.key === "End" && (e.preventDefault(), y(d.value));
+		}, ce = (e) => {
 			let t = i.value, n = Math.max(0, Math.min(1, e));
 			t && (t.volume = n, t.muted = n === 0), p.value = n, h.value = n === 0;
-		}, ce = () => {
+		}, le = () => {
 			let e = i.value;
 			if (!e) return;
 			let t = !e.muted;
 			e.muted = t, h.value = t;
 		};
 		return () => r("div", {
-			class: x(k["elm-audio-player"], s.value && k.playing, c.value && k.loading, l.value && k.errored),
+			class: b(k["elm-audio-player"], s.value && k.playing, c.value && k.loading, l.value && k.errored),
 			style: {
 				"--elmethis-scoped-progress": _.value,
 				"--elmethis-scoped-hover": g.value ?? 0
@@ -1415,10 +1430,10 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 			}, null),
 			r("div", { class: k.header }, [
 				r("span", {
-					class: x(k.artwork, l.value && k["artwork-error"]),
+					class: b(k.artwork, l.value && k["artwork-error"]),
 					"aria-hidden": "true"
 				}, [r(O, {
-					d: l.value ? Te : Ze,
+					d: l.value ? Ee : Qe,
 					size: "1.25rem"
 				}, null)]),
 				r("div", { class: k.meta }, [r("span", {
@@ -1439,7 +1454,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				class: k["error-notice"],
 				role: "alert"
 			}, [r(O, {
-				d: Te,
+				d: Ee,
 				size: "1.25rem"
 			}, null), r("span", { class: k["error-message"] }, [n.errorMessage])]) : r(e, null, [r("div", {
 				ref: a,
@@ -1451,10 +1466,10 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				"aria-valuemax": Math.round(d.value) || 0,
 				"aria-valuenow": Math.round(f.value),
 				"aria-valuetext": `${Qn(f.value)} of ${Qn(d.value)}`,
-				onPointerdown: ie,
-				onPointermove: ae,
+				onPointerdown: ae,
+				onPointermove: oe,
 				onPointerleave: () => g.value = null,
-				onKeydown: oe
+				onKeydown: se
 			}, [
 				r("div", {
 					class: k.track,
@@ -1469,41 +1484,41 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 					"aria-hidden": "true"
 				}, null)
 			]), r("div", { class: k.controls }, [
-				r("span", { class: x(k.time, k["time-current"]) }, [Qn(f.value)]),
+				r("span", { class: b(k.time, k["time-current"]) }, [Qn(f.value)]),
 				r("div", { class: k.transport }, [
 					r("button", {
 						type: "button",
 						class: k["icon-button"],
-						onClick: () => b(f.value - n.seekStep),
+						onClick: () => y(f.value - n.seekStep),
 						"aria-label": `Back ${n.seekStep} seconds`
 					}, [r(O, {
-						d: nt,
+						d: rt,
 						size: "1.25rem"
 					}, null)]),
 					r("button", {
 						type: "button",
 						class: k["play-button"],
-						onClick: y,
+						onClick: re,
 						"aria-label": s.value ? "Pause" : "Play",
 						"aria-pressed": s.value
 					}, [r(O, {
-						d: s.value ? $e : et,
+						d: s.value ? et : tt,
 						size: "1.5rem"
 					}, null)]),
 					r("button", {
 						type: "button",
 						class: k["icon-button"],
-						onClick: () => b(f.value + n.seekStep),
+						onClick: () => y(f.value + n.seekStep),
 						"aria-label": `Forward ${n.seekStep} seconds`
 					}, [r(O, {
-						d: Re,
+						d: ze,
 						size: "1.25rem"
 					}, null)])
 				]),
 				r("div", { class: k.volume }, [r("button", {
 					type: "button",
 					class: k["icon-button"],
-					onClick: ce,
+					onClick: le,
 					"aria-label": h.value ? "Unmute" : "Mute",
 					"aria-pressed": h.value
 				}, [r(O, {
@@ -1517,10 +1532,10 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 					step: .01,
 					value: h.value ? 0 : p.value,
 					"aria-label": "Volume",
-					onInput: (e) => se(e.target.valueAsNumber),
+					onInput: (e) => ce(e.target.valueAsNumber),
 					style: { "--elmethis-scoped-volume": h.value ? 0 : p.value }
 				}, null)]),
-				r("span", { class: x(k.time, k["time-total"]) }, [Qn(d.value)])
+				r("span", { class: b(k.time, k["time-total"]) }, [Qn(d.value)])
 			])])
 		]);
 	}
@@ -1539,7 +1554,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 	setup() {
 		return () => r("div", {
 			"aria-hidden": "true",
-			class: x(tr["elm-rectangle-wave"])
+			class: b(tr["elm-rectangle-wave"])
 		}, null);
 	}
 }), rr = {
@@ -1583,7 +1598,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 			let { class: o, style: s, ...u } = t;
 			return r("dialog", c({
 				ref: i,
-				class: x(rr["elm-modal"], a.value && rr.shown, o),
+				class: b(rr["elm-modal"], a.value && rr.shown, o),
 				onClick: l,
 				style: [{ "--elmethis-scoped-modal-delay": `${e.delay}ms` }, s]
 			}, { closedby: "none" }, u), [r("div", { onClick: (e) => e.stopPropagation() }, [n.default?.()])]);
@@ -1674,7 +1689,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				"--elmethis-scoped-aspect-ratio": e.width && e.height ? `${e.width} / ${e.height}` : "auto"
 			}
 		}, { fetchpriority: n ? "low" : "auto" }), null);
-		return () => r("figure", { class: x(A["elm-block-image"]) }, [
+		return () => r("figure", { class: b(A["elm-block-image"]) }, [
 			r("div", {
 				class: A["image-container"],
 				style: { "--elmethis-scoped-opacity": t.value ? 1 : .01 },
@@ -1684,7 +1699,7 @@ var An = "https://a2ui.org/specification/v0_9/basic_catalog.json", jn = /* @__PU
 				class: A["caption-box"],
 				style: { "--elmethis-scoped-opacity": t.value ? .01 : 1 }
 			}, [r("span", { class: A["caption-icon"] }, [r(O, {
-				d: Xe,
+				d: Ze,
 				size: "1.25rem"
 			}, null)]), r(T, { size: "1rem" }, { default: () => [e.caption] })]),
 			a(n, null, { default: () => i.value ? h(!0) : null })
@@ -1731,9 +1746,9 @@ var lr = /* @__PURE__ */ i({
 				t && URL.revokeObjectURL(t.href);
 			}
 		};
-		return () => r("div", { class: x(sr["elm-file"]) }, [
+		return () => r("div", { class: b(sr["elm-file"]) }, [
 			r("div", null, [r(O, {
-				d: ze,
+				d: Be,
 				size: "1.25rem"
 			}, null)]),
 			r("div", null, [r(T, null, { default: () => [e.name ?? cr(e.src)] })]),
@@ -1742,7 +1757,7 @@ var lr = /* @__PURE__ */ i({
 				class: sr["download-icon"],
 				onClick: t
 			}, [r(O, {
-				d: Fe,
+				d: Ie,
 				size: "1.25rem"
 			}, null)])
 		]);
@@ -1784,7 +1799,7 @@ var lr = /* @__PURE__ */ i({
 	},
 	setup(e) {
 		let t = m(!1);
-		return () => r("div", { class: x(j["elm-bookmark"]) }, [r("a", {
+		return () => r("div", { class: b(j["elm-bookmark"]) }, [r("a", {
 			class: j.container,
 			href: e.url,
 			target: "_blank",
@@ -1799,7 +1814,7 @@ var lr = /* @__PURE__ */ i({
 			r("div", { class: j.title }, [r(T, { bold: !0 }, { default: () => [e.title] })]),
 			r("div", { class: j.description }, [r(T, { size: "0.75rem" }, { default: () => [e.description] })]),
 			r("div", { class: j.link }, [e.favicon ? r(w, { src: e.favicon }, null) : r(O, {
-				d: Je,
+				d: Ye,
 				color: "var(--elmethis-color-accent-info)"
 			}, null), r(T, { size: "0.75rem" }, { default: () => [e.url] })])
 		])])]);
@@ -1842,45 +1857,45 @@ var lr = /* @__PURE__ */ i({
 			emit: t,
 			defaultValue: e.defaultIsOpen ?? !1
 		});
-		return () => r("div", { class: x(M["elm-toggle"], i.value && M.open) }, [
+		return () => r("div", { class: b(M["elm-toggle"], i.value && M.open) }, [
 			r("div", {
 				class: M.summary,
 				onClick: (e) => {
 					e.preventDefault(), i.value = !i.value;
 				}
 			}, [
-				r("div", { class: M["summary-left"] }, [r("span", { class: x(M.chevron, i.value && M.open) }, [r(O, {
-					d: je,
+				r("div", { class: M["summary-left"] }, [r("span", { class: b(M.chevron, i.value && M.open) }, [r(O, {
+					d: Me,
 					color: e.monochrome ? "var(--elmethis-color-neutral-weak)" : "var(--elmethis-color-primary)",
 					size: "1rem"
 				}, null)]), r("div", null, [e.summary == null ? n.summary?.() : r(T, null, { default: () => [e.summary] })])]),
 				r("hr", { class: M.divider }, null),
-				r("span", { class: x(M.cross, i.value && M.open) }, [r(O, {
-					d: tt,
+				r("span", { class: b(M.cross, i.value && M.open) }, [r(O, {
+					d: nt,
 					size: "1rem",
 					color: e.monochrome ? "var(--elmethis-color-neutral-weak)" : i.value ? "var(--elmethis-color-accent-error)" : "var(--elmethis-color-primary)"
 				}, null)])
 			]),
 			r("div", { class: M.border }, null),
-			r("div", { class: x(M.content, i.value && M.open) }, [n.default?.()])
+			r("div", { class: b(M.content, i.value && M.open) }, [n.default?.()])
 		]);
 	}
-}), pr = {
+}), N = {
 	"elm-block-quote": "_elm-block-quote_xzf6a_1",
 	body: "_body_xzf6a_19",
 	icon: "_icon_xzf6a_27",
 	"icon-top-left": "_icon-top-left_xzf6a_32",
 	"icon-bottom-right": "_icon-bottom-right_xzf6a_36"
-}, mr = /* @__PURE__ */ i({
+}, pr = /* @__PURE__ */ i({
 	name: "ElmBlockQuote",
 	setup(e, { slots: t }) {
-		return () => r("blockquote", { class: x(pr["elm-block-quote"], C.text) }, [
-			r("div", { class: x(pr.icon, pr["icon-top-left"]) }, [r(O, { d: Ue }, null)]),
-			r("div", { class: pr.body }, [t.default?.()]),
-			r("div", { class: x(pr.icon, pr["icon-bottom-right"]) }, [r(O, { d: He }, null)])
+		return () => r("blockquote", { class: b(N["elm-block-quote"], C.text) }, [
+			r("div", { class: b(N.icon, N["icon-top-left"]) }, [r(O, { d: We }, null)]),
+			r("div", { class: N.body }, [t.default?.()]),
+			r("div", { class: b(N.icon, N["icon-bottom-right"]) }, [r(O, { d: Ue }, null)])
 		]);
 	}
-}), hr = {
+}), mr = {
 	"elm-callout": "_elm-callout_1nsmp_1",
 	header: "_header_1nsmp_26",
 	content: "_content_1nsmp_35",
@@ -1890,26 +1905,26 @@ var lr = /* @__PURE__ */ i({
 	important: "_important_1nsmp_55",
 	warning: "_warning_1nsmp_59",
 	caution: "_caution_1nsmp_63"
-}, gr = Object.freeze({
-	note: Ke,
-	tip: qe,
-	important: rt,
-	warning: we,
-	caution: Ee
-}), _r = /* @__PURE__ */ i({
+}, hr = Object.freeze({
+	note: qe,
+	tip: Je,
+	important: it,
+	warning: Te,
+	caution: De
+}), gr = /* @__PURE__ */ i({
 	name: "ElmCallout",
 	props: { type: {
 		type: String,
 		default: "note"
 	} },
 	setup(e, { slots: t }) {
-		return () => r("aside", { class: x(hr["elm-callout"], hr[e.type]) }, [r("div", { class: hr.header }, [r(O, {
-			class: hr.icon,
-			d: gr[e.type],
+		return () => r("aside", { class: b(mr["elm-callout"], mr[e.type]) }, [r("div", { class: mr.header }, [r(O, {
+			class: mr.icon,
+			d: hr[e.type],
 			size: "1.25rem"
-		}, null), r("span", null, [e.type])]), r("div", { class: hr.content }, [t.default?.()])]);
+		}, null), r("span", null, [e.type])]), r("div", { class: mr.content }, [t.default?.()])]);
 	}
-}), N = {
+}), _r = {
 	"elm-notion-callout": "_elm-notion-callout_15idh_1",
 	icon: "_icon_15idh_9",
 	content: "_content_15idh_15",
@@ -1945,15 +1960,15 @@ var lr = /* @__PURE__ */ i({
 	setup(e, { slots: t, attrs: n }) {
 		return () => {
 			let { class: i, ...a } = n;
-			return r("div", c({ class: x(N["elm-notion-callout"], N[e.color], N[e.variant], i) }, a), [e.icon !== void 0 && (e.icon.kind === "emoji" ? r("span", {
-				class: N.icon,
+			return r("div", c({ class: b(_r["elm-notion-callout"], _r[e.color], _r[e.variant], i) }, a), [e.icon !== void 0 && (e.icon.kind === "emoji" ? r("span", {
+				class: _r.icon,
 				role: "img"
 			}, [e.icon.emoji]) : r(w, {
-				class: N.icon,
+				class: _r.icon,
 				src: e.icon.src,
 				alt: e.icon.alt,
 				size: 20
-			}, null)), r("div", { class: N.content }, [t.default?.()])]);
+			}, null)), r("div", { class: _r.content }, [t.default?.()])]);
 		};
 	}
 }), yr = { "elm-divider": "_elm-divider_9m6gb_1" }, br = /* @__PURE__ */ i({
@@ -1962,7 +1977,7 @@ var lr = /* @__PURE__ */ i({
 	setup(e, { attrs: t }) {
 		return () => {
 			let { class: e, ...n } = t;
-			return r("hr", c({ class: x(yr["elm-divider"], e) }, n), null);
+			return r("hr", c({ class: b(yr["elm-divider"], e) }, n), null);
 		};
 	}
 }), xr = {
@@ -1976,7 +1991,7 @@ var lr = /* @__PURE__ */ i({
 		default: "unordered"
 	} },
 	setup(e, { slots: t }) {
-		return () => e.listStyle === "ordered" ? r("ol", { class: x(C.text, xr["elm-list"], xr.numbered) }, [t.default?.()]) : r("ul", { class: x(C.text, xr["elm-list"], xr.bulleted) }, [t.default?.()]);
+		return () => e.listStyle === "ordered" ? r("ol", { class: b(C.text, xr["elm-list"], xr.numbered) }, [t.default?.()]) : r("ul", { class: b(C.text, xr["elm-list"], xr.bulleted) }, [t.default?.()]);
 	}
 }), P = {
 	"elm-table-frame": "_elm-table-frame_1b7h2_3",
@@ -2024,7 +2039,7 @@ var lr = /* @__PURE__ */ i({
 				tabindex: o.value ? 0 : void 0,
 				role: o.value && e.caption != null ? "region" : void 0,
 				"aria-label": o.value && e.caption != null ? e.caption : void 0
-			}, [r("table", c({ class: x(P["elm-table"], C.text, e.hasRowHeader && P["sticky-row-header"], t) }, u), [e.caption && r("caption", null, [r("span", { class: P.caption }, [
+			}, [r("table", c({ class: b(P["elm-table"], C.text, e.hasRowHeader && P["sticky-row-header"], t) }, u), [e.caption && r("caption", null, [r("span", { class: P.caption }, [
 				r("span", { class: P.spacing }, null),
 				r("span", { class: P["caption-inner"] }, [r(T, null, { default: () => [e.caption] })]),
 				r("span", { class: P.spacing }, null)
@@ -2066,11 +2081,11 @@ var lr = /* @__PURE__ */ i({
 		return () => {
 			let { class: o, style: s, ...l } = t, u = i === "head", d = !u && !e.isHeader && e.columnIndex === 0 && a.value, f = u || e.isHeader || d, p = e.scope ?? (u ? "col" : d ? "row" : void 0), m = e.text == null ? n.default?.() : e.text;
 			return f ? r("th", c({
-				class: x(Dr["elm-table-cell"], Dr.th, o),
+				class: b(Dr["elm-table-cell"], Dr.th, o),
 				style: s,
 				scope: p
 			}, l), [m]) : r("td", c({
-				class: x(Dr["elm-table-cell"], Dr.td, o),
+				class: b(Dr["elm-table-cell"], Dr.td, o),
 				style: s
 			}, l), [m]);
 		};
@@ -2078,12 +2093,12 @@ var lr = /* @__PURE__ */ i({
 }), kr = { "elm-table-header": "_elm-table-header_jhft7_1" }, Ar = /* @__PURE__ */ i({
 	name: "ElmTableHeader",
 	setup(e, { slots: t }) {
-		return p(wr, "head"), () => r("thead", { class: x(kr["elm-table-header"]) }, [t.default?.()]);
+		return p(wr, "head"), () => r("thead", { class: b(kr["elm-table-header"]) }, [t.default?.()]);
 	}
 }), jr = { "elm-table-row": "_elm-table-row_mkm0q_1" }, Mr = /* @__PURE__ */ i({
 	name: "ElmTableRow",
 	setup(e, { slots: t }) {
-		return () => r("tr", { class: x(jr["elm-table-row"]) }, [t.default?.()]);
+		return () => r("tr", { class: b(jr["elm-table-row"]) }, [t.default?.()]);
 	}
 }), Nr = {
 	"elm-unsupported-block": "_elm-unsupported-block_8bkk1_1",
@@ -2100,7 +2115,7 @@ var lr = /* @__PURE__ */ i({
 	setup(e, { attrs: t }) {
 		return () => {
 			let { class: i, ...a } = t;
-			return r("div", c({ class: x(Nr["elm-unsupported-block"], i) }, a), [r("div", { class: Nr.message }, [r("svg", {
+			return r("div", c({ class: b(Nr["elm-unsupported-block"], i) }, a), [r("div", { class: Nr.message }, [r("svg", {
 				viewBox: "0 0 24 24",
 				width: "1.25rem",
 				height: "1.25rem",
@@ -2126,7 +2141,7 @@ var Ir = {
 	gap: "0.25rem",
 	justifyContent: "space-around",
 	overflowX: "auto"
-}, Lr = Cn.extend(D(Pt, ({ props: e, resolve: t }) => {
+}, Lr = Cn.extend(D(Ft, ({ props: e, resolve: t }) => {
 	let n = t(e.text), i = e.decoration ?? [];
 	return i.includes("katex") ? r(Fn, {
 		expression: n,
@@ -2140,16 +2155,16 @@ var Ir = {
 		color: e.color,
 		ruby: e.ruby
 	}, F(n) ? n : { default: () => [n] });
-}), D(Ot, ({ props: e, resolve: t }) => {
+}), D(kt, ({ props: e, resolve: t }) => {
 	let n;
 	return r(T, {
 		href: e.href,
 		favicon: e.favicon
 	}, F(n = t(e.text)) ? n : { default: () => [n] });
-}), D(Tt, ({ props: e, resolve: t }) => r(w, {
+}), D(Et, ({ props: e, resolve: t }) => r(w, {
 	src: t(e.src),
 	alt: e.alt
-}, null)), D(_t, ({ props: e, childRefs: t, renderChild: n }) => r("div", { style: {
+}, null)), D(vt, ({ props: e, childRefs: t, renderChild: n }) => r("div", { style: {
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: _n[e.justify ?? "start"],
@@ -2158,50 +2173,50 @@ var Ir = {
 	boxSizing: "border-box",
 	padding: "0.125rem",
 	gap: "var(--elmethis-stack-gap)"
-} }, [t(e.children).map(({ id: e, path: t }, i) => r("span", { key: `${e}:${i}` }, [n(e, t, i)]))])), D(vt, ({ props: t, childRefs: n, renderChild: i }) => r("div", { style: Ir }, [n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))])), D(Ct, ({ props: t, childRefs: n, renderChild: i }) => {
+} }, [t(e.children).map(({ id: e, path: t }, i) => r("span", { key: `${e}:${i}` }, [n(e, t, i)]))])), D(yt, ({ props: t, childRefs: n, renderChild: i }) => r("div", { style: Ir }, [n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))])), D(wt, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a;
 	return r(sn, { level: t.level }, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
-}), D(Nt, ({ props: e, childRefs: t, renderChild: n }) => {
+}), D(Pt, ({ props: e, childRefs: t, renderChild: n }) => {
 	let i;
 	return r(dn, {
 		color: e.color,
 		backgroundColor: e.backgroundColor
 	}, F(i = t(e.children).map(({ id: e, path: t }, i) => r("span", { key: `${e}:${i}` }, [n(e, t, i)]))) ? i : { default: () => [i] });
-}), D(kt, ({ props: e, childRefs: t, renderChild: n }) => {
+}), D(At, ({ props: e, childRefs: t, renderChild: n }) => {
 	let i;
 	return r(Sr, { listStyle: e.style ?? "unordered" }, F(i = t(e.children).map(({ id: e, path: t }, i) => r("li", { key: `${e}:${i}` }, [n(e, t, i)]))) ? i : { default: () => [i] });
-}), D(At, ({ props: t, childRefs: n, renderChild: i }) => r(e, null, [n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))])), D(pt, ({ props: t, childRefs: n, renderChild: i }) => {
+}), D(jt, ({ props: t, childRefs: n, renderChild: i }) => r(e, null, [n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))])), D(mt, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a;
-	return r(mr, { cite: t.cite }, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
-}), D(ht, ({ props: t, childRefs: n, renderChild: i }) => {
+	return r(pr, { cite: t.cite }, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
+}), D(gt, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a;
-	return r(_r, { type: t.type }, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
-}), D(Mt, ({ props: t, childRefs: n, renderChild: i }) => {
+	return r(gr, { type: t.type }, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
+}), D(Nt, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a;
 	return r(vr, {
 		icon: t.icon,
 		color: t.color,
 		variant: t.variant
 	}, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
-}), D(xt, () => r(br, null, null)), D(Rt, ({ props: t, childRefs: n, renderChild: i }) => r(fr, null, {
+}), D(St, () => r(br, null, null)), D(zt, ({ props: t, childRefs: n, renderChild: i }) => r(fr, null, {
 	summary: () => n(t.summary).map(({ id: e, path: t }, n) => r("span", { key: `${e}:${n}` }, [i(e, t, n)])),
 	default: () => n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))
-})), D(mt, ({ props: e, resolve: t }) => r(dr, {
+})), D(ht, ({ props: e, resolve: t }) => r(dr, {
 	url: t(e.url),
 	title: e.title ? t(e.title) : void 0,
 	description: e.description ? t(e.description) : void 0,
 	image: e.image ? t(e.image) : void 0
-}, null)), D(St, ({ props: e, resolve: t }) => r(lr, {
+}, null)), D(Ct, ({ props: e, resolve: t }) => r(lr, {
 	src: t(e.src),
 	name: e.name ? t(e.name) : void 0
-}, null)), D(dt, ({ props: e, resolve: t }) => r(er, {
+}, null)), D(ft, ({ props: e, resolve: t }) => r(er, {
 	src: t(e.src),
 	title: e.title ? t(e.title) : void 0,
 	artist: e.artist ? t(e.artist) : void 0,
 	seekStep: e.seekStep,
 	loop: e.loop,
 	autoplay: e.autoPlay
-}, null)), D(Bt, ({ props: e, resolve: t }) => {
+}, null)), D(Vt, ({ props: e, resolve: t }) => {
 	let n = e.caption ? t(e.caption) : void 0;
 	return r("figure", { style: { margin: 0 } }, [r("video", {
 		src: t(e.src),
@@ -2218,7 +2233,7 @@ var Ir = {
 			height: "auto"
 		}
 	}, null), n ? r("figcaption", null, [n]) : null]);
-}), D(ft, ({ props: e, resolve: t }) => r(or, {
+}), D(pt, ({ props: e, resolve: t }) => r(or, {
 	src: t(e.src),
 	alt: e.alt ? t(e.alt) : void 0,
 	width: e.width,
@@ -2227,20 +2242,21 @@ var Ir = {
 	sizes: e.sizes ? t(e.sizes) : void 0,
 	caption: e.caption ? t(e.caption) : void 0,
 	enableModal: !0
-}, null)), D(wt, ({ props: e, resolve: t }) => r(Zn, {
-	html: t(e.html),
+}, null)), D(Tt, ({ props: e, resolve: t }) => r(Zn, {
+	html: e.html ? t(e.html) : void 0,
+	src: e.src ? t(e.src) : void 0,
 	autoHeight: e.autoHeight
-}, null)), D(gt, ({ props: e, resolve: t }) => r(Kn, {
+}, null)), D(_t, ({ props: e, resolve: t }) => r(Kn, {
 	code: t(e.code),
 	language: e.language ? t(e.language) : void 0,
 	caption: e.caption ? t(e.caption) : void 0
-}, null)), D(Et, ({ props: e, resolve: t }) => r(Fn, {
+}, null)), D(Dt, ({ props: e, resolve: t }) => r(Fn, {
 	expression: t(e.expression),
 	block: !0
-}, null)), D(jt, ({ props: e, resolve: t }) => r(Kn, {
+}, null)), D(Mt, ({ props: e, resolve: t }) => r(Kn, {
 	code: t(e.code),
 	language: "mermaid"
-}, null)), D(yt, () => null), D(bt, ({ props: t, surface: n, renderChild: i }) => {
+}, null)), D(bt, () => null), D(xt, ({ props: t, surface: n, renderChild: i }) => {
 	let a, o = (Array.isArray(t.children) ? t.children : []).map((e) => {
 		let t = n.componentsModel.get(e);
 		return {
@@ -2262,28 +2278,28 @@ var Ir = {
 			value: String(a)
 		}, F(o = n.map((t, n) => r(e, { key: `${t}:${n}` }, [i(t, "/", n)]))) ? o : { default: () => [o] });
 	})] });
-}), D(Ft, ({ props: t, childRefs: n, renderChild: i }) => {
+}), D(It, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a, o;
 	return r(Tr, {
 		caption: t.caption ? String(t.caption) : void 0,
 		hasRowHeader: t.hasRowHeader
 	}, { default: () => [t.header && t.header.length > 0 && r(Ar, null, F(a = n(t.header).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] }), r(Er, null, F(o = n(t.body).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? o : { default: () => [o] })] });
-}), D(Lt, ({ props: t, childRefs: n, renderChild: i }) => {
+}), D(Rt, ({ props: t, childRefs: n, renderChild: i }) => {
 	let a;
 	return r(Mr, null, F(a = n(t.children).map(({ id: t, path: n }, a) => r(e, { key: `${t}:${a}` }, [i(t, n, a)]))) ? a : { default: () => [a] });
-}), D(It, ({ props: e, index: t, childRefs: n, renderChild: i }) => {
+}), D(Lt, ({ props: e, index: t, childRefs: n, renderChild: i }) => {
 	let a;
 	return r(Or, {
 		isHeader: e.isHeader,
 		columnIndex: t
 	}, F(a = n(e.children).map(({ id: e, path: t }, n) => r("span", { key: `${e}:${n}` }, [i(e, t, n)]))) ? a : { default: () => [a] });
-}), D(zt, ({ props: e }) => r(Pr, { details: e.details ? `Unsupported component type: ${String(e.details)}` : "Unsupported component type" }, null))), I = {
+}), D(Bt, ({ props: e }) => r(Pr, { details: e.details ? `Unsupported component type: ${String(e.details)}` : "Unsupported component type" }, null))), Rr = {
 	"elm-html-viewer": "_elm-html-viewer_jde0x_1",
 	header: "_header_jde0x_15",
 	"icon-button": "_icon-button_jde0x_23",
 	divider: "_divider_jde0x_49",
 	content: "_content_jde0x_57"
-}, Rr = /* @__PURE__ */ i({
+}, zr = /* @__PURE__ */ i({
 	name: "ElmHtmlViewer",
 	props: {
 		html: {
@@ -2335,36 +2351,36 @@ var Ir = {
 				n?.remove(), t && URL.revokeObjectURL(t);
 			}
 		};
-		return () => r("figure", { class: x(I["elm-html-viewer"]) }, [
-			r("div", { class: I.header }, [r("button", {
+		return () => r("figure", { class: b(Rr["elm-html-viewer"]) }, [
+			r("div", { class: Rr.header }, [r("button", {
 				type: "button",
-				class: I["icon-button"],
+				class: Rr["icon-button"],
 				onClick: n,
 				"aria-label": "Download"
 			}, [r(O, {
-				d: Fe,
+				d: Ie,
 				size: "1.25rem"
 			}, null)]), r("button", {
 				type: "button",
-				class: I["icon-button"],
+				class: Rr["icon-button"],
 				onClick: t,
 				"aria-label": "Open in new tab"
 			}, [r(O, {
-				d: Qe,
+				d: $e,
 				size: "1.25rem"
 			}, null)])]),
-			r("hr", { class: I.divider }, null),
-			r("div", { class: I.content }, [r(Zn, {
+			r("hr", { class: Rr.divider }, null),
+			r("div", { class: Rr.content }, [r(Zn, {
 				html: e.html,
 				sandbox: e.sandbox,
 				autoHeight: e.autoHeight
 			}, null)])
 		]);
 	}
-}), zr = {
+}), Br = {
 	"parallax-watcher": "_parallax-watcher_z693a_1",
 	parallax: "_parallax_z693a_1"
-}, Br = /* @__PURE__ */ i({
+}, Vr = /* @__PURE__ */ i({
 	name: "ElmParallax",
 	props: { images: {
 		type: Array,
@@ -2374,9 +2390,9 @@ var Ir = {
 		let t = m(0), n = () => {
 			t.value = window.scrollY;
 		};
-		return d(() => window.addEventListener("scroll", n)), u(() => window.removeEventListener("scroll", n)), () => r("div", null, [r("div", { class: zr["parallax-watcher"] }, null), e.images.map((e, n) => r("div", {
+		return d(() => window.addEventListener("scroll", n)), u(() => window.removeEventListener("scroll", n)), () => r("div", null, [r("div", { class: Br["parallax-watcher"] }, null), e.images.map((e, n) => r("div", {
 			key: n,
-			class: zr.parallax,
+			class: Br.parallax,
 			style: {
 				backgroundImage: `url(${e})`,
 				transform: `scale(1.2) translateY(${t.value / (1e3 * (n + 1))}%)`,
@@ -2384,11 +2400,11 @@ var Ir = {
 			}
 		}, null))]);
 	}
-}), Vr = {
+}), Hr = {
 	"elm-tooltip": "_elm-tooltip_1b13f_1",
 	tooltip: "_tooltip_1b13f_5",
 	show: "_show_1b13f_18"
-}, Hr = /* @__PURE__ */ i({
+}, Ur = /* @__PURE__ */ i({
 	name: "ElmTooltip",
 	setup(e, { slots: t }) {
 		let n = m(null), i = m(!1), a = !1, o, s = m({}), c = () => {
@@ -2410,19 +2426,19 @@ var Ir = {
 		};
 		return () => r("span", {
 			ref: n,
-			class: x(Vr["elm-tooltip"]),
+			class: b(Hr["elm-tooltip"]),
 			onMouseover: c,
 			onMouseleave: l
 		}, [t.original?.(), r("div", {
-			class: x(Vr.tooltip, i.value && Vr.show),
+			class: b(Hr.tooltip, i.value && Hr.show),
 			style: s.value
 		}, [t.tooltip?.()])]);
 	}
-}), Ur = { "elm-block-fallback": "_elm-block-fallback_1sx02_1" }, Wr = {
+}), Wr = { "elm-block-fallback": "_elm-block-fallback_1sx02_1" }, Gr = {
 	"elm-dot-loading-icon": "_elm-dot-loading-icon_qjgj2_15",
 	dot: "_dot_qjgj2_25",
 	bounce: "_bounce_qjgj2_1"
-}, Gr = /* @__PURE__ */ i({
+}, Kr = /* @__PURE__ */ i({
 	name: "ElmDotLoadingIcon",
 	inheritAttrs: !1,
 	props: { size: {
@@ -2433,25 +2449,25 @@ var Ir = {
 		return () => {
 			let { class: n, style: i, ...a } = t;
 			return r("span", c({
-				class: x(Wr["elm-dot-loading-icon"], n),
+				class: b(Gr["elm-dot-loading-icon"], n),
 				style: [{ "--elmethis-scoped-size": e.size }, i]
 			}, a), [
 				r("span", {
-					class: Wr.dot,
+					class: Gr.dot,
 					"aria-hidden": "true"
 				}, null),
 				r("span", {
-					class: Wr.dot,
+					class: Gr.dot,
 					"aria-hidden": "true"
 				}, null),
 				r("span", {
-					class: Wr.dot,
+					class: Gr.dot,
 					"aria-hidden": "true"
 				}, null)
 			]);
 		};
 	}
-}), Kr = /* @__PURE__ */ i({
+}), qr = /* @__PURE__ */ i({
 	name: "ElmBlockFallback",
 	props: { height: {
 		type: String,
@@ -2459,11 +2475,11 @@ var Ir = {
 	} },
 	setup(e) {
 		return () => r("div", {
-			class: x(Ur["elm-block-fallback"]),
+			class: b(Wr["elm-block-fallback"]),
 			style: { "--elmethis-scoped-height": e.height }
-		}, [r(Gr, null, null), r(nr, null, null)]);
+		}, [r(Kr, null, null), r(nr, null, null)]);
 	}
-}), L = {
+}), I = {
 	"elm-button": "_elm-button_9qh0y_1",
 	normal: "_normal_9qh0y_22",
 	primary: "_primary_9qh0y_29",
@@ -2472,7 +2488,7 @@ var Ir = {
 	flex: "_flex_9qh0y_59",
 	ripple: "_ripple_9qh0y_83",
 	"button-ripple": "_button-ripple_9qh0y_1"
-}, qr = /* @__PURE__ */ i({
+}, Jr = /* @__PURE__ */ i({
 	name: "ElmButton",
 	inheritAttrs: !1,
 	props: {
@@ -2506,7 +2522,7 @@ var Ir = {
 					!e.isLoading && !e.disabled && typeof l == "function" && (i.value = !0, clearTimeout(a), a = setTimeout(() => i.value = !1, 300), l(t));
 				},
 				disabled: e.disabled,
-				class: x(L["elm-button"], !e.isLoading && !e.disabled && L.enable, e.color && L.colored, !e.color && !e.primary && L.normal, !e.color && e.primary && L.primary, o),
+				class: b(I["elm-button"], !e.isLoading && !e.disabled && I.enable, e.color && I.colored, !e.color && !e.primary && I.normal, !e.color && e.primary && I.primary, o),
 				style: [{
 					display: e.block ? "flex" : "inline-flex",
 					width: e.block ? "100%" : "auto",
@@ -2514,10 +2530,10 @@ var Ir = {
 					"--elmethis-scoped-opacity": e.disabled || e.isLoading ? .6 : void 0,
 					"--elmethis-scoped-color": e.color
 				}, s]
-			}, u), [i.value && r("span", { class: L.ripple }, null), e.isLoading ? r(Gr, { size: "1.5rem" }, null) : r("span", { class: L.flex }, [n.default?.()])]);
+			}, u), [i.value && r("span", { class: I.ripple }, null), e.isLoading ? r(Kr, { size: "1.5rem" }, null) : r("span", { class: I.flex }, [n.default?.()])]);
 		};
 	}
-}), R = {
+}), L = {
 	"elm-button-dropdown": "_elm-button-dropdown_hhp3p_1",
 	block: "_block_hhp3p_7",
 	main: "_main_hhp3p_11",
@@ -2530,10 +2546,10 @@ var Ir = {
 };
 //#endregion
 //#region src/components/form/elm-button-dropdown.tsx
-function Jr(e) {
+function Yr(e) {
 	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
 }
-var Yr = /* @__PURE__ */ i({
+var Xr = /* @__PURE__ */ i({
 	name: "ElmButtonDropdown",
 	props: {
 		label: {
@@ -2586,7 +2602,7 @@ var Yr = /* @__PURE__ */ i({
 		},
 		dropdownIcon: {
 			type: String,
-			default: Ye
+			default: Xe
 		}
 	},
 	emits: [
@@ -2596,7 +2612,7 @@ var Yr = /* @__PURE__ */ i({
 		"openChange"
 	],
 	setup(t, { emit: n, slots: i }) {
-		let a = Se(t, "selectedOptionId", n, {
+		let a = Ce(t, "selectedOptionId", n, {
 			passive: !0,
 			defaultValue: t.defaultSelectedOptionId ?? null
 		}), o = m(!1), s = m(null), c = (e) => {
@@ -2606,14 +2622,14 @@ var Yr = /* @__PURE__ */ i({
 		};
 		return d(() => document.addEventListener("click", l)), u(() => document.removeEventListener("click", l)), () => {
 			let l, u = t.items.find((e) => e.id === a.value) ?? null, d = t.disabled || t.disableDropdown || t.isLoading, f = t.disabled || t.disableMainButton, p = {
-				class: x(R.main, R.segment),
+				class: b(L.main, L.segment),
 				primary: t.primary,
 				color: t.color,
 				isLoading: t.isLoading,
 				disabled: f,
 				onClick: () => n("click", u)
 			}, m = {
-				class: x(R.caret, R.segment),
+				class: b(L.caret, L.segment),
 				primary: t.primary,
 				color: t.color,
 				disabled: d,
@@ -2623,26 +2639,26 @@ var Yr = /* @__PURE__ */ i({
 			};
 			return r("div", {
 				ref: s,
-				class: x(R["elm-button-dropdown"], t.block && R.block)
+				class: b(L["elm-button-dropdown"], t.block && L.block)
 			}, [
-				r(qr, p, { default: () => [u ? r(e, null, [u.icon && r(w, { src: u.icon }, null), u.label]) : r(e, null, [i.icon?.(), t.label])] }),
-				r(qr, m, { default: () => [r(O, {
+				r(Jr, p, { default: () => [u ? r(e, null, [u.icon && r(w, { src: u.icon }, null), u.label]) : r(e, null, [i.icon?.(), t.label])] }),
+				r(Jr, m, { default: () => [r(O, {
 					d: t.dropdownIcon,
 					size: "1.25rem"
 				}, null)] }),
 				r(Jt, {
 					isOpen: o.value,
-					class: R.menu
-				}, Jr(l = t.items.map((e) => r("div", {
+					class: L.menu
+				}, Yr(l = t.items.map((e) => r("div", {
 					key: e.id,
-					class: x(R.item, C.text, e.id === a.value && R.selected, e.disabled && R["item-disabled"]),
+					class: b(L.item, C.text, e.id === a.value && L.selected, e.disabled && L["item-disabled"]),
 					"aria-selected": e.id === a.value,
 					onClick: (r) => {
 						r.stopPropagation(), !e.disabled && (a.value = e.id, e.onClick?.(), n("itemClick", e), t.autoClose && c(!1));
 					}
 				}, [
 					r(O, {
-						d: je,
+						d: Me,
 						color: "var(--elmethis-color-primary-weak)",
 						size: "0.75em"
 					}, null),
@@ -2652,7 +2668,7 @@ var Yr = /* @__PURE__ */ i({
 			]);
 		};
 	}
-}), z = {
+}), R = {
 	"elm-checkbox": "_elm-checkbox_18dfs_1",
 	disabled: "_disabled_18dfs_12",
 	checkbox: "_checkbox_18dfs_22",
@@ -2662,7 +2678,7 @@ var Yr = /* @__PURE__ */ i({
 	"loading-dot": "_loading-dot_18dfs_39",
 	"check-line": "_check-line_18dfs_54",
 	"elmethis-checkbox-check-line": "_elmethis-checkbox-check-line_18dfs_1"
-}, Xr = /* @__PURE__ */ i({
+}, Zr = /* @__PURE__ */ i({
 	name: "ElmCheckbox",
 	inheritAttrs: !1,
 	props: {
@@ -2698,7 +2714,7 @@ var Yr = /* @__PURE__ */ i({
 		return () => {
 			let { class: n, ...a } = t;
 			return r("div", c({
-				class: x(z["elm-checkbox"], e.disabled && z.disabled, n),
+				class: b(R["elm-checkbox"], e.disabled && R.disabled, n),
 				onClick: () => {
 					!e.isLoading && !e.disabled && (i.value = !i.value);
 				}
@@ -2709,13 +2725,13 @@ var Yr = /* @__PURE__ */ i({
 			} }, [r("svg", {
 				width: "24",
 				height: "24",
-				class: z.checkbox
+				class: R.checkbox
 			}, [
 				r("circle", {
 					cx: "0",
 					cy: "0",
 					r: "2",
-					class: z["loading-dot"],
+					class: R["loading-dot"],
 					style: { opacity: +!!e.isLoading }
 				}, [r("animate", {
 					attributeName: "cx",
@@ -2736,7 +2752,7 @@ var Yr = /* @__PURE__ */ i({
 					cx: "20",
 					cy: "20",
 					r: "2",
-					class: z["loading-dot"],
+					class: R["loading-dot"],
 					style: { opacity: +!!e.isLoading }
 				}, [r("animate", {
 					attributeName: "cx",
@@ -2758,11 +2774,11 @@ var Yr = /* @__PURE__ */ i({
 					y: "4",
 					width: "16",
 					height: "16",
-					class: x(z.rect, i.value && z.checked, e.isLoading && z.loading),
+					class: b(R.rect, i.value && R.checked, e.isLoading && R.loading),
 					"stroke-width": "0.8"
 				}, null),
 				i.value && r("polyline", {
-					class: z["check-line"],
+					class: R["check-line"],
 					points: "5,12 10,17 19,8",
 					"stroke-width": "1.5",
 					fill: "transparent"
@@ -2826,7 +2842,7 @@ var Yr = /* @__PURE__ */ i({
 			]), r(T, null, { default: () => [e.label] })])]);
 		};
 	}
-}), B = {
+}), z = {
 	"elm-select": "_elm-select_1u7w1_1",
 	disabled: "_disabled_1u7w1_23",
 	active: "_active_1u7w1_27",
@@ -2841,10 +2857,10 @@ var Yr = /* @__PURE__ */ i({
 };
 //#endregion
 //#region src/components/form/elm-select.tsx
-function Zr(e) {
+function Qr(e) {
 	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
 }
-var Qr = /* @__PURE__ */ i({
+var $r = /* @__PURE__ */ i({
 	name: "ElmSelect",
 	props: {
 		label: {
@@ -2878,7 +2894,7 @@ var Qr = /* @__PURE__ */ i({
 	},
 	emits: ["update:selectedOptionId"],
 	setup(e, { emit: t, slots: n }) {
-		let i = Se(e, "selectedOptionId", t, {
+		let i = Ce(e, "selectedOptionId", t, {
 			passive: !0,
 			defaultValue: e.defaultSelectedOptionId ?? null
 		}), a = m(!1), o = m(null), s = (e) => {
@@ -2892,29 +2908,29 @@ var Qr = /* @__PURE__ */ i({
 			let t, s = e.options.find((e) => e.id === i.value) ?? null;
 			return r("div", {
 				ref: o,
-				class: x(B["elm-select"], a.value && B.active, (e.disabled || e.isLoading) && B.disabled),
+				class: b(z["elm-select"], a.value && z.active, (e.disabled || e.isLoading) && z.disabled),
 				onClick: c
-			}, [r("span", { class: x(B.label, a.value && B["label-active"]) }, [n.icon?.() ?? r(O, {
-				d: Oe,
+			}, [r("span", { class: b(z.label, a.value && z["label-active"]) }, [n.icon?.() ?? r(O, {
+				d: ke,
 				size: "0.75rem"
-			}, null), e.label]), r("div", { class: B.body }, [
-				r("div", { class: x(B["selected-option"], C.text) }, [s ? r("div", { class: B["option-content"] }, [s.icon && r(w, { src: s.icon }, null), r(T, null, { default: () => [s.label] })]) : r("div", { class: B.fallback }, [r("span", null, [e.placeholder ?? "Select an option"])])]),
+			}, null), e.label]), r("div", { class: z.body }, [
+				r("div", { class: b(z["selected-option"], C.text) }, [s ? r("div", { class: z["option-content"] }, [s.icon && r(w, { src: s.icon }, null), r(T, null, { default: () => [s.label] })]) : r("div", { class: z.fallback }, [r("span", null, [e.placeholder ?? "Select an option"])])]),
 				r(O, {
-					d: Ye,
+					d: Xe,
 					size: "1.5rem"
 				}, null),
 				r(Jt, {
 					isOpen: a.value,
-					class: B.pulldown
-				}, Zr(t = e.options.map((e) => r("div", {
+					class: z.pulldown
+				}, Qr(t = e.options.map((e) => r("div", {
 					key: e.id,
-					class: x(B.option, C.text),
+					class: b(z.option, C.text),
 					onClick: (t) => {
 						t.stopPropagation(), i.value = e.id, a.value = !1;
 					}
 				}, [
 					r(O, {
-						d: je,
+						d: Me,
 						color: "var(--elmethis-color-primary-weak)",
 						size: "0.75em"
 					}, null),
@@ -2924,7 +2940,7 @@ var Qr = /* @__PURE__ */ i({
 			])]);
 		};
 	}
-}), V = {
+}), B = {
 	"elm-slider": "_elm-slider_1cmd9_1",
 	vertical: "_vertical_1cmd9_7",
 	disabled: "_disabled_1cmd9_12",
@@ -2943,7 +2959,7 @@ var Qr = /* @__PURE__ */ i({
 	tick: "_tick_1cmd9_274",
 	"mark-restricted": "_mark-restricted_1cmd9_287",
 	"mark-label": "_mark-label_1cmd9_207"
-}, H = (e, t, n) => Math.min(n, Math.max(t, e)), U = (e) => Math.round(e * 1e9) / 1e9, $r = 500, ei = (e) => e == null || typeof e == "boolean" ? "" : typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(ei).join("") : s(e) ? ei(e.children) : "", ti = /* @__PURE__ */ i({
+}, V = (e, t, n) => Math.min(n, Math.max(t, e)), H = (e) => Math.round(e * 1e9) / 1e9, ei = 500, ti = (e) => e == null || typeof e == "boolean" ? "" : typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(ti).join("") : s(e) ? ti(e.children) : "", ni = /* @__PURE__ */ i({
 	name: "ElmSlider",
 	inheritAttrs: !1,
 	props: {
@@ -2998,24 +3014,24 @@ var Qr = /* @__PURE__ */ i({
 	},
 	emits: ["update:value"],
 	setup(e, { attrs: n, emit: i }) {
-		let a = m(null), o = t(() => e.orientation === "vertical"), s = t(() => Math.min(e.min, e.max)), l = t(() => Math.max(e.min, e.max)), u = t(() => H(e.innerMin ?? s.value, s.value, l.value)), d = t(() => H(e.innerMax ?? l.value, u.value, l.value)), f = (t) => {
+		let a = m(null), o = t(() => e.orientation === "vertical"), s = t(() => Math.min(e.min, e.max)), l = t(() => Math.max(e.min, e.max)), u = t(() => V(e.innerMin ?? s.value, s.value, l.value)), d = t(() => V(e.innerMax ?? l.value, u.value, l.value)), f = (t) => {
 			let n = Math.abs(e.step);
-			return H(U(n > 0 ? e.min + Math.round((t - e.min) / n) * n : t), u.value, d.value);
-		}, p = (e) => H(U(e), u.value, d.value), h = Yt({
+			return V(H(n > 0 ? e.min + Math.round((t - e.min) / n) * n : t), u.value, d.value);
+		}, p = (e) => V(H(e), u.value, d.value), h = Yt({
 			props: e,
 			key: "value",
 			emit: i,
 			defaultValue: p(e.defaultValue ?? (u.value + d.value) / 2)
-		}), g = (t) => e.max === e.min ? 0 : H((t - e.min) / (e.max - e.min), 0, 1), _ = (t, n) => {
+		}), g = (t) => e.max === e.min ? 0 : V((t - e.min) / (e.max - e.min), 0, 1), _ = (t, n) => {
 			let r = a.value;
 			if (!r) return h.value;
-			let i = r.getBoundingClientRect(), s = o.value ? i.height === 0 ? 0 : H((i.bottom - n) / i.height, 0, 1) : i.width === 0 ? 0 : H((t - i.left) / i.width, 0, 1);
+			let i = r.getBoundingClientRect(), s = o.value ? i.height === 0 ? 0 : V((i.bottom - n) / i.height, 0, 1) : i.width === 0 ? 0 : V((t - i.left) / i.width, 0, 1);
 			return f(e.min + s * (e.max - e.min));
 		}, ee = (t) => {
 			e.disabled || (t.currentTarget.setPointerCapture(t.pointerId), h.value = _(t.clientX, t.clientY));
 		}, te = (t) => {
 			e.disabled || t.currentTarget.hasPointerCapture(t.pointerId) && (h.value = _(t.clientX, t.clientY));
-		}, v = t(() => H(h.value, u.value, d.value)), ne = (t) => {
+		}, v = t(() => V(h.value, u.value, d.value)), ne = (t) => {
 			if (e.disabled) return;
 			let n = Math.abs(e.step);
 			switch (t.key) {
@@ -3040,27 +3056,27 @@ var Qr = /* @__PURE__ */ i({
 					t.preventDefault(), h.value = d.value;
 					break;
 			}
-		}, y = t(() => {
+		}, re = t(() => {
 			if (!e.markers && !e.markerLabels) return [];
 			let t = Math.abs(e.step);
 			if (t <= 0 || e.max <= e.min) return [];
-			let n = Math.floor(U((e.max - e.min) / t)), r = [];
-			if (n <= $r) {
+			let n = Math.floor(H((e.max - e.min) / t)), r = [];
+			if (n <= ei) {
 				for (let i = 0; i <= n; i++) {
-					let n = U(e.min + i * t);
+					let n = H(e.min + i * t);
 					r.push({
 						value: n,
 						ratio: g(n)
 					});
 				}
-				U(e.min + n * t) !== U(e.max) && r.push({
+				H(e.min + n * t) !== H(e.max) && r.push({
 					value: e.max,
 					ratio: g(e.max)
 				});
 			} else {
-				let t = (e.max - e.min) / $r;
-				for (let n = 0; n <= $r; n++) {
-					let i = n === $r ? e.max : U(e.min + n * t);
+				let t = (e.max - e.min) / ei;
+				for (let n = 0; n <= ei; n++) {
+					let i = n === ei ? e.max : H(e.min + n * t);
 					r.push({
 						value: i,
 						ratio: g(i)
@@ -3068,11 +3084,11 @@ var Qr = /* @__PURE__ */ i({
 				}
 			}
 			return r;
-		}), b = t(() => {
+		}), y = t(() => {
 			if (!e.markerLabels) return 0;
 			let t = 0;
-			for (let n of y.value) {
-				let r = ei(e.formatMarkerLabel?.(n.value) ?? n.value);
+			for (let n of re.value) {
+				let r = ti(e.formatMarkerLabel?.(n.value) ?? n.value);
 				r.length > t && (t = r.length);
 			}
 			return t;
@@ -3080,17 +3096,17 @@ var Qr = /* @__PURE__ */ i({
 		return () => {
 			let { class: t, style: i, onKeydown: s, ...l } = n, f = g(v.value), p = g(u.value), m = g(d.value);
 			return r("div", {
-				class: x(V["elm-slider"], o.value && V.vertical, e.disabled && V.disabled, e.markers && V["has-markers"], e.markerLabels && V["has-marker-labels"], t),
+				class: b(B["elm-slider"], o.value && B.vertical, e.disabled && B.disabled, e.markers && B["has-markers"], e.markerLabels && B["has-marker-labels"], t),
 				style: {
 					"--elmethis-scoped-value-ratio": f,
 					"--elmethis-scoped-inner-min-ratio": p,
 					"--elmethis-scoped-inner-max-ratio": m,
-					"--elmethis-scoped-max-marker-label-chars": b.value,
+					"--elmethis-scoped-max-marker-label-chars": y.value,
 					...i
 				}
 			}, [r("div", c({
 				ref: a,
-				class: V.track,
+				class: B.track,
 				tabindex: e.disabled ? -1 : 0,
 				onPointerdown: ee,
 				onPointermove: te,
@@ -3106,35 +3122,35 @@ var Qr = /* @__PURE__ */ i({
 				"aria-disabled": e.disabled || void 0
 			}), [
 				r("div", {
-					class: V.rail,
+					class: B.rail,
 					"aria-hidden": "true"
 				}, [
-					r("div", { class: V["restricted-start"] }, null),
-					r("div", { class: V.fill }, null),
-					r("div", { class: V["restricted-end"] }, null)
+					r("div", { class: B["restricted-start"] }, null),
+					r("div", { class: B.fill }, null),
+					r("div", { class: B["restricted-end"] }, null)
 				]),
-				y.value.length > 0 && r("div", {
-					class: V.marks,
+				re.value.length > 0 && r("div", {
+					class: B.marks,
 					"aria-hidden": "true"
-				}, [y.value.map((t, n) => r("span", {
+				}, [re.value.map((t, n) => r("span", {
 					key: t.value,
-					class: x(V.mark, n === 0 && V["mark-start"], n === y.value.length - 1 && V["mark-end"], (t.value < u.value || t.value > d.value) && V["mark-restricted"]),
+					class: b(B.mark, n === 0 && B["mark-start"], n === re.value.length - 1 && B["mark-end"], (t.value < u.value || t.value > d.value) && B["mark-restricted"]),
 					style: { "--elmethis-scoped-marker-ratio": t.ratio }
-				}, [e.markers && r("i", { class: V.tick }, null), e.markerLabels && r("span", { class: V["mark-label"] }, [e.formatMarkerLabel?.(t.value) ?? t.value])]))]),
+				}, [e.markers && r("i", { class: B.tick }, null), e.markerLabels && r("span", { class: B["mark-label"] }, [e.formatMarkerLabel?.(t.value) ?? t.value])]))]),
 				r("span", {
-					class: V.thumb,
+					class: B.thumb,
 					"aria-hidden": "true"
 				}, null)
 			])]);
 		};
 	}
-}), W = {
+}), U = {
 	switch: "_switch_9s4vz_1",
 	bar: "_bar_9s4vz_5",
 	checked: "_checked_9s4vz_21",
 	disabled: "_disabled_9s4vz_26",
 	circle: "_circle_9s4vz_31"
-}, ni = /* @__PURE__ */ i({
+}, ri = /* @__PURE__ */ i({
 	name: "ElmSwitch",
 	props: {
 		color: {
@@ -3167,13 +3183,13 @@ var Qr = /* @__PURE__ */ i({
 				"--elmethis-scoped-width": "calc(var(--elmethis-scoped-size) * 2 + var(--elmethis-scoped-padding) * 2)"
 			}
 		}, [r("input", {
-			class: W.switch,
+			class: U.switch,
 			type: "checkbox",
 			checked: e.checked,
 			disabled: e.disabled
-		}, null), r("div", { class: x(W.bar, e.checked && W.checked, e.disabled && W.disabled) }, [r("div", { class: x(W.circle, e.checked && W.checked, e.disabled && W.disabled) }, null)])]);
+		}, null), r("div", { class: b(U.bar, e.checked && U.checked, e.disabled && U.disabled) }, [r("div", { class: b(U.circle, e.checked && U.checked, e.disabled && U.disabled) }, null)])]);
 	}
-}), G = {
+}), W = {
 	loading: "_loading_lgmx3_23",
 	"elm-text-area": "_elm-text-area_lgmx3_37",
 	disabled: "_disabled_lgmx3_63",
@@ -3183,7 +3199,7 @@ var Qr = /* @__PURE__ */ i({
 	requierd: "_requierd_lgmx3_90",
 	body: "_body_lgmx3_96",
 	textarea: "_textarea_lgmx3_101"
-}, ri = /* @__PURE__ */ i({
+}, ii = /* @__PURE__ */ i({
 	name: "ElmTextArea",
 	inheritAttrs: !1,
 	props: {
@@ -3230,25 +3246,25 @@ var Qr = /* @__PURE__ */ i({
 		return () => {
 			let { class: t, style: p, onFocus: m, onBlur: h, ...g } = i;
 			return r("label", {
-				class: x(G["elm-text-area"], s.value && G.active, (e.disabled || e.isLoading) && G.disabled, t),
+				class: b(W["elm-text-area"], s.value && W.active, (e.disabled || e.isLoading) && W.disabled, t),
 				style: p
 			}, [
-				r("span", { class: x(G.header, s.value && G["label-active"]) }, [
+				r("span", { class: b(W.header, s.value && W["label-active"]) }, [
 					o.icon?.() ?? r(O, {
-						d: at,
+						d: ot,
 						size: "0.75rem"
 					}, null),
-					r("span", null, [e.label, e.required && r("span", { class: G.requierd }, [n("*")])]),
+					r("span", null, [e.label, e.required && r("span", { class: W.requierd }, [n("*")])]),
 					d.value && r(T, {
 						color: e.maxLength != null && f.value > e.maxLength ? "var(--elmethis-color-accent-error)" : "gray",
 						size: "0.75rem"
 					}, { default: () => [e.maxLength == null ? `${f.value}` : `${f.value} / ${e.maxLength}`] })
 				]),
-				r("div", { class: G.body }, [r("textarea", c({
+				r("div", { class: W.body }, [r("textarea", c({
 					value: u.value,
 					rows: e.rows,
 					maxlength: e.maxLength,
-					class: G.textarea,
+					class: W.textarea,
 					placeholder: e.placeholder,
 					onFocus: (e) => {
 						s.value = !0, m?.(e);
@@ -3265,13 +3281,13 @@ var Qr = /* @__PURE__ */ i({
 					}
 				}, g), null)]),
 				r("div", {
-					class: G.loading,
+					class: W.loading,
 					style: { opacity: +!!e.isLoading }
 				}, null)
 			]);
 		};
 	}
-}), K = {
+}), G = {
 	loading: "_loading_11box_23",
 	"elm-text-field": "_elm-text-field_11box_37",
 	disabled: "_disabled_11box_59",
@@ -3284,7 +3300,7 @@ var Qr = /* @__PURE__ */ i({
 	"right-icon-box": "_right-icon-box_11box_121",
 	"clickable-icon": "_clickable-icon_11box_126",
 	"prefix-suffix": "_prefix-suffix_11box_142"
-}, ii = /* @__PURE__ */ i({
+}, ai = /* @__PURE__ */ i({
 	name: "ElmTextField",
 	inheritAttrs: !1,
 	props: {
@@ -3338,27 +3354,27 @@ var Qr = /* @__PURE__ */ i({
 		return () => {
 			let { class: d, style: f, onFocus: p, onBlur: m, ...h } = t, g = e.value == null ? 0 : String(e.value).length;
 			return r("label", {
-				class: x(K["elm-text-field"], s.value && K.active, (e.disabled || e.isLoading) && K.disabled, d),
+				class: b(G["elm-text-field"], s.value && G.active, (e.disabled || e.isLoading) && G.disabled, d),
 				style: f
 			}, [
-				r("span", { class: x(K.header, s.value && K["label-active"]) }, [
+				r("span", { class: b(G.header, s.value && G["label-active"]) }, [
 					a.icon?.() ?? r(O, {
-						d: it,
+						d: at,
 						size: "0.75rem"
 					}, null),
-					r("span", null, [e.label, e.required && r("span", { class: K.requierd }, [n("*")])]),
+					r("span", null, [e.label, e.required && r("span", { class: G.requierd }, [n("*")])]),
 					e.value != null && r(T, {
 						color: e.maxLength != null && g > e.maxLength ? "var(--elmethis-color-accent-error)" : "gray",
 						size: "0.75rem"
 					}, { default: () => [e.maxLength == null ? `${g}` : `${g} / ${e.maxLength}`] })
 				]),
-				r("div", { class: K.body }, [
-					e.prefix && r("span", { class: K["prefix-suffix"] }, [e.prefix]),
+				r("div", { class: G.body }, [
+					e.prefix && r("span", { class: G["prefix-suffix"] }, [e.prefix]),
 					r("input", c({
 						ref: o,
 						value: e.value,
 						type: l.value,
-						class: K.input,
+						class: G.input,
 						placeholder: e.placeholder,
 						onInput: (e) => {
 							i("update:value", e.target.value);
@@ -3373,38 +3389,38 @@ var Qr = /* @__PURE__ */ i({
 						style: { cursor: e.disabled ? "not-allowed" : e.isLoading ? "progress" : "auto" },
 						"aria-required": e.required
 					}, h), null),
-					r("div", { class: K["right-icon-box"] }, [
-						r("span", { class: K["prefix-suffix"] }, [e.suffix != null && r(T, null, { default: () => [e.suffix] })]),
+					r("div", { class: G["right-icon-box"] }, [
+						r("span", { class: G["prefix-suffix"] }, [e.suffix != null && r(T, null, { default: () => [e.suffix] })]),
 						r("div", {
-							class: K["clickable-icon"],
+							class: G["clickable-icon"],
 							onClick: () => {
 								!e.isLoading && !e.disabled && (l.value = l.value === "text" ? "password" : "text");
 							}
 						}, [r(O, {
-							d: l.value === "text" ? Le : Ie,
+							d: l.value === "text" ? Re : Le,
 							size: "1.25rem",
 							color: "gray"
 						}, null)]),
 						r("div", {
-							class: K["clickable-icon"],
+							class: G["clickable-icon"],
 							onClick: () => {
 								!e.isLoading && !e.disabled && u("");
 							}
 						}, [r(O, {
-							d: ot,
+							d: st,
 							size: "1.25rem",
 							color: "gray"
 						}, null)])
 					])
 				]),
 				r("div", {
-					class: K.loading,
+					class: G.loading,
 					style: { opacity: +!!e.isLoading }
 				}, null)
 			]);
 		};
 	}
-}), ai = { "elm-validation": "_elm-validation_1cigg_1" }, oi = /* @__PURE__ */ i({
+}), oi = { "elm-validation": "_elm-validation_1cigg_1" }, si = /* @__PURE__ */ i({
 	name: "ElmValidation",
 	props: {
 		text: {
@@ -3422,14 +3438,14 @@ var Qr = /* @__PURE__ */ i({
 	},
 	setup(e) {
 		return () => r("div", {
-			class: x(ai["elm-validation"]),
+			class: b(oi["elm-validation"]),
 			style: { "--elmethis-scoped-opacity": e.isValid ? 1 : .5 }
 		}, [r(O, {
-			d: e.isValid ? ke : Ae,
+			d: e.isValid ? Ae : je,
 			color: e.isValid ? e.validColor : void 0
 		}, null), r(T, { color: e.isValid ? e.validColor : void 0 }, { default: () => [e.text] })]);
 	}
-}), si = /* @__PURE__ */ i({
+}), ci = /* @__PURE__ */ i({
 	name: "ElmCopyIcon",
 	inheritAttrs: !1,
 	props: { content: {
@@ -3444,11 +3460,11 @@ var Qr = /* @__PURE__ */ i({
 		});
 		return () => a(n);
 	}
-}), ci = {
+}), li = {
 	"elm-square-loading-icon": "_elm-square-loading-icon_m72nq_19",
 	square: "_square_m72nq_28",
 	appear: "_appear_m72nq_1"
-}, li = /* @__PURE__ */ i({
+}, ui = /* @__PURE__ */ i({
 	name: "ElmSquareLoadingIcon",
 	inheritAttrs: !1,
 	props: {
@@ -3466,11 +3482,11 @@ var Qr = /* @__PURE__ */ i({
 			let { class: n, style: i, ...a } = t, o = 1200, s = o / (e.dimensions * 3), l = [];
 			for (let t = 0; t < e.dimensions; t++) for (let n = 0; n < e.dimensions; n++) l.push(r("span", {
 				key: `${t}-${n}`,
-				class: ci.square,
+				class: li.square,
 				style: { "--elmethis-scoped-delay": `${s * (t + n)}ms` }
 			}, null));
 			return r("span", c({
-				class: x(ci["elm-square-loading-icon"], n),
+				class: b(li["elm-square-loading-icon"], n),
 				style: [{
 					"--elmethis-scoped-size": e.size,
 					"--elmethis-scoped-dimensions": e.dimensions,
@@ -3479,12 +3495,12 @@ var Qr = /* @__PURE__ */ i({
 			}, a), [l]);
 		};
 	}
-}), ui = "elmethis-theme", di = "elmethis-theme-change", fi = (e) => e === "dark" ? "dark" : e === "light" ? "light" : null, pi = () => typeof matchMedia < "u" && matchMedia("(prefers-color-scheme: dark)").matches, mi = (e, t) => {
+}), K = "elmethis-theme", di = "elmethis-theme-change", fi = (e) => e === "dark" ? "dark" : e === "light" ? "light" : null, pi = () => typeof matchMedia < "u" && matchMedia("(prefers-color-scheme: dark)").matches, mi = (e, t) => {
 	let n = document.documentElement;
-	e == null ? (n.style.removeProperty("color-scheme"), n.removeAttribute("data-theme"), t && typeof localStorage < "u" && localStorage.removeItem(ui)) : (n.style.colorScheme = e, n.setAttribute("data-theme", e), t && typeof localStorage < "u" && localStorage.setItem(ui, e)), window.dispatchEvent(new CustomEvent(di, { detail: e }));
+	e == null ? (n.style.removeProperty("color-scheme"), n.removeAttribute("data-theme"), t && typeof localStorage < "u" && localStorage.removeItem(K)) : (n.style.colorScheme = e, n.setAttribute("data-theme", e), t && typeof localStorage < "u" && localStorage.setItem(K, e)), window.dispatchEvent(new CustomEvent(di, { detail: e }));
 }, hi = () => {
 	if (typeof window > "u") return !1;
-	let e = fi(localStorage.getItem(ui));
+	let e = fi(localStorage.getItem(K));
 	return e == null ? pi() : e === "dark";
 };
 function gi() {
@@ -3494,15 +3510,15 @@ function gi() {
 		let n = t.detail;
 		e.value = n == null ? pi() : n === "dark";
 	}, r = (t) => {
-		if (t.key !== ui) return;
+		if (t.key !== K) return;
 		let n = fi(t.newValue);
 		e.value = n == null ? pi() : n === "dark", mi(n, !1);
 	}, i, a = (t) => {
-		fi(localStorage.getItem(ui)) ?? (e.value = t.matches);
+		fi(localStorage.getItem(K)) ?? (e.value = t.matches);
 	};
 	return d(() => {
 		window.addEventListener(di, n), window.addEventListener("storage", r);
-		let e = fi(localStorage.getItem(ui));
+		let e = fi(localStorage.getItem(K));
 		e != null && mi(e, !1), typeof matchMedia < "u" && (i = matchMedia("(prefers-color-scheme: dark)"), i.addEventListener("change", a));
 	}), u(() => {
 		window.removeEventListener(di, n), window.removeEventListener("storage", r), i?.removeEventListener("change", a);
@@ -3526,7 +3542,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 			width: e.size,
 			height: e.size,
 			viewBox: "0 0 24 24",
-			class: x(_i["elm-toggle-theme"]),
+			class: b(_i["elm-toggle-theme"]),
 			onClick: n
 		}, [
 			r("path", {
@@ -3738,7 +3754,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 			width: e.size,
 			height: e.size,
 			viewBox: "0 0 24 24",
-			class: x(_i["elm-toggle-theme"]),
+			class: b(_i["elm-toggle-theme"]),
 			onClick: n
 		}, [
 			r("g", {
@@ -3923,7 +3939,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 		required: !0
 	} },
 	setup(e) {
-		return () => r("nav", { class: x(yi["elm-breadcrumb"]) }, [e.links.map((t, n) => r("span", {
+		return () => r("nav", { class: b(yi["elm-breadcrumb"]) }, [e.links.map((t, n) => r("span", {
 			key: n,
 			style: { display: "contents" }
 		}, [r("span", {
@@ -3931,11 +3947,11 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 			onClick: t.onClick
 		}, [r(O, {
 			class: yi.icon,
-			d: n === 0 ? Ge : n === e.links.length - 1 ? De : Be,
+			d: n === 0 ? Ke : n === e.links.length - 1 ? Oe : Ve,
 			size: "1rem"
 		}, null), r("span", { class: yi.chunk }, [t.text])]), e.links.length !== n + 1 && r(O, {
 			class: yi.chevron,
-			d: je,
+			d: Me,
 			size: "1rem"
 		}, null)]))]);
 	}
@@ -3965,7 +3981,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 			});
 		};
 		return () => r("nav", {
-			class: x(xi["elm-page-top"], t.value && xi.visible),
+			class: b(xi["elm-page-top"], t.value && xi.visible),
 			style: {
 				"--elmethis-scoped-size": "64px",
 				left: e.position === "left" ? "0" : "auto",
@@ -4081,7 +4097,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 			}, 1500);
 		};
 		return () => r("div", {
-			class: x(q["elm-color-primitive-sample"]),
+			class: b(q["elm-color-primitive-sample"]),
 			onClick: (e) => {
 				a(e);
 			}
@@ -4094,7 +4110,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 		}, [
 			r(O, {
 				class: q["mode-toggle-icon"],
-				d: t.value === "hex" ? We : Ve,
+				d: t.value === "hex" ? Ge : He,
 				size: "1.25rem"
 			}, null),
 			n("Copy: "),
@@ -4262,7 +4278,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 				}
 			}, [r("span", { "data-copy-token": e }, [o(e)]), r("span", { "data-copy-token": t }, [o(t)])]))])
 		])])]);
-		return () => r("div", { class: x(Y["elm-color-semantic-sample"]) }, [r("div", { class: Y.toolbar }, [r("button", {
+		return () => r("div", { class: b(Y["elm-color-semantic-sample"]) }, [r("div", { class: Y.toolbar }, [r("button", {
 			type: "button",
 			class: Y["mode-toggle"],
 			onClick: () => {
@@ -4271,7 +4287,7 @@ var _i = { "elm-toggle-theme": "_elm-toggle-theme_11awq_1" }, vi = /* @__PURE__
 		}, [
 			r(O, {
 				class: Y["mode-toggle-icon"],
-				d: t.value === "hex" ? We : Ve,
+				d: t.value === "hex" ? Ge : He,
 				size: "1.25rem"
 			}, null),
 			n("Copy: "),
@@ -4297,7 +4313,7 @@ var Z = (e) => {
 			case "blockquote":
 				if (c.tokens && c.tokens.length !== 0) {
 					let e;
-					o.push(r(mr, { key: s }, X(e = Z(c.tokens)) ? e : { default: () => [e] }));
+					o.push(r(pr, { key: s }, X(e = Z(c.tokens)) ? e : { default: () => [e] }));
 				}
 				break;
 			case "br":
@@ -4438,7 +4454,7 @@ var Z = (e) => {
 	setup(e) {
 		let t = h([]), n = h([]);
 		return _(() => e.markdown, (r) => {
-			let i = Kt.setOptions({ gfm: !0 }).lexer(r);
+			let i = qt.setOptions({ gfm: !0 }).lexer(r);
 			if (e.isStreaming && i.length > 0) {
 				let e = i.slice(0, -1);
 				e.length !== t.value.length && (t.value = e), n.value = i.slice(-1);
@@ -4601,7 +4617,7 @@ var qi = (e) => {
 						let n = "", o = "empty";
 						return a ? (n = a[t].letter.toUpperCase(), o = a[t].status) : s && (n = (i[t] ?? "").toUpperCase(), o = n ? "tbd" : "empty"), r("div", {
 							key: t,
-							class: x(Q.cell, o === "correct" && Q.correct, o === "present" && Q.present, o === "absent" && Q.absent, o === "tbd" && Q.tbd, o === "empty" && Q.empty)
+							class: b(Q.cell, o === "correct" && Q.correct, o === "present" && Q.present, o === "absent" && Q.absent, o === "tbd" && Q.tbd, o === "empty" && Q.empty)
 						}, [n]);
 					});
 					return r("div", {
@@ -4611,7 +4627,7 @@ var qi = (e) => {
 				});
 				return r("div", { class: Q["elm-wordle"] }, [
 					r("div", {
-						class: x(Q["message-area"], d ? Q.error : o === "playing" ? void 0 : Q.status),
+						class: b(Q["message-area"], d ? Q.error : o === "playing" ? void 0 : Q.status),
 						"aria-live": "polite"
 					}, [d || (o === "won" ? `🎉 You won in ${t.length} ${t.length === 1 ? "guess" : "guesses"}!` : o === "lost" ? `😢 The word was "${e.toUpperCase()}"` : null)]),
 					r("div", { class: Q.board }, [p]),
@@ -4629,10 +4645,10 @@ var qi = (e) => {
 						return r("button", {
 							key: e,
 							"data-key": e,
-							class: x(Q.key, e === "Enter" && Q.wide, e === "⌫" && Q.wide, t === "correct" && Q.correct, t === "present" && Q.present, t === "absent" && Q.absent)
+							class: b(Q.key, e === "Enter" && Q.wide, e === "⌫" && Q.wide, t === "correct" && Q.correct, t === "present" && Q.present, t === "absent" && Q.absent)
 						}, [e]);
 					})]))]),
-					r("div", { class: x(Q["reset-container"], o === "playing" && Q.hidden) }, [r("button", {
+					r("div", { class: b(Q["reset-container"], o === "playing" && Q.hidden) }, [r("button", {
 						class: Q["reset-button"],
 						onClick: f
 					}, [n("Play Again")])])
@@ -4655,4 +4671,4 @@ var qi = (e) => {
 	};
 };
 //#endregion
-export { Mn as A2uiSurface, gn as CatalogRenderer, Nn as ElmA2ui, er as ElmAudioPlayer, Kr as ElmBlockFallback, or as ElmBlockImage, mr as ElmBlockQuote, dr as ElmBookmark, bi as ElmBreadcrumb, qr as ElmButton, Yr as ElmButtonDropdown, _r as ElmCallout, Xr as ElmCheckbox, Kn as ElmCodeBlock, Jt as ElmCollapse, Ei as ElmColorPrimitiveSample, Pi as ElmColorSemanticSample, si as ElmCopyIcon, br as ElmDivider, Gr as ElmDotLoadingIcon, lr as ElmFile, an as ElmFragmentIdentifier, sn as ElmHeading, Zn as ElmHtml, Rr as ElmHtmlViewer, w as ElmInlineIcon, T as ElmInlineText, Fn as ElmKatex, Vn as ElmLanguageIcon, Sr as ElmList, Li as ElmMarkdown, O as ElmMdiIcon, ir as ElmModal, vr as ElmNotionCallout, Si as ElmPageTop, dn as ElmParagraph, Br as ElmParallax, nr as ElmRectangleWave, Qr as ElmSelect, Un as ElmShikiHighlighter, ti as ElmSlider, li as ElmSquareLoadingIcon, ni as ElmSwitch, en as ElmTab, $t as ElmTabList, tn as ElmTabPanel, Tr as ElmTable, Er as ElmTableBody, Or as ElmTableCell, Ar as ElmTableHeader, Mr as ElmTableRow, Qt as ElmTabs, ri as ElmTextArea, ii as ElmTextField, fr as ElmToggle, vi as ElmToggleTheme, Hr as ElmTooltip, Pr as ElmUnsupportedBlock, oi as ElmValidation, Cr as HasRowHeaderContext, Dt as LANGUAGES, di as THEME_CHANGE_EVENT, wr as TableSectionContext, Cn as basicCatalog, Lr as blockCatalog, D as defineRenderer, Gn as useClipboard, gi as useElmethisTheme, ar as useModal, qi as useWordle };
+export { Mn as A2uiSurface, gn as CatalogRenderer, Nn as ElmA2ui, er as ElmAudioPlayer, qr as ElmBlockFallback, or as ElmBlockImage, pr as ElmBlockQuote, dr as ElmBookmark, bi as ElmBreadcrumb, Jr as ElmButton, Xr as ElmButtonDropdown, gr as ElmCallout, Zr as ElmCheckbox, Kn as ElmCodeBlock, Jt as ElmCollapse, Ei as ElmColorPrimitiveSample, Pi as ElmColorSemanticSample, ci as ElmCopyIcon, br as ElmDivider, Kr as ElmDotLoadingIcon, lr as ElmFile, an as ElmFragmentIdentifier, sn as ElmHeading, Zn as ElmHtml, zr as ElmHtmlViewer, w as ElmInlineIcon, T as ElmInlineText, Fn as ElmKatex, Vn as ElmLanguageIcon, Sr as ElmList, Li as ElmMarkdown, O as ElmMdiIcon, ir as ElmModal, vr as ElmNotionCallout, Si as ElmPageTop, dn as ElmParagraph, Vr as ElmParallax, nr as ElmRectangleWave, $r as ElmSelect, Un as ElmShikiHighlighter, ni as ElmSlider, ui as ElmSquareLoadingIcon, ri as ElmSwitch, en as ElmTab, $t as ElmTabList, tn as ElmTabPanel, Tr as ElmTable, Er as ElmTableBody, Or as ElmTableCell, Ar as ElmTableHeader, Mr as ElmTableRow, Qt as ElmTabs, ii as ElmTextArea, ai as ElmTextField, fr as ElmToggle, vi as ElmToggleTheme, Ur as ElmTooltip, Pr as ElmUnsupportedBlock, si as ElmValidation, Cr as HasRowHeaderContext, Ot as LANGUAGES, di as THEME_CHANGE_EVENT, wr as TableSectionContext, Cn as basicCatalog, Lr as blockCatalog, D as defineRenderer, Gn as useClipboard, gi as useElmethisTheme, ar as useModal, qi as useWordle };