@ptbdynamic/plinth 0.1.1 → 0.2.0

package/packages/vue/dist/index.js

@@ -1,58 +1,58 @@
-import { Comment as e, Fragment as t, Static as n, Text as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useAttrs as S, useId as C, useSlots as w, warn as T, watchEffect as E, withCtx as D } from "vue";
+import { Comment as e, Fragment as t, Static as n, Text as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, inject as f, mergeModels as p, mergeProps as m, normalizeClass as h, onBeforeUnmount as g, onMounted as _, openBlock as v, provide as y, ref as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useAttrs as E, useId as D, useModel as O, useSlots as k, warn as A, watchEffect as ee, withCtx as j } from "vue";
 //#region src/size.ts
-var O = [
+var te = [
 	"xs",
 	"sm",
 	"md",
 	"lg",
 	"xl"
-], k = [
+], M = [
 	"sm",
 	"md",
 	"lg"
 ];
-function A(e, t, n) {
+function N(e, t, n) {
 	return t.includes(e) ? e : n;
 }
-function j(e) {
+function P(e) {
 	return e === "xs" || e === "sm" ? "sm" : "md";
 }
 //#endregion
 //#region src/avatar.ts
-var ee = [
+var ne = [
 	"sm",
 	"md",
 	"lg",
 	"xl"
 ];
-function te(e) {
-	return A(e, ee, "md");
+function re(e) {
+	return N(e, ne, "md");
 }
-function M(e) {
+function ie(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "" : ([...t[0]][0] + (t.length > 1 ? [...t.at(-1)][0] : "")).toUpperCase();
 }
-var ne = "<svg class=\"plinth-avatar-glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"9\" r=\"4\"></circle><path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\"></path></svg>", N = [
+var ae = "<svg class=\"plinth-avatar-glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"9\" r=\"4\"></circle><path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\"></path></svg>", F = [
 	"neutral",
 	"success",
 	"warning",
 	"danger"
 ];
-function re(e) {
-	return N.includes(e) ? e : N[0];
+function oe(e) {
+	return F.includes(e) ? e : F[0];
 }
 //#endregion
 //#region src/PlinthAvatar.vue?vue&type=script&setup=true&lang.ts
-var ie = [
+var se = [
 	"data-size",
 	"role",
 	"aria-label",
 	"aria-hidden"
-], ae = ["src"], oe = {
+], ce = ["src"], le = {
 	key: 1,
 	class: "plinth-avatar-initials",
 	"aria-hidden": "true"
-}, se = {
+}, ue = {
 	key: 2,
 	class: "plinth-avatar-glyph",
 	viewBox: "0 0 24 24",
@@ -61,7 +61,7 @@ var ie = [
 	"stroke-width": "1.5",
 	"stroke-linecap": "round",
 	"aria-hidden": "true"
-}, ce = ["data-tone"], P = /* @__PURE__ */ d({
+}, de = ["data-tone"], I = /* @__PURE__ */ d({
 	__name: "PlinthAvatar",
 	props: {
 		name: { default: "" },
@@ -76,38 +76,38 @@ var ie = [
 		}
 	},
 	setup(e) {
-		let t = e, n = i(() => te(t.size)), r = i(() => t.status ? re(t.status) : void 0), a = i(() => {
+		let t = e, n = i(() => re(t.size)), r = i(() => t.status ? oe(t.status) : void 0), a = i(() => {
 			if (!t.decorative) return r.value && t.statusLabel ? `${t.name}, ${t.statusLabel}` : t.name;
-		}), l = i(() => t.initials ?? M(t.name));
-		return E(() => {
-			t.decorative || (t.name.trim() || T("PlinthAvatar needs a name, or decorative when the name is shown next to it."), t.status && !t.statusLabel && T("PlinthAvatar needs a statusLabel with a status: colour alone does not say what it means."));
-		}), (t, i) => (h(), s("span", {
+		}), l = i(() => t.initials ?? ie(t.name));
+		return ee(() => {
+			t.decorative || (t.name.trim() || A("PlinthAvatar needs a name, or decorative when the name is shown next to it."), t.status && !t.statusLabel && A("PlinthAvatar needs a statusLabel with a status: colour alone does not say what it means."));
+		}), (t, i) => (v(), s("span", {
 			class: "plinth-avatar",
 			"data-size": n.value,
 			role: a.value === void 0 ? void 0 : "img",
 			"aria-label": a.value,
 			"aria-hidden": e.decorative ? "true" : void 0
-		}, [e.src ? (h(), s("img", {
+		}, [e.src ? (v(), s("img", {
 			key: 0,
 			class: "plinth-avatar-image",
 			src: e.src,
 			alt: ""
-		}, null, 8, ae)) : l.value ? (h(), s("span", oe, b(l.value), 1)) : (h(), s("svg", se, [...i[0] ||= [c("circle", {
+		}, null, 8, ce)) : l.value ? (v(), s("span", le, w(l.value), 1)) : (v(), s("svg", ue, [...i[0] ||= [c("circle", {
 			cx: "12",
 			cy: "9",
 			r: "4"
-		}, null, -1), c("path", { d: "M4.5 20a7.5 7.5 0 0 1 15 0" }, null, -1)]])), r.value ? (h(), s("span", {
+		}, null, -1), c("path", { d: "M4.5 20a7.5 7.5 0 0 1 15 0" }, null, -1)]])), r.value ? (v(), s("span", {
 			key: 3,
 			class: "plinth-avatar-status",
 			"data-tone": r.value,
 			"aria-hidden": "true"
-		}, null, 8, ce)) : o("", !0)], 8, ie));
+		}, null, 8, de)) : o("", !0)], 8, se));
 	}
-}), le = ["data-tone"], ue = {
+}), fe = ["data-tone"], pe = {
 	key: 0,
 	class: "plinth-badge-dot",
 	"aria-hidden": "true"
-}, de = { class: "plinth-badge-label" }, F = /* @__PURE__ */ d({
+}, me = { class: "plinth-badge-label" }, he = /* @__PURE__ */ d({
 	__name: "PlinthBadge",
 	props: {
 		tone: { default: "neutral" },
@@ -117,13 +117,13 @@ var ie = [
 		}
 	},
 	setup(e) {
-		let t = e, n = i(() => re(t.tone));
-		return (t, r) => (h(), s("span", {
+		let t = e, n = i(() => oe(t.tone));
+		return (t, r) => (v(), s("span", {
 			class: "plinth-badge",
 			"data-tone": n.value
-		}, [e.dot ? (h(), s("span", ue)) : o("", !0), c("span", de, [v(t.$slots, "default")])], 8, le));
+		}, [e.dot ? (v(), s("span", pe)) : o("", !0), c("span", me, [S(t.$slots, "default")])], 8, fe));
 	}
-}), I = [
+}), ge = [
 	"primary",
 	"accent",
 	"secondary",
@@ -131,33 +131,33 @@ var ie = [
 	"danger",
 	"danger-ghost"
 ];
-function L(e) {
-	return I.includes(e) ? e : "primary";
+function _e(e) {
+	return ge.includes(e) ? e : "primary";
 }
 //#endregion
 //#region src/PlinthButton.vue?vue&type=script&setup=true&lang.ts
-var fe = [
+var ve = [
 	"href",
 	"data-variant",
 	"data-size",
 	"role",
 	"aria-busy",
 	"aria-disabled"
-], pe = {
+], ye = {
 	key: 0,
 	class: "plinth-button-spinner",
 	"aria-hidden": "true"
-}, me = ["data-size", "data-mirror"], he = { class: "plinth-button-label" }, ge = ["data-size", "data-mirror"], _e = [
+}, be = ["data-size", "data-mirror"], xe = { class: "plinth-button-label" }, Se = ["data-size", "data-mirror"], Ce = [
 	"data-variant",
 	"data-size",
 	"disabled",
 	"aria-busy",
 	"aria-disabled"
-], ve = {
+], we = {
 	key: 0,
 	class: "plinth-button-spinner",
 	"aria-hidden": "true"
-}, ye = ["data-size", "data-mirror"], be = { class: "plinth-button-label" }, xe = ["data-size", "data-mirror"], R = /* @__PURE__ */ d({
+}, Te = ["data-size", "data-mirror"], Ee = { class: "plinth-button-label" }, De = ["data-size", "data-mirror"], L = /* @__PURE__ */ d({
 	__name: "PlinthButton",
 	props: {
 		variant: { default: "primary" },
@@ -181,8 +181,8 @@ var fe = [
 		}
 	},
 	setup(e) {
-		let t = e, n = i(() => L(t.variant)), r = i(() => A(t.size, k, "md")), a = i(() => j(r.value)), l = i(() => t.busy && !t.disabled);
-		return (t, i) => e.href ? (h(), s("a", {
+		let t = e, n = i(() => _e(t.variant)), r = i(() => N(t.size, M, "md")), a = i(() => P(r.value)), l = i(() => t.busy && !t.disabled);
+		return (t, i) => e.href ? (v(), s("a", {
 			key: 0,
 			class: "plinth-button",
 			href: e.disabled ? void 0 : e.href,
@@ -192,22 +192,22 @@ var fe = [
 			"aria-busy": l.value ? "true" : void 0,
 			"aria-disabled": l.value || e.disabled ? "true" : void 0
 		}, [
-			l.value ? (h(), s("span", pe)) : t.$slots.icon ? (h(), s("span", {
+			l.value ? (v(), s("span", ye)) : t.$slots.icon ? (v(), s("span", {
 				key: 1,
 				class: "plinth-icon",
 				"data-size": a.value,
 				"data-mirror": e.mirrorIcon ? "" : void 0,
 				"aria-hidden": "true"
-			}, [v(t.$slots, "icon")], 8, me)) : o("", !0),
-			c("span", he, [v(t.$slots, "default")]),
-			t.$slots.trailing ? (h(), s("span", {
+			}, [S(t.$slots, "icon")], 8, be)) : o("", !0),
+			c("span", xe, [S(t.$slots, "default")]),
+			t.$slots.trailing ? (v(), s("span", {
 				key: 2,
 				class: "plinth-icon",
 				"data-size": a.value,
 				"data-mirror": e.mirrorTrailing ? "" : void 0,
 				"aria-hidden": "true"
-			}, [v(t.$slots, "trailing")], 8, ge)) : o("", !0)
-		], 8, fe)) : (h(), s("button", {
+			}, [S(t.$slots, "trailing")], 8, Se)) : o("", !0)
+		], 8, ve)) : (v(), s("button", {
 			key: 1,
 			type: "button",
 			class: "plinth-button",
@@ -217,62 +217,62 @@ var fe = [
 			"aria-busy": l.value ? "true" : void 0,
 			"aria-disabled": l.value ? "true" : void 0
 		}, [
-			l.value ? (h(), s("span", ve)) : t.$slots.icon ? (h(), s("span", {
+			l.value ? (v(), s("span", we)) : t.$slots.icon ? (v(), s("span", {
 				key: 1,
 				class: "plinth-icon",
 				"data-size": a.value,
 				"data-mirror": e.mirrorIcon ? "" : void 0,
 				"aria-hidden": "true"
-			}, [v(t.$slots, "icon")], 8, ye)) : o("", !0),
-			c("span", be, [v(t.$slots, "default")]),
-			t.$slots.trailing ? (h(), s("span", {
+			}, [S(t.$slots, "icon")], 8, Te)) : o("", !0),
+			c("span", Ee, [S(t.$slots, "default")]),
+			t.$slots.trailing ? (v(), s("span", {
 				key: 2,
 				class: "plinth-icon",
 				"data-size": a.value,
 				"data-mirror": e.mirrorTrailing ? "" : void 0,
 				"aria-hidden": "true"
-			}, [v(t.$slots, "trailing")], 8, xe)) : o("", !0)
-		], 8, _e));
+			}, [S(t.$slots, "trailing")], 8, De)) : o("", !0)
+		], 8, Ce));
 	}
-}), z = [
+}), Oe = [
 	"neutral",
 	"info",
 	"success",
 	"warning",
 	"danger"
 ];
-function B(e) {
-	return z.includes(e) ? e : "neutral";
+function ke(e) {
+	return Oe.includes(e) ? e : "neutral";
 }
-var V = [
+var Ae = [
 	"note",
 	"status",
 	"alert"
 ];
-function H(e) {
-	return V.includes(e) ? e : "note";
+function je(e) {
+	return Ae.includes(e) ? e : "note";
 }
-var U = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${e}</svg>`, W = {
-	neutral: U("<rect x=\"5\" y=\"4\" width=\"14\" height=\"16\" rx=\"2\"></rect><path d=\"M9 9h6M9 13h6M9 17h3\"></path>"),
-	info: U("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 11v5M12 7.5v.01\"></path>"),
-	success: U("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M8 12.5l2.5 2.5L16 9.5\"></path>"),
-	warning: U("<path d=\"M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z\"></path><path d=\"M12 9.5v4M12 17v.01\"></path>"),
-	danger: U("<path d=\"M8.5 3h7L21 8.5v7L15.5 21h-7L3 15.5v-7z\"></path><path d=\"M12 7.5v5M12 16v.01\"></path>")
-}, G = (i) => (i ?? []).some((i) => i.type === e ? !1 : i.type === r || i.type === n ? String(i.children).trim() !== "" : i.type !== t || G(i.children)), Se = ["data-tone", "role"], Ce = {
+var R = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${e}</svg>`, Me = {
+	neutral: R("<rect x=\"5\" y=\"4\" width=\"14\" height=\"16\" rx=\"2\"></rect><path d=\"M9 9h6M9 13h6M9 17h3\"></path>"),
+	info: R("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 11v5M12 7.5v.01\"></path>"),
+	success: R("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M8 12.5l2.5 2.5L16 9.5\"></path>"),
+	warning: R("<path d=\"M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z\"></path><path d=\"M12 9.5v4M12 17v.01\"></path>"),
+	danger: R("<path d=\"M8.5 3h7L21 8.5v7L15.5 21h-7L3 15.5v-7z\"></path><path d=\"M12 7.5v5M12 16v.01\"></path>")
+}, z = (i) => (i ?? []).some((i) => i.type === e ? !1 : i.type === r || i.type === n ? String(i.children).trim() !== "" : i.type !== t || z(i.children)), Ne = ["data-tone", "role"], Pe = {
 	key: 0,
 	class: "plinth-icon plinth-callout-icon",
 	"data-size": "md",
 	"aria-hidden": "true"
-}, we = ["innerHTML"], Te = { class: "plinth-callout-body" }, Ee = {
+}, Fe = ["innerHTML"], Ie = { class: "plinth-callout-body" }, Le = {
 	key: 0,
 	class: "plinth-callout-title"
-}, De = {
+}, Re = {
 	key: 1,
 	class: "plinth-callout-text"
-}, Oe = {
+}, ze = {
 	key: 2,
 	class: "plinth-callout-actions"
-}, ke = /* @__PURE__ */ d({
+}, Be = /* @__PURE__ */ d({
 	__name: "PlinthCallout",
 	props: {
 		tone: { default: "neutral" },
@@ -280,60 +280,60 @@ var U = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strok
 		title: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, n = w(), r = i(() => B(t.tone)), a = i(() => H(t.role));
-		return (t, i) => (h(), s("div", {
+		let t = e, n = k(), r = i(() => ke(t.tone)), a = i(() => je(t.role));
+		return (t, i) => (v(), s("div", {
 			class: "plinth-callout",
 			"data-tone": r.value,
 			role: a.value
-		}, [x(G)(x(n).icon?.()) ? (h(), s("span", Ce, [v(t.$slots, "icon")])) : (h(), s("span", {
+		}, [T(z)(T(n).icon?.()) ? (v(), s("span", Pe, [S(t.$slots, "icon")])) : (v(), s("span", {
 			key: 1,
 			class: "plinth-icon plinth-callout-icon",
 			"data-size": "md",
 			"aria-hidden": "true",
-			innerHTML: x(W)[r.value]
-		}, null, 8, we)), c("div", Te, [
-			e.title?.trim() || x(G)(x(n).title?.()) ? (h(), s("p", Ee, [v(t.$slots, "title", {}, () => [l(b(e.title), 1)])])) : o("", !0),
-			x(G)(x(n).default?.()) ? (h(), s("div", De, [v(t.$slots, "default")])) : o("", !0),
-			x(G)(x(n).actions?.()) ? (h(), s("div", Oe, [v(t.$slots, "actions")])) : o("", !0)
-		])], 8, Se));
+			innerHTML: T(Me)[r.value]
+		}, null, 8, Fe)), c("div", Ie, [
+			e.title?.trim() || T(z)(T(n).title?.()) ? (v(), s("p", Le, [S(t.$slots, "title", {}, () => [l(w(e.title), 1)])])) : o("", !0),
+			T(z)(T(n).default?.()) ? (v(), s("div", Re, [S(t.$slots, "default")])) : o("", !0),
+			T(z)(T(n).actions?.()) ? (v(), s("div", ze, [S(t.$slots, "actions")])) : o("", !0)
+		])], 8, Ne));
 	}
-}), Ae = (e) => e.slice(0, 6), je = (e, t) => Math.max(0, e.findIndex((e) => e.label === t));
-function Me(e) {
+}), B = (e) => e.slice(0, 6), Ve = (e, t) => Math.max(0, e.findIndex((e) => e.label === t));
+function He(e) {
 	let t = e.closest(".plinth-code-block"), n = [...t?.querySelectorAll(".plinth-code-block-tab-input") ?? []], r = Math.max(0, n.findIndex((e) => e.checked));
 	return t?.querySelectorAll(".plinth-code-block-code")[r]?.textContent ?? "";
 }
 //#endregion
 //#region src/PlinthCodeBlock.vue?vue&type=script&setup=true&lang.ts
-var Ne = ["id"], Pe = { class: "plinth-code-block-header" }, Fe = {
+var Ue = ["id"], We = { class: "plinth-code-block-header" }, Ge = {
 	key: 0,
 	class: "plinth-code-block-label"
-}, Ie = {
+}, Ke = {
 	key: 1,
 	class: "plinth-code-block-label"
-}, Le = ["aria-label"], Re = ["name", "checked"], ze = { class: "plinth-code-block-tab-label" }, Be = {
+}, qe = ["aria-label"], Je = ["name", "checked"], Ye = { class: "plinth-code-block-tab-label" }, Xe = {
 	class: "plinth-code-block-status",
 	role: "status"
-}, Ve = {
+}, Ze = {
 	key: 0,
 	class: "plinth-code-block-code",
 	dir: "ltr",
 	tabindex: "0"
-}, He = ["innerHTML"], Ue = {
+}, Qe = ["innerHTML"], $e = {
 	key: 1,
 	class: "plinth-code-block-code",
 	dir: "ltr",
 	tabindex: "0"
-}, We = {
+}, et = {
 	key: 1,
 	class: "plinth-code-block-code",
 	dir: "ltr",
 	tabindex: "0"
-}, Ge = ["innerHTML"], Ke = {
+}, tt = ["innerHTML"], nt = {
 	key: 2,
 	class: "plinth-code-block-code",
 	dir: "ltr",
 	tabindex: "0"
-}, qe = /* @__PURE__ */ d({
+}, V = /* @__PURE__ */ d({
 	__name: "PlinthCodeBlock",
 	props: {
 		id: { default: void 0 },
@@ -351,102 +351,102 @@ var Ne = ["id"], Pe = { class: "plinth-code-block-header" }, Fe = {
 	},
 	emits: ["copied"],
 	setup(e, { emit: n }) {
-		let r = e, a = n, d = w(), f = C(), y = i(() => r.id?.trim() || void 0), S = i(() => `${y.value ?? `plinth-code-block-${f}`}-language`), T = i(() => Ae(r.tabs)), E = je(Ae(r.tabs), r.selected), O = g(!1), k = g(!1), A;
-		m(() => {
-			O.value = !!navigator.clipboard;
-		}), p(() => clearTimeout(A));
-		async function j(e) {
-			let t = Me(e.currentTarget);
+		let r = e, a = n, d = k(), f = D(), p = i(() => r.id?.trim() || void 0), m = i(() => `${p.value ?? `plinth-code-block-${f}`}-language`), h = i(() => B(r.tabs)), y = Ve(B(r.tabs), r.selected), C = b(!1), E = b(!1), O;
+		_(() => {
+			C.value = !!navigator.clipboard;
+		}), g(() => clearTimeout(O));
+		async function A(e) {
+			let t = He(e.currentTarget);
 			try {
 				await navigator.clipboard.writeText(t);
 			} catch {
 				return;
 			}
-			k.value = !0, clearTimeout(A), A = setTimeout(() => k.value = !1, 2e3), a("copied", t);
+			E.value = !0, clearTimeout(O), O = setTimeout(() => E.value = !1, 2e3), a("copied", t);
 		}
-		return (n, r) => (h(), s("div", {
-			id: y.value,
+		return (n, r) => (v(), s("div", {
+			id: p.value,
 			class: "plinth-code-block"
-		}, [c("div", Pe, [
-			x(G)(x(d).label?.()) ? (h(), s("span", Fe, [v(n.$slots, "label")])) : e.label?.trim() ? (h(), s("span", Ie, b(e.label), 1)) : o("", !0),
-			T.value.length ? (h(), s("div", {
+		}, [c("div", We, [
+			T(z)(T(d).label?.()) ? (v(), s("span", Ge, [S(n.$slots, "label")])) : e.label?.trim() ? (v(), s("span", Ke, w(e.label), 1)) : o("", !0),
+			h.value.length ? (v(), s("div", {
 				key: 2,
 				class: "plinth-code-block-tabs",
 				role: "radiogroup",
 				"aria-label": e.tabsLabel
-			}, [(h(!0), s(t, null, _(T.value, (e, t) => (h(), s("label", {
+			}, [(v(!0), s(t, null, x(h.value, (e, t) => (v(), s("label", {
 				key: t,
 				class: "plinth-code-block-tab"
 			}, [c("input", {
 				type: "radio",
 				class: "plinth-code-block-tab-input",
-				name: S.value,
-				checked: t === x(E)
-			}, null, 8, Re), c("span", ze, b(e.label), 1)]))), 128))], 8, Le)) : o("", !0),
-			e.copy ? (h(), s(t, { key: 3 }, [u(R, {
+				name: m.value,
+				checked: t === T(y)
+			}, null, 8, Je), c("span", Ye, w(e.label), 1)]))), 128))], 8, qe)) : o("", !0),
+			e.copy ? (v(), s(t, { key: 3 }, [u(L, {
 				class: "plinth-code-block-copy",
 				variant: "ghost",
 				size: "sm",
-				hidden: !O.value,
-				onClick: j
+				hidden: !C.value,
+				onClick: A
 			}, {
-				default: D(() => [l(b(k.value ? e.copiedLabel : e.copyLabel), 1)]),
+				default: j(() => [l(w(E.value ? e.copiedLabel : e.copyLabel), 1)]),
 				_: 1
-			}, 8, ["hidden"]), c("span", Be, b(k.value ? e.copiedLabel : ""), 1)], 64)) : o("", !0)
-		]), T.value.length ? (h(!0), s(t, { key: 0 }, _(T.value, (e, n) => (h(), s(t, { key: n }, [e.html === void 0 ? (h(), s("pre", Ue, [c("code", null, b(e.code), 1)])) : (h(), s("pre", Ve, [c("code", { innerHTML: e.html }, null, 8, He)]))], 64))), 128)) : e.html === void 0 ? (h(), s("pre", Ke, [c("code", null, [v(n.$slots, "default")])])) : (h(), s("pre", We, [c("code", { innerHTML: e.html }, null, 8, Ge)]))], 8, Ne));
+			}, 8, ["hidden"]), c("span", Xe, w(E.value ? e.copiedLabel : ""), 1)], 64)) : o("", !0)
+		]), h.value.length ? (v(!0), s(t, { key: 0 }, x(h.value, (e, n) => (v(), s(t, { key: n }, [e.html === void 0 ? (v(), s("pre", $e, [c("code", null, w(e.code), 1)])) : (v(), s("pre", Ze, [c("code", { innerHTML: e.html }, null, 8, Qe)]))], 64))), 128)) : e.html === void 0 ? (v(), s("pre", nt, [c("code", null, [S(n.$slots, "default")])])) : (v(), s("pre", et, [c("code", { innerHTML: e.html }, null, 8, tt)]))], 8, Ue));
 	}
-}), Je = [
+}), H = [
 	"simple",
 	"type",
 	"password"
 ];
-function Ye(e) {
-	return Je.includes(e) ? e : "simple";
+function U(e) {
+	return H.includes(e) ? e : "simple";
 }
-var Xe = ["neutral", "danger"];
-function Ze(e) {
-	return Xe.includes(e) ? e : "neutral";
+var rt = ["neutral", "danger"];
+function it(e) {
+	return rt.includes(e) ? e : "neutral";
 }
-var Qe = {
+var at = {
 	type: "Type :phrase to confirm",
 	password: "Password"
-}, $e = (e) => e.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&"), et = [
+}, ot = (e) => e.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&"), st = [
 	"start",
 	"end",
 	"top",
 	"bottom"
 ];
-function tt(e) {
-	return K(e) ?? "end";
+function ct(e) {
+	return W(e) ?? "end";
 }
-function K(e) {
-	return et.includes(e) ? e : void 0;
+function W(e) {
+	return st.includes(e) ? e : void 0;
 }
-var q = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg>", nt = ["center", "bottom"];
-function J(e) {
-	return nt.includes(e) ? e : "center";
+var G = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg>", lt = ["center", "bottom"];
+function K(e) {
+	return lt.includes(e) ? e : "center";
 }
-var rt = q, it = [
+var ut = G, dt = [
 	"id",
 	"data-side-phone",
 	"aria-labelledby",
 	"aria-describedby"
-], at = {
+], ft = {
 	method: "dialog",
 	class: "plinth-confirm-dialog-form"
-}, ot = { class: "plinth-dialog-header" }, st = ["id"], ct = { class: "plinth-dialog-body" }, lt = ["id"], ut = {
+}, pt = { class: "plinth-dialog-header" }, mt = ["id"], ht = { class: "plinth-dialog-body" }, gt = ["id"], _t = {
 	key: 0,
 	class: "plinth-confirm-dialog-field"
-}, dt = ["for"], ft = { key: 0 }, pt = [
+}, vt = ["for"], yt = { key: 0 }, bt = [
 	"id",
 	"pattern",
 	"aria-invalid",
 	"aria-describedby"
-], mt = [
+], xt = [
 	"id",
 	"aria-invalid",
 	"aria-describedby"
-], ht = ["id"], gt = { class: "plinth-dialog-footer" }, Y = /* @__PURE__ */ d({
+], St = ["id"], Ct = { class: "plinth-dialog-footer" }, wt = /* @__PURE__ */ d({
 	__name: "PlinthConfirmDialog",
 	props: {
 		id: { default: void 0 },
@@ -470,53 +470,53 @@ var rt = q, it = [
 		let a = e, d = r;
 		if (!a.title?.trim()) throw Error("<PlinthConfirmDialog> needs a title: it is the dialog's accessible name.");
 		if (!a.message?.trim()) throw Error("<PlinthConfirmDialog> needs a message: it is the dialog's accessible description.");
-		let f = i(() => Ye(a.kind));
+		let f = i(() => U(a.kind));
 		if (f.value === "type" && !a.phrase?.trim()) throw Error("<PlinthConfirmDialog kind=\"type\"> needs a phrase: it is what the person types.");
-		let p = C(), m = i(() => a.id?.trim() || `plinth-confirm-dialog-${p}`), v = i(() => J(a.sidePhone)), y = i(() => a.phrase?.trim() ?? ""), S = i(() => f.value !== "simple" && !!a.error?.trim()), w = i(() => {
-			let e = a.fieldLabel?.trim() || Qe[f.value];
+		let p = D(), m = i(() => a.id?.trim() || `plinth-confirm-dialog-${p}`), h = i(() => K(a.sidePhone)), g = i(() => a.phrase?.trim() ?? ""), _ = i(() => f.value !== "simple" && !!a.error?.trim()), y = i(() => {
+			let e = a.fieldLabel?.trim() || at[f.value];
 			return f.value === "type" ? e.split(":phrase") : [e];
-		}), T = g();
+		}), S = b();
 		return n({
-			showModal: () => T.value?.showModal(),
-			close: (e) => T.value?.close(e)
-		}), (n, r) => (h(), s("dialog", {
+			showModal: () => S.value?.showModal(),
+			close: (e) => S.value?.close(e)
+		}), (n, r) => (v(), s("dialog", {
 			id: m.value,
 			ref_key: "dialog",
-			ref: T,
+			ref: S,
 			class: "plinth-dialog plinth-confirm-dialog",
 			role: "alertdialog",
-			"data-side-phone": v.value === "center" ? void 0 : v.value,
+			"data-side-phone": h.value === "center" ? void 0 : h.value,
 			closedby: "closerequest",
 			"aria-labelledby": `${m.value}-title`,
 			"aria-describedby": `${m.value}-message`,
 			onClose: r[0] ||= (e) => d("close", e)
-		}, [c("form", at, [
-			c("div", ot, [c("h2", {
+		}, [c("form", ft, [
+			c("div", pt, [c("h2", {
 				id: `${m.value}-title`,
 				class: "plinth-dialog-title"
-			}, b(e.title), 9, st)]),
-			c("div", ct, [
+			}, w(e.title), 9, mt)]),
+			c("div", ht, [
 				c("p", {
 					id: `${m.value}-message`,
 					class: "plinth-confirm-dialog-message"
-				}, b(e.message), 9, lt),
-				f.value === "simple" ? o("", !0) : (h(), s("div", ut, [c("label", {
+				}, w(e.message), 9, gt),
+				f.value === "simple" ? o("", !0) : (v(), s("div", _t, [c("label", {
 					for: `${m.value}-field`,
 					class: "plinth-confirm-dialog-label"
-				}, [(h(!0), s(t, null, _(w.value, (e, n) => (h(), s(t, { key: n }, [n > 0 ? (h(), s("strong", ft, b(y.value), 1)) : o("", !0), l(b(e), 1)], 64))), 128))], 8, dt), f.value === "type" ? (h(), s("input", {
+				}, [(v(!0), s(t, null, x(y.value, (e, n) => (v(), s(t, { key: n }, [n > 0 ? (v(), s("strong", yt, w(g.value), 1)) : o("", !0), l(w(e), 1)], 64))), 128))], 8, vt), f.value === "type" ? (v(), s("input", {
 					key: 0,
 					id: `${m.value}-field`,
 					class: "plinth-confirm-dialog-input",
 					type: "text",
 					name: "confirmation",
 					required: "",
-					pattern: x($e)(y.value),
+					pattern: T(ot)(g.value),
 					autocomplete: "off",
 					autocapitalize: "none",
 					spellcheck: "false",
-					"aria-invalid": S.value ? "true" : void 0,
-					"aria-describedby": S.value ? `${m.value}-error` : void 0
-				}, null, 8, pt)) : (h(), s("input", {
+					"aria-invalid": _.value ? "true" : void 0,
+					"aria-describedby": _.value ? `${m.value}-error` : void 0
+				}, null, 8, bt)) : (v(), s("input", {
 					key: 1,
 					id: `${m.value}-field`,
 					class: "plinth-confirm-dialog-input",
@@ -524,86 +524,86 @@ var rt = q, it = [
 					name: "password",
 					required: "",
 					autocomplete: "current-password",
-					"aria-invalid": S.value ? "true" : void 0,
-					"aria-describedby": S.value ? `${m.value}-error` : void 0
-				}, null, 8, mt))])),
-				S.value ? (h(), s("p", {
+					"aria-invalid": _.value ? "true" : void 0,
+					"aria-describedby": _.value ? `${m.value}-error` : void 0
+				}, null, 8, xt))])),
+				_.value ? (v(), s("p", {
 					key: 1,
 					id: `${m.value}-error`,
 					class: "plinth-confirm-dialog-error",
 					role: "alert"
-				}, b(e.error), 9, ht)) : o("", !0)
+				}, w(e.error), 9, St)) : o("", !0)
 			]),
-			c("div", gt, [u(R, {
+			c("div", Ct, [u(L, {
 				variant: "secondary",
 				commandfor: m.value,
 				command: "close",
 				value: "cancel"
 			}, {
-				default: D(() => [l(b(e.cancelLabel), 1)]),
+				default: j(() => [l(w(e.cancelLabel), 1)]),
 				_: 1
-			}, 8, ["commandfor"]), u(R, {
+			}, 8, ["commandfor"]), u(L, {
 				class: "plinth-confirm-dialog-confirm",
 				type: "submit",
 				value: "confirm",
-				variant: x(Ze)(e.tone) === "danger" ? "danger" : "primary",
+				variant: T(it)(e.tone) === "danger" ? "danger" : "primary",
 				busy: e.busy
 			}, {
-				default: D(() => [l(b(e.confirmLabel), 1)]),
+				default: j(() => [l(w(e.confirmLabel), 1)]),
 				_: 1
 			}, 8, ["variant", "busy"])])
-		])], 40, it));
+		])], 40, dt));
 	}
-}), _t = {
+}), Tt = {
 	class: "plinth-data-table",
 	role: "table"
-}, vt = {
+}, Et = {
 	key: 0,
 	class: "plinth-data-table-caption"
-}, yt = {
+}, Dt = {
 	class: "plinth-data-table-head",
 	role: "rowgroup"
-}, bt = {
+}, Ot = {
 	class: "plinth-data-table-head-row",
 	role: "row"
-}, xt = {
+}, kt = {
 	class: "plinth-data-table-body",
 	role: "rowgroup"
-}, St = /* @__PURE__ */ d({
+}, At = /* @__PURE__ */ d({
 	__name: "PlinthDataTable",
 	props: { caption: { default: void 0 } },
 	setup(e) {
-		return (t, n) => (h(), s("table", _t, [
-			e.caption?.trim() ? (h(), s("caption", vt, b(e.caption), 1)) : o("", !0),
-			c("thead", yt, [c("tr", bt, [v(t.$slots, "head")])]),
-			c("tbody", xt, [v(t.$slots, "default")])
+		return (t, n) => (v(), s("table", Tt, [
+			e.caption?.trim() ? (v(), s("caption", Et, w(e.caption), 1)) : o("", !0),
+			c("thead", Dt, [c("tr", Ot, [S(t.$slots, "head")])]),
+			c("tbody", kt, [S(t.$slots, "default")])
 		]));
 	}
-}), Ct = [
+}), jt = [
 	"none",
 	"ascending",
 	"descending"
 ];
-function wt(e) {
-	return Ct.includes(e) ? e : "none";
+function Mt(e) {
+	return jt.includes(e) ? e : "none";
 }
-var Tt = [
+var Nt = [
 	"field",
 	"title",
 	"actions"
 ];
-function Et(e) {
-	return Tt.includes(e) ? e : "field";
+function Pt(e) {
+	return Nt.includes(e) ? e : "field";
 }
-var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path class=\"plinth-data-table-sort-up\" d=\"M8 9l4-4 4 4\"></path><path class=\"plinth-data-table-sort-down\" d=\"M8 15l4 4 4-4\"></path></svg></span>", Ot = [
+var Ft = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path class=\"plinth-data-table-sort-up\" d=\"M8 9l4-4 4 4\"></path><path class=\"plinth-data-table-sort-down\" d=\"M8 15l4 4 4-4\"></path></svg></span>", It = [
 	"data-kind",
 	"data-numeric",
 	"data-phone"
-], kt = {
+], Lt = {
 	key: 0,
 	class: "plinth-data-table-label",
 	"aria-hidden": "true"
-}, At = { class: "plinth-data-table-value" }, jt = /* @__PURE__ */ d({
+}, Rt = { class: "plinth-data-table-value" }, zt = /* @__PURE__ */ d({
 	__name: "PlinthDataTableCell",
 	props: {
 		label: { default: void 0 },
@@ -618,20 +618,20 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 		}
 	},
 	setup(e) {
-		let t = e, n = i(() => Et(t.kind));
-		return (t, r) => (h(), s("td", {
+		let t = e, n = i(() => Pt(t.kind));
+		return (t, r) => (v(), s("td", {
 			class: "plinth-data-table-cell",
 			role: "cell",
 			"data-kind": n.value,
 			"data-numeric": e.numeric ? "" : void 0,
 			"data-phone": e.hideOnPhone ? "hidden" : void 0
-		}, [e.label?.trim() ? (h(), s("span", kt, b(e.label), 1)) : o("", !0), c("span", At, [v(t.$slots, "default")])], 8, Ot));
+		}, [e.label?.trim() ? (v(), s("span", Lt, w(e.label), 1)) : o("", !0), c("span", Rt, [S(t.$slots, "default")])], 8, It));
 	}
-}), Mt = [
+}), Bt = [
 	"aria-sort",
 	"data-numeric",
 	"data-phone"
-], Nt = /* @__PURE__ */ d({
+], Vt = /* @__PURE__ */ d({
 	__name: "PlinthDataTableColumn",
 	props: {
 		sort: { default: void 0 },
@@ -645,20 +645,20 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 		}
 	},
 	setup(e) {
-		let t = e, n = i(() => t.sort?.trim() ? wt(t.sort) : void 0);
-		return (t, r) => (h(), s("th", {
+		let t = e, n = i(() => t.sort?.trim() ? Mt(t.sort) : void 0);
+		return (t, r) => (v(), s("th", {
 			class: "plinth-data-table-column",
 			role: "columnheader",
 			scope: "col",
 			"aria-sort": n.value,
 			"data-numeric": e.numeric ? "" : void 0,
 			"data-phone": e.hideOnPhone ? "hidden" : void 0
-		}, [v(t.$slots, "default")], 8, Mt));
+		}, [S(t.$slots, "default")], 8, Bt));
 	}
-}), Pt = {
+}), Ht = {
 	class: "plinth-data-table-empty",
 	role: "row"
-}, Ft = ["colspan"], It = /* @__PURE__ */ d({
+}, Ut = ["colspan"], Wt = /* @__PURE__ */ d({
 	__name: "PlinthDataTableEmpty",
 	props: { columns: { default: 1 } },
 	setup(e) {
@@ -666,32 +666,32 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 			let e = typeof t.columns == "number" ? t.columns : String(t.columns), r = typeof e == "number" || n.test(e) ? Number(e) : NaN;
 			return Number.isFinite(r) ? Math.max(1, Math.trunc(r)) : 1;
 		});
-		return (e, t) => (h(), s("tr", Pt, [c("td", {
+		return (e, t) => (v(), s("tr", Ht, [c("td", {
 			class: "plinth-data-table-empty-cell",
 			role: "cell",
 			colspan: r.value
-		}, [v(e.$slots, "default")], 8, Ft)]));
+		}, [S(e.$slots, "default")], 8, Ut)]));
 	}
-}), Lt = ["aria-selected"], Rt = /* @__PURE__ */ d({
+}), Gt = ["aria-selected"], Kt = /* @__PURE__ */ d({
 	__name: "PlinthDataTableRow",
 	props: { selected: {
 		type: Boolean,
 		default: void 0
 	} },
 	setup(e) {
-		return (t, n) => (h(), s("tr", {
+		return (t, n) => (v(), s("tr", {
 			class: "plinth-data-table-row",
 			role: "row",
 			"aria-selected": e.selected === void 0 ? void 0 : e.selected ? "true" : "false"
-		}, [v(t.$slots, "default")], 8, Lt));
+		}, [S(t.$slots, "default")], 8, Gt));
 	}
-}), zt = {
+}), qt = {
 	type: "button",
 	class: "plinth-data-table-sort"
-}, Bt = { class: "plinth-data-table-sort-label" }, Vt = /* @__PURE__ */ d({
+}, Jt = { class: "plinth-data-table-sort-label" }, Yt = /* @__PURE__ */ d({
 	__name: "PlinthDataTableSort",
 	setup(e) {
-		return (e, t) => (h(), s("button", zt, [c("span", Bt, [v(e.$slots, "default")]), t[0] ||= c("span", {
+		return (e, t) => (v(), s("button", qt, [c("span", Jt, [S(e.$slots, "default")]), t[0] ||= c("span", {
 			class: "plinth-icon plinth-data-table-sort-icon",
 			"data-size": "sm",
 			"aria-hidden": "true"
@@ -710,7 +710,7 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 			d: "M8 15l4 4 4-4"
 		})])], -1)]));
 	}
-}), Ht = [
+}), Xt = [
 	"href",
 	"data-variant",
 	"data-size",
@@ -718,11 +718,11 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 	"role",
 	"aria-busy",
 	"aria-disabled"
-], Ut = {
+], Zt = {
 	key: 0,
 	class: "plinth-button-spinner",
 	"aria-hidden": "true"
-}, Wt = ["data-size", "data-mirror"], Gt = [
+}, Qt = ["data-size", "data-mirror"], $t = [
 	"data-variant",
 	"data-size",
 	"aria-label",
@@ -730,11 +730,11 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 	"disabled",
 	"aria-busy",
 	"aria-disabled"
-], Kt = {
+], en = {
 	key: 0,
 	class: "plinth-button-spinner",
 	"aria-hidden": "true"
-}, qt = ["data-size", "data-mirror"], X = /* @__PURE__ */ d({
+}, tn = ["data-size", "data-mirror"], q = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "PlinthIconButton",
 	props: {
@@ -760,8 +760,8 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 		}
 	},
 	setup(e) {
-		let t = e, n = S(), r = i(() => L(t.variant)), a = i(() => A(t.size, k, "md")), o = i(() => j(a.value)), c = i(() => t.busy && !t.disabled), l = i(() => t.label || n["aria-label"]), u = i(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "aria-label")));
-		return (t, n) => e.href ? (h(), s("a", f({
+		let t = e, n = E(), r = i(() => _e(t.variant)), a = i(() => N(t.size, M, "md")), o = i(() => P(a.value)), c = i(() => t.busy && !t.disabled), l = i(() => t.label || n["aria-label"]), u = i(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "aria-label")));
+		return (t, n) => e.href ? (v(), s("a", m({
 			key: 0,
 			class: "plinth-button plinth-icon-button",
 			href: e.disabled ? void 0 : e.href,
@@ -771,13 +771,13 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 			role: e.disabled ? "link" : void 0,
 			"aria-busy": c.value ? "true" : void 0,
 			"aria-disabled": c.value || e.disabled ? "true" : void 0
-		}, u.value), [c.value ? (h(), s("span", Ut)) : (h(), s("span", {
+		}, u.value), [c.value ? (v(), s("span", Zt)) : (v(), s("span", {
 			key: 1,
 			class: "plinth-icon",
 			"data-size": o.value,
 			"data-mirror": e.mirror ? "" : void 0,
 			"aria-hidden": "true"
-		}, [v(t.$slots, "default")], 8, Wt))], 16, Ht)) : (h(), s("button", f({
+		}, [S(t.$slots, "default")], 8, Qt))], 16, Xt)) : (v(), s("button", m({
 			key: 1,
 			type: "button",
 			class: "plinth-button plinth-icon-button",
@@ -788,18 +788,18 @@ var Dt = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm
 			disabled: e.disabled || void 0,
 			"aria-busy": c.value ? "true" : void 0,
 			"aria-disabled": c.value ? "true" : void 0
-		}, u.value), [c.value ? (h(), s("span", Kt)) : (h(), s("span", {
+		}, u.value), [c.value ? (v(), s("span", en)) : (v(), s("span", {
 			key: 1,
 			class: "plinth-icon",
 			"data-size": o.value,
 			"data-mirror": e.mirror ? "" : void 0,
 			"aria-hidden": "true"
-		}, [v(t.$slots, "default")], 8, qt))], 16, Gt));
+		}, [S(t.$slots, "default")], 8, tn))], 16, $t));
 	}
 });
 //#endregion
 //#region src/swipe.ts
-function Jt(e) {
+function nn(e) {
 	let t = e.firstElementChild, n = () => getComputedStyle(e).scrollSnapType.startsWith("y"), r = () => {
 		e.requestClose ? e.requestClose() : e.close(), e.open && (e.scrollTop = 0);
 	}, i = () => {
@@ -820,29 +820,29 @@ function Jt(e) {
 		e.removeEventListener(s, i), e.removeEventListener("click", a), e.removeEventListener("toggle", o);
 	};
 }
-function Z(e) {
+function J(e) {
 	let t;
-	m(() => {
-		t = e.value ? Jt(e.value) : void 0;
-	}), p(() => t?.());
+	_(() => {
+		t = e.value ? nn(e.value) : void 0;
+	}), g(() => t?.());
 }
 //#endregion
 //#region src/PlinthDialog.vue?vue&type=script&setup=true&lang.ts
-var Yt = [
+var rn = [
 	"id",
 	"role",
 	"data-side-phone",
 	"closedby",
 	"aria-labelledby",
 	"aria-describedby"
-], Xt = { class: "plinth-dialog-panel" }, Zt = {
+], an = { class: "plinth-dialog-panel" }, on = {
 	key: 0,
 	class: "plinth-dialog-handle",
 	"aria-hidden": "true"
-}, Qt = { class: "plinth-dialog-header" }, $t = ["id"], en = ["id"], tn = { class: "plinth-dialog-body" }, nn = {
+}, sn = { class: "plinth-dialog-header" }, cn = ["id"], ln = ["id"], un = { class: "plinth-dialog-body" }, dn = {
 	key: 1,
 	class: "plinth-dialog-footer"
-}, rn = /* @__PURE__ */ d({
+}, fn = /* @__PURE__ */ d({
 	__name: "PlinthDialog",
 	props: {
 		id: { default: void 0 },
@@ -859,14 +859,14 @@ var Yt = [
 	setup(e, { expose: t, emit: n }) {
 		let r = e, l = n;
 		if (!r.title?.trim()) throw Error("<PlinthDialog> needs a title: it is the dialog's accessible name.");
-		let u = w(), d = C(), f = i(() => r.id?.trim() || `plinth-dialog-${d}`), p = i(() => J(r.sidePhone)), m = i(() => !!r.description?.trim()), _ = g();
-		return Z(_), t({
-			showModal: () => _.value?.showModal(),
-			close: () => _.value?.close()
-		}), (t, n) => (h(), s("dialog", {
+		let u = k(), d = D(), f = i(() => r.id?.trim() || `plinth-dialog-${d}`), p = i(() => K(r.sidePhone)), m = i(() => !!r.description?.trim()), h = b();
+		return J(h), t({
+			showModal: () => h.value?.showModal(),
+			close: () => h.value?.close()
+		}), (t, n) => (v(), s("dialog", {
 			id: f.value,
 			ref_key: "dialog",
-			ref: _,
+			ref: h,
 			class: "plinth-dialog",
 			role: e.dismissible ? void 0 : "alertdialog",
 			"data-side-phone": p.value === "center" ? void 0 : p.value,
@@ -874,19 +874,19 @@ var Yt = [
 			"aria-labelledby": `${f.value}-title`,
 			"aria-describedby": m.value ? `${f.value}-description` : void 0,
 			onClose: n[0] ||= (e) => l("close", e)
-		}, [c("div", Xt, [
-			e.dismissible && p.value === "bottom" ? (h(), s("div", Zt)) : o("", !0),
-			c("div", Qt, [
+		}, [c("div", an, [
+			e.dismissible && p.value === "bottom" ? (v(), s("div", on)) : o("", !0),
+			c("div", sn, [
 				c("h2", {
 					id: `${f.value}-title`,
 					class: "plinth-dialog-title"
-				}, b(e.title), 9, $t),
-				m.value ? (h(), s("p", {
+				}, w(e.title), 9, cn),
+				m.value ? (v(), s("p", {
 					key: 0,
 					id: `${f.value}-description`,
 					class: "plinth-dialog-description"
-				}, b(e.description), 9, en)) : o("", !0),
-				e.dismissible ? (h(), a(X, {
+				}, w(e.description), 9, ln)) : o("", !0),
+				e.dismissible ? (v(), a(q, {
 					key: 1,
 					class: "plinth-dialog-close",
 					label: e.closeLabel,
@@ -894,7 +894,7 @@ var Yt = [
 					commandfor: f.value,
 					command: "close"
 				}, {
-					default: D(() => [...n[1] ||= [c("svg", {
+					default: j(() => [...n[1] ||= [c("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
@@ -905,37 +905,37 @@ var Yt = [
 					_: 1
 				}, 8, ["label", "commandfor"])) : o("", !0)
 			]),
-			c("div", tn, [v(t.$slots, "default")]),
-			x(G)(x(u).footer?.()) ? (h(), s("div", nn, [v(t.$slots, "footer")])) : o("", !0)
-		])], 40, Yt));
+			c("div", un, [S(t.$slots, "default")]),
+			T(z)(T(u).footer?.()) ? (v(), s("div", dn, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, rn));
 	}
-}), an = ["dialog", "sheet"];
-function on(e) {
-	return an.includes(e) ? e : "dialog";
+}), pn = ["dialog", "sheet"];
+function mn(e) {
+	return pn.includes(e) ? e : "dialog";
 }
-var sn = [
+var hn = [
 	"peek",
 	"half",
 	"full"
 ];
-function cn(e) {
+function gn(e) {
 	let t = typeof e == "string" ? e.split(/\s+/) : e ?? [];
-	return sn.filter((e) => t.includes(e));
+	return hn.filter((e) => t.includes(e));
 }
-function ln(e, t) {
+function _n(e, t) {
 	return t.includes(e) ? e : t.at(-1);
 }
-var un = q, dn = [
+var vn = G, yn = [
 	"id",
 	"data-desktop",
 	"data-snap-points",
 	"data-snap",
 	"aria-labelledby",
 	"aria-describedby"
-], fn = { class: "plinth-drawer-panel" }, pn = { class: "plinth-drawer-header" }, mn = ["id"], hn = ["id"], gn = { class: "plinth-drawer-body" }, _n = {
+], bn = { class: "plinth-drawer-panel" }, xn = { class: "plinth-drawer-header" }, Sn = ["id"], Cn = ["id"], wn = { class: "plinth-drawer-body" }, Tn = {
 	key: 0,
 	class: "plinth-drawer-footer"
-}, vn = /* @__PURE__ */ d({
+}, En = /* @__PURE__ */ d({
 	__name: "PlinthDrawer",
 	props: {
 		id: { default: void 0 },
@@ -950,45 +950,45 @@ var un = q, dn = [
 	setup(e, { expose: t, emit: n }) {
 		let r = e, a = n;
 		if (!r.title?.trim()) throw Error("<PlinthDrawer> needs a title: it is the drawer's accessible name.");
-		let l = w(), d = C(), f = i(() => r.id?.trim() || `plinth-drawer-${d}`), p = i(() => cn(r.snapPoints)), m = i(() => !!r.description?.trim()), _ = g();
-		return Z(_), t({
-			showModal: () => _.value?.showModal(),
-			close: () => _.value?.close()
-		}), (t, n) => (h(), s("dialog", {
+		let l = k(), d = D(), f = i(() => r.id?.trim() || `plinth-drawer-${d}`), p = i(() => gn(r.snapPoints)), m = i(() => !!r.description?.trim()), h = b();
+		return J(h), t({
+			showModal: () => h.value?.showModal(),
+			close: () => h.value?.close()
+		}), (t, n) => (v(), s("dialog", {
 			id: f.value,
 			ref_key: "dialog",
-			ref: _,
+			ref: h,
 			class: "plinth-drawer",
-			"data-desktop": x(on)(e.desktop),
+			"data-desktop": T(mn)(e.desktop),
 			"data-snap-points": p.value.length ? p.value.join(" ") : void 0,
-			"data-snap": x(ln)(e.snap, p.value),
+			"data-snap": T(_n)(e.snap, p.value),
 			closedby: "any",
 			"aria-labelledby": `${f.value}-title`,
 			"aria-describedby": m.value ? `${f.value}-description` : void 0,
 			onClose: n[0] ||= (e) => a("close", e)
-		}, [c("div", fn, [
+		}, [c("div", bn, [
 			n[2] ||= c("div", {
 				class: "plinth-drawer-handle",
 				"aria-hidden": "true"
 			}, null, -1),
-			c("div", pn, [
+			c("div", xn, [
 				c("h2", {
 					id: `${f.value}-title`,
 					class: "plinth-drawer-title"
-				}, b(e.title), 9, mn),
-				m.value ? (h(), s("p", {
+				}, w(e.title), 9, Sn),
+				m.value ? (v(), s("p", {
 					key: 0,
 					id: `${f.value}-description`,
 					class: "plinth-drawer-description"
-				}, b(e.description), 9, hn)) : o("", !0),
-				u(X, {
+				}, w(e.description), 9, Cn)) : o("", !0),
+				u(q, {
 					class: "plinth-drawer-close",
 					label: e.closeLabel,
 					variant: "ghost",
 					commandfor: f.value,
 					command: "close"
 				}, {
-					default: D(() => [...n[1] ||= [c("svg", {
+					default: j(() => [...n[1] ||= [c("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
@@ -999,45 +999,27 @@ var un = q, dn = [
 					_: 1
 				}, 8, ["label", "commandfor"])
 			]),
-			c("div", gn, [v(t.$slots, "default")]),
-			x(G)(x(l).footer?.()) ? (h(), s("div", _n, [v(t.$slots, "footer")])) : o("", !0)
-		])], 40, dn));
-	}
-}), yn = { class: "plinth-header" }, bn = {
-	key: 0,
-	class: "plinth-header-leading"
-}, xn = { class: "plinth-header-title" }, Sn = {
-	key: 1,
-	class: "plinth-header-actions"
-}, Cn = /* @__PURE__ */ d({
-	__name: "PlinthHeader",
-	props: { title: {} },
-	setup(e) {
-		if (!e.title?.trim()) throw Error("<PlinthHeader> needs a title: it is the page's heading.");
-		let t = w();
-		return (n, r) => (h(), s("header", yn, [
-			x(G)(x(t).leading?.()) ? (h(), s("div", bn, [v(n.$slots, "leading")])) : o("", !0),
-			c("h1", xn, b(e.title), 1),
-			x(G)(x(t).actions?.()) ? (h(), s("div", Sn, [v(n.$slots, "actions")])) : o("", !0)
-		]));
+			c("div", wn, [S(t.$slots, "default")]),
+			T(z)(T(l).footer?.()) ? (v(), s("div", Tn, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, yn));
 	}
-}), wn = [
+}), Dn = [
 	"sm",
 	"md",
 	"lg"
 ];
-function Tn(e) {
-	return A(e, wn, "md");
+function On(e) {
+	return N(e, Dn, "md");
 }
 //#endregion
 //#region src/PlinthIcon.vue?vue&type=script&setup=true&lang.ts
-var En = [
+var kn = [
 	"data-size",
 	"data-mirror",
 	"role",
 	"aria-label",
 	"aria-hidden"
-], Dn = /* @__PURE__ */ d({
+], An = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "PlinthIcon",
 	props: {
@@ -1049,38 +1031,38 @@ var En = [
 		}
 	},
 	setup(e) {
-		let t = e, n = S(), r = i(() => Tn(t.size)), a = i(() => {
+		let t = e, n = E(), r = i(() => On(t.size)), a = i(() => {
 			let e = t.label ?? n["aria-label"];
 			return e?.trim() ? e : void 0;
 		}), o = i(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "aria-label")));
-		return (t, n) => (h(), s("span", f({
+		return (t, n) => (v(), s("span", m({
 			class: "plinth-icon",
 			"data-size": r.value,
 			"data-mirror": e.mirror ? "" : void 0,
 			role: a.value ? "img" : void 0,
 			"aria-label": a.value,
 			"aria-hidden": a.value ? void 0 : "true"
-		}, o.value), [v(t.$slots, "default")], 16, En));
+		}, o.value), [S(t.$slots, "default")], 16, kn));
 	}
-}), On = [
+}), jn = [
 	"h2",
 	"h3",
 	"h4",
 	"h5",
 	"h6"
 ];
-function kn(e) {
-	return On.includes(e) ? e : "h2";
+function Mn(e) {
+	return jn.includes(e) ? e : "h2";
 }
 //#endregion
 //#region src/PlinthListCard.vue?vue&type=script&setup=true&lang.ts
-var An = { class: "plinth-list-card" }, jn = {
+var Nn = { class: "plinth-list-card" }, Pn = {
 	class: "plinth-list-card-list",
 	role: "list"
-}, Mn = {
+}, Fn = {
 	key: 1,
 	class: "plinth-list-card-footer"
-}, Nn = /* @__PURE__ */ d({
+}, In = /* @__PURE__ */ d({
 	__name: "PlinthListCard",
 	props: {
 		heading: { default: void 0 },
@@ -1088,35 +1070,35 @@ var An = { class: "plinth-list-card" }, jn = {
 		footer: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, n = i(() => kn(t.headingLevel));
-		return (t, r) => (h(), s("div", An, [
-			e.heading?.trim() ? (h(), a(y(n.value), {
+		let t = e, n = i(() => Mn(t.headingLevel));
+		return (t, r) => (v(), s("div", Nn, [
+			e.heading?.trim() ? (v(), a(C(n.value), {
 				key: 0,
 				class: "plinth-list-card-heading"
 			}, {
-				default: D(() => [l(b(e.heading), 1)]),
+				default: j(() => [l(w(e.heading), 1)]),
 				_: 1
 			})) : o("", !0),
-			c("ul", jn, [v(t.$slots, "default")]),
-			e.footer?.trim() ? (h(), s("p", Mn, b(e.footer), 1)) : o("", !0)
+			c("ul", Pn, [S(t.$slots, "default")]),
+			e.footer?.trim() ? (v(), s("p", Fn, w(e.footer), 1)) : o("", !0)
 		]));
 	}
-}), Pn = {
+}), Ln = {
 	key: 0,
 	class: "plinth-list-row-leading"
-}, Fn = { class: "plinth-list-row-content" }, In = { class: "plinth-list-row-title" }, Ln = {
+}, Rn = { class: "plinth-list-row-content" }, zn = { class: "plinth-list-row-title" }, Bn = {
 	key: 0,
 	class: "plinth-list-row-description"
-}, Rn = {
+}, Vn = {
 	key: 1,
 	class: "plinth-list-row-trailing"
-}, zn = {
+}, Hn = {
 	key: 0,
 	class: "plinth-icon plinth-list-row-chevron",
 	"data-size": "sm",
 	"data-mirror": "",
 	"aria-hidden": "true"
-}, Q = /* @__PURE__ */ d({
+}, Y = /* @__PURE__ */ d({
 	__name: "PlinthListRow",
 	props: {
 		description: { default: void 0 },
@@ -1140,7 +1122,7 @@ var An = { class: "plinth-list-card" }, jn = {
 	},
 	setup(e) {
 		let t = e, n = i(() => t.href ? "a" : t.button ? "button" : "div");
-		return (t, r) => (h(), a(y(n.value), {
+		return (t, r) => (v(), a(C(n.value), {
 			class: "plinth-list-row",
 			type: n.value === "button" ? "button" : void 0,
 			href: n.value === "a" && !e.disabled ? e.href : void 0,
@@ -1149,10 +1131,10 @@ var An = { class: "plinth-list-card" }, jn = {
 			role: n.value === "a" && e.disabled ? "link" : void 0,
 			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 0
 		}, {
-			default: D(() => [
-				t.$slots.leading ? (h(), s("span", Pn, [v(t.$slots, "leading")])) : o("", !0),
-				c("span", Fn, [c("span", In, [v(t.$slots, "default")]), e.description ? (h(), s("span", Ln, b(e.description), 1)) : o("", !0)]),
-				t.$slots.trailing || e.chevron ? (h(), s("span", Rn, [v(t.$slots, "trailing"), e.chevron ? (h(), s("span", zn, [...r[0] ||= [c("svg", {
+			default: j(() => [
+				t.$slots.leading ? (v(), s("span", Ln, [S(t.$slots, "leading")])) : o("", !0),
+				c("span", Rn, [c("span", zn, [S(t.$slots, "default")]), e.description ? (v(), s("span", Bn, w(e.description), 1)) : o("", !0)]),
+				t.$slots.trailing || e.chevron ? (v(), s("span", Vn, [S(t.$slots, "trailing"), e.chevron ? (v(), s("span", Hn, [...r[0] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -1171,20 +1153,113 @@ var An = { class: "plinth-list-card" }, jn = {
 			"aria-disabled"
 		]));
 	}
-}), Bn = [
+}), Un = ["neutral", "danger"];
+function Wn(e) {
+	return Un.includes(e) ? e : "neutral";
+}
+var X = Symbol("plinth-menu-id"), Gn = ["id"], Kn = /* @__PURE__ */ d({
+	__name: "PlinthMenu",
+	props: { id: {} },
+	setup(e, { expose: t }) {
+		let n = e;
+		if (!n.id?.trim()) throw Error("<PlinthMenu> needs an id: its button names it in popovertarget.");
+		let r = i(() => n.id.trim());
+		y(X, r);
+		let a = b();
+		return t({
+			showPopover: (e) => a.value?.showPopover(e),
+			hidePopover: () => a.value?.hidePopover()
+		}), (e, t) => (v(), s("div", {
+			id: r.value,
+			ref_key: "menu",
+			ref: a,
+			class: "plinth-menu",
+			popover: "auto"
+		}, [S(e.$slots, "default")], 8, Gn));
+	}
+}), qn = ["aria-label"], Jn = {
+	key: 0,
+	class: "plinth-menu-heading",
+	"aria-hidden": "true"
+}, Yn = /* @__PURE__ */ d({
+	__name: "PlinthMenuGroup",
+	props: { label: {} },
+	setup(e) {
+		return (t, n) => (v(), s("div", {
+			class: "plinth-menu-group",
+			role: "group",
+			"aria-label": e.label?.trim() ? e.label : void 0
+		}, [e.label?.trim() ? (v(), s("div", Jn, w(e.label), 1)) : o("", !0), S(t.$slots, "default")], 8, qn));
+	}
+}), Xn = {
+	key: 0,
+	class: "plinth-menu-icon",
+	"aria-hidden": "true"
+}, Zn = { class: "plinth-menu-label" }, Qn = {
+	key: 1,
+	class: "plinth-menu-shortcut",
+	"aria-hidden": "true"
+}, $n = /* @__PURE__ */ d({
+	__name: "PlinthMenuItem",
+	props: {
+		href: { default: void 0 },
+		tone: { default: "neutral" },
+		shortcut: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		menu: { default: void 0 }
+	},
+	setup(e) {
+		let t = e, n = k(), r = f(X, void 0), l = i(() => t.href?.trim() ? "a" : "button"), u = i(() => l.value === "button" ? t.menu?.trim() || r?.value : void 0), d = i(() => Wn(t.tone));
+		return (t, r) => (v(), a(C(l.value), {
+			class: "plinth-menu-item",
+			type: l.value === "button" ? "button" : void 0,
+			href: l.value === "a" && !e.disabled ? e.href : void 0,
+			commandfor: u.value || void 0,
+			command: u.value ? "hide-popover" : void 0,
+			"data-tone": d.value === "danger" ? "danger" : void 0,
+			disabled: l.value === "button" && e.disabled ? !0 : void 0,
+			role: l.value === "a" && e.disabled ? "link" : void 0,
+			"aria-disabled": l.value === "a" && e.disabled ? "true" : void 0
+		}, {
+			default: j(() => [
+				T(z)(T(n).icon?.()) ? (v(), s("span", Xn, [S(t.$slots, "icon")])) : o("", !0),
+				c("span", Zn, [S(t.$slots, "default")]),
+				e.shortcut?.trim() ? (v(), s("kbd", Qn, w(e.shortcut), 1)) : o("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"type",
+			"href",
+			"commandfor",
+			"command",
+			"data-tone",
+			"disabled",
+			"role",
+			"aria-disabled"
+		]));
+	}
+}), er = { class: "plinth-menu-separator" }, tr = /* @__PURE__ */ d({
+	__name: "PlinthMenuSeparator",
+	setup(e) {
+		return (e, t) => (v(), s("hr", er));
+	}
+}), nr = [
 	"id",
 	"data-side",
 	"data-side-phone",
 	"aria-labelledby",
 	"aria-describedby"
-], Vn = { class: "plinth-sheet-panel" }, Hn = {
+], rr = { class: "plinth-sheet-panel" }, ir = {
 	key: 0,
 	class: "plinth-sheet-handle",
 	"aria-hidden": "true"
-}, Un = { class: "plinth-sheet-header" }, Wn = ["id"], Gn = ["id"], Kn = { class: "plinth-sheet-body" }, qn = {
+}, ar = { class: "plinth-sheet-header" }, or = ["id"], sr = ["id"], cr = { class: "plinth-sheet-body" }, lr = {
 	key: 1,
 	class: "plinth-sheet-footer"
-}, $ = /* @__PURE__ */ d({
+}, Z = /* @__PURE__ */ d({
 	__name: "PlinthSheet",
 	props: {
 		id: { default: void 0 },
@@ -1198,41 +1273,41 @@ var An = { class: "plinth-list-card" }, jn = {
 	setup(e, { expose: t, emit: n }) {
 		let r = e, a = n;
 		if (!r.title?.trim()) throw Error("<PlinthSheet> needs a title: it is the sheet's accessible name.");
-		let l = w(), d = C(), f = i(() => r.id?.trim() || `plinth-sheet-${d}`), p = i(() => tt(r.side)), m = i(() => K(r.sidePhone)), _ = i(() => !!r.description?.trim()), y = g(), S = i(() => (m.value ?? p.value) === "bottom");
-		return Z(y), t({
-			showModal: () => y.value?.showModal(),
-			close: () => y.value?.close()
-		}), (t, n) => (h(), s("dialog", {
+		let l = k(), d = D(), f = i(() => r.id?.trim() || `plinth-sheet-${d}`), p = i(() => ct(r.side)), m = i(() => W(r.sidePhone)), h = i(() => !!r.description?.trim()), g = b(), _ = i(() => (m.value ?? p.value) === "bottom");
+		return J(g), t({
+			showModal: () => g.value?.showModal(),
+			close: () => g.value?.close()
+		}), (t, n) => (v(), s("dialog", {
 			id: f.value,
 			ref_key: "dialog",
-			ref: y,
+			ref: g,
 			class: "plinth-sheet",
 			"data-side": p.value,
 			"data-side-phone": m.value,
 			closedby: "any",
 			"aria-labelledby": `${f.value}-title`,
-			"aria-describedby": _.value ? `${f.value}-description` : void 0,
+			"aria-describedby": h.value ? `${f.value}-description` : void 0,
 			onClose: n[0] ||= (e) => a("close", e)
-		}, [c("div", Vn, [
-			S.value ? (h(), s("div", Hn)) : o("", !0),
-			c("div", Un, [
+		}, [c("div", rr, [
+			_.value ? (v(), s("div", ir)) : o("", !0),
+			c("div", ar, [
 				c("h2", {
 					id: `${f.value}-title`,
 					class: "plinth-sheet-title"
-				}, b(e.title), 9, Wn),
-				_.value ? (h(), s("p", {
+				}, w(e.title), 9, or),
+				h.value ? (v(), s("p", {
 					key: 0,
 					id: `${f.value}-description`,
 					class: "plinth-sheet-description"
-				}, b(e.description), 9, Gn)) : o("", !0),
-				u(X, {
+				}, w(e.description), 9, sr)) : o("", !0),
+				u(q, {
 					class: "plinth-sheet-close",
 					label: e.closeLabel,
 					variant: "ghost",
 					commandfor: f.value,
 					command: "close"
 				}, {
-					default: D(() => [...n[1] ||= [c("svg", {
+					default: j(() => [...n[1] ||= [c("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
@@ -1243,14 +1318,14 @@ var An = { class: "plinth-list-card" }, jn = {
 					_: 1
 				}, 8, ["label", "commandfor"])
 			]),
-			c("div", Kn, [v(t.$slots, "default")]),
-			x(G)(x(l).footer?.()) ? (h(), s("div", qn, [v(t.$slots, "footer")])) : o("", !0)
-		])], 40, Bn));
+			c("div", cr, [S(t.$slots, "default")]),
+			T(z)(T(l).footer?.()) ? (v(), s("div", lr, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, nr));
 	}
-}), Jn = ["aria-labelledby"], Yn = {
+}), ur = ["aria-labelledby"], dr = {
 	key: 1,
 	class: "plinth-menu-sheet-account"
-}, Xn = /* @__PURE__ */ d({
+}, fr = /* @__PURE__ */ d({
 	__name: "PlinthMenuSheet",
 	props: {
 		id: { default: void 0 },
@@ -1263,14 +1338,14 @@ var An = { class: "plinth-list-card" }, jn = {
 	},
 	emits: ["close"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, d = n, f = w(), p = C(), m = i(() => r.id?.trim() || `plinth-menu-sheet-${p}`), _ = i(() => !!r.userName?.trim()), y = i(() => r.userHref?.trim() ? r.userHref : void 0), S = i(() => r.userSrc?.trim() ? r.userSrc : void 0), T = i(() => r.userDetail?.trim() ? r.userDetail : void 0), E = g();
+		let r = e, d = n, f = k(), p = D(), m = i(() => r.id?.trim() || `plinth-menu-sheet-${p}`), h = i(() => !!r.userName?.trim()), g = i(() => r.userHref?.trim() ? r.userHref : void 0), _ = i(() => r.userSrc?.trim() ? r.userSrc : void 0), y = i(() => r.userDetail?.trim() ? r.userDetail : void 0), x = b();
 		return t({
-			showModal: () => E.value?.showModal(),
-			close: () => E.value?.close()
-		}), (t, n) => (h(), a($, {
+			showModal: () => x.value?.showModal(),
+			close: () => x.value?.close()
+		}), (t, n) => (v(), a(Z, {
 			id: m.value,
 			ref_key: "sheet",
-			ref: E,
+			ref: x,
 			class: "plinth-menu-sheet",
 			title: e.title,
 			"close-label": e.closeLabel,
@@ -1278,21 +1353,21 @@ var An = { class: "plinth-list-card" }, jn = {
 			"side-phone": "bottom",
 			onClose: n[0] ||= (e) => d("close", e)
 		}, {
-			default: D(() => [
-				_.value ? (h(), a(Q, {
+			default: j(() => [
+				h.value ? (v(), a(Y, {
 					key: 0,
 					class: "plinth-menu-sheet-user",
-					description: T.value,
-					href: y.value,
-					chevron: !!y.value
+					description: y.value,
+					href: g.value,
+					chevron: !!g.value
 				}, {
-					leading: D(() => [u(P, {
+					leading: j(() => [u(I, {
 						name: e.userName,
-						src: S.value,
+						src: _.value,
 						size: "lg",
 						decorative: ""
 					}, null, 8, ["name", "src"])]),
-					default: D(() => [l(b(e.userName), 1)]),
+					default: j(() => [l(w(e.userName), 1)]),
 					_: 1
 				}, 8, [
 					"description",
@@ -1302,8 +1377,8 @@ var An = { class: "plinth-list-card" }, jn = {
 				c("nav", {
 					class: "plinth-menu-sheet-nav",
 					"aria-labelledby": `${m.value}-title`
-				}, [v(t.$slots, "default")], 8, Jn),
-				x(G)(x(f).account?.()) ? (h(), s("div", Yn, [v(t.$slots, "account")])) : o("", !0)
+				}, [S(t.$slots, "default")], 8, ur),
+				T(z)(T(f).account?.()) ? (v(), s("div", dr, [S(t.$slots, "account")])) : o("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -1312,10 +1387,55 @@ var An = { class: "plinth-list-card" }, jn = {
 			"close-label"
 		]));
 	}
-}), Zn = { class: "plinth-pill-label" }, Qn = {
+}), pr = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+function Q(e) {
+	return pr.includes(e) ? e : "h1";
+}
+//#endregion
+//#region src/PlinthPageHeader.vue?vue&type=script&setup=true&lang.ts
+var mr = ["data-top"], hr = {
+	key: 0,
+	class: "plinth-page-header-leading"
+}, gr = {
+	key: 1,
+	class: "plinth-page-header-actions"
+}, _r = /* @__PURE__ */ d({
+	__name: "PlinthPageHeader",
+	props: {
+		heading: {},
+		level: { default: "h1" },
+		top: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e;
+		if (!t.heading?.trim()) throw Error("<PlinthPageHeader> needs a heading: it is the page's heading.");
+		let n = i(() => Q(t.level)), r = k();
+		return (t, i) => (v(), s("header", {
+			class: "plinth-page-header",
+			"data-top": e.top ? "" : void 0
+		}, [
+			T(z)(T(r).leading?.()) ? (v(), s("div", hr, [S(t.$slots, "leading")])) : o("", !0),
+			(v(), a(C(n.value), { class: "plinth-page-header-heading" }, {
+				default: j(() => [l(w(e.heading), 1)]),
+				_: 1
+			})),
+			T(z)(T(r).actions?.()) ? (v(), s("div", gr, [S(t.$slots, "actions")])) : o("", !0)
+		], 8, mr));
+	}
+}), vr = { class: "plinth-pill-label" }, yr = {
 	key: 0,
 	class: "plinth-pill-count"
-}, $n = /* @__PURE__ */ d({
+}, br = /* @__PURE__ */ d({
 	__name: "PlinthPill",
 	props: {
 		count: { default: void 0 },
@@ -1331,7 +1451,7 @@ var An = { class: "plinth-list-card" }, jn = {
 	},
 	setup(e) {
 		let t = e, n = i(() => t.href ? "a" : "button"), r = i(() => t.count != null && String(t.count).trim() !== "");
-		return (t, i) => (h(), a(y(n.value), {
+		return (t, i) => (v(), a(C(n.value), {
 			class: "plinth-pill",
 			type: n.value === "button" ? "button" : void 0,
 			href: n.value === "a" && !e.disabled ? e.href : void 0,
@@ -1341,7 +1461,7 @@ var An = { class: "plinth-list-card" }, jn = {
 			role: n.value === "a" && e.disabled ? "link" : void 0,
 			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 0
 		}, {
-			default: D(() => [c("span", Zn, [v(t.$slots, "default")]), r.value ? (h(), s("span", Qn, b(e.count), 1)) : o("", !0)]),
+			default: j(() => [c("span", vr, [S(t.$slots, "default")]), r.value ? (v(), s("span", yr, w(e.count), 1)) : o("", !0)]),
 			_: 3
 		}, 8, [
 			"type",
@@ -1353,7 +1473,7 @@ var An = { class: "plinth-list-card" }, jn = {
 			"aria-disabled"
 		]));
 	}
-}), er = /* @__PURE__ */ d({
+}), xr = /* @__PURE__ */ d({
 	__name: "PlinthPillRow",
 	props: {
 		label: { default: void 0 },
@@ -1363,16 +1483,16 @@ var An = { class: "plinth-list-card" }, jn = {
 		}
 	},
 	setup(e) {
-		return (t, n) => (h(), a(y(e.nav ? "nav" : "div"), {
+		return (t, n) => (v(), a(C(e.nav ? "nav" : "div"), {
 			class: "plinth-pill-row",
 			role: e.nav ? void 0 : "group",
 			"aria-label": e.label || void 0
 		}, {
-			default: D(() => [v(t.$slots, "default")]),
+			default: j(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["role", "aria-label"]));
 	}
-}), tr = /* @__PURE__ */ d({
+}), Sr = /* @__PURE__ */ d({
 	__name: "PlinthSectionMenu",
 	props: {
 		label: { default: void 0 },
@@ -1382,19 +1502,19 @@ var An = { class: "plinth-list-card" }, jn = {
 		}
 	},
 	setup(e) {
-		return (t, n) => (h(), a(y(e.nav ? "nav" : "div"), {
+		return (t, n) => (v(), a(C(e.nav ? "nav" : "div"), {
 			class: "plinth-section-menu",
 			role: e.nav ? void 0 : "group",
 			"aria-label": e.label?.trim() ? e.label : void 0
 		}, {
-			default: D(() => [v(t.$slots, "default")]),
+			default: j(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["role", "aria-label"]));
 	}
-}), nr = { class: "plinth-section-menu-label" }, rr = {
+}), Cr = { class: "plinth-section-menu-label" }, wr = {
 	key: 0,
 	class: "plinth-section-menu-count"
-}, ir = /* @__PURE__ */ d({
+}, Tr = /* @__PURE__ */ d({
 	__name: "PlinthSectionMenuItem",
 	props: {
 		count: { default: void 0 },
@@ -1410,7 +1530,7 @@ var An = { class: "plinth-list-card" }, jn = {
 	},
 	setup(e) {
 		let t = e, n = i(() => t.href?.trim() ? "a" : "button"), r = i(() => t.count != null && String(t.count).trim() !== "");
-		return (t, i) => (h(), a(y(n.value), {
+		return (t, i) => (v(), a(C(n.value), {
 			class: "plinth-section-menu-item",
 			type: n.value === "button" ? "button" : void 0,
 			href: n.value === "a" && !e.disabled ? e.href : void 0,
@@ -1420,7 +1540,7 @@ var An = { class: "plinth-list-card" }, jn = {
 			role: n.value === "a" && e.disabled ? "link" : void 0,
 			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 0
 		}, {
-			default: D(() => [c("span", nr, [v(t.$slots, "default")]), r.value ? (h(), s("span", rr, b(e.count), 1)) : o("", !0)]),
+			default: j(() => [c("span", Cr, [S(t.$slots, "default")]), r.value ? (v(), s("span", wr, w(e.count), 1)) : o("", !0)]),
 			_: 3
 		}, 8, [
 			"type",
@@ -1432,8 +1552,181 @@ var An = { class: "plinth-list-card" }, jn = {
 			"aria-disabled"
 		]));
 	}
-}), ar = "<span class=\"plinth-icon plinth-list-row-chevron\" data-size=\"sm\" data-mirror aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"></path></svg></span>", or = { install(e) {
-	e.component("PlinthAvatar", P), e.component("PlinthBadge", F), e.component("PlinthButton", R), e.component("PlinthCallout", ke), e.component("PlinthCodeBlock", qe), e.component("PlinthConfirmDialog", Y), e.component("PlinthDataTable", St), e.component("PlinthDataTableCell", jt), e.component("PlinthDataTableColumn", Nt), e.component("PlinthDataTableEmpty", It), e.component("PlinthDataTableRow", Rt), e.component("PlinthDataTableSort", Vt), e.component("PlinthDialog", rn), e.component("PlinthDrawer", vn), e.component("PlinthHeader", Cn), e.component("PlinthIcon", Dn), e.component("PlinthIconButton", X), e.component("PlinthListCard", Nn), e.component("PlinthListRow", Q), e.component("PlinthMenuSheet", Xn), e.component("PlinthPill", $n), e.component("PlinthPillRow", er), e.component("PlinthSectionMenu", tr), e.component("PlinthSectionMenuItem", ir), e.component("PlinthSheet", $);
+}), Er = ["sm", "md"];
+function Dr(e) {
+	return N(e, Er, "md");
+}
+function $(e, t, n) {
+	let r = [t?.trim() ? `${e}-description` : "", n?.trim() ? `${e}-error` : ""].filter(Boolean);
+	return r.length ? r.join(" ") : void 0;
+}
+//#endregion
+//#region src/PlinthTextarea.vue?vue&type=script&setup=true&lang.ts
+var Or = ["data-label"], kr = ["for"], Ar = [
+	"id",
+	"rows",
+	"data-grow",
+	"value",
+	"disabled",
+	"readonly",
+	"aria-describedby",
+	"aria-invalid"
+], jr = ["id"], Mr = ["id"], Nr = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "PlinthTextarea",
+	props: /*@__PURE__*/ p({
+		label: {},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: void 0 },
+		rows: { default: 3 },
+		grow: {
+			type: Boolean,
+			default: !1
+		},
+		maxRows: { default: 8 },
+		description: { default: void 0 },
+		error: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = e, n = O(e, "modelValue");
+		if (!t.label?.trim()) throw Error("<PlinthTextarea> needs a label: it is the field's accessible name.");
+		let r = E(), a = D(), l = i(() => t.id?.trim() || `plinth-textarea-${a}`), u = i(() => !!t.description?.trim()), d = i(() => !!t.error?.trim()), f = i(() => $(l.value, t.description, t.error)), p = i(() => m(t.grow ? { style: `--plinth-textarea-rows: ${t.rows}; --plinth-textarea-max-rows: ${Math.max(t.maxRows, t.rows)}` } : {}, Object.fromEntries(Object.entries(r).filter(([e]) => e !== "class"))));
+		function g(e) {
+			n.value = e.target.value;
+		}
+		return (t, i) => (v(), s("div", {
+			class: h(["plinth-textarea", T(r).class]),
+			"data-label": e.hideLabel ? "hidden" : void 0
+		}, [
+			c("label", {
+				class: "plinth-textarea-label",
+				for: l.value
+			}, w(e.label), 9, kr),
+			c("textarea", m({
+				id: l.value,
+				class: "plinth-textarea-input",
+				rows: e.rows,
+				"data-grow": e.grow ? "" : void 0,
+				value: n.value,
+				disabled: e.disabled || void 0,
+				readonly: e.readonly || void 0,
+				"aria-describedby": f.value,
+				"aria-invalid": d.value ? "true" : void 0
+			}, p.value, { onInput: g }), null, 16, Ar),
+			u.value ? (v(), s("p", {
+				key: 0,
+				id: `${l.value}-description`,
+				class: "plinth-textarea-description"
+			}, w(e.description), 9, jr)) : o("", !0),
+			d.value ? (v(), s("p", {
+				key: 1,
+				id: `${l.value}-error`,
+				class: "plinth-textarea-error"
+			}, w(e.error), 9, Mr)) : o("", !0)
+		], 10, Or));
+	}
+}), Pr = ["data-size", "data-label"], Fr = ["for"], Ir = { class: "plinth-text-field-control" }, Lr = {
+	key: 0,
+	class: "plinth-icon",
+	"data-size": "sm",
+	"aria-hidden": "true"
+}, Rr = [
+	"id",
+	"type",
+	"value",
+	"disabled",
+	"readonly",
+	"aria-describedby",
+	"aria-invalid"
+], zr = {
+	key: 1,
+	class: "plinth-text-field-trailing"
+}, Br = ["id"], Vr = ["id"], Hr = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "PlinthTextField",
+	props: /*@__PURE__*/ p({
+		label: {},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: void 0 },
+		type: { default: "text" },
+		size: { default: "md" },
+		description: { default: void 0 },
+		error: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = e, n = O(e, "modelValue");
+		if (!t.label?.trim()) throw Error("<PlinthTextField> needs a label: it is the field's accessible name.");
+		let r = E(), a = k(), l = D(), u = i(() => t.id?.trim() || `plinth-text-field-${l}`), d = i(() => Dr(t.size)), f = i(() => !!t.description?.trim()), p = i(() => !!t.error?.trim()), g = i(() => $(u.value, t.description, t.error)), _ = i(() => Object.fromEntries(Object.entries(r).filter(([e]) => e !== "class")));
+		function y(e) {
+			n.value = e.target.value;
+		}
+		return (t, i) => (v(), s("div", {
+			class: h(["plinth-text-field", T(r).class]),
+			"data-size": d.value,
+			"data-label": e.hideLabel ? "hidden" : void 0
+		}, [
+			c("label", {
+				class: "plinth-text-field-label",
+				for: u.value
+			}, w(e.label), 9, Fr),
+			c("div", Ir, [
+				T(z)(T(a).icon?.()) ? (v(), s("span", Lr, [S(t.$slots, "icon")])) : o("", !0),
+				c("input", m({
+					id: u.value,
+					type: e.type,
+					class: "plinth-text-field-input",
+					value: n.value,
+					disabled: e.disabled || void 0,
+					readonly: e.readonly || void 0,
+					"aria-describedby": g.value,
+					"aria-invalid": p.value ? "true" : void 0
+				}, _.value, { onInput: y }), null, 16, Rr),
+				T(z)(T(a).trailing?.()) ? (v(), s("span", zr, [S(t.$slots, "trailing")])) : o("", !0)
+			]),
+			f.value ? (v(), s("p", {
+				key: 0,
+				id: `${u.value}-description`,
+				class: "plinth-text-field-description"
+			}, w(e.description), 9, Br)) : o("", !0),
+			p.value ? (v(), s("p", {
+				key: 1,
+				id: `${u.value}-error`,
+				class: "plinth-text-field-error"
+			}, w(e.error), 9, Vr)) : o("", !0)
+		], 10, Pr));
+	}
+}), Ur = "<span class=\"plinth-icon plinth-list-row-chevron\" data-size=\"sm\" data-mirror aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"></path></svg></span>", Wr = { install(e) {
+	e.component("PlinthAvatar", I), e.component("PlinthBadge", he), e.component("PlinthButton", L), e.component("PlinthCallout", Be), e.component("PlinthCodeBlock", V), e.component("PlinthConfirmDialog", wt), e.component("PlinthDataTable", At), e.component("PlinthDataTableCell", zt), e.component("PlinthDataTableColumn", Vt), e.component("PlinthDataTableEmpty", Wt), e.component("PlinthDataTableRow", Kt), e.component("PlinthDataTableSort", Yt), e.component("PlinthDialog", fn), e.component("PlinthDrawer", En), e.component("PlinthIcon", An), e.component("PlinthIconButton", q), e.component("PlinthListCard", In), e.component("PlinthListRow", Y), e.component("PlinthMenu", Kn), e.component("PlinthMenuGroup", Yn), e.component("PlinthMenuItem", $n), e.component("PlinthMenuSeparator", tr), e.component("PlinthMenuSheet", fr), e.component("PlinthPageHeader", _r), e.component("PlinthPill", br), e.component("PlinthPillRow", xr), e.component("PlinthSectionMenu", Sr), e.component("PlinthSectionMenuItem", Tr), e.component("PlinthSheet", Z), e.component("PlinthTextarea", Nr), e.component("PlinthTextField", Hr);
 } };
 //#endregion
-export { or as Plinth, P as PlinthAvatar, F as PlinthBadge, R as PlinthButton, ke as PlinthCallout, qe as PlinthCodeBlock, Y as PlinthConfirmDialog, St as PlinthDataTable, jt as PlinthDataTableCell, Nt as PlinthDataTableColumn, It as PlinthDataTableEmpty, Rt as PlinthDataTableRow, Vt as PlinthDataTableSort, rn as PlinthDialog, vn as PlinthDrawer, Cn as PlinthHeader, Dn as PlinthIcon, X as PlinthIconButton, Nn as PlinthListCard, Q as PlinthListRow, Xn as PlinthMenuSheet, $n as PlinthPill, er as PlinthPillRow, tr as PlinthSectionMenu, ir as PlinthSectionMenuItem, $ as PlinthSheet, ne as avatarGlyph, ee as avatarSizes, I as buttonVariants, W as calloutIcons, H as calloutRole, V as calloutRoles, B as calloutTone, z as calloutTones, Qe as confirmDialogFieldLabels, Ye as confirmDialogKind, Je as confirmDialogKinds, $e as confirmDialogPattern, Ze as confirmDialogTone, Xe as confirmDialogTones, k as controlSizes, Et as dataTableCellKind, Tt as dataTableCellKinds, wt as dataTableSort, Dt as dataTableSortIcon, Ct as dataTableSorts, rt as dialogCloseIcon, J as dialogSidePhone, nt as dialogSidePhones, un as drawerCloseIcon, on as drawerDesktop, an as drawerDesktops, ln as drawerSnap, cn as drawerSnapPoints, sn as drawerSnaps, kn as headingLevel, On as headingLevels, j as iconSizeFor, wn as iconSizes, M as initialsFrom, ar as listRowChevron, A as resolveSize, q as sheetCloseIcon, tt as sheetSide, K as sheetSidePhone, et as sheetSides, O as sizes, Jt as swipeToClose, N as tones, Z as useSwipeToClose };
+export { Wr as Plinth, I as PlinthAvatar, he as PlinthBadge, L as PlinthButton, Be as PlinthCallout, V as PlinthCodeBlock, wt as PlinthConfirmDialog, At as PlinthDataTable, zt as PlinthDataTableCell, Vt as PlinthDataTableColumn, Wt as PlinthDataTableEmpty, Kt as PlinthDataTableRow, Yt as PlinthDataTableSort, fn as PlinthDialog, En as PlinthDrawer, An as PlinthIcon, q as PlinthIconButton, In as PlinthListCard, Y as PlinthListRow, Kn as PlinthMenu, Yn as PlinthMenuGroup, $n as PlinthMenuItem, tr as PlinthMenuSeparator, fr as PlinthMenuSheet, _r as PlinthPageHeader, br as PlinthPill, xr as PlinthPillRow, Sr as PlinthSectionMenu, Tr as PlinthSectionMenuItem, Z as PlinthSheet, Hr as PlinthTextField, Nr as PlinthTextarea, ae as avatarGlyph, ne as avatarSizes, ge as buttonVariants, Me as calloutIcons, je as calloutRole, Ae as calloutRoles, ke as calloutTone, Oe as calloutTones, at as confirmDialogFieldLabels, U as confirmDialogKind, H as confirmDialogKinds, ot as confirmDialogPattern, it as confirmDialogTone, rt as confirmDialogTones, M as controlSizes, Pt as dataTableCellKind, Nt as dataTableCellKinds, Mt as dataTableSort, Ft as dataTableSortIcon, jt as dataTableSorts, ut as dialogCloseIcon, K as dialogSidePhone, lt as dialogSidePhones, vn as drawerCloseIcon, mn as drawerDesktop, pn as drawerDesktops, _n as drawerSnap, gn as drawerSnapPoints, hn as drawerSnaps, $ as fieldDescribedBy, Mn as headingLevel, jn as headingLevels, P as iconSizeFor, Dn as iconSizes, ie as initialsFrom, Ur as listRowChevron, X as menuIdKey, Wn as menuItemTone, Un as menuItemTones, Q as pageHeaderLevel, pr as pageHeaderLevels, N as resolveSize, G as sheetCloseIcon, ct as sheetSide, W as sheetSidePhone, st as sheetSides, te as sizes, nn as swipeToClose, Dr as textFieldSize, Er as textFieldSizes, F as tones, J as useSwipeToClose };