@nexxtmove/ui 1.13.0 → 1.14.0

package/dist/components/molecules/TemplateCard/TemplateCard.vue.d.ts

@@ -1,16 +1,54 @@
 export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages';
 export interface NexxtTemplateCardProps {
+    /** Preview image of the template. Falls back to a placeholder of the same height when omitted. */
     image?: string;
+    /** Template name, shown as the card heading. Truncated on one line. */
     title: string;
+    /** Secondary line under the title, e.g. when the template was last changed. Truncated on one line. */
     subtitle?: string;
+    /** Content blocks the template contains; each renders an icon with a tooltip. */
     contentFeatures?: NexxtTemplateCardContentFeature[];
+    /** Overrides the default Dutch tooltip text per content feature. */
     messages?: Partial<Record<NexxtTemplateCardContentFeature, string>>;
+    /** Lays a full-card button over the content that emits `select`. Off keeps the card inert, so a read-only grid adds no empty tabstop per card. */
+    selectable?: boolean;
+    /** Whether this card is currently chosen: draws the blue border and, with `checkmark`, the badge. Only does something with `selectable`. A prop plus the `select` emit rather than a `defineModel`, because the card owns no state: the parent grid decides which single card may be chosen. */
+    selected?: boolean;
+    /** Shows a check badge in the top-right corner while selected. Only does something with `selectable`. */
+    checkmark?: boolean;
+    /** Disables the select button, dims the card content and drops the overlay. Only does something with `selectable`. */
+    disabled?: boolean;
 }
-declare const __VLS_export: import('vue').DefineComponent<NexxtTemplateCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtTemplateCardProps> & Readonly<{}>, {
+export type NexxtTemplateCardSlots = {
+    /** Covers the whole card and fades in on hover or keyboard focus; the content underneath dims. Not rendered while the card is selectable and disabled. On a coarse pointer it shrinks to the image band, without veil or blur, so the title stays readable and the feature icons stay tappable. The layer is click-through, but `*:pointer-events-auto` only reaches its direct children: an own `absolute inset-0` wrapper inside the slot swallows the select click. */
+    overlay?(props: {
+        selected: boolean;
+    }): unknown;
+    /** Top-right corner of the card, for a preview or menu button. Stays interactive while `disabled`, which makes it the place for e.g. a preview button: the overlay is not rendered then. */
+    actions?(props: {
+        selected: boolean;
+    }): unknown;
+};
+type __VLS_Slots = NexxtTemplateCardSlots;
+declare const __VLS_base: import('vue').DefineComponent<NexxtTemplateCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtTemplateCardProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {
     image: string;
     messages: Partial<Record<NexxtTemplateCardContentFeature, string>>;
+    selected: boolean;
+    disabled: boolean;
     subtitle: string;
     contentFeatures: NexxtTemplateCardContentFeature[];
+    selectable: boolean;
+    checkmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue';
 export type { CustomIconName } from './components/atoms/Icon/customIcons';
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue';
+export type { NexxtTemplateCardContentFeature, NexxtTemplateCardProps, NexxtTemplateCardSlots, } from './components/molecules/TemplateCard/TemplateCard.vue';
 export { default as NexxtAnimatedNumber } from './components/atoms/AnimatedNumber/AnimatedNumber.vue';
 export { default as NexxtAnnouncement } from './components/molecules/Announcement/Announcement.vue';
 export { default as NexxtAvatar } from './components/atoms/Avatar/Avatar.vue';

package/dist/index.js

@@ -5283,16 +5283,29 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			_: 3
 		}));
 	}
-}), Po = { class: "w-full max-w-105 rounded-xl border border-gray-200" }, Fo = { class: "h-38 w-full" }, Io = ["src", "alt"], Lo = {
+}), Po = { class: "block h-38 w-full" }, Fo = ["src"], Io = {
 	key: 1,
 	class: "flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100"
-}, Ro = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, zo = { class: "truncate heading-4 text-gray-900" }, Bo = {
+}, Lo = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, Ro = { class: "truncate heading-4 text-gray-900" }, zo = {
 	key: 0,
 	class: "truncate body-normal text-gray-700"
-}, Vo = {
+}, Bo = {
 	key: 1,
 	class: "mt-3 flex flex-wrap gap-2"
-}, Ho = { class: "small-normal text-gray-700" }, Uo = /* @__PURE__ */ p({
+}, Vo = { class: "sr-only" }, Ho = { class: "small-normal text-gray-700" }, Uo = [
+	"aria-label",
+	"aria-pressed",
+	"disabled"
+], Wo = {
+	key: 1,
+	class: "absolute top-4 right-4 z-20"
+}, Go = {
+	key: 2,
+	class: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-xl bg-white/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 ease-out *:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:inset-x-0 pointer-coarse:top-0 pointer-coarse:bottom-auto pointer-coarse:h-38 pointer-coarse:justify-end pointer-coarse:bg-transparent pointer-coarse:p-4 pointer-coarse:opacity-100 pointer-coarse:backdrop-blur-none"
+}, Ko = {
+	key: 3,
+	class: "absolute -top-2 -right-2 z-30 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
+}, qo = /* @__PURE__ */ p({
 	name: "NexxtTemplateCard",
 	__name: "TemplateCard",
 	props: {
@@ -5300,10 +5313,27 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		title: {},
 		subtitle: { default: void 0 },
 		contentFeatures: { default: () => [] },
-		messages: { default: () => ({}) }
+		messages: { default: () => ({}) },
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		checkmark: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
 	},
-	setup(t) {
-		let n = {
+	emits: ["select"],
+	setup(t, { emit: n }) {
+		let r = {
 			references: {
 				icon: "house-circle-check",
 				textColor: "text-cornflower-blue-500",
@@ -5324,41 +5354,68 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				textColor: "text-green-500",
 				backgroundColor: "bg-green-50"
 			}
-		}, r = {
+		}, a = {
 			references: "Referenties",
 			valuation: "Waardebepaling",
 			reviews: "Reviews",
 			packages: "Courtage"
-		}, a = t, l = i(() => ({
-			...r,
-			...a.messages
-		}));
-		return (r, i) => (w(), s("div", Po, [c("picture", Fo, [t.image ? (w(), s("img", {
-			key: 0,
-			src: t.image,
-			alt: t.title,
-			loading: "lazy",
-			class: "w-full rounded-t-xl object-cover"
-		}, null, 8, Io)) : (w(), s("div", Lo, [f(Q, {
-			name: "image",
-			class: "text-4xl text-gray-400"
-		})]))]), c("div", Ro, [
-			c("h3", zo, k(t.title), 1),
-			t.subtitle ? (w(), s("p", Bo, k(t.subtitle), 1)) : o("", !0),
-			t.contentFeatures.length ? (w(), s("ul", Vo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(No, null, {
-				tooltip: B(() => [c("span", Ho, k(l.value[e]), 1)]),
-				default: B(() => [c("div", { class: y([[n[e].backgroundColor, n[e].textColor], "flex size-8 items-center justify-center rounded-full"]) }, [f(Q, { name: n[e].icon }, null, 8, ["name"])], 2)]),
-				_: 2
-			}, 1024)]))), 128))])) : o("", !0)
-		])]));
+		}, l = t, u = n, d = i(() => ({
+			...a,
+			...l.messages
+		})), p = () => {
+			l.selectable && !l.disabled && u("select");
+		};
+		return (n, i) => (w(), s("div", { class: y(["group relative size-full max-w-105 rounded-xl border border-gray-200 transition-colors duration-200 ease-out", [t.selectable && t.selected && "border-cornflower-blue-500", t.selectable && !t.selected && !t.disabled && "hover:border-gray-300"]]) }, [
+			c("div", { class: y(["relative z-10 transition-opacity duration-200 ease-out", [
+				t.selectable && "pointer-events-none",
+				t.selectable && t.disabled && "opacity-50",
+				n.$slots.overlay && !(t.selectable && t.disabled) && "group-focus-within:opacity-40 group-hover:opacity-40 pointer-coarse:opacity-100!"
+			]]) }, [c("picture", Po, [t.image ? (w(), s("img", {
+				key: 0,
+				src: t.image,
+				alt: "",
+				loading: "lazy",
+				class: "h-38 w-full rounded-t-xl object-cover"
+			}, null, 8, Fo)) : (w(), s("div", Io, [f(Q, {
+				name: "image",
+				class: "text-4xl text-gray-400"
+			})]))]), c("div", Lo, [
+				c("h3", Ro, k(t.title), 1),
+				t.subtitle ? (w(), s("p", zo, k(t.subtitle), 1)) : o("", !0),
+				t.contentFeatures.length ? (w(), s("ul", Bo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(No, null, {
+					tooltip: B(() => [c("span", Ho, k(d.value[e]), 1)]),
+					default: B(() => [c("div", {
+						class: y([[r[e].backgroundColor, r[e].textColor], "pointer-events-auto flex size-8 items-center justify-center rounded-full"]),
+						onClick: p
+					}, [f(Q, { name: r[e].icon }, null, 8, ["name"]), c("span", Vo, k(d.value[e]), 1)], 2)]),
+					_: 2
+				}, 1024)]))), 128))])) : o("", !0)
+			])], 2),
+			t.selectable ? (w(), s("button", {
+				key: 0,
+				type: "button",
+				"aria-label": t.title,
+				"aria-pressed": t.selected,
+				disabled: t.disabled || void 0,
+				class: "absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 disabled:cursor-not-allowed",
+				onClick: p
+			}, null, 8, Uo)) : o("", !0),
+			n.$slots.actions ? (w(), s("div", Wo, [D(n.$slots, "actions", { selected: t.selected })])) : o("", !0),
+			n.$slots.overlay && !(t.selectable && t.disabled) ? (w(), s("div", Go, [D(n.$slots, "overlay", { selected: t.selected })])) : o("", !0),
+			t.selectable && t.selected && t.checkmark ? (w(), s("span", Ko, [f(Q, {
+				name: "check",
+				type: "solid",
+				class: "text-xs"
+			})])) : o("", !0)
+		], 2));
 	}
-}), Wo = {
+}), Jo = {
 	key: 0,
 	class: "text-brick-500"
-}, Go = ["rows", "placeholder"], Ko = {
+}, Yo = ["rows", "placeholder"], Xo = {
 	key: 1,
 	class: "small-normal text-brick-400"
-}, qo = /* @__PURE__ */ p({
+}, Zo = /* @__PURE__ */ p({
 	name: "NexxtTextarea",
 	inheritAttrs: !1,
 	__name: "Textarea",
@@ -5414,7 +5471,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 0,
 				class: "justify-start small-normal text-gray-700",
 				for: n
-			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", Wo, "*")) : o("", !0)])) : o("", !0),
+			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", Jo, "*")) : o("", !0)])) : o("", !0),
 			V(c("textarea", _({
 				id: n,
 				ref_key: "textareaEl",
@@ -5425,21 +5482,21 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				placeholder: e.placeholder,
 				class: ["min-h-10 w-full rounded-lg border px-3 py-2 small-normal text-gray-900 transition-colors outline-none placeholder:text-gray-400 focus:border-cornflower-blue-500", [e.error ? "border-brick-400" : "border-gray-200", e.autosize || e.resize === "none" ? "resize-none" : "resize-y"]],
 				onInput: p
-			}), null, 16, Go), [[L, r.value]]),
-			e.error && e.errorMessage ? (w(), s("p", Ko, k(e.errorMessage), 1)) : o("", !0)
+			}), null, 16, Yo), [[L, r.value]]),
+			e.error && e.errorMessage ? (w(), s("p", Xo, k(e.errorMessage), 1)) : o("", !0)
 		], 6));
 	}
-}), Jo = [
+}), Qo = [
 	"data-event-source",
 	"data-event-date",
 	"date-event-type"
-], Yo = { class: "heading-3" }, Xo = ["href"], Zo = { class: "truncate group-hover:underline" }, Qo = {
+], $o = { class: "heading-3" }, es = ["href"], ts = { class: "truncate group-hover:underline" }, ns = {
 	key: 1,
 	class: "mt-1 text-sm text-gray-500"
-}, $o = {
+}, rs = {
 	key: 2,
 	class: "mt-1 text-sm text-gray-500"
-}, es = /* @__PURE__ */ p({
+}, is = /* @__PURE__ */ p({
 	name: "NexxtTimelineEvent",
 	__name: "TimelineEvent",
 	props: {
@@ -5481,20 +5538,20 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			name: n.value.icon,
 			class: "flex size-6 text-xl text-white"
 		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			c("span", Yo, k(n.value.label), 1),
+			c("span", $o, k(n.value.label), 1),
 			e.event.url ? (w(), s("a", {
 				key: 0,
 				href: e.event.url,
 				target: "_blank",
 				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
-			}, [c("span", Zo, k(e.event.description || e.event.url), 1), f(Q, {
+			}, [c("span", ts, k(e.event.description || e.event.url), 1), f(Q, {
 				name: "external-link",
 				class: "ml-1 size-4 text-gray-950"
-			})], 8, Xo)) : e.event.description ? (w(), s("span", Qo, k(e.event.description), 1)) : o("", !0),
-			e.event.request_reason ? (w(), s("span", $o, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
-		], 2)], 2)], 10, Jo));
+			})], 8, es)) : e.event.description ? (w(), s("span", ns, k(e.event.description), 1)) : o("", !0),
+			e.event.request_reason ? (w(), s("span", rs, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
+		], 2)], 2)], 10, Qo));
 	}
-}), ts = { class: "relative z-10" }, ns = { class: "flex items-center justify-between px-4 py-2" }, rs = { class: "flex gap-1" }, is = { class: "text-sm" }, as = { class: "flex gap-1" }, os = { class: "text-sm" }, ss = /* @__PURE__ */ p({
+}), as = { class: "relative z-10" }, os = { class: "flex items-center justify-between px-4 py-2" }, ss = { class: "flex gap-1" }, cs = { class: "text-sm" }, ls = { class: "flex gap-1" }, us = { class: "text-sm" }, ds = /* @__PURE__ */ p({
 	name: "NexxtTimelineLanes",
 	__name: "TimelineLanes",
 	props: {
@@ -5504,15 +5561,15 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		rightTooltip: { default: "Vanuit relatie" }
 	},
 	setup(e) {
-		return (t, n) => (w(), s("div", ts, [c("div", ns, [c("span", rs, [d(k(e.leftLabel) + " ", 1), e.leftTooltip ? (w(), a(No, { key: 0 }, {
-			tooltip: B(() => [c("span", is, k(e.leftTooltip), 1)]),
+		return (t, n) => (w(), s("div", as, [c("div", os, [c("span", ss, [d(k(e.leftLabel) + " ", 1), e.leftTooltip ? (w(), a(No, { key: 0 }, {
+			tooltip: B(() => [c("span", cs, k(e.leftTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
 				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
-		})) : o("", !0)]), c("span", as, [d(k(e.rightLabel) + " ", 1), e.rightTooltip ? (w(), a(No, { key: 0 }, {
-			tooltip: B(() => [c("span", os, k(e.rightTooltip), 1)]),
+		})) : o("", !0)]), c("span", ls, [d(k(e.rightLabel) + " ", 1), e.rightTooltip ? (w(), a(No, { key: 0 }, {
+			tooltip: B(() => [c("span", us, k(e.rightTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
 				class: "size-4 text-xs text-gray-600"
@@ -5520,10 +5577,10 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			_: 1
 		})) : o("", !0)])])]));
 	}
-}), cs = ["data-phase"], ls = { class: "text-sm font-semibold tracking-wider uppercase" }, us = { class: "mt-2 font-medium text-xs text-gray-500" }, ds = {
+}), fs = ["data-phase"], ps = { class: "text-sm font-semibold tracking-wider uppercase" }, ms = { class: "mt-2 font-medium text-xs text-gray-500" }, hs = {
 	key: 1,
 	class: "h-1"
-}, fs = /* @__PURE__ */ p({
+}, gs = /* @__PURE__ */ p({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -5559,13 +5616,13 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": t.phase.phase.value
 		}, [
-			t.index === 0 && t.isSplitView ? (w(), a(ss, { key: 0 })) : o("", !0),
+			t.index === 0 && t.isSplitView ? (w(), a(ds, { key: 0 })) : o("", !0),
 			c("div", { class: y(["absolute bottom-0 left-5 w-0 border-l", [A(Z)[t.phase.phase.value].color, t.index === 0 && t.isSplitView ? "top-10" : "top-0"]]) }, null, 2),
 			t.isSplitView ? (w(), s("div", {
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [A(Z)[t.phase.phase.value].color, t.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(es, {
+			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(is, {
 				key: e.id,
 				event: e,
 				"split-view": t.isSplitView
@@ -5574,26 +5631,26 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: y(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !t.isSplitView }])
 			}, [
-				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A(Z)[t.phase.phase.value].bgColor, A(Z)[t.phase.phase.value].textColor]]) }, [c("span", ls, k(A(Z)[t.phase.phase.value].label), 1), d() ? (w(), a(Q, {
+				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A(Z)[t.phase.phase.value].bgColor, A(Z)[t.phase.phase.value].textColor]]) }, [c("span", ps, k(A(Z)[t.phase.phase.value].label), 1), d() ? (w(), a(Q, {
 					key: 0,
 					name: d() === "up" ? "arrow-up" : "arrow-down",
 					class: "size-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
-				c("span", us, k(u()), 1),
+				c("span", ms, k(u()), 1),
 				t.isSplitView ? (w(), s("div", {
 					key: 0,
 					class: y(["mt-4 h-px w-[75%]", A(Z)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
-				t.isLast ? o("", !0) : (w(), s("div", ds)),
+				t.isLast ? o("", !0) : (w(), s("div", hs)),
 				c("div", { class: y(["absolute inset-y-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (w(), s("div", {
 					key: 2,
 					class: y(["absolute inset-y-0 right-5 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
-		], 8, cs));
+		], 8, fs));
 	}
-}), ps = { class: "relative z-10 flex flex-col gap-16" }, ms = /* @__PURE__ */ p({
+}), _s = { class: "relative z-10 flex flex-col gap-16" }, vs = /* @__PURE__ */ p({
 	name: "NexxtTimelineTrack",
 	__name: "TimelineTrack",
 	props: {
@@ -5614,8 +5671,8 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	},
 	setup(t) {
 		let n = t, r = i(() => n.splitView && n.showLanes);
-		return (n, i) => (w(), s("div", ps, [
-			r.value ? (w(), a(ss, {
+		return (n, i) => (w(), s("div", _s, [
+			r.value ? (w(), a(ds, {
 				key: 0,
 				"left-label": t.leftLabel,
 				"right-label": t.rightLabel,
@@ -5632,24 +5689,24 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [t.color, r.value ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			D(n.$slots, "default", {}, () => [(w(!0), s(e, null, E(t.events, (e) => (w(), a(es, {
+			D(n.$slots, "default", {}, () => [(w(!0), s(e, null, E(t.events, (e) => (w(), a(is, {
 				key: e.id,
 				event: e,
 				"split-view": t.splitView
 			}, null, 8, ["event", "split-view"]))), 128))])
 		]));
 	}
-}), hs = ["role", "aria-live"], gs = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, _s = {
+}), ys = ["role", "aria-live"], bs = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, xs = {
 	key: 1,
 	class: "body-normal"
-}, vs = ["aria-label"], ys = {
+}, Ss = ["aria-label"], Cs = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, bs = 56.55, xs = /*#__PURE__*/ Un(/* @__PURE__ */ p({
+}, ws = 56.55, Ts = /*#__PURE__*/ Un(/* @__PURE__ */ p({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -5664,7 +5721,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		M((e) => ({ fa0d20de: bs }));
+		M((e) => ({ fa0d20de: ws }));
 		let n = {
 			info: {
 				icon: "info",
@@ -5717,12 +5774,12 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				name: u.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			c("div", gs, [
+			c("div", bs, [
 				e.title ? (w(), s("p", {
 					key: 0,
 					class: y(["heading-4", u.value.titleColor])
 				}, k(e.title), 3)) : o("", !0),
-				e.message ? (w(), s("p", _s, k(e.message), 1)) : o("", !0),
+				e.message ? (w(), s("p", xs, k(e.message), 1)) : o("", !0),
 				D(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (w(), s("button", {
@@ -5731,7 +5788,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				class: "relative flex size-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
 				"aria-label": e.autoClose ? `Sluiten (verdwijnt automatisch na ${e.autoClose / 1e3} seconden)` : "Sluiten",
 				onClick: n[0] ||= (e) => a("dismiss")
-			}, [e.autoClose ? (w(), s("svg", ys, [c("circle", {
+			}, [e.autoClose ? (w(), s("svg", Cs, [c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -5739,7 +5796,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": bs,
+				"stroke-dasharray": ws,
 				class: "timer-circle",
 				style: x({
 					animationDuration: `${e.autoClose}ms`,
@@ -5748,10 +5805,10 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			}, null, 4)])) : o("", !0), f(Q, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, vs)) : o("", !0)
-		], 42, hs));
+			})], 8, Ss)) : o("", !0)
+		], 42, ys));
 	}
-}), [["__scopeId", "data-v-7e3c5bda"]]), Ss = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-7e3c5bda"]]), Es = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -5784,7 +5841,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			default: B(() => [(w(!0), s(e, null, E(n.toasts, (e) => (w(), s("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [f(xs, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [f(Ts, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -5792,19 +5849,19 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), Cs = { class: "flex flex-col gap-1" }, ws = {
+}), Ds = { class: "flex flex-col gap-1" }, Os = {
 	key: 0,
 	class: "justify-start small-normal text-gray-700"
-}, Ts = ["onClick"], Es = {
+}, ks = ["onClick"], As = {
 	key: 1,
 	class: "extra-small-semibold"
-}, Ds = ["onClick"], Os = {
+}, js = ["onClick"], Ms = {
 	key: 1,
 	class: "extra-small-semibold"
-}, ks = {
+}, Ns = {
 	key: 1,
 	class: "extra-small-semibold"
-}, As = /* @__PURE__ */ p({
+}, Ps = /* @__PURE__ */ p({
 	name: "NexxtToggleGroup",
 	__name: "ToggleGroup",
 	props: /*@__PURE__*/ g({
@@ -5835,7 +5892,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		};
 		return R(r, async () => await m()), ot(i, () => m()), S(async () => {
 			await document.fonts.ready, await m(), await v(), p.value = !0;
-		}), (n, m) => (w(), s("div", Cs, [t.label ? (w(), s("label", ws, k(t.label), 1)) : o("", !0), c("div", {
+		}), (n, m) => (w(), s("div", Ds, [t.label ? (w(), s("label", Os, k(t.label), 1)) : o("", !0), c("div", {
 			ref_key: "containerRef",
 			ref: i,
 			class: y(["relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1", { "flex-wrap": !t.equalWidth }])
@@ -5859,7 +5916,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				}, [n.icon ? (w(), a(Q, {
 					key: 0,
 					name: n.icon
-				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Es, k(n.label), 1)) : o("", !0)], 10, Ts)]),
+				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", As, k(n.label), 1)) : o("", !0)], 10, ks)]),
 				_: 2
 			}, 1024)) : (w(), s("button", {
 				key: 1,
@@ -5871,7 +5928,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			}, [n.icon ? (w(), a(Q, {
 				key: 0,
 				name: n.icon
-			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Os, k(n.label), 1)) : o("", !0)], 10, Ds))], 64))), 128)),
+			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Ms, k(n.label), 1)) : o("", !0)], 10, js))], 64))), 128)),
 			c("div", {
 				"aria-hidden": "true",
 				class: y(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", [p.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : "", { "flex-wrap": !t.equalWidth }]]),
@@ -5882,29 +5939,29 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			}, [e.icon ? (w(), a(Q, {
 				key: 0,
 				name: e.icon
-			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", ks, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
+			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", Ns, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
 		], 2)]));
 	}
-}), js = [
+}), Fs = [
 	"src",
 	"loop",
 	"aria-label"
-], Ms = {
+], Is = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Ns = { class: "heading-4" }, Ps = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Fs = {
+}, Ls = { class: "heading-4" }, Rs = { class: "max-w-xs truncate extra-small-normal text-white/50" }, zs = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Is = {
+}, Bs = {
 	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, Ls = [
+}, Vs = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Rs = { class: "flex items-center gap-2" }, zs = ["aria-label"], Bs = { class: "extra-small-normal text-white/70 tabular-nums" }, Vs = ["aria-label"], Hs = ["aria-label"], Us = /* @__PURE__ */ p({
+], Hs = { class: "flex items-center gap-2" }, Us = ["aria-label"], Ws = { class: "extra-small-normal text-white/70 tabular-nums" }, Gs = ["aria-label"], Ks = ["aria-label"], qs = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -5985,15 +6042,15 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => E.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : I()
-			}, null, 42, js),
-			E.value ? (w(), s("div", Ms, [
+			}, null, 42, Fs),
+			E.value ? (w(), s("div", Is, [
 				f(Q, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", Ns, k(a.value.error), 1),
-				c("p", Ps, k(e.src), 1)
+				c("p", Ls, k(a.value.error), 1),
+				c("p", Rs, k(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -6001,7 +6058,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Fs, [c("div", Is, [f(Q, {
+				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", zs, [c("div", Bs, [f(Q, {
 					name: D.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -6044,7 +6101,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					class: "absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100",
 					style: x({ left: `${ee.value}%` })
 				}, null, 4)
-			], 40, Ls), c("div", Rs, [
+			], 40, Vs), c("div", Hs, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
@@ -6054,8 +6111,8 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					name: A(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, zs),
-				c("span", Bs, k(F(W.value)) + " / " + k(F(A(m))), 1),
+				}, null, 8, ["name"])], 8, Us),
+				c("span", Ws, k(F(W.value)) + " / " + k(F(A(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -6066,7 +6123,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					name: A(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Vs),
+				}, null, 8, ["name"])], 8, Gs),
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -6076,10 +6133,10 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					name: A(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Hs)
+				}, null, 8, ["name"])], 8, Ks)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { st as EVENT_CONFIG_MAP, ct as NexxtAnimatedNumber, mt as NexxtAnnouncement, yt as NexxtAvatar, xt as NexxtButton, $t as NexxtCalendar, nn as NexxtCard, an as NexxtCheckbox, on as NexxtChip, xn as NexxtColorPicker, Hn as NexxtCombobox, Vn as NexxtComboboxPanel, Yn as NexxtContactInfoCard, cr as NexxtCountrySelect, fr as NexxtCustomerJourneyTile, pr as NexxtDatePicker, xr as NexxtDoughnutChart, Er as NexxtDropdownButton, kr as NexxtEnergyLabel, $ as NexxtFloatingPanel, Nr as NexxtHeader, Q as NexxtIcon, Fr as NexxtInfoBlock, On as NexxtInputField, Ur as NexxtInputSelect, Gr as NexxtLoader, Yr as NexxtModal, Zr as NexxtModalFooter, ni as NexxtPageContainer, ri as NexxtPagination, si as NexxtPresenceIndicator, yi as NexxtProgressBar, Ai as NexxtPropertyCard, Ti as NexxtPropertyListing, Ki as NexxtReferenceCard, ea as NexxtSelect, ra as NexxtSelectableOption, la as NexxtSidebarMenuItem, da as NexxtSkeleton, ha as NexxtSkeletonPropertyCard, ya as NexxtSlider, Sa as NexxtSocialIcons, Ea as NexxtSocialMediaCustomTemplate, Fa as NexxtSocialMediaTemplate, Ya as NexxtSocialMediaType, co as NexxtSource, gt as NexxtSquircle, lo as NexxtStepperHeader, fo as NexxtSwitch, yo as NexxtTabbedContent, Mo as NexxtTable, ho as NexxtTabs, Uo as NexxtTemplateCard, qo as NexxtTextarea, es as NexxtTimelineEvent, ss as NexxtTimelineLanes, fs as NexxtTimelinePhaseblock, ms as NexxtTimelineTrack, xs as NexxtToast, Ss as NexxtToaster, As as NexxtToggleGroup, No as NexxtTooltip, Us as NexxtVideoPlayer, Z as PHASE_MAP, ao as SOURCE_MAP };
+export { st as EVENT_CONFIG_MAP, ct as NexxtAnimatedNumber, mt as NexxtAnnouncement, yt as NexxtAvatar, xt as NexxtButton, $t as NexxtCalendar, nn as NexxtCard, an as NexxtCheckbox, on as NexxtChip, xn as NexxtColorPicker, Hn as NexxtCombobox, Vn as NexxtComboboxPanel, Yn as NexxtContactInfoCard, cr as NexxtCountrySelect, fr as NexxtCustomerJourneyTile, pr as NexxtDatePicker, xr as NexxtDoughnutChart, Er as NexxtDropdownButton, kr as NexxtEnergyLabel, $ as NexxtFloatingPanel, Nr as NexxtHeader, Q as NexxtIcon, Fr as NexxtInfoBlock, On as NexxtInputField, Ur as NexxtInputSelect, Gr as NexxtLoader, Yr as NexxtModal, Zr as NexxtModalFooter, ni as NexxtPageContainer, ri as NexxtPagination, si as NexxtPresenceIndicator, yi as NexxtProgressBar, Ai as NexxtPropertyCard, Ti as NexxtPropertyListing, Ki as NexxtReferenceCard, ea as NexxtSelect, ra as NexxtSelectableOption, la as NexxtSidebarMenuItem, da as NexxtSkeleton, ha as NexxtSkeletonPropertyCard, ya as NexxtSlider, Sa as NexxtSocialIcons, Ea as NexxtSocialMediaCustomTemplate, Fa as NexxtSocialMediaTemplate, Ya as NexxtSocialMediaType, co as NexxtSource, gt as NexxtSquircle, lo as NexxtStepperHeader, fo as NexxtSwitch, yo as NexxtTabbedContent, Mo as NexxtTable, ho as NexxtTabs, qo as NexxtTemplateCard, Zo as NexxtTextarea, is as NexxtTimelineEvent, ds as NexxtTimelineLanes, gs as NexxtTimelinePhaseblock, vs as NexxtTimelineTrack, Ts as NexxtToast, Es as NexxtToaster, Ps as NexxtToggleGroup, No as NexxtTooltip, qs as NexxtVideoPlayer, Z as PHASE_MAP, ao as SOURCE_MAP };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/molecules/TemplateCard/TemplateCard.vue

@@ -7,11 +7,31 @@ import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages'
 
 export interface NexxtTemplateCardProps {
+  /** Preview image of the template. Falls back to a placeholder of the same height when omitted. */
   image?: string
+  /** Template name, shown as the card heading. Truncated on one line. */
   title: string
+  /** Secondary line under the title, e.g. when the template was last changed. Truncated on one line. */
   subtitle?: string
+  /** Content blocks the template contains; each renders an icon with a tooltip. */
   contentFeatures?: NexxtTemplateCardContentFeature[]
+  /** Overrides the default Dutch tooltip text per content feature. */
   messages?: Partial<Record<NexxtTemplateCardContentFeature, string>>
+  /** Lays a full-card button over the content that emits `select`. Off keeps the card inert, so a read-only grid adds no empty tabstop per card. */
+  selectable?: boolean
+  /** Whether this card is currently chosen: draws the blue border and, with `checkmark`, the badge. Only does something with `selectable`. A prop plus the `select` emit rather than a `defineModel`, because the card owns no state: the parent grid decides which single card may be chosen. */
+  selected?: boolean
+  /** Shows a check badge in the top-right corner while selected. Only does something with `selectable`. */
+  checkmark?: boolean
+  /** Disables the select button, dims the card content and drops the overlay. Only does something with `selectable`. */
+  disabled?: boolean
+}
+
+export type NexxtTemplateCardSlots = {
+  /** Covers the whole card and fades in on hover or keyboard focus; the content underneath dims. Not rendered while the card is selectable and disabled. On a coarse pointer it shrinks to the image band, without veil or blur, so the title stays readable and the feature icons stay tappable. The layer is click-through, but `*:pointer-events-auto` only reaches its direct children: an own `absolute inset-0` wrapper inside the slot swallows the select click. */
+  overlay?(props: { selected: boolean }): unknown
+  /** Top-right corner of the card, for a preview or menu button. Stays interactive while `disabled`, which makes it the place for e.g. a preview button: the overlay is not rendered then. */
+  actions?(props: { selected: boolean }): unknown
 }
 
 type TemplateCardIcon = {
@@ -45,46 +65,152 @@ const props = withDefaults(defineProps<NexxtTemplateCardProps>(), {
   subtitle: undefined,
   contentFeatures: () => [],
   messages: () => ({}),
+  selectable: false,
+  selected: false,
+  checkmark: false,
+  disabled: false,
 })
 
+const emit = defineEmits<{
+  /** The card was chosen. No payload: the consumer knows which template it rendered. */
+  select: []
+}>()
+
+// The root of the template stays a plain `<div>` and must stay single-root: the heading, the
+// paragraph and the tooltip triggers are flow content, which is invalid inside a `<button>`, and
+// wrapping them also dropped the heading role and turned the accessible name of the button into
+// the whole card as one long string. A leading comment in the template would make it a fragment,
+// after which class and attributes no longer reach the card, so the notes live here.
+// Selection, hover and the dim are driven from the props and from the root's own `:hover`, not
+// from the button. The slot checks are read inline rather than through a computed -- slot presence
+// is not reactive, so a consumer toggling `<template v-if>` on a slot would never re-evaluate a
+// cached computed.
+//
+// The overlay and the actions are siblings of the select button, never children: a button inside a
+// button is invalid markup and swallows the inner click, and both layers stack above it so their
+// own buttons get the click. They are handed the selection because their content often styles
+// itself by it.
+defineSlots<NexxtTemplateCardSlots>()
+
 const featureMessages = computed<Record<NexxtTemplateCardContentFeature, string>>(() => ({
   ...DEFAULT_MESSAGES,
   ...props.messages,
 }))
+
+const onSelect = () => {
+  if (props.selectable && !props.disabled) emit('select')
+}
 </script>
 
 <template>
-  <div class="w-full max-w-105 rounded-xl border border-gray-200">
-    <picture class="h-38 w-full">
-      <img
-        v-if="image"
-        :src="image"
-        :alt="title"
-        loading="lazy"
-        class="w-full rounded-t-xl object-cover"
-      />
-      <div v-else class="flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100">
-        <NexxtIcon name="image" class="text-4xl text-gray-400" />
+  <div
+    class="group relative size-full max-w-105 rounded-xl border border-gray-200 transition-colors duration-200 ease-out"
+    :class="[
+      selectable && selected && 'border-cornflower-blue-500',
+      selectable && !selected && !disabled && 'hover:border-gray-300',
+    ]"
+  >
+    <div
+      class="relative z-10 transition-opacity duration-200 ease-out"
+      :class="[
+        // Lets a click anywhere on the card reach the stretched button underneath; only the
+        // tooltip triggers claim their own pointer events back.
+        selectable && 'pointer-events-none',
+        selectable && disabled && 'opacity-50',
+        $slots.overlay &&
+          !(selectable && disabled) &&
+          'group-focus-within:opacity-40 group-hover:opacity-40 pointer-coarse:opacity-100!',
+      ]"
+    >
+      <picture class="block h-38 w-full">
+        <!-- Decorative: the template name is right below it as text. -->
+        <img
+          v-if="image"
+          :src="image"
+          alt=""
+          loading="lazy"
+          class="h-38 w-full rounded-t-xl object-cover"
+        />
+        <div v-else class="flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100">
+          <NexxtIcon name="image" class="text-4xl text-gray-400" />
+        </div>
+      </picture>
+      <div class="rounded-b-xl px-8 pt-3.5 pb-4">
+        <h3 class="truncate heading-4 text-gray-900">{{ title }}</h3>
+        <p v-if="subtitle" class="truncate body-normal text-gray-700">{{ subtitle }}</p>
+        <ul v-if="contentFeatures.length" class="mt-3 flex flex-wrap gap-2">
+          <li v-for="feature in contentFeatures" :key="feature">
+            <NexxtTooltip>
+              <!--
+                Claims its pointer events back from the content layer so the tooltip still opens on
+                hover, and forwards the click to the card so the icon is no dead zone on a
+                selectable card. `onSelect` guards on selectable and disabled itself.
+                NexxtIcon is aria-hidden and the trigger is not focusable, so the label is only
+                there for screen readers.
+              -->
+              <div
+                :class="[ICON_MAP[feature].backgroundColor, ICON_MAP[feature].textColor]"
+                class="pointer-events-auto flex size-8 items-center justify-center rounded-full"
+                @click="onSelect"
+              >
+                <NexxtIcon :name="ICON_MAP[feature].icon" />
+                <span class="sr-only">{{ featureMessages[feature] }}</span>
+              </div>
+              <template #tooltip>
+                <span class="small-normal text-gray-700">{{ featureMessages[feature] }}</span>
+              </template>
+            </NexxtTooltip>
+          </li>
+        </ul>
       </div>
-    </picture>
-    <div class="rounded-b-xl px-8 pt-3.5 pb-4">
-      <h3 class="truncate heading-4 text-gray-900">{{ title }}</h3>
-      <p v-if="subtitle" class="truncate body-normal text-gray-700">{{ subtitle }}</p>
-      <ul v-if="contentFeatures.length" class="mt-3 flex flex-wrap gap-2">
-        <li v-for="feature in contentFeatures" :key="feature">
-          <NexxtTooltip>
-            <div
-              :class="[ICON_MAP[feature].backgroundColor, ICON_MAP[feature].textColor]"
-              class="flex size-8 items-center justify-center rounded-full"
-            >
-              <NexxtIcon :name="ICON_MAP[feature].icon" />
-            </div>
-            <template #tooltip>
-              <span class="small-normal text-gray-700">{{ featureMessages[feature] }}</span>
-            </template>
-          </NexxtTooltip>
-        </li>
-      </ul>
     </div>
+
+    <!--
+      A stretched button instead of a wrapper: it carries the click, the pressed state and the
+      focus ring, while the card content above it stays real document structure. It holds the
+      lowest stacking level of the layers, so a click on an actions or overlay button lands there
+      and not here. The focus ring follows Button.vue (`outline-3` plus offset), so a selected card
+      with keyboard focus shows two distinguishable indicators: blue border and ring.
+    -->
+    <button
+      v-if="selectable"
+      type="button"
+      :aria-label="title"
+      :aria-pressed="selected"
+      :disabled="disabled || undefined"
+      class="absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 disabled:cursor-not-allowed"
+      @click="onSelect"
+    />
+
+    <div v-if="$slots.actions" class="absolute top-4 right-4 z-20">
+      <slot name="actions" :selected="selected" />
+    </div>
+
+    <!--
+      Dropped while selectable and disabled: an invisible layer would still hold tabbable buttons,
+      and a card that cannot be chosen reveals nothing. A read-only card (no `selectable`) keeps
+      its overlay, disabled or not.
+      `pointer-events-none` on the layer with `*:pointer-events-auto` on its children lets a click
+      on the veil fall through to the select button while the overlay's own buttons keep theirs.
+      On a coarse pointer there is no hover to reveal it, so it is always there -- but then without
+      veil or blur and shrunk to the image band at the top, because a permanent veil over the title
+      and the subtitle drops their contrast below 4.5:1 and a full-height layer would swallow the
+      taps on the feature icons.
+      jsdom resolves no Tailwind and the storybook project cannot hit-test, so the layering itself
+      is asserted by neither suite; only the DOM order is.
+    -->
+    <div
+      v-if="$slots.overlay && !(selectable && disabled)"
+      class="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-xl bg-white/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 ease-out *:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:inset-x-0 pointer-coarse:top-0 pointer-coarse:bottom-auto pointer-coarse:h-38 pointer-coarse:justify-end pointer-coarse:bg-transparent pointer-coarse:p-4 pointer-coarse:opacity-100 pointer-coarse:backdrop-blur-none"
+    >
+      <slot name="overlay" :selected="selected" />
+    </div>
+
+    <span
+      v-if="selectable && selected && checkmark"
+      class="absolute -top-2 -right-2 z-30 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
+    >
+      <NexxtIcon name="check" type="solid" class="text-xs" />
+    </span>
   </div>
 </template>

package/src/index.ts

@@ -13,6 +13,11 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  NexxtTemplateCardContentFeature,
+  NexxtTemplateCardProps,
+  NexxtTemplateCardSlots,
+} from './components/molecules/TemplateCard/TemplateCard.vue'
 
 export { default as NexxtAnimatedNumber } from './components/atoms/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtAnnouncement } from './components/molecules/Announcement/Announcement.vue'