@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/dist/static/index.es.js

@@ -25,21 +25,59 @@ function r(e, t) {
 }
 //#endregion
 //#region src/static/render.ts
-function i(t, n, i) {
-	let a = [`class="${e(r(t.classSpec, n))}"`];
-	if (t.tag === "button" && a.push("type=\"button\""), t.extraAttrs) for (let [n, r] of Object.entries(t.extraAttrs)) a.push(`${n}="${e(r)}"`);
-	let o = [];
-	if (t.customColorVars) {
-		let { base: r, text: i } = t.customColorVars;
-		r && typeof n.baseColor == "string" && o.push(`${r}: ${e(n.baseColor)};`), i && typeof n.textColor == "string" && o.push(`${i}: ${e(n.textColor)};`);
+function i(e, t) {
+	let n = { class: r(e.classSpec, t) };
+	if (e.tag === "button" && (n.type = "button"), e.extraAttrs) for (let [t, r] of Object.entries(e.extraAttrs)) n[t] = r;
+	if (e.customColorVars) {
+		let r = [], { base: i, text: a } = e.customColorVars;
+		i && typeof t.baseColor == "string" && r.push(`${i}: ${t.baseColor};`), a && typeof t.textColor == "string" && r.push(`${a}: ${t.textColor};`), r.length > 0 && (n.style = r.join(" "));
 	}
-	o.length > 0 && a.push(`style="${o.join(" ")}"`);
-	let s = a.join(" ");
-	return t.void ? `<${t.tag} ${s} />` : `<${t.tag} ${s}>${i}</${t.tag}>`;
+	return n;
+}
+function a(e, t, n, r) {
+	let a = i(t, n);
+	return t.void ? e(t.tag, a) : e(t.tag, a, r);
+}
+//#endregion
+//#region src/static/stringH.ts
+var o = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"keygen",
+	"link",
+	"meta",
+	"param",
+	"progress",
+	"source",
+	"track",
+	"wbr"
+]);
+function s(t, n) {
+	return n == null || n === !1 ? null : n === !0 ? t : `${t}="${e(String(n))}"`;
+}
+function c(e) {
+	if (!e) return "";
+	let t = [];
+	for (let [n, r] of Object.entries(e)) {
+		let e = s(n, r);
+		e !== null && t.push(e);
+	}
+	return t.length > 0 ? ` ${t.join(" ")}` : "";
 }
-//#endregion
-//#region src/static/specs.ts
-var a = {
+var l = (e, t, n) => {
+	if (t && typeof t.innerHTML == "string") {
+		let n = t.innerHTML, r = { ...t };
+		return delete r.innerHTML, `<${e}${c(r)}>${n}</${e}>`;
+	}
+	let r = c(t), i = n === void 0 || n === "" || Array.isArray(n) && n.length === 0;
+	return o.has(e) && i ? `<${e}${r} />` : `<${e}${r}>${n === void 0 ? "" : Array.isArray(n) ? n.join("") : n}</${e}>`;
+}, u = {
 	panel: {
 		tag: "div",
 		classSpec: {
@@ -257,7 +295,11 @@ var a = {
 		classSpec: {
 			base: "sk-input",
 			kind: !0,
-			size: !0
+			size: !0,
+			listFlags: [{
+				prop: "corners",
+				family: "cut"
+			}]
 		},
 		void: !0
 	},
@@ -274,7 +316,11 @@ var a = {
 		classSpec: {
 			base: "sk-select",
 			kind: !0,
-			size: !0
+			size: !0,
+			listFlags: [{
+				prop: "corners",
+				family: "cut"
+			}]
 		}
 	},
 	slider: {
@@ -300,6 +346,30 @@ var a = {
 		void: !0,
 		extraAttrs: { type: "color" }
 	},
+	inputGroup: {
+		tag: "div",
+		classSpec: {
+			base: "sk-input-group",
+			kind: !0,
+			size: !0,
+			listFlags: [{
+				prop: "corners",
+				family: "cut"
+			}]
+		},
+		customColorVars: {
+			base: "--sk-input-group-color-base",
+			text: "--sk-input-group-fg"
+		}
+	},
+	inputGroupAddon: {
+		tag: "span",
+		classSpec: {
+			base: "sk-input-group-addon",
+			kind: !0,
+			size: !0
+		}
+	},
 	dropdown: {
 		tag: "details",
 		classSpec: {
@@ -311,133 +381,156 @@ var a = {
 };
 //#endregion
 //#region src/static/components/panel.ts
-function o(e = {}, t = "") {
-	return i(a.panel, e, t);
+function d(e, t = {}, n) {
+	return a(e, u.panel, t, n);
 }
 //#endregion
 //#region src/static/components/card.ts
-function s(e = {}, t = "") {
-	return i(a.card, e, t);
+function f(e, t = {}, n) {
+	return a(e, u.card, t, n);
 }
 //#endregion
 //#region src/static/components/alert.ts
-var c = new Set([
+var p = new Set([
 	"info",
 	"success",
 	"warning",
 	"danger"
-]), l = {
+]), m = {
 	info: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><circle cx=\"12\" cy=\"8\" r=\"0.5\" fill=\"currentColor\"></circle></svg>",
 	success: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path><polyline points=\"22 4 12 14.01 9 11.01\"></polyline></svg>",
 	warning: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"></path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line><circle cx=\"12\" cy=\"17\" r=\"0.5\" fill=\"currentColor\"></circle></svg>",
 	danger: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line></svg>"
 };
-function u(t = {}, n = "") {
-	let i = t.kind ?? "info", a = [`class="${e(r({
-		base: "sk-alert",
-		kind: !0,
-		booleanFlags: ["subtle"]
-	}, {
-		...t,
-		kind: i
-	}))}"`, "role=\"alert\""], o = [];
-	typeof t.baseColor == "string" && o.push(`--sk-alert-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && o.push(`--sk-alert-fg: ${e(t.textColor)};`), o.length > 0 && a.push(`style="${o.join(" ")}"`);
-	let s = "";
+function h(e, t = {}, n) {
+	let i = t.kind ?? "info", a = {
+		class: r({
+			base: "sk-alert",
+			kind: !0,
+			booleanFlags: ["subtle"]
+		}, {
+			...t,
+			kind: i
+		}),
+		role: "alert"
+	}, o = [];
+	typeof t.baseColor == "string" && o.push(`--sk-alert-color-base: ${t.baseColor};`), typeof t.textColor == "string" && o.push(`--sk-alert-fg: ${t.textColor};`), o.length > 0 && (a.style = o.join(" "));
+	let s = null;
 	if (t.icon !== !1) {
-		let e = typeof t.icon == "string" ? t.icon : c.has(i) ? l[i] ?? "" : null;
-		e !== null && (s = `<div class="sk-alert-icon">${e}</div>`);
+		let n = typeof t.icon == "string" ? t.icon : p.has(i) ? m[i] ?? "" : null;
+		n !== null && (s = e("div", {
+			class: "sk-alert-icon",
+			innerHTML: n
+		}));
 	}
-	let u = `<div class="sk-alert-content">${n}</div>`;
-	return `<div ${a.join(" ")}>${s}${u}</div>`;
+	let c = e("div", { class: "sk-alert-content" }, n);
+	return e("div", a, s === null ? [c] : [s, c]);
 }
 //#endregion
 //#region src/static/components/divider.ts
-function d(t = {}) {
+function g(e, t = {}) {
 	let n = t.orientation ?? "horizontal", r = t.kind ?? "neutral", i = t.size ?? "md", a = [
 		"sk-divider",
 		`sk-${n}`,
 		`sk-${r}`,
 		`sk-${i}`
 	];
-	return t.variant === "subtle" && a.push("sk-subtle"), `<hr class="${e(a.join(" "))}" role="separator">`;
+	return t.variant === "subtle" && a.push("sk-subtle"), e("hr", {
+		class: a.join(" "),
+		role: "separator"
+	});
 }
 //#endregion
 //#region src/static/components/page.ts
-function f(e = {}, t = "") {
-	return i(a.page, e, t);
+function _(e, t = {}, n) {
+	return a(e, u.page, t, n);
 }
 //#endregion
 //#region src/static/components/group.ts
-function p(e = {}, t = "") {
-	return i(a.group, e, t);
+function v(e, t = {}, n) {
+	return a(e, u.group, t, n);
 }
 //#endregion
 //#region src/static/components/skeleton.ts
-function m(t = {}) {
+function y(e, t = {}) {
 	let n = t.variant ?? "text", r = t.animation ?? "shimmer", i = ["sk-skeleton", `sk-${n}`];
 	r !== "none" && i.push(`sk-${r}`);
-	let a = [`class="${e(i.join(" "))}"`], o = [], s = t.height ?? ((n === "circular" || n === "square") && t.width ? t.width : void 0);
-	return typeof t.width == "string" && o.push(`width: ${e(t.width)};`), typeof s == "string" && o.push(`height: ${e(s)};`), o.length > 0 && a.push(`style="${o.join(" ")}"`), `<div ${a.join(" ")}></div>`;
+	let a = { class: i.join(" ") }, o = [], s = t.height ?? ((n === "circular" || n === "square") && t.width ? t.width : void 0);
+	return typeof t.width == "string" && o.push(`width: ${t.width};`), typeof s == "string" && o.push(`height: ${s};`), o.length > 0 && (a.style = o.join(" ")), e("div", a);
 }
 //#endregion
 //#region src/static/components/progress.ts
-function h(e = {}, t = "") {
-	return i(a.progress, e, t);
+function b(e, t = {}, n) {
+	return a(e, u.progress, t, n);
 }
 //#endregion
 //#region src/static/components/spinner.ts
-function g(e) {
-	switch (e) {
-		case "circular": return "<div class=\"sk-spinner-circular\"><div class=\"sk-arc sk-arc-large\"></div><div class=\"sk-arc sk-arc-small\"></div></div>";
-		case "dots": return "<div class=\"sk-spinner-dots\"><div class=\"sk-dot\"></div><div class=\"sk-dot\"></div><div class=\"sk-dot\"></div></div>";
-		case "crosshair": return "<div class=\"sk-crosshair-loader\"></div>";
+function x(e, t) {
+	switch (t) {
+		case "circular": return e("div", { class: "sk-spinner-circular" }, [e("div", { class: "sk-arc sk-arc-large" }), e("div", { class: "sk-arc sk-arc-small" })]);
+		case "dots": return e("div", { class: "sk-spinner-dots" }, [
+			e("div", { class: "sk-dot" }),
+			e("div", { class: "sk-dot" }),
+			e("div", { class: "sk-dot" })
+		]);
+		case "crosshair": return e("div", { class: "sk-crosshair-loader" });
 	}
 }
-function _(t = {}) {
-	let n = t.kind ?? "primary", r = t.size ?? "md", i = t.variant ?? "circular", a = [
-		`class="${e([
+function S(e, t = {}) {
+	let n = t.kind ?? "primary", r = t.size ?? "md", i = t.variant ?? "circular", a = {
+		class: [
 			"sk-spinner",
 			`sk-${n}`,
 			`sk-${r}`,
 			`sk-variant-${i}`
-		].join(" "))}"`,
-		"role=\"status\"",
-		"aria-live=\"polite\"",
-		"aria-label=\"Loading\""
-	];
-	return typeof t.color == "string" && a.push(`style="--sk-spinner-color: ${e(t.color)};"`), `<div ${a.join(" ")}>${g(i)}</div>`;
+		].join(" "),
+		role: "status",
+		"aria-live": "polite",
+		"aria-label": "Loading"
+	};
+	return typeof t.color == "string" && (a.style = `--sk-spinner-color: ${t.color};`), e("div", a, x(e, i));
 }
 //#endregion
 //#region src/static/components/navBar.ts
-function v(t = {}, n = "") {
+function C(e, t = {}, n) {
 	let i = t.sticky !== !1, a = r({
 		base: "sk-navbar",
 		kind: !0
-	}, t), o = [`class="${e(i ? `${a} sk-sticky` : a)}"`], s = [];
-	typeof t.baseColor == "string" && s.push(`--sk-navbar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && s.push(`--sk-navbar-fg: ${e(t.textColor)};`), s.length > 0 && o.push(`style="${s.join(" ")}"`);
-	let c = "";
-	t.leading && (c += `<div class="sk-navbar-leading">${t.leading}</div>`), t.brand && (c += `<div class="sk-navbar-brand">${t.brand}</div>`), n && (c += `<div class="sk-navbar-nav">${n}</div>`), t.actions && (c += `<div class="sk-navbar-actions">${t.actions}</div>`);
-	let l = `<div class="sk-navbar-content">${c}</div>`;
-	return `<nav ${o.join(" ")}>${l}</nav>`;
+	}, t), o = { class: i ? `${a} sk-sticky` : a }, s = [];
+	typeof t.baseColor == "string" && s.push(`--sk-navbar-color-base: ${t.baseColor};`), typeof t.textColor == "string" && s.push(`--sk-navbar-fg: ${t.textColor};`), s.length > 0 && (o.style = s.join(" "));
+	let c = [];
+	return t.leading && c.push(e("div", {
+		class: "sk-navbar-leading",
+		innerHTML: t.leading
+	})), t.brand && c.push(e("div", {
+		class: "sk-navbar-brand",
+		innerHTML: t.brand
+	})), n !== void 0 && (Array.isArray(n) ? n.length > 0 : n) && c.push(e("div", { class: "sk-navbar-nav" }, n)), t.actions && c.push(e("div", {
+		class: "sk-navbar-actions",
+		innerHTML: t.actions
+	})), e("nav", o, e("div", { class: "sk-navbar-content" }, c));
 }
 //#endregion
 //#region src/static/components/toolbar.ts
-var y = [
+var w = [
 	"top-left",
 	"top-right",
 	"bottom-right",
 	"bottom-left"
 ];
-function b(t = {}, n = "") {
-	let r = t.kind, i = t.orientation ?? "horizontal", a = t.corners ?? y, o = ["sk-toolbar"];
+function T(e, t = {}, n) {
+	let r = t.kind, i = t.orientation ?? "horizontal", a = t.corners ?? w, o = ["sk-toolbar"];
 	typeof r == "string" && o.push(`sk-${r}`), o.push(`sk-${i}`);
 	for (let e of a) o.push(`sk-cut-${e}`);
-	let s = [`class="${e(o.join(" "))}"`, "role=\"toolbar\""], c = [];
-	return typeof t.baseColor == "string" && c.push(`--sk-toolbar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && c.push(`--sk-toolbar-fg: ${e(t.textColor)};`), c.length > 0 && s.push(`style="${c.join(" ")}"`), `<div ${s.join(" ")}>${n}</div>`;
+	let s = {
+		class: o.join(" "),
+		role: "toolbar"
+	}, c = [];
+	return typeof t.baseColor == "string" && c.push(`--sk-toolbar-color-base: ${t.baseColor};`), typeof t.textColor == "string" && c.push(`--sk-toolbar-fg: ${t.textColor};`), c.length > 0 && (s.style = c.join(" ")), e("div", s, n);
 }
 //#endregion
 //#region src/static/components/sidebar.ts
-function x(t = {}, n = "") {
+function E(e, t = {}, n) {
 	let r = t.kind ?? "neutral", i = t.side ?? "left", a = ["sk-sidebar", `sk-${r}`];
 	i === "right" && a.push("sk-sidebar-right"), t.dense === !0 && a.push("sk-dense");
 	let o = i === "right" ? "bottom-left" : "bottom-right", s = [
@@ -447,23 +540,25 @@ function x(t = {}, n = "") {
 		`sk-cut-${o}`,
 		`sk-decoration-${o}`,
 		"sk-sidebar-panel"
-	], c = `class="${e(a.join(" "))}"`, l = `class="${e(s.join(" "))}"`, u = [];
-	return typeof t.baseColor == "string" && u.push(`--sk-sidebar-color-base: ${e(t.baseColor)};`), `<aside ${c}${u.length > 0 ? ` style="${u.join(" ")}"` : ""}><div ${l}>${`<div class="sk-panel-scroll-content"><nav class="sk-sidebar-nav">${n}</nav></div>`}</div></aside>`;
+	], c = { class: a.join(" ") }, l = [];
+	typeof t.baseColor == "string" && l.push(`--sk-sidebar-color-base: ${t.baseColor};`), l.length > 0 && (c.style = l.join(" "));
+	let u = e("div", { class: "sk-panel-scroll-content" }, e("nav", { class: "sk-sidebar-nav" }, n));
+	return e("aside", c, e("div", { class: s.join(" ") }, u));
 }
 //#endregion
 //#region src/static/components/breadcrumbs.ts
-function S(e = {}, t = "") {
-	return i(a.breadcrumbs, e, t);
+function D(e, t = {}, n) {
+	return a(e, u.breadcrumbs, t, n);
 }
 //#endregion
 //#region src/static/components/pagination.ts
-function C(e = {}, t = "") {
-	return i(a.pagination, e, t);
+function O(e, t = {}, n) {
+	return a(e, u.pagination, t, n);
 }
 //#endregion
 //#region src/static/components/tag.ts
-var w = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
-function T(t = {}, n = "") {
+var k = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
+function A(e, t = {}, n) {
 	let r = t.kind ?? "neutral", i = t.variant ?? "solid", a = t.size ?? "md", o = [
 		"sk-tag",
 		`sk-${r}`,
@@ -471,46 +566,74 @@ function T(t = {}, n = "") {
 		`sk-${a}`
 	];
 	t.removable && o.push("sk-removable");
-	let s = [`class="${e(o.join(" "))}"`], c = [];
-	typeof t.baseColor == "string" && c.push(`--sk-tag-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && c.push(`--sk-tag-fg: ${e(t.textColor)};`), c.length > 0 && s.push(`style="${c.join(" ")}"`);
-	let l = `<span class="sk-tag-content">${n}</span>`, u = t.removable ? `<button type="button" class="sk-tag-remove" aria-label="Remove">${w}</button>` : "";
-	return `<span ${s.join(" ")}>${l}${u}</span>`;
+	let s = { class: o.join(" ") }, c = [];
+	typeof t.baseColor == "string" && c.push(`--sk-tag-color-base: ${t.baseColor};`), typeof t.textColor == "string" && c.push(`--sk-tag-fg: ${t.textColor};`), c.length > 0 && (s.style = c.join(" "));
+	let l = [e("span", { class: "sk-tag-content" }, n)];
+	if (t.removable) {
+		let t = e("button", {
+			type: "button",
+			class: "sk-tag-remove",
+			"aria-label": "Remove",
+			innerHTML: k
+		});
+		l.push(t);
+	}
+	return e("span", s, l);
 }
 //#endregion
 //#region src/static/components/avatar.ts
-var E = "<svg class=\"sk-avatar-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"></path></svg>";
-function D(t = {}) {
-	let n = t.kind ?? "neutral", r = t.size ?? "md", i = [`class="${e([
+var j = "<svg class=\"sk-avatar-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"></path></svg>";
+function M(e, n = {}) {
+	let r = n.kind ?? "neutral", i = n.size ?? "md", a = { class: [
 		"sk-avatar",
-		`sk-${n}`,
-		`sk-${r}`
-	].join(" "))}"`], a = [];
-	typeof t.baseColor == "string" && a.push(`--sk-avatar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && a.push(`--sk-avatar-fg: ${e(t.textColor)};`), a.length > 0 && i.push(`style="${a.join(" ")}"`);
-	let o;
-	if (t.src) {
-		let n = t.alt ?? "";
-		o = `<img src="${e(t.src)}" alt="${e(n)}" class="sk-avatar-image">`;
-	} else o = t.initials ? `<span class="sk-avatar-initials">${e(t.initials.slice(0, 2).toUpperCase())}</span>` : E;
-	return `<div ${i.join(" ")}>${o}</div>`;
+		`sk-${r}`,
+		`sk-${i}`
+	].join(" ") }, o = [];
+	if (typeof n.baseColor == "string" && o.push(`--sk-avatar-color-base: ${n.baseColor};`), typeof n.textColor == "string" && o.push(`--sk-avatar-fg: ${n.textColor};`), o.length > 0 && (a.style = o.join(" ")), n.src) {
+		let t = n.alt ?? "";
+		return e("div", a, e("img", {
+			src: n.src,
+			alt: t,
+			class: "sk-avatar-image"
+		}));
+	}
+	return n.initials ? e("div", a, e("span", {
+		class: "sk-avatar-initials",
+		innerHTML: t(n.initials.slice(0, 2).toUpperCase())
+	})) : e("div", {
+		...a,
+		innerHTML: j
+	});
 }
 //#endregion
 //#region src/static/components/field.ts
-function O(t = {}, n = "") {
-	let r = ["sk-field", `sk-label-${t.labelPosition ?? "top"}`];
-	t.error && r.push("sk-has-error");
-	let i = `class="${e(r.join(" "))}"`, a = "";
-	if (t.label) {
-		let n = t.id ? ` for="${e(t.id)}"` : "", r = t.required ? "<span class=\"sk-field-required\">*</span>" : "";
-		a = `<label${n} class="sk-field-label">${e(t.label)}${r}</label>`;
+function N(e, n = {}, r) {
+	let i = ["sk-field", `sk-label-${n.labelPosition ?? "top"}`];
+	n.error && i.push("sk-has-error");
+	let a = { class: i.join(" ") }, o = [];
+	if (n.label) {
+		let r = { class: "sk-field-label" };
+		n.id && (r.for = n.id), n.required ? (r.innerHTML = `${t(n.label)}<span class="sk-field-required">*</span>`, o.push(e("label", r))) : (r.innerHTML = t(n.label), o.push(e("label", r)));
+	}
+	if (o.push(e("div", { class: "sk-field-input-wrapper" }, r)), n.description && !n.error) {
+		let r = {
+			class: "sk-field-description",
+			innerHTML: t(n.description)
+		};
+		n.id && (r.id = `${n.id}-description`), o.push(e("p", r));
+	}
+	if (n.error) {
+		let r = {
+			class: "sk-field-error",
+			innerHTML: t(n.error)
+		};
+		n.id && (r.id = `${n.id}-error`), o.push(e("p", r));
 	}
-	let o = `<div class="sk-field-input-wrapper">${n}</div>`, s = "";
-	t.description && !t.error && (s = `<p${t.id ? ` id="${e(t.id)}-description"` : ""} class="sk-field-description">${e(t.description)}</p>`);
-	let c = "";
-	return t.error && (c = `<p${t.id ? ` id="${e(t.id)}-error"` : ""} class="sk-field-error">${e(t.error)}</p>`), `<div ${i}>${a}${o}${s}${c}</div>`;
+	return e("div", a, o);
 }
 //#endregion
 //#region src/static/components/table.ts
-function k(t = {}, n = "") {
+function P(e, t = {}, n) {
 	let r = t.kind ?? "neutral", i = t.variant ?? "default", a = t.hoverable !== !1, o = t.bordered !== !1, s = t.innerBorders === !0, c = t.subtle === !0, l = t.darkBackground === !0, u = t.striped === !0, d = ["sk-table-wrapper", `sk-table-wrapper-${r}`];
 	l && d.push("sk-dark-background"), c && d.push("sk-subtle");
 	let f = [
@@ -519,18 +642,18 @@ function k(t = {}, n = "") {
 		`sk-${i}`
 	];
 	u && f.push("sk-striped"), a && f.push("sk-hoverable"), o && f.push("sk-bordered"), s || f.push("sk-no-inner-borders"), c && f.push("sk-subtle");
-	let p = [`class="${e(f.join(" "))}"`], m = [];
-	return typeof t.baseColor == "string" && m.push(`--sk-table-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && m.push(`--sk-table-fg: ${e(t.textColor)};`), m.length > 0 && p.push(`style="${m.join(" ")}"`), `<div ${`class="${e(d.join(" "))}"`}><table ${p.join(" ")}>${n}</table></div>`;
+	let p = { class: f.join(" ") }, m = [];
+	return typeof t.baseColor == "string" && m.push(`--sk-table-color-base: ${t.baseColor};`), typeof t.textColor == "string" && m.push(`--sk-table-fg: ${t.textColor};`), m.length > 0 && (p.style = m.join(" ")), e("div", { class: d.join(" ") }, e("table", p, n));
 }
 //#endregion
 //#region src/static/components/tooltip.ts
-function A(e = {}, t = "") {
-	return i(a.tooltip, e, t);
+function F(e, t = {}, n) {
+	return a(e, u.tooltip, t, n);
 }
 //#endregion
 //#region src/static/components/button.ts
-function j(t = {}, n = "") {
-	let i = [`class="${e(r({
+function I(e, t = {}, n) {
+	let i = r({
 		base: "sk-button",
 		kind: !0,
 		size: !0,
@@ -539,158 +662,187 @@ function j(t = {}, n = "") {
 			"loading",
 			"pressed",
 			"dense"
-		]
-	}, t))}"`], a = typeof t.href == "string";
-	if (a) i.push(`href="${e(t.href ?? "")}"`);
-	else {
-		let n = t.type ?? "button";
-		i.push(`type="${e(n)}"`);
-	}
-	t.disabled && i.push(a ? "aria-disabled=\"true\"" : "disabled"), t.loading && i.push("aria-busy=\"true\""), t.pressed && i.push("aria-pressed=\"true\"");
-	let o = a ? "a" : "button", s = `<span class="sk-button-chrome">${n}</span>`;
-	return `<${o} ${i.join(" ")}>${s}</${o}>`;
+		],
+		listFlags: [{
+			prop: "corners",
+			family: "cut"
+		}]
+	}, t), a = typeof t.href == "string", o = { class: i };
+	return a ? o.href = t.href ?? "" : o.type = t.type ?? "button", t.disabled && (a ? o["aria-disabled"] = "true" : o.disabled = !0), t.loading && (o["aria-busy"] = "true"), t.pressed && (o["aria-pressed"] = "true"), e(a ? "a" : "button", o, e("span", { class: "sk-button-chrome" }, n));
 }
 //#endregion
 //#region src/static/components/input.ts
-function M(t = {}) {
-	let n = [`class="${e(r({
+function L(e, t = {}) {
+	let n = { class: r({
 		base: "sk-input",
 		kind: !0,
-		size: !0
-	}, t))}"`];
-	for (let r of [
+		size: !0,
+		listFlags: [{
+			prop: "corners",
+			family: "cut"
+		}]
+	}, t) };
+	for (let e of [
 		"type",
 		"value",
 		"placeholder",
 		"name",
 		"id"
 	]) {
-		let i = t[r];
-		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+		let r = t[e];
+		typeof r == "string" && (n[e] = r);
 	}
-	for (let e of [
-		"disabled",
-		"readonly",
-		"required"
-	]) t[e] === !0 && n.push(e);
-	return `<input ${n.join(" ")} />`;
+	return t.disabled === !0 && (n.disabled = !0), t.readonly === !0 && (n.readonly = !0), t.required === !0 && (n.required = !0), e("input", n);
+}
+//#endregion
+//#region src/static/components/inputGroup.ts
+function R(e, t = {}, n) {
+	return a(e, u.inputGroup, t, n);
+}
+//#endregion
+//#region src/static/components/inputGroupAddon.ts
+function z(e, t = {}, n) {
+	return a(e, u.inputGroupAddon, t, n);
 }
 //#endregion
 //#region src/static/components/textarea.ts
-function N(t = {}, n = "") {
-	let i = [`class="${e(r({
+function B(e, t = {}, n) {
+	let i = { class: r({
 		base: "sk-textarea",
 		kind: !0,
 		size: !0
-	}, t))}"`];
-	for (let n of [
+	}, t) };
+	for (let e of [
 		"placeholder",
 		"name",
 		"id"
 	]) {
-		let r = t[n];
-		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+		let n = t[e];
+		typeof n == "string" && (i[e] = n);
 	}
-	for (let e of [
-		"disabled",
-		"readonly",
-		"required"
-	]) t[e] === !0 && i.push(e);
-	return `<textarea ${i.join(" ")}>${n}</textarea>`;
+	return t.disabled === !0 && (i.disabled = !0), t.readonly === !0 && (i.readonly = !0), t.required === !0 && (i.required = !0), e("textarea", i, n);
 }
 //#endregion
 //#region src/static/components/select.ts
-function P(t = {}, n = "") {
-	let i = [`class="${e(r({
+function V(e, t = {}, n) {
+	let i = { class: r({
 		base: "sk-select",
 		kind: !0,
-		size: !0
-	}, t))}"`];
-	for (let n of ["name", "id"]) {
-		let r = t[n];
-		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+		size: !0,
+		listFlags: [{
+			prop: "corners",
+			family: "cut"
+		}]
+	}, t) };
+	for (let e of ["name", "id"]) {
+		let n = t[e];
+		typeof n == "string" && (i[e] = n);
 	}
-	for (let e of ["disabled", "required"]) t[e] === !0 && i.push(e);
-	return `<select ${i.join(" ")}>${n}</select>`;
+	return t.disabled === !0 && (i.disabled = !0), t.required === !0 && (i.required = !0), e("select", i, n);
 }
 //#endregion
 //#region src/static/components/slider.ts
-function F(t = {}) {
-	let n = [`class="${e(r({
-		base: "sk-slider",
-		kind: !0,
-		size: !0
-	}, t))}"`, "type=\"range\""];
-	for (let r of [
+function H(e, t = {}) {
+	let n = {
+		class: r({
+			base: "sk-slider",
+			kind: !0,
+			size: !0
+		}, t),
+		type: "range"
+	};
+	for (let e of [
 		"min",
 		"max",
 		"step",
 		"value",
 		"name"
 	]) {
-		let i = t[r];
-		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+		let r = t[e];
+		typeof r == "string" && (n[e] = r);
 	}
-	return t.disabled === !0 && n.push("disabled"), `<input ${n.join(" ")} />`;
+	return t.disabled === !0 && (n.disabled = !0), e("input", n);
 }
 //#endregion
 //#region src/static/components/colorPicker.ts
-function I(t = {}) {
-	let n = [`class="${e(r({
-		base: "sk-color-picker",
-		size: !0
-	}, t))}"`, "type=\"color\""];
-	for (let r of ["value", "name"]) {
-		let i = t[r];
-		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+function U(e, t = {}) {
+	let n = {
+		class: r({
+			base: "sk-color-picker",
+			size: !0
+		}, t),
+		type: "color"
+	};
+	for (let e of ["value", "name"]) {
+		let r = t[e];
+		typeof r == "string" && (n[e] = r);
 	}
-	return t.disabled === !0 && n.push("disabled"), `<input ${n.join(" ")} />`;
+	return t.disabled === !0 && (n.disabled = !0), e("input", n);
 }
 //#endregion
 //#region src/static/components/checkbox.ts
-function L(t = {}, n = "") {
+function W(e, t = {}, n) {
 	let i = r({
 		base: "sk-checkbox",
 		kind: !0,
 		size: !0
-	}, t), a = ["type=\"checkbox\""];
-	t.name && a.push(`name="${e(t.name)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
-	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-checkbox-label">${n}</span>`;
-	return `<label class="${e(i)}">${o}<span class="sk-checkbox-box"></span>${s}</label>`;
+	}, t), a = { type: "checkbox" };
+	t.name && (a.name = t.name), t.checked === !0 && (a.checked = !0), t.disabled === !0 && (a.disabled = !0), t.required === !0 && (a.required = !0);
+	let o = e("input", a), s = e("span", { class: "sk-checkbox-box" }), c = e("span", { class: "sk-checkbox-label" }, n);
+	return e("label", { class: i }, [
+		o,
+		s,
+		c
+	]);
 }
 //#endregion
 //#region src/static/components/radio.ts
-function R(t = {}, n = "") {
+function G(e, t = {}, n) {
 	let i = r({
 		base: "sk-radio",
 		kind: !0,
 		size: !0
-	}, t), a = ["type=\"radio\""];
-	t.name && a.push(`name="${e(t.name)}"`), t.value !== void 0 && a.push(`value="${e(t.value)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
-	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-radio-label">${n}</span>`;
-	return `<label class="${e(i)}">${o}<span class="sk-radio-dot"></span>${s}</label>`;
+	}, t), a = { type: "radio" };
+	t.name && (a.name = t.name), t.value !== void 0 && (a.value = t.value), t.checked === !0 && (a.checked = !0), t.disabled === !0 && (a.disabled = !0), t.required === !0 && (a.required = !0);
+	let o = e("input", a), s = e("span", { class: "sk-radio-dot" }), c = e("span", { class: "sk-radio-label" }, n);
+	return e("label", { class: i }, [
+		o,
+		s,
+		c
+	]);
 }
 //#endregion
 //#region src/static/components/switchInput.ts
-function z(t = {}, n = "") {
+function K(e, t = {}, n) {
 	let i = r({
 		base: "sk-switch",
 		kind: !0,
 		size: !0
-	}, t), a = ["type=\"checkbox\""];
-	t.name && a.push(`name="${e(t.name)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
-	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-switch-label">${n}</span>`;
-	return `<label class="${e(i)}">${o}<span class="sk-switch-track"><span class="sk-switch-thumb"></span></span>${s}</label>`;
+	}, t), a = { type: "checkbox" };
+	t.name && (a.name = t.name), t.checked === !0 && (a.checked = !0), t.disabled === !0 && (a.disabled = !0), t.required === !0 && (a.required = !0);
+	let o = e("input", a), s = e("span", { class: "sk-switch-track" }, e("span", { class: "sk-switch-thumb" })), c = e("span", { class: "sk-switch-label" }, n);
+	return e("label", { class: i }, [
+		o,
+		s,
+		c
+	]);
 }
 //#endregion
 //#region src/static/components/numberInput.ts
-function B(t = {}) {
+function q(e, t = {}) {
 	let n = r({
 		base: "sk-number-input-wrapper",
 		kind: !0,
-		size: !0
-	}, t), i = ["class=\"sk-number-input-field\"", "type=\"number\""];
-	for (let n of [
+		size: !0,
+		listFlags: [{
+			prop: "corners",
+			family: "cut"
+		}]
+	}, t), i = {
+		class: "sk-number-input-field",
+		type: "number"
+	};
+	for (let e of [
 		"value",
 		"min",
 		"max",
@@ -698,35 +850,33 @@ function B(t = {}) {
 		"name",
 		"placeholder"
 	]) {
-		let r = t[n];
-		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+		let n = t[e];
+		typeof n == "string" && (i[e] = n);
 	}
-	for (let e of [
-		"disabled",
-		"readonly",
-		"required"
-	]) t[e] === !0 && i.push(e);
-	let a = `<input ${i.join(" ")} />`;
-	return `<div class="${e(n)}">${a}</div>`;
+	t.disabled === !0 && (i.disabled = !0), t.readonly === !0 && (i.readonly = !0), t.required === !0 && (i.required = !0);
+	let a = e("input", i);
+	return e("div", { class: n }, a);
 }
 //#endregion
 //#region src/static/components/tagsInput.ts
-function V(t = {}, n = "") {
-	return `<div class="${e(r({
+function J(e, t = {}, n) {
+	return e("div", { class: r({
 		base: "sk-tags-input",
 		kind: !0,
 		size: !0
-	}, t))}">${n}</div>`;
+	}, t) }, n);
 }
 //#endregion
 //#region src/static/components/dropdown.ts
-function H(t, n = "") {
-	let i = [`class="${e(r({
+function Y(e, n, i) {
+	let a = { class: r({
 		base: "sk-dropdown",
 		kind: !0,
 		size: !0
-	}, t))}"`];
-	return t.open && i.push("open"), `<details ${i.join(" ")}><summary>${e(t.summary)}</summary>${n}</details>`;
+	}, n) };
+	n.open && (a.open = !0);
+	let o = [e("summary", { innerHTML: t(n.summary) })];
+	return i !== void 0 && (Array.isArray(i) ? o.push(...i) : o.push(i)), e("details", a, o);
 }
 //#endregion
-export { u as alert, D as avatar, S as breadcrumbs, j as button, s as card, L as checkbox, I as colorPicker, r as composeClasses, d as divider, H as dropdown, e as escapeAttr, O as field, p as group, M as input, v as navBar, B as numberInput, f as page, C as pagination, o as panel, h as progress, R as radio, i as render, P as select, x as sidebar, m as skeleton, F as slider, _ as spinner, z as switchInput, k as table, T as tag, V as tagsInput, t as text, N as textarea, b as toolbar, A as tooltip };
+export { h as alert, M as avatar, D as breadcrumbs, I as button, f as card, W as checkbox, U as colorPicker, r as composeClasses, g as divider, Y as dropdown, e as escapeAttr, N as field, v as group, L as input, R as inputGroup, z as inputGroupAddon, C as navBar, q as numberInput, _ as page, O as pagination, d as panel, b as progress, G as radio, a as render, V as select, E as sidebar, y as skeleton, H as slider, S as spinner, l as stringH, K as switchInput, P as table, A as tag, J as tagsInput, t as text, B as textarea, T as toolbar, F as tooltip };