@nexxtmove/ui 1.12.0 → 1.14.0

package/dist/ui.css

@@ -1,2 +1,2 @@
-rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-d13bb383]{stroke-dashoffset:0;animation:linear forwards toast-timer-d13bb383}@keyframes toast-timer-d13bb383{to{stroke-dashoffset:var(--b622135e)}}
+rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -57,6 +57,7 @@
     "consola": "^3.4.2",
     "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "4.7.0",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-storybook": "10.5.10",
     "eslint-plugin-vue": "^10.10.0",

package/src/components/atoms/Avatar/Avatar.vue

@@ -63,14 +63,14 @@ const fontSizeClasses = {
 <template>
   <NexxtSquircle v-if="squircle" :size="size">
     <div
-      class="flex h-full w-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500"
+      class="flex size-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500"
       :class="[fontSizeClasses[size]]"
     >
       <img
         v-if="showImage"
         :src="src"
         :alt="name"
-        class="h-full w-full object-cover"
+        class="size-full object-cover"
         @error="imageFailed = true"
       />
       <template v-else>{{ computedInitials }}</template>
@@ -88,7 +88,7 @@ const fontSizeClasses = {
       v-if="showImage"
       :src="src"
       :alt="name"
-      class="h-full w-full object-cover"
+      class="size-full object-cover"
       @error="imageFailed = true"
     />
     <template v-else>{{ computedInitials }}</template>

package/src/components/atoms/Button/Button.vue

@@ -23,6 +23,16 @@ const {
   rounded = false,
   fullWidth = false,
 } = defineProps<NexxtButtonProps>()
+
+// Full class names so Tailwind and the no-unknown-classes lint rule see them.
+const VARIANT_CLASSES = {
+  primary: 'button-primary',
+  secondary: 'button-secondary',
+  success: 'button-success',
+  danger: 'button-danger',
+  warning: 'button-warning',
+  link: 'button-link',
+} as const
 </script>
 
 <template>
@@ -33,7 +43,7 @@ const {
       'button relative flex h-10 cursor-pointer items-center overflow-hidden transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed',
       fullWidth ? 'w-full justify-start' : 'justify-center',
       rounded ? 'rounded-full' : 'rounded-lg',
-      `button-${variant}`,
+      VARIANT_CLASSES[variant],
       $slots.default ?? 'w-10',
       !$slots.default && icon ? 'aspect-square px-0' : '',
       loading ? 'pointer-events-none' : '',

package/src/components/atoms/Card/Card.vue

@@ -14,7 +14,7 @@ defineProps<Props>()
         v-if="image"
         :src="image"
         :alt="imageAlt ?? 'Card afbeelding'"
-        class="block h-40 max-h-40 min-h-40 w-full rounded-tl-lg rounded-tr-lg object-cover"
+        class="block h-40 max-h-40 min-h-40 w-full rounded-t-lg object-cover"
       />
     </slot>
 

package/src/components/atoms/Checkbox/Checkbox.vue

@@ -33,7 +33,7 @@ watchEffect(() => {
     <span
       aria-hidden="true"
       :class="[
-        'flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors duration-200',
+        'flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors duration-200',
         'peer-focus-visible:ring-2 peer-focus-visible:ring-cornflower-blue-400 peer-focus-visible:ring-offset-2',
         model || indeterminate
           ? 'border-cornflower-blue-600 text-cornflower-blue-600'

package/src/components/atoms/EnergyLabel/EnergyLabel.vue

@@ -37,7 +37,7 @@ const color = computed(() => COLORS[normalized.value])
   <span
     role="img"
     :aria-label="`Energielabel ${normalized}`"
-    class="relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']"
+    class="relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']"
     :style="{ backgroundColor: color, '--energy-label-color': color }"
   >
     <span aria-hidden="true" class="relative z-10">{{ normalized }}</span>

package/src/components/atoms/PresenceIndicator/PresenceIndicator.vue

@@ -17,13 +17,13 @@ const { online = false } = defineProps<NexxtPresenceIndicatorProps>()
     :aria-label="online ? 'Online' : 'Offline'"
     role="status"
   >
-    <span class="relative flex h-1.5 w-1.5">
+    <span class="relative flex size-1.5">
       <span
         v-if="online"
-        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+        class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"
       />
       <i
-        class="relative block h-1.5 w-1.5 rounded-full"
+        class="relative block size-1.5 rounded-full"
         :class="online ? 'bg-green-500' : 'bg-gray-700'"
       />
     </span>

package/src/components/atoms/PropertyListing/PropertyListing.vue

@@ -20,7 +20,7 @@ defineProps<Props>()
       </div>
     </div>
 
-    <div v-if="text" class="wrap-break-words w-full body-normal text-gray-950">
+    <div v-if="text" class="w-full body-normal wrap-break-word text-gray-950">
       {{ text }}
     </div>
   </div>

package/src/components/atoms/SelectableOption/SelectableOption.vue

@@ -56,7 +56,7 @@ const RADIUS = {
     <slot :selected="selected" />
     <span
       v-if="checkmark && selected"
-      class="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow"
+      class="absolute -top-2 -right-2 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>

package/src/components/atoms/Skeleton/Skeleton.vue

@@ -3,5 +3,5 @@ defineOptions({ name: 'NexxtSkeleton' })
 </script>
 
 <template>
-  <div class="animate-pulse rounded bg-gray-200" />
+  <div class="animate-pulse rounded-sm bg-gray-200" />
 </template>

package/src/components/atoms/Squircle/Squircle.vue

@@ -43,7 +43,7 @@ const style = computed(() => ({
 <template>
   <div class="relative block shrink-0 overflow-hidden" :style="style">
     <svg
-      class="absolute h-0 w-0 overflow-hidden"
+      class="absolute size-0 overflow-hidden"
       aria-hidden="true"
       focusable="false"
       width="0"

package/src/components/molecules/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -102,7 +102,7 @@ const iconColors = computed(() => {
   >
     <div
       v-if="icon"
-      class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md"
+      class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-l-md"
       :class="iconColors"
     >
       <NexxtIcon :name="icon" class="text-2xl" aria-hidden="true" />

package/src/components/molecules/DoughnutChart/DoughnutChart.vue

@@ -107,10 +107,7 @@ const resolvedBackgroundColor = computed(() =>
       :width="size - thickness * 2"
       :height="size - thickness * 2"
     >
-      <div
-        xmlns="http://www.w3.org/1999/xhtml"
-        class="flex h-full w-full items-center justify-center"
-      >
+      <div xmlns="http://www.w3.org/1999/xhtml" class="flex size-full items-center justify-center">
         <slot>
           <span class="heading-1">{{ value }}</span>
         </slot>

package/src/components/molecules/InputField/InputField.vue

@@ -97,7 +97,7 @@ const decrement = () => {
         v-model="modelValue"
         :placeholder="placeholder"
         v-bind="inputAttrs"
-        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        class="h-10 w-full min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />
       <slot name="right">

package/src/components/molecules/InputSelect/InputSelect.vue

@@ -141,7 +141,7 @@ const select = (opt: SelectOption, close: () => void) => {
         v-model="inputModel"
         :placeholder="placeholder"
         v-bind="inputAttrs"
-        class="bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        class="h-10 w-full min-w-40 bg-transparent px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
       />
     </div>
 

package/src/components/molecules/Pagination/Pagination.vue

@@ -47,13 +47,13 @@ const {
     >
       <PaginationFirst
         v-if="items.some((item) => item.type === 'ellipsis')"
-        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        class="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
         <NexxtIcon name="angles-left" />
       </PaginationFirst>
       <PaginationPrev
-        class="mr-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        class="mr-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
         <NexxtIcon name="chevron-left" />
@@ -72,20 +72,20 @@ const {
           v-else
           :key="page.type"
           :index="index"
-          class="flex h-8 w-8 items-center justify-center"
+          class="flex size-8 items-center justify-center"
         >
           &#8230;
         </PaginationEllipsis>
       </template>
       <PaginationNext
-        class="ml-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        class="ml-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
         <NexxtIcon name="chevron-right" />
       </PaginationNext>
       <PaginationLast
         v-if="items.some((item) => item.type === 'ellipsis')"
-        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        class="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
         <NexxtIcon name="angles-right" />

package/src/components/molecules/PropertyCard/PropertyCard.vue

@@ -20,17 +20,17 @@ defineProps<NexxtPropertyCardProps>()
 <template>
   <NexxtCard :image="image" :image-alt="imageAlt">
     <template v-if="!image" #image>
-      <div class="relative isolate h-40 w-full overflow-hidden rounded-tl-lg rounded-tr-lg">
+      <div class="relative isolate h-40 w-full overflow-hidden rounded-t-lg">
         <img
           :src="PropertyPlaceholder"
           alt="Woning placeholder"
           loading="lazy"
-          class="h-full w-full object-cover"
+          class="size-full object-cover"
         />
         <div
-          class="absolute inset-0 flex items-center justify-center rounded-tl-lg rounded-tr-lg bg-white/20 backdrop-blur-sm"
+          class="absolute inset-0 flex items-center justify-center rounded-t-lg bg-white/20 backdrop-blur-sm"
         >
-          <NexxtIcon name="house" class="text-6xl text-white drop-shadow" />
+          <NexxtIcon name="house" class="text-6xl text-white drop-shadow-sm" />
         </div>
       </div>
     </template>

package/src/components/molecules/SkeletonPropertyCard/SkeletonPropertyCard.vue

@@ -18,14 +18,14 @@ withDefaults(defineProps<NexxtSkeletonPropertyCardProps>(), {
     role="status"
     :aria-label="ariaLabel"
   >
-    <NexxtSkeleton class="h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" />
+    <NexxtSkeleton class="h-40 w-full rounded-t-lg rounded-b-none" />
 
     <div
       class="box-border flex w-full flex-col gap-2 rounded-b-lg border border-gray-200 px-4 py-2"
     >
       <div class="flex items-center gap-2">
         <NexxtSkeleton class="h-4 w-24" />
-        <NexxtSkeleton class="h-4 w-4" />
+        <NexxtSkeleton class="size-4" />
         <NexxtSkeleton class="h-4 w-28" />
       </div>
 

package/src/components/molecules/SocialIcons/SocialIcons.vue

@@ -48,7 +48,7 @@ const activeIcons = computed(() =>
     <li
       v-for="platform in activeIcons"
       :key="platform.name"
-      class="inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white"
+      class="inline-flex size-5 items-center justify-center rounded-full outline-1 outline-white"
       :class="brandColors[platform.name]"
       :aria-label="platform.label"
     >

package/src/components/molecules/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue

@@ -47,7 +47,7 @@ onMounted(() => {
       muted
       playsinline
       :loop="hasPlayedOnce"
-      class="h-full w-full object-cover"
+      class="size-full object-cover"
       poster="../../../assets/images/Template_aanvragen.jpg"
       @ended.once="handleEnded"
     />

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="body-small 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/components/molecules/TimelineEvent/TimelineEvent.vue

@@ -87,10 +87,10 @@ const isContactEvent = computed(() => {
       }"
     >
       <div
-        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
+        class="flex size-10 shrink-0 items-center justify-center rounded-full"
         :class="[eventConfig.color]"
       >
-        <NexxtIcon :name="eventConfig.icon as any" class="flex h-6 w-6 text-xl text-white" />
+        <NexxtIcon :name="eventConfig.icon as any" class="flex size-6 text-xl text-white" />
       </div>
       <div
         class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8"
@@ -108,7 +108,7 @@ const isContactEvent = computed(() => {
           <span class="truncate group-hover:underline">
             {{ event.description || event.url }}
           </span>
-          <NexxtIcon name="external-link" class="ml-1 h-4 w-4 text-gray-950" />
+          <NexxtIcon name="external-link" class="ml-1 size-4 text-gray-950" />
         </a>
         <span v-else-if="event.description" class="mt-1 text-sm text-gray-500">
           {{ event.description }}

package/src/components/molecules/TimelineLanes/TimelineLanes.vue

@@ -30,7 +30,7 @@ withDefaults(
       <span class="flex gap-1">
         {{ leftLabel }}
         <NexxtTooltip v-if="leftTooltip">
-          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <NexxtIcon name="circle-info" class="size-4 text-xs text-gray-600" />
           <template #tooltip
             ><span class="text-sm">{{ leftTooltip }}</span></template
           >
@@ -39,7 +39,7 @@ withDefaults(
       <span class="flex gap-1">
         {{ rightLabel }}
         <NexxtTooltip v-if="rightTooltip">
-          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <NexxtIcon name="circle-info" class="size-4 text-xs text-gray-600" />
           <template #tooltip
             ><span class="text-sm">{{ rightTooltip }}</span></template
           >

package/src/components/molecules/Toast/Toast.vue

@@ -48,6 +48,14 @@ const VARIANT_CONFIG: Record<
   },
 }
 
+// Full class names so Tailwind and the no-unknown-classes lint rule see them.
+const VARIANT_CLASSES: Record<ToastVariant, string> = {
+  info: 'toast-info',
+  success: 'toast-success',
+  warning: 'toast-warning',
+  error: 'toast-error',
+}
+
 const { variant = 'info', dismissible = true, autoClose = 0 } = defineProps<NexxtToastProps>()
 const emit = defineEmits<{ dismiss: [] }>()
 
@@ -94,13 +102,13 @@ onUnmounted(() => {
     :aria-live="variant === 'error' ? 'assertive' : 'polite'"
     aria-atomic="true"
     class="toast flex w-100 gap-4 rounded-xl bg-white shadow-md"
-    :class="`toast-${variant}`"
+    :class="VARIANT_CLASSES[variant]"
     @mouseenter="autoClose ? pause() : undefined"
     @mouseleave="autoClose ? resume() : undefined"
   >
     <div
       aria-hidden="true"
-      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white"
+      class="flex size-8 shrink-0 items-center justify-center rounded-full text-white"
       :class="selectedVariant.iconBg"
     >
       <NexxtIcon :name="selectedVariant.icon" class="text-xl" />
@@ -115,7 +123,7 @@ onUnmounted(() => {
     <button
       v-if="dismissible"
       type="button"
-      class="relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none"
+      class="relative flex size-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none"
       :aria-label="
         autoClose ? `Sluiten (verdwijnt automatisch na ${autoClose / 1000} seconden)` : 'Sluiten'
       "

package/src/components/organisms/Calendar/_CalendarDayView.vue

@@ -137,7 +137,7 @@ defineExpose({
           :aria-label="format(day, 'd MMMM yyyy', { locale })"
           :tabindex="isSameMonth(day, viewDate) ? 0 : -1"
           :class="[
-            'relative flex h-8 w-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1',
+            'relative flex size-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1',
             !isSameMonth(day, viewDate) ? 'text-gray-300' : 'text-gray-900',
             isSelected(day) ? 'bg-cornflower-blue-500 font-medium text-white!' : '',
             isTodayByTimezone(day) && !isSelected(day)
@@ -158,7 +158,7 @@ defineExpose({
           <span
             v-if="isMarked(day)"
             :class="[
-              'absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full',
+              'absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full',
               isSelected(day) ? 'bg-white' : 'bg-cornflower-blue-500',
             ]"
           />