@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/vue/dist/index.js

@@ -0,0 +1,1439 @@
+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";
+//#region src/size.ts
+var O = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], k = [
+	"sm",
+	"md",
+	"lg"
+];
+function A(e, t, n) {
+	return t.includes(e) ? e : n;
+}
+function j(e) {
+	return e === "xs" || e === "sm" ? "sm" : "md";
+}
+//#endregion
+//#region src/avatar.ts
+var ee = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function te(e) {
+	return A(e, ee, "md");
+}
+function M(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 = [
+	"neutral",
+	"success",
+	"warning",
+	"danger"
+];
+function re(e) {
+	return N.includes(e) ? e : N[0];
+}
+//#endregion
+//#region src/PlinthAvatar.vue?vue&type=script&setup=true&lang.ts
+var ie = [
+	"data-size",
+	"role",
+	"aria-label",
+	"aria-hidden"
+], ae = ["src"], oe = {
+	key: 1,
+	class: "plinth-avatar-initials",
+	"aria-hidden": "true"
+}, se = {
+	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"
+}, ce = ["data-tone"], P = /* @__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(() => te(t.size)), r = i(() => t.status ? re(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", {
+			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", {
+			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", {
+			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", {
+			key: 3,
+			class: "plinth-avatar-status",
+			"data-tone": r.value,
+			"aria-hidden": "true"
+		}, null, 8, ce)) : o("", !0)], 8, ie));
+	}
+}), le = ["data-tone"], ue = {
+	key: 0,
+	class: "plinth-badge-dot",
+	"aria-hidden": "true"
+}, de = { class: "plinth-badge-label" }, F = /* @__PURE__ */ d({
+	__name: "PlinthBadge",
+	props: {
+		tone: { default: "neutral" },
+		dot: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => re(t.tone));
+		return (t, r) => (h(), 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));
+	}
+}), I = [
+	"primary",
+	"accent",
+	"secondary",
+	"ghost",
+	"danger",
+	"danger-ghost"
+];
+function L(e) {
+	return I.includes(e) ? e : "primary";
+}
+//#endregion
+//#region src/PlinthButton.vue?vue&type=script&setup=true&lang.ts
+var fe = [
+	"href",
+	"data-variant",
+	"data-size",
+	"role",
+	"aria-busy",
+	"aria-disabled"
+], pe = {
+	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 = [
+	"data-variant",
+	"data-size",
+	"disabled",
+	"aria-busy",
+	"aria-disabled"
+], ve = {
+	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({
+	__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(() => 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", {
+			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 ? (h(), s("span", pe)) : t.$slots.icon ? (h(), 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", {
+				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", {
+			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 ? (h(), s("span", ve)) : t.$slots.icon ? (h(), 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", {
+				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));
+	}
+}), z = [
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+function B(e) {
+	return z.includes(e) ? e : "neutral";
+}
+var V = [
+	"note",
+	"status",
+	"alert"
+];
+function H(e) {
+	return V.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 = {
+	key: 0,
+	class: "plinth-icon plinth-callout-icon",
+	"data-size": "md",
+	"aria-hidden": "true"
+}, we = ["innerHTML"], Te = { class: "plinth-callout-body" }, Ee = {
+	key: 0,
+	class: "plinth-callout-title"
+}, De = {
+	key: 1,
+	class: "plinth-callout-text"
+}, Oe = {
+	key: 2,
+	class: "plinth-callout-actions"
+}, ke = /* @__PURE__ */ d({
+	__name: "PlinthCallout",
+	props: {
+		tone: { default: "neutral" },
+		role: { default: "note" },
+		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", {
+			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", {
+			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));
+	}
+}), Ae = (e) => e.slice(0, 6), je = (e, t) => Math.max(0, e.findIndex((e) => e.label === t));
+function Me(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 = {
+	key: 0,
+	class: "plinth-code-block-label"
+}, Ie = {
+	key: 1,
+	class: "plinth-code-block-label"
+}, Le = ["aria-label"], Re = ["name", "checked"], ze = { class: "plinth-code-block-tab-label" }, Be = {
+	class: "plinth-code-block-status",
+	role: "status"
+}, Ve = {
+	key: 0,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, He = ["innerHTML"], Ue = {
+	key: 1,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, We = {
+	key: 1,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, Ge = ["innerHTML"], Ke = {
+	key: 2,
+	class: "plinth-code-block-code",
+	dir: "ltr",
+	tabindex: "0"
+}, qe = /* @__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 = 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);
+			try {
+				await navigator.clipboard.writeText(t);
+			} catch {
+				return;
+			}
+			k.value = !0, clearTimeout(A), A = setTimeout(() => k.value = !1, 2e3), a("copied", t);
+		}
+		return (n, r) => (h(), s("div", {
+			id: y.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", {
+				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", {
+				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, {
+				class: "plinth-code-block-copy",
+				variant: "ghost",
+				size: "sm",
+				hidden: !O.value,
+				onClick: j
+			}, {
+				default: D(() => [l(b(k.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));
+	}
+}), Je = [
+	"simple",
+	"type",
+	"password"
+];
+function Ye(e) {
+	return Je.includes(e) ? e : "simple";
+}
+var Xe = ["neutral", "danger"];
+function Ze(e) {
+	return Xe.includes(e) ? e : "neutral";
+}
+var Qe = {
+	type: "Type :phrase to confirm",
+	password: "Password"
+}, $e = (e) => e.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&"), et = [
+	"start",
+	"end",
+	"top",
+	"bottom"
+];
+function tt(e) {
+	return K(e) ?? "end";
+}
+function K(e) {
+	return et.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 rt = q, it = [
+	"id",
+	"data-side-phone",
+	"aria-labelledby",
+	"aria-describedby"
+], at = {
+	method: "dialog",
+	class: "plinth-confirm-dialog-form"
+}, ot = { class: "plinth-dialog-header" }, st = ["id"], ct = { class: "plinth-dialog-body" }, lt = ["id"], ut = {
+	key: 0,
+	class: "plinth-confirm-dialog-field"
+}, dt = ["for"], ft = { key: 0 }, pt = [
+	"id",
+	"pattern",
+	"aria-invalid",
+	"aria-describedby"
+], mt = [
+	"id",
+	"aria-invalid",
+	"aria-describedby"
+], ht = ["id"], gt = { class: "plinth-dialog-footer" }, Y = /* @__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(() => Ye(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];
+			return f.value === "type" ? e.split(":phrase") : [e];
+		}), T = g();
+		return n({
+			showModal: () => T.value?.showModal(),
+			close: (e) => T.value?.close(e)
+		}), (n, r) => (h(), s("dialog", {
+			id: m.value,
+			ref_key: "dialog",
+			ref: T,
+			class: "plinth-dialog plinth-confirm-dialog",
+			role: "alertdialog",
+			"data-side-phone": v.value === "center" ? void 0 : v.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", {
+				id: `${m.value}-title`,
+				class: "plinth-dialog-title"
+			}, b(e.title), 9, st)]),
+			c("div", ct, [
+				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", {
+					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", {
+					key: 0,
+					id: `${m.value}-field`,
+					class: "plinth-confirm-dialog-input",
+					type: "text",
+					name: "confirmation",
+					required: "",
+					pattern: x($e)(y.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", {
+					key: 1,
+					id: `${m.value}-field`,
+					class: "plinth-confirm-dialog-input",
+					type: "password",
+					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", {
+					key: 1,
+					id: `${m.value}-error`,
+					class: "plinth-confirm-dialog-error",
+					role: "alert"
+				}, b(e.error), 9, ht)) : o("", !0)
+			]),
+			c("div", gt, [u(R, {
+				variant: "secondary",
+				commandfor: m.value,
+				command: "close",
+				value: "cancel"
+			}, {
+				default: D(() => [l(b(e.cancelLabel), 1)]),
+				_: 1
+			}, 8, ["commandfor"]), u(R, {
+				class: "plinth-confirm-dialog-confirm",
+				type: "submit",
+				value: "confirm",
+				variant: x(Ze)(e.tone) === "danger" ? "danger" : "primary",
+				busy: e.busy
+			}, {
+				default: D(() => [l(b(e.confirmLabel), 1)]),
+				_: 1
+			}, 8, ["variant", "busy"])])
+		])], 40, it));
+	}
+}), _t = {
+	class: "plinth-data-table",
+	role: "table"
+}, vt = {
+	key: 0,
+	class: "plinth-data-table-caption"
+}, yt = {
+	class: "plinth-data-table-head",
+	role: "rowgroup"
+}, bt = {
+	class: "plinth-data-table-head-row",
+	role: "row"
+}, xt = {
+	class: "plinth-data-table-body",
+	role: "rowgroup"
+}, St = /* @__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")])
+		]));
+	}
+}), Ct = [
+	"none",
+	"ascending",
+	"descending"
+];
+function wt(e) {
+	return Ct.includes(e) ? e : "none";
+}
+var Tt = [
+	"field",
+	"title",
+	"actions"
+];
+function Et(e) {
+	return Tt.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 = [
+	"data-kind",
+	"data-numeric",
+	"data-phone"
+], kt = {
+	key: 0,
+	class: "plinth-data-table-label",
+	"aria-hidden": "true"
+}, At = { class: "plinth-data-table-value" }, jt = /* @__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(() => Et(t.kind));
+		return (t, r) => (h(), 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));
+	}
+}), Mt = [
+	"aria-sort",
+	"data-numeric",
+	"data-phone"
+], Nt = /* @__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() ? wt(t.sort) : void 0);
+		return (t, r) => (h(), 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));
+	}
+}), Pt = {
+	class: "plinth-data-table-empty",
+	role: "row"
+}, Ft = ["colspan"], It = /* @__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) => (h(), s("tr", Pt, [c("td", {
+			class: "plinth-data-table-empty-cell",
+			role: "cell",
+			colspan: r.value
+		}, [v(e.$slots, "default")], 8, Ft)]));
+	}
+}), Lt = ["aria-selected"], Rt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableRow",
+	props: { selected: {
+		type: Boolean,
+		default: void 0
+	} },
+	setup(e) {
+		return (t, n) => (h(), 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));
+	}
+}), zt = {
+	type: "button",
+	class: "plinth-data-table-sort"
+}, Bt = { class: "plinth-data-table-sort-label" }, Vt = /* @__PURE__ */ d({
+	__name: "PlinthDataTableSort",
+	setup(e) {
+		return (e, t) => (h(), s("button", zt, [c("span", Bt, [v(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)]));
+	}
+}), Ht = [
+	"href",
+	"data-variant",
+	"data-size",
+	"aria-label",
+	"role",
+	"aria-busy",
+	"aria-disabled"
+], Ut = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, Wt = ["data-size", "data-mirror"], Gt = [
+	"data-variant",
+	"data-size",
+	"aria-label",
+	"aria-pressed",
+	"disabled",
+	"aria-busy",
+	"aria-disabled"
+], Kt = {
+	key: 0,
+	class: "plinth-button-spinner",
+	"aria-hidden": "true"
+}, qt = ["data-size", "data-mirror"], X = /* @__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 = 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({
+			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 ? (h(), s("span", Ut)) : (h(), 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({
+			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 ? (h(), s("span", Kt)) : (h(), 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));
+	}
+});
+//#endregion
+//#region src/swipe.ts
+function Jt(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 Z(e) {
+	let t;
+	m(() => {
+		t = e.value ? Jt(e.value) : void 0;
+	}), p(() => t?.());
+}
+//#endregion
+//#region src/PlinthDialog.vue?vue&type=script&setup=true&lang.ts
+var Yt = [
+	"id",
+	"role",
+	"data-side-phone",
+	"closedby",
+	"aria-labelledby",
+	"aria-describedby"
+], Xt = { class: "plinth-dialog-panel" }, Zt = {
+	key: 0,
+	class: "plinth-dialog-handle",
+	"aria-hidden": "true"
+}, Qt = { class: "plinth-dialog-header" }, $t = ["id"], en = ["id"], tn = { class: "plinth-dialog-body" }, nn = {
+	key: 1,
+	class: "plinth-dialog-footer"
+}, rn = /* @__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 = 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", {
+			id: f.value,
+			ref_key: "dialog",
+			ref: _,
+			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", Xt, [
+			e.dismissible && p.value === "bottom" ? (h(), s("div", Zt)) : o("", !0),
+			c("div", Qt, [
+				c("h2", {
+					id: `${f.value}-title`,
+					class: "plinth-dialog-title"
+				}, b(e.title), 9, $t),
+				m.value ? (h(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-dialog-description"
+				}, b(e.description), 9, en)) : o("", !0),
+				e.dismissible ? (h(), a(X, {
+					key: 1,
+					class: "plinth-dialog-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: D(() => [...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", tn, [v(t.$slots, "default")]),
+			x(G)(x(u).footer?.()) ? (h(), s("div", nn, [v(t.$slots, "footer")])) : o("", !0)
+		])], 40, Yt));
+	}
+}), an = ["dialog", "sheet"];
+function on(e) {
+	return an.includes(e) ? e : "dialog";
+}
+var sn = [
+	"peek",
+	"half",
+	"full"
+];
+function cn(e) {
+	let t = typeof e == "string" ? e.split(/\s+/) : e ?? [];
+	return sn.filter((e) => t.includes(e));
+}
+function ln(e, t) {
+	return t.includes(e) ? e : t.at(-1);
+}
+var un = q, dn = [
+	"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 = {
+	key: 0,
+	class: "plinth-drawer-footer"
+}, vn = /* @__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 = 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", {
+			id: f.value,
+			ref_key: "dialog",
+			ref: _,
+			class: "plinth-drawer",
+			"data-desktop": x(on)(e.desktop),
+			"data-snap-points": p.value.length ? p.value.join(" ") : void 0,
+			"data-snap": x(ln)(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, [
+			n[2] ||= c("div", {
+				class: "plinth-drawer-handle",
+				"aria-hidden": "true"
+			}, null, -1),
+			c("div", pn, [
+				c("h2", {
+					id: `${f.value}-title`,
+					class: "plinth-drawer-title"
+				}, b(e.title), 9, mn),
+				m.value ? (h(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-drawer-description"
+				}, b(e.description), 9, hn)) : o("", !0),
+				u(X, {
+					class: "plinth-drawer-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: D(() => [...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", 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)
+		]));
+	}
+}), wn = [
+	"sm",
+	"md",
+	"lg"
+];
+function Tn(e) {
+	return A(e, wn, "md");
+}
+//#endregion
+//#region src/PlinthIcon.vue?vue&type=script&setup=true&lang.ts
+var En = [
+	"data-size",
+	"data-mirror",
+	"role",
+	"aria-label",
+	"aria-hidden"
+], Dn = /* @__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 = S(), r = i(() => Tn(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({
+			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));
+	}
+}), On = [
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+function kn(e) {
+	return On.includes(e) ? e : "h2";
+}
+//#endregion
+//#region src/PlinthListCard.vue?vue&type=script&setup=true&lang.ts
+var An = { class: "plinth-list-card" }, jn = {
+	class: "plinth-list-card-list",
+	role: "list"
+}, Mn = {
+	key: 1,
+	class: "plinth-list-card-footer"
+}, Nn = /* @__PURE__ */ d({
+	__name: "PlinthListCard",
+	props: {
+		heading: { default: void 0 },
+		headingLevel: { default: "h2" },
+		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), {
+				key: 0,
+				class: "plinth-list-card-heading"
+			}, {
+				default: D(() => [l(b(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)
+		]));
+	}
+}), Pn = {
+	key: 0,
+	class: "plinth-list-row-leading"
+}, Fn = { class: "plinth-list-row-content" }, In = { class: "plinth-list-row-title" }, Ln = {
+	key: 0,
+	class: "plinth-list-row-description"
+}, Rn = {
+	key: 1,
+	class: "plinth-list-row-trailing"
+}, zn = {
+	key: 0,
+	class: "plinth-icon plinth-list-row-chevron",
+	"data-size": "sm",
+	"data-mirror": "",
+	"aria-hidden": "true"
+}, Q = /* @__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) => (h(), a(y(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: 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", {
+					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"
+		]));
+	}
+}), Bn = [
+	"id",
+	"data-side",
+	"data-side-phone",
+	"aria-labelledby",
+	"aria-describedby"
+], Vn = { class: "plinth-sheet-panel" }, Hn = {
+	key: 0,
+	class: "plinth-sheet-handle",
+	"aria-hidden": "true"
+}, Un = { class: "plinth-sheet-header" }, Wn = ["id"], Gn = ["id"], Kn = { class: "plinth-sheet-body" }, qn = {
+	key: 1,
+	class: "plinth-sheet-footer"
+}, $ = /* @__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 = 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", {
+			id: f.value,
+			ref_key: "dialog",
+			ref: y,
+			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,
+			onClose: n[0] ||= (e) => a("close", e)
+		}, [c("div", Vn, [
+			S.value ? (h(), s("div", Hn)) : o("", !0),
+			c("div", Un, [
+				c("h2", {
+					id: `${f.value}-title`,
+					class: "plinth-sheet-title"
+				}, b(e.title), 9, Wn),
+				_.value ? (h(), s("p", {
+					key: 0,
+					id: `${f.value}-description`,
+					class: "plinth-sheet-description"
+				}, b(e.description), 9, Gn)) : o("", !0),
+				u(X, {
+					class: "plinth-sheet-close",
+					label: e.closeLabel,
+					variant: "ghost",
+					commandfor: f.value,
+					command: "close"
+				}, {
+					default: D(() => [...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", Kn, [v(t.$slots, "default")]),
+			x(G)(x(l).footer?.()) ? (h(), s("div", qn, [v(t.$slots, "footer")])) : o("", !0)
+		])], 40, Bn));
+	}
+}), Jn = ["aria-labelledby"], Yn = {
+	key: 1,
+	class: "plinth-menu-sheet-account"
+}, Xn = /* @__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 = 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();
+		return t({
+			showModal: () => E.value?.showModal(),
+			close: () => E.value?.close()
+		}), (t, n) => (h(), a($, {
+			id: m.value,
+			ref_key: "sheet",
+			ref: E,
+			class: "plinth-menu-sheet",
+			title: e.title,
+			"close-label": e.closeLabel,
+			side: "end",
+			"side-phone": "bottom",
+			onClose: n[0] ||= (e) => d("close", e)
+		}, {
+			default: D(() => [
+				_.value ? (h(), a(Q, {
+					key: 0,
+					class: "plinth-menu-sheet-user",
+					description: T.value,
+					href: y.value,
+					chevron: !!y.value
+				}, {
+					leading: D(() => [u(P, {
+						name: e.userName,
+						src: S.value,
+						size: "lg",
+						decorative: ""
+					}, null, 8, ["name", "src"])]),
+					default: D(() => [l(b(e.userName), 1)]),
+					_: 1
+				}, 8, [
+					"description",
+					"href",
+					"chevron"
+				])) : o("", !0),
+				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)
+			]),
+			_: 3
+		}, 8, [
+			"id",
+			"title",
+			"close-label"
+		]));
+	}
+}), Zn = { class: "plinth-pill-label" }, Qn = {
+	key: 0,
+	class: "plinth-pill-count"
+}, $n = /* @__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) => (h(), a(y(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: D(() => [c("span", Zn, [v(t.$slots, "default")]), r.value ? (h(), s("span", Qn, b(e.count), 1)) : o("", !0)]),
+			_: 3
+		}, 8, [
+			"type",
+			"href",
+			"aria-pressed",
+			"aria-current",
+			"disabled",
+			"role",
+			"aria-disabled"
+		]));
+	}
+}), er = /* @__PURE__ */ d({
+	__name: "PlinthPillRow",
+	props: {
+		label: { default: void 0 },
+		nav: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (t, n) => (h(), a(y(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")]),
+			_: 3
+		}, 8, ["role", "aria-label"]));
+	}
+}), tr = /* @__PURE__ */ d({
+	__name: "PlinthSectionMenu",
+	props: {
+		label: { default: void 0 },
+		nav: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		return (t, n) => (h(), a(y(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")]),
+			_: 3
+		}, 8, ["role", "aria-label"]));
+	}
+}), nr = { class: "plinth-section-menu-label" }, rr = {
+	key: 0,
+	class: "plinth-section-menu-count"
+}, ir = /* @__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) => (h(), a(y(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: D(() => [c("span", nr, [v(t.$slots, "default")]), r.value ? (h(), s("span", rr, b(e.count), 1)) : o("", !0)]),
+			_: 3
+		}, 8, [
+			"type",
+			"href",
+			"aria-pressed",
+			"aria-current",
+			"disabled",
+			"role",
+			"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", $);
+} };
+//#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 };