@nexxtmove/ui 1.12.0 → 1.13.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.13.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

@@ -80,7 +80,7 @@ const featureMessages = computed<Record<NexxtTemplateCardContentFeature, string>
               <NexxtIcon :name="ICON_MAP[feature].icon" />
             </div>
             <template #tooltip>
-              <span class="body-small text-gray-700">{{ featureMessages[feature] }}</span>
+              <span class="small-normal text-gray-700">{{ featureMessages[feature] }}</span>
             </template>
           </NexxtTooltip>
         </li>

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',
             ]"
           />

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

@@ -44,7 +44,7 @@ const monthTransition = {
       v-if="pickerView === 'days'"
       type="button"
       :disabled="!canGoPrev"
-      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
+      class="flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
       @click="emit('prev')"
       aria-label="Vorige maand"
     >
@@ -53,13 +53,13 @@ const monthTransition = {
     <button
       v-else-if="pickerView === 'years'"
       type="button"
-      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300"
+      class="flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300"
       @click="emit('closePicker')"
       aria-label="Terug naar maanden"
     >
       <NexxtIcon name="arrow-left" class="text-xs" />
     </button>
-    <div v-else class="h-7 w-7" />
+    <div v-else class="size-7" />
 
     <!-- Center: month + year labels -->
     <div
@@ -74,7 +74,7 @@ const monthTransition = {
             v-if="monthYearPicker"
             :key="`button-${monthName}`"
             type="button"
-            class="block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
+            class="block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
             @click="emit('openMonthPicker')"
           >
             {{ monthName }}
@@ -92,7 +92,7 @@ const monthTransition = {
             v-if="monthYearPicker"
             :key="`button-${yearValue}`"
             type="button"
-            class="block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
+            class="block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
             @click="emit('openYearPicker')"
           >
             {{ yearValue }}
@@ -112,12 +112,12 @@ const monthTransition = {
       v-if="pickerView === 'days'"
       type="button"
       :disabled="!canGoNext"
-      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
+      class="flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
       @click="emit('next')"
       aria-label="Volgende maand"
     >
       <NexxtIcon name="chevron-right" class="text-xs" />
     </button>
-    <div v-else class="h-7 w-7" />
+    <div v-else class="size-7" />
   </div>
 </template>

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

@@ -55,7 +55,7 @@ const decrementMinutes = () => {
     <div class="flex flex-col items-center">
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
         @click="incrementHours"
       >
         <NexxtIcon name="chevron-up" />
@@ -65,7 +65,7 @@ const decrementMinutes = () => {
       </span>
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
         @click="decrementHours"
       >
         <NexxtIcon name="chevron-down" />
@@ -78,7 +78,7 @@ const decrementMinutes = () => {
     <div class="flex flex-col items-center">
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
         @click="incrementMinutes"
       >
         <NexxtIcon name="chevron-up" />
@@ -88,7 +88,7 @@ const decrementMinutes = () => {
       </span>
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
         @click="decrementMinutes"
       >
         <NexxtIcon name="chevron-down" />

package/src/components/organisms/ColorPicker/ColorPicker.vue

@@ -136,7 +136,7 @@ watch(
             :aria-label="
               displayValue ? `Geselecteerde kleur: ${displayValue}` : 'Geen kleur geselecteerd'
             "
-            class="h-5 w-5 shrink-0 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+            class="size-5 shrink-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
             :style="{ backgroundColor: 'var(--reka-color-swatch-color)' }"
           />
 
@@ -180,7 +180,7 @@ watch(
                 :style="style"
               >
                 <ColorAreaThumb
-                  class="block h-4 w-4 cursor-grab rounded-full border-2 border-white shadow focus:outline-none active:cursor-grabbing"
+                  class="block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing"
                 />
               </ColorAreaArea>
             </div>
@@ -196,7 +196,7 @@ watch(
           >
             <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
             <ColorSliderThumb
-              class="block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+              class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
             />
           </ColorSliderRoot>
 
@@ -215,12 +215,12 @@ watch(
               :model-value="colorObj"
               channel="alpha"
               color-space="hsl"
-              class="relative z-10 flex h-full w-full touch-none items-center select-none"
+              class="relative z-10 flex size-full touch-none items-center select-none"
               @update:color="handleColorUpdate"
             >
               <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
               <ColorSliderThumb
-                class="block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+                class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
               />
             </ColorSliderRoot>
           </div>
@@ -262,7 +262,7 @@ watch(
                 :class="hexInputError ? 'ring-brick-400' : 'ring-gray-200'"
               >
                 <ColorFieldInput
-                  class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                  class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                   placeholder="#000000"
                   @input="handleHexInput"
                 />
@@ -284,7 +284,7 @@ watch(
                   :class="channelInputErrors.hue ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="H"
                     @input="(e: Event) => handleChannelInput(e, 'hue')"
                   />
@@ -302,7 +302,7 @@ watch(
                   :class="channelInputErrors.saturation ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="S"
                     @input="(e: Event) => handleChannelInput(e, 'saturation')"
                   />
@@ -320,7 +320,7 @@ watch(
                   :class="channelInputErrors.lightness ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="L"
                     @input="(e: Event) => handleChannelInput(e, 'lightness')"
                   />
@@ -342,7 +342,7 @@ watch(
                   :class="channelInputErrors.red ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="R"
                     @input="(e: Event) => handleChannelInput(e, 'red')"
                   />
@@ -360,7 +360,7 @@ watch(
                   :class="channelInputErrors.green ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="G"
                     @input="(e: Event) => handleChannelInput(e, 'green')"
                   />
@@ -378,7 +378,7 @@ watch(
                   :class="channelInputErrors.blue ? 'ring-brick-400' : 'ring-gray-200'"
                 >
                   <ColorFieldInput
-                    class="w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
                     placeholder="B"
                     @input="(e: Event) => handleChannelInput(e, 'blue')"
                   />