@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/vue/dist/index.js

@@ -0,0 +1,1732 @@
+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 te = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], M = [
+	"sm",
+	"md",
+	"lg"
+];
+function N(e, t, n) {
+	return t.includes(e) ? e : n;
+}
+function P(e) {
+	return e === "xs" || e === "sm" ? "sm" : "md";
+}
+//#endregion
+//#region src/avatar.ts
+var ne = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function re(e) {
+	return N(e, ne, "md");
+}
+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 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 oe(e) {
+	return F.includes(e) ? e : F[0];
+}
+//#endregion
+//#region src/PlinthAvatar.vue?vue&type=script&setup=true&lang.ts
+var se = [
+	"data-size",
+	"role",
+	"aria-label",
+	"aria-hidden"
+], ce = ["src"], le = {
+	key: 1,
+	class: "plinth-avatar-initials",
+	"aria-hidden": "true"
+}, ue = {
+	key: 2,
+	class: "plinth-avatar-glyph",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round",
+	"aria-hidden": "true"
+}, de = ["data-tone"], I = /* @__PURE__ */ d({
+	__name: "PlinthAvatar",
+	props: {
+		name: { default: "" },
+		src: { default: void 0 },
+		initials: { default: void 0 },
+		size: { default: "md" },
+		status: { default: void 0 },
+		statusLabel: { default: void 0 },
+		decorative: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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 ?? 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 ? (v(), s("img", {
+			key: 0,
+			class: "plinth-avatar-image",
+			src: e.src,
+			alt: ""
+		}, 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 ? (v(), s("span", {
+			key: 3,
+			class: "plinth-avatar-status",
+			"data-tone": r.value,
+			"aria-hidden": "true"
+		}, null, 8, de)) : o("", !0)], 8, se));
+	}
+}), fe = ["data-tone"], pe = {
+	key: 0,
+	class: "plinth-badge-dot",
+	"aria-hidden": "true"
+}, me = { class: "plinth-badge-label" }, he = /* @__PURE__ */ d({
+	__name: "PlinthBadge",
+	props: {
+		tone: { default: "neutral" },
+		dot: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => oe(t.tone));
+		return (t, r) => (v(), s("span", {
+			class: "plinth-badge",
+			"data-tone": n.value
+		}, [e.dot ? (v(), s("span", pe)) : o("", !0), c("span", me, [S(t.$slots, "default")])], 8, fe));
+	}
+}), ge = [
+	"primary",
+	"accent",
+	"secondary",
+	"ghost",
+	"danger",
+	"danger-ghost"
+];
+function _e(e) {
+	return ge.includes(e) ? e : "primary";
+}
+//#endregion
+//#region src/PlinthButton.vue?vue&type=script&setup=true&lang.ts
+var ve = [
+	"href",
+	"data-variant",
+	"data-size",
+	"role",
+	"aria-busy",
+	"aria-disabled"
+], ye = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, 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"
+], we = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, Te = ["data-size", "data-mirror"], Ee = { class: "plinth-button-label" }, De = ["data-size", "data-mirror"], L = /* @__PURE__ */ d({
+	__name: "PlinthButton",
+	props: {
+		variant: { default: "primary" },
+		size: { default: "md" },
+		href: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		busy: {
+			type: Boolean,
+			default: !1
+		},
+		mirrorIcon: {
+			type: Boolean,
+			default: !1
+		},
+		mirrorTrailing: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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,
+			"data-variant": n.value,
+			"data-size": r.value,
+			role: e.disabled ? "link" : void 0,
+			"aria-busy": l.value ? "true" : void 0,
+			"aria-disabled": l.value || e.disabled ? "true" : void 0
+		}, [
+			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"
+			}, [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"
+			}, [S(t.$slots, "trailing")], 8, Se)) : o("", !0)
+		], 8, ve)) : (v(), s("button", {
+			key: 1,
+			type: "button",
+			class: "plinth-button",
+			"data-variant": n.value,
+			"data-size": r.value,
+			disabled: e.disabled || void 0,
+			"aria-busy": l.value ? "true" : void 0,
+			"aria-disabled": l.value ? "true" : void 0
+		}, [
+			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"
+			}, [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"
+			}, [S(t.$slots, "trailing")], 8, De)) : o("", !0)
+		], 8, Ce));
+	}
+}), Oe = [
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+function ke(e) {
+	return Oe.includes(e) ? e : "neutral";
+}
+var Ae = [
+	"note",
+	"status",
+	"alert"
+];
+function je(e) {
+	return Ae.includes(e) ? e : "note";
+}
+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"
+}, Fe = ["innerHTML"], Ie = { class: "plinth-callout-body" }, Le = {
+	key: 0,
+	class: "plinth-callout-title"
+}, Re = {
+	key: 1,
+	class: "plinth-callout-text"
+}, ze = {
+	key: 2,
+	class: "plinth-callout-actions"
+}, Be = /* @__PURE__ */ d({
+	__name: "PlinthCallout",
+	props: {
+		tone: { default: "neutral" },
+		role: { default: "note" },
+		title: { default: void 0 }
+	},
+	setup(e) {
+		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
+		}, [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: 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));
+	}
+}), 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 Ue = ["id"], We = { class: "plinth-code-block-header" }, Ge = {
+	key: 0,
+	class: "plinth-code-block-label"
+}, Ke = {
+	key: 1,
+	class: "plinth-code-block-label"
+}, qe = ["aria-label"], Je = ["name", "checked"], Ye = { class: "plinth-code-block-tab-label" }, Xe = {
+	class: "plinth-code-block-status",
+	role: "status"
+}, Ze = {
+	key: 0,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, Qe = ["innerHTML"], $e = {
+	key: 1,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, et = {
+	key: 1,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, tt = ["innerHTML"], nt = {
+	key: 2,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, V = /* @__PURE__ */ d({
+	__name: "PlinthCodeBlock",
+	props: {
+		id: { default: void 0 },
+		label: { default: void 0 },
+		html: { default: void 0 },
+		tabs: { default: () => [] },
+		selected: { default: void 0 },
+		tabsLabel: { default: "Language" },
+		copy: {
+			type: Boolean,
+			default: !0
+		},
+		copyLabel: { default: "Copy" },
+		copiedLabel: { default: "Copied" }
+	},
+	emits: ["copied"],
+	setup(e, { emit: n }) {
+		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;
+			}
+			E.value = !0, clearTimeout(O), O = setTimeout(() => E.value = !1, 2e3), a("copied", t);
+		}
+		return (n, r) => (v(), s("div", {
+			id: p.value,
+			class: "plinth-code-block"
+		}, [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
+			}, [(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: 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: !C.value,
+				onClick: A
+			}, {
+				default: j(() => [l(w(E.value ? e.copiedLabel : e.copyLabel), 1)]),
+				_: 1
+			}, 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));
+	}
+}), H = [
+	"simple",
+	"type",
+	"password"
+];
+function U(e) {
+	return H.includes(e) ? e : "simple";
+}
+var rt = ["neutral", "danger"];
+function it(e) {
+	return rt.includes(e) ? e : "neutral";
+}
+var at = {
+	type: "Type :phrase to confirm",
+	password: "Password"
+}, ot = (e) => e.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&"), st = [
+	"start",
+	"end",
+	"top",
+	"bottom"
+];
+function ct(e) {
+	return W(e) ?? "end";
+}
+function W(e) {
+	return st.includes(e) ? e : void 0;
+}
+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 ut = G, dt = [
+	"id",
+	"data-side-phone",
+	"aria-labelledby",
+	"aria-describedby"
+], ft = {
+	method: "dialog",
+	class: "plinth-confirm-dialog-form"
+}, pt = { class: "plinth-dialog-header" }, mt = ["id"], ht = { class: "plinth-dialog-body" }, gt = ["id"], _t = {
+	key: 0,
+	class: "plinth-confirm-dialog-field"
+}, vt = ["for"], yt = { key: 0 }, bt = [
+	"id",
+	"pattern",
+	"aria-invalid",
+	"aria-describedby"
+], xt = [
+	"id",
+	"aria-invalid",
+	"aria-describedby"
+], St = ["id"], Ct = { class: "plinth-dialog-footer" }, wt = /* @__PURE__ */ d({
+	__name: "PlinthConfirmDialog",
+	props: {
+		id: { default: void 0 },
+		title: {},
+		message: {},
+		kind: { default: "simple" },
+		phrase: { default: void 0 },
+		fieldLabel: { default: void 0 },
+		confirmLabel: { default: "Confirm" },
+		cancelLabel: { default: "Cancel" },
+		tone: { default: "neutral" },
+		error: { default: void 0 },
+		busy: {
+			type: Boolean,
+			default: !1
+		},
+		sidePhone: { default: "center" }
+	},
+	emits: ["close"],
+	setup(e, { expose: n, emit: r }) {
+		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(() => 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 = 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];
+		}), S = b();
+		return n({
+			showModal: () => S.value?.showModal(),
+			close: (e) => S.value?.close(e)
+		}), (n, r) => (v(), s("dialog", {
+			id: m.value,
+			ref_key: "dialog",
+			ref: S,
+			class: "plinth-dialog plinth-confirm-dialog",
+			role: "alertdialog",
+			"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", ft, [
+			c("div", pt, [c("h2", {
+				id: `${m.value}-title`,
+				class: "plinth-dialog-title"
+			}, w(e.title), 9, mt)]),
+			c("div", ht, [
+				c("p", {
+					id: `${m.value}-message`,
+					class: "plinth-confirm-dialog-message"
+				}, 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"
+				}, [(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: T(ot)(g.value),
+					autocomplete: "off",
+					autocapitalize: "none",
+					spellcheck: "false",
+					"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",
+					type: "password",
+					name: "password",
+					required: "",
+					autocomplete: "current-password",
+					"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"
+				}, w(e.error), 9, St)) : o("", !0)
+			]),
+			c("div", Ct, [u(L, {
+				variant: "secondary",
+				commandfor: m.value,
+				command: "close",
+				value: "cancel"
+			}, {
+				default: j(() => [l(w(e.cancelLabel), 1)]),
+				_: 1
+			}, 8, ["commandfor"]), u(L, {
+				class: "plinth-confirm-dialog-confirm",
+				type: "submit",
+				value: "confirm",
+				variant: T(it)(e.tone) === "danger" ? "danger" : "primary",
+				busy: e.busy
+			}, {
+				default: j(() => [l(w(e.confirmLabel), 1)]),
+				_: 1
+			}, 8, ["variant", "busy"])])
+		])], 40, dt));
+	}
+}), Tt = {
+	class: "plinth-data-table",
+	role: "table"
+}, Et = {
+	key: 0,
+	class: "plinth-data-table-caption"
+}, Dt = {
+	class: "plinth-data-table-head",
+	role: "rowgroup"
+}, Ot = {
+	class: "plinth-data-table-head-row",
+	role: "row"
+}, kt = {
+	class: "plinth-data-table-body",
+	role: "rowgroup"
+}, At = /* @__PURE__ */ d({
+	__name: "PlinthDataTable",
+	props: { caption: { default: void 0 } },
+	setup(e) {
+		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")])
+		]));
+	}
+}), jt = [
+	"none",
+	"ascending",
+	"descending"
+];
+function Mt(e) {
+	return jt.includes(e) ? e : "none";
+}
+var Nt = [
+	"field",
+	"title",
+	"actions"
+];
+function Pt(e) {
+	return Nt.includes(e) ? e : "field";
+}
+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"
+], Lt = {
+	key: 0,
+	class: "plinth-data-table-label",
+	"aria-hidden": "true"
+}, Rt = { class: "plinth-data-table-value" }, zt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableCell",
+	props: {
+		label: { default: void 0 },
+		kind: { default: "field" },
+		numeric: {
+			type: Boolean,
+			default: !1
+		},
+		hideOnPhone: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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() ? (v(), s("span", Lt, w(e.label), 1)) : o("", !0), c("span", Rt, [S(t.$slots, "default")])], 8, It));
+	}
+}), Bt = [
+	"aria-sort",
+	"data-numeric",
+	"data-phone"
+], Vt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableColumn",
+	props: {
+		sort: { default: void 0 },
+		numeric: {
+			type: Boolean,
+			default: !1
+		},
+		hideOnPhone: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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
+		}, [S(t.$slots, "default")], 8, Bt));
+	}
+}), Ht = {
+	class: "plinth-data-table-empty",
+	role: "row"
+}, Ut = ["colspan"], Wt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableEmpty",
+	props: { columns: { default: 1 } },
+	setup(e) {
+		let t = e, n = /^\s*[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?\s*$/, r = i(() => {
+			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) => (v(), s("tr", Ht, [c("td", {
+			class: "plinth-data-table-empty-cell",
+			role: "cell",
+			colspan: r.value
+		}, [S(e.$slots, "default")], 8, Ut)]));
+	}
+}), Gt = ["aria-selected"], Kt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableRow",
+	props: { selected: {
+		type: Boolean,
+		default: void 0
+	} },
+	setup(e) {
+		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"
+		}, [S(t.$slots, "default")], 8, Gt));
+	}
+}), qt = {
+	type: "button",
+	class: "plinth-data-table-sort"
+}, Jt = { class: "plinth-data-table-sort-label" }, Yt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableSort",
+	setup(e) {
+		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"
+		}, [c("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round"
+		}, [c("path", {
+			class: "plinth-data-table-sort-up",
+			d: "M8 9l4-4 4 4"
+		}), c("path", {
+			class: "plinth-data-table-sort-down",
+			d: "M8 15l4 4 4-4"
+		})])], -1)]));
+	}
+}), Xt = [
+	"href",
+	"data-variant",
+	"data-size",
+	"aria-label",
+	"role",
+	"aria-busy",
+	"aria-disabled"
+], Zt = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, Qt = ["data-size", "data-mirror"], $t = [
+	"data-variant",
+	"data-size",
+	"aria-label",
+	"aria-pressed",
+	"disabled",
+	"aria-busy",
+	"aria-disabled"
+], en = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, tn = ["data-size", "data-mirror"], q = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "PlinthIconButton",
+	props: {
+		label: {},
+		variant: { default: "ghost" },
+		size: { default: "md" },
+		href: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		busy: {
+			type: Boolean,
+			default: !1
+		},
+		pressed: {
+			type: [Boolean, null],
+			default: null
+		},
+		mirror: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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,
+			"data-variant": r.value,
+			"data-size": a.value,
+			"aria-label": l.value,
+			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 ? (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"
+		}, [S(t.$slots, "default")], 8, Qt))], 16, Xt)) : (v(), s("button", m({
+			key: 1,
+			type: "button",
+			class: "plinth-button plinth-icon-button",
+			"data-variant": r.value,
+			"data-size": a.value,
+			"aria-label": l.value,
+			"aria-pressed": e.pressed === null ? void 0 : e.pressed ? "true" : "false",
+			disabled: e.disabled || void 0,
+			"aria-busy": c.value ? "true" : void 0,
+			"aria-disabled": c.value ? "true" : void 0
+		}, 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"
+		}, [S(t.$slots, "default")], 8, tn))], 16, $t));
+	}
+});
+//#endregion
+//#region src/swipe.ts
+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 = () => {
+		let i = t.getBoundingClientRect().top >= e.getBoundingClientRect().bottom - 1;
+		e.open && n() && i && r();
+	}, a = (t) => {
+		t.target === e && n() && e.getAttribute("closedby") === "any" && r();
+	}, o = (r) => {
+		let [i, a] = t.children, o = {
+			peek: i,
+			half: a
+		}[e.dataset.snap ?? ""];
+		if (r.newState !== "open" || !o || !n()) return;
+		let s = parseFloat(getComputedStyle(o).scrollMarginBlockStart);
+		e.scrollTop += o.getBoundingClientRect().top - e.getBoundingClientRect().top - s;
+	}, s = "onscrollend" in window ? "scrollend" : "scroll";
+	return e.addEventListener(s, i), e.addEventListener("click", a), e.addEventListener("toggle", o), () => {
+		e.removeEventListener(s, i), e.removeEventListener("click", a), e.removeEventListener("toggle", o);
+	};
+}
+function J(e) {
+	let t;
+	_(() => {
+		t = e.value ? nn(e.value) : void 0;
+	}), g(() => t?.());
+}
+//#endregion
+//#region src/PlinthDialog.vue?vue&type=script&setup=true&lang.ts
+var rn = [
+	"id",
+	"role",
+	"data-side-phone",
+	"closedby",
+	"aria-labelledby",
+	"aria-describedby"
+], an = { class: "plinth-dialog-panel" }, on = {
+	key: 0,
+	class: "plinth-dialog-handle",
+	"aria-hidden": "true"
+}, sn = { class: "plinth-dialog-header" }, cn = ["id"], ln = ["id"], un = { class: "plinth-dialog-body" }, dn = {
+	key: 1,
+	class: "plinth-dialog-footer"
+}, fn = /* @__PURE__ */ d({
+	__name: "PlinthDialog",
+	props: {
+		id: { default: void 0 },
+		title: {},
+		description: { default: void 0 },
+		closeLabel: { default: "Close" },
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		sidePhone: { default: "center" }
+	},
+	emits: ["close"],
+	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 = 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: h,
+			class: "plinth-dialog",
+			role: e.dismissible ? void 0 : "alertdialog",
+			"data-side-phone": p.value === "center" ? void 0 : p.value,
+			closedby: e.dismissible ? "any" : "closerequest",
+			"aria-labelledby": `${f.value}-title`,
+			"aria-describedby": m.value ? `${f.value}-description` : void 0,
+			onClose: n[0] ||= (e) => l("close", e)
+		}, [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"
+				}, w(e.title), 9, cn),
+				m.value ? (v(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-dialog-description"
+				}, w(e.description), 9, ln)) : o("", !0),
+				e.dismissible ? (v(), a(q, {
+					key: 1,
+					class: "plinth-dialog-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: j(() => [...n[1] ||= [c("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, [c("path", { d: "M6 6l12 12M18 6L6 18" })], -1)]]),
+					_: 1
+				}, 8, ["label", "commandfor"])) : o("", !0)
+			]),
+			c("div", un, [S(t.$slots, "default")]),
+			T(z)(T(u).footer?.()) ? (v(), s("div", dn, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, rn));
+	}
+}), pn = ["dialog", "sheet"];
+function mn(e) {
+	return pn.includes(e) ? e : "dialog";
+}
+var hn = [
+	"peek",
+	"half",
+	"full"
+];
+function gn(e) {
+	let t = typeof e == "string" ? e.split(/\s+/) : e ?? [];
+	return hn.filter((e) => t.includes(e));
+}
+function _n(e, t) {
+	return t.includes(e) ? e : t.at(-1);
+}
+var vn = G, yn = [
+	"id",
+	"data-desktop",
+	"data-snap-points",
+	"data-snap",
+	"aria-labelledby",
+	"aria-describedby"
+], 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"
+}, En = /* @__PURE__ */ d({
+	__name: "PlinthDrawer",
+	props: {
+		id: { default: void 0 },
+		title: {},
+		description: { default: void 0 },
+		closeLabel: { default: "Close" },
+		desktop: { default: "dialog" },
+		snapPoints: { default: void 0 },
+		snap: { default: void 0 }
+	},
+	emits: ["close"],
+	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 = 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: h,
+			class: "plinth-drawer",
+			"data-desktop": T(mn)(e.desktop),
+			"data-snap-points": p.value.length ? p.value.join(" ") : void 0,
+			"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", bn, [
+			n[2] ||= c("div", {
+				class: "plinth-drawer-handle",
+				"aria-hidden": "true"
+			}, null, -1),
+			c("div", xn, [
+				c("h2", {
+					id: `${f.value}-title`,
+					class: "plinth-drawer-title"
+				}, w(e.title), 9, Sn),
+				m.value ? (v(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-drawer-description"
+				}, w(e.description), 9, Cn)) : o("", !0),
+				u(q, {
+					class: "plinth-drawer-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: j(() => [...n[1] ||= [c("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, [c("path", { d: "M6 6l12 12M18 6L6 18" })], -1)]]),
+					_: 1
+				}, 8, ["label", "commandfor"])
+			]),
+			c("div", wn, [S(t.$slots, "default")]),
+			T(z)(T(l).footer?.()) ? (v(), s("div", Tn, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, yn));
+	}
+}), Dn = [
+	"sm",
+	"md",
+	"lg"
+];
+function On(e) {
+	return N(e, Dn, "md");
+}
+//#endregion
+//#region src/PlinthIcon.vue?vue&type=script&setup=true&lang.ts
+var kn = [
+	"data-size",
+	"data-mirror",
+	"role",
+	"aria-label",
+	"aria-hidden"
+], An = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "PlinthIcon",
+	props: {
+		size: { default: "md" },
+		label: { default: void 0 },
+		mirror: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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) => (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), [S(t.$slots, "default")], 16, kn));
+	}
+}), jn = [
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+function Mn(e) {
+	return jn.includes(e) ? e : "h2";
+}
+//#endregion
+//#region src/PlinthListCard.vue?vue&type=script&setup=true&lang.ts
+var Nn = { class: "plinth-list-card" }, Pn = {
+	class: "plinth-list-card-list",
+	role: "list"
+}, Fn = {
+	key: 1,
+	class: "plinth-list-card-footer"
+}, In = /* @__PURE__ */ d({
+	__name: "PlinthListCard",
+	props: {
+		heading: { default: void 0 },
+		headingLevel: { default: "h2" },
+		footer: { default: void 0 }
+	},
+	setup(e) {
+		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: j(() => [l(w(e.heading), 1)]),
+				_: 1
+			})) : o("", !0),
+			c("ul", Pn, [S(t.$slots, "default")]),
+			e.footer?.trim() ? (v(), s("p", Fn, w(e.footer), 1)) : o("", !0)
+		]));
+	}
+}), Ln = {
+	key: 0,
+	class: "plinth-list-row-leading"
+}, Rn = { class: "plinth-list-row-content" }, zn = { class: "plinth-list-row-title" }, Bn = {
+	key: 0,
+	class: "plinth-list-row-description"
+}, Vn = {
+	key: 1,
+	class: "plinth-list-row-trailing"
+}, Hn = {
+	key: 0,
+	class: "plinth-icon plinth-list-row-chevron",
+	"data-size": "sm",
+	"data-mirror": "",
+	"aria-hidden": "true"
+}, Y = /* @__PURE__ */ d({
+	__name: "PlinthListRow",
+	props: {
+		description: { default: void 0 },
+		chevron: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		button: {
+			type: Boolean,
+			default: !1
+		},
+		current: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => t.href ? "a" : t.button ? "button" : "div");
+		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,
+			"aria-current": e.current && n.value !== "button" ? "page" : void 0,
+			disabled: n.value === "button" && e.disabled ? !0 : void 0,
+			role: n.value === "a" && e.disabled ? "link" : void 0,
+			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 0
+		}, {
+			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",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [c("path", { d: "M9 6l6 6-6 6" })], -1)]])) : o("", !0)])) : o("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"type",
+			"href",
+			"aria-current",
+			"disabled",
+			"role",
+			"aria-disabled"
+		]));
+	}
+}), 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"
+], rr = { class: "plinth-sheet-panel" }, ir = {
+	key: 0,
+	class: "plinth-sheet-handle",
+	"aria-hidden": "true"
+}, ar = { class: "plinth-sheet-header" }, or = ["id"], sr = ["id"], cr = { class: "plinth-sheet-body" }, lr = {
+	key: 1,
+	class: "plinth-sheet-footer"
+}, Z = /* @__PURE__ */ d({
+	__name: "PlinthSheet",
+	props: {
+		id: { default: void 0 },
+		title: {},
+		description: { default: void 0 },
+		closeLabel: { default: "Close" },
+		side: { default: "end" },
+		sidePhone: { default: void 0 }
+	},
+	emits: ["close"],
+	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 = 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: g,
+			class: "plinth-sheet",
+			"data-side": p.value,
+			"data-side-phone": m.value,
+			closedby: "any",
+			"aria-labelledby": `${f.value}-title`,
+			"aria-describedby": h.value ? `${f.value}-description` : void 0,
+			onClose: n[0] ||= (e) => a("close", e)
+		}, [c("div", rr, [
+			_.value ? (v(), s("div", ir)) : o("", !0),
+			c("div", ar, [
+				c("h2", {
+					id: `${f.value}-title`,
+					class: "plinth-sheet-title"
+				}, w(e.title), 9, or),
+				h.value ? (v(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-sheet-description"
+				}, w(e.description), 9, sr)) : o("", !0),
+				u(q, {
+					class: "plinth-sheet-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: j(() => [...n[1] ||= [c("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, [c("path", { d: "M6 6l12 12M18 6L6 18" })], -1)]]),
+					_: 1
+				}, 8, ["label", "commandfor"])
+			]),
+			c("div", cr, [S(t.$slots, "default")]),
+			T(z)(T(l).footer?.()) ? (v(), s("div", lr, [S(t.$slots, "footer")])) : o("", !0)
+		])], 40, nr));
+	}
+}), ur = ["aria-labelledby"], dr = {
+	key: 1,
+	class: "plinth-menu-sheet-account"
+}, fr = /* @__PURE__ */ d({
+	__name: "PlinthMenuSheet",
+	props: {
+		id: { default: void 0 },
+		title: { default: "Menu" },
+		closeLabel: { default: "Close" },
+		userName: { default: void 0 },
+		userDetail: { default: void 0 },
+		userSrc: { default: void 0 },
+		userHref: { default: void 0 }
+	},
+	emits: ["close"],
+	setup(e, { expose: t, emit: n }) {
+		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: () => x.value?.showModal(),
+			close: () => x.value?.close()
+		}), (t, n) => (v(), a(Z, {
+			id: m.value,
+			ref_key: "sheet",
+			ref: x,
+			class: "plinth-menu-sheet",
+			title: e.title,
+			"close-label": e.closeLabel,
+			side: "end",
+			"side-phone": "bottom",
+			onClose: n[0] ||= (e) => d("close", e)
+		}, {
+			default: j(() => [
+				h.value ? (v(), a(Y, {
+					key: 0,
+					class: "plinth-menu-sheet-user",
+					description: y.value,
+					href: g.value,
+					chevron: !!g.value
+				}, {
+					leading: j(() => [u(I, {
+						name: e.userName,
+						src: _.value,
+						size: "lg",
+						decorative: ""
+					}, null, 8, ["name", "src"])]),
+					default: j(() => [l(w(e.userName), 1)]),
+					_: 1
+				}, 8, [
+					"description",
+					"href",
+					"chevron"
+				])) : o("", !0),
+				c("nav", {
+					class: "plinth-menu-sheet-nav",
+					"aria-labelledby": `${m.value}-title`
+				}, [S(t.$slots, "default")], 8, ur),
+				T(z)(T(f).account?.()) ? (v(), s("div", dr, [S(t.$slots, "account")])) : o("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"id",
+			"title",
+			"close-label"
+		]));
+	}
+}), 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"
+}, br = /* @__PURE__ */ d({
+	__name: "PlinthPill",
+	props: {
+		count: { default: void 0 },
+		href: { default: void 0 },
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => t.href ? "a" : "button"), r = i(() => t.count != null && String(t.count).trim() !== "");
+		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,
+			"aria-pressed": n.value === "button" ? String(e.selected) : void 0,
+			"aria-current": n.value === "a" && e.selected ? "page" : void 0,
+			disabled: n.value === "button" && e.disabled ? !0 : void 0,
+			role: n.value === "a" && e.disabled ? "link" : void 0,
+			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 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",
+			"href",
+			"aria-pressed",
+			"aria-current",
+			"disabled",
+			"role",
+			"aria-disabled"
+		]));
+	}
+}), xr = /* @__PURE__ */ d({
+	__name: "PlinthPillRow",
+	props: {
+		label: { default: void 0 },
+		nav: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		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: j(() => [S(t.$slots, "default")]),
+			_: 3
+		}, 8, ["role", "aria-label"]));
+	}
+}), Sr = /* @__PURE__ */ d({
+	__name: "PlinthSectionMenu",
+	props: {
+		label: { default: void 0 },
+		nav: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		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: j(() => [S(t.$slots, "default")]),
+			_: 3
+		}, 8, ["role", "aria-label"]));
+	}
+}), Cr = { class: "plinth-section-menu-label" }, wr = {
+	key: 0,
+	class: "plinth-section-menu-count"
+}, Tr = /* @__PURE__ */ d({
+	__name: "PlinthSectionMenuItem",
+	props: {
+		count: { default: void 0 },
+		href: { default: void 0 },
+		current: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => t.href?.trim() ? "a" : "button"), r = i(() => t.count != null && String(t.count).trim() !== "");
+		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,
+			"aria-pressed": n.value === "button" ? String(e.current) : void 0,
+			"aria-current": n.value === "a" && e.current ? "page" : void 0,
+			disabled: n.value === "button" && e.disabled ? !0 : void 0,
+			role: n.value === "a" && e.disabled ? "link" : void 0,
+			"aria-disabled": n.value === "a" && e.disabled ? "true" : void 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",
+			"href",
+			"aria-pressed",
+			"aria-current",
+			"disabled",
+			"role",
+			"aria-disabled"
+		]));
+	}
+}), 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 { 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 };