@nexxtmove/ui 1.12.0 → 1.14.0

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')"
                   />

package/src/components/organisms/DropdownButton/DropdownButton.vue

@@ -176,7 +176,7 @@ const buttonClasses = computed(() => {
         </template>
         <button
           class="w-10 shrink-0 cursor-pointer transition-colors duration-200"
-          :class="[buttonClasses, iconOnly ? 'p-2' : 'px-2 py-2']"
+          :class="[buttonClasses, iconOnly ? 'p-2' : 'p-2']"
           aria-haspopup="menu"
           :aria-expanded="isOpen"
           :aria-label="triggerAriaLabel"

package/src/components/organisms/Modal/Modal.vue

@@ -114,14 +114,14 @@ const dialogStyle = computed(() =>
               </div>
               <DialogClose
                 v-if="showClose"
-                class="ml-4 shrink-0 cursor-pointer rounded p-1 focus-visible:outline-2"
+                class="ml-4 shrink-0 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
               >
                 <NexxtIcon name="xmark" />
               </DialogClose>
             </div>
             <DialogClose
               v-else-if="showClose"
-              class="absolute top-3 right-3 cursor-pointer rounded p-1 focus-visible:outline-2"
+              class="absolute top-3 right-3 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
             >
               <NexxtIcon name="xmark" />
             </DialogClose>

package/src/components/organisms/SocialMediaTemplate/SocialMediaTemplate.vue

@@ -87,14 +87,14 @@ const handleMouseLeave = () => {
   >
     <picture v-if="mediaType === 'image'" class="col-start-1 row-span-2 row-start-1">
       <source :srcset="media" />
-      <img :src="media" alt="Media content" class="h-full w-full object-cover object-center" />
+      <img :src="media" alt="Media content" class="size-full object-cover object-center" />
     </picture>
     <video
       v-else
       ref="videoRef"
       :muted="muted"
       loop="true"
-      class="col-start-1 row-span-2 row-start-1 h-full w-full object-cover"
+      class="col-start-1 row-span-2 row-start-1 size-full object-cover"
     >
       <source :src="media" :type="videoMimeType" />
       Your browser does not support the video tag.
@@ -114,12 +114,12 @@ const handleMouseLeave = () => {
       </div>
     </div>
     <div
-      class="goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full"
+      class="z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full group-hover:opacity-0"
       :class="variant === 'video' ? 'bg-purple-500' : 'bg-social-media-template-info-bg'"
     >
       <div>
         <div class="heading-4">{{ name }}</div>
-        <div class="extra-small">{{ type }}</div>
+        <div class="extra-small-normal">{{ type }}</div>
       </div>
       <Icon
         :name="variant === 'post' ? 'image' : variant === 'video' ? 'play-circle' : 'images'"

package/src/components/organisms/Table/Table.vue

@@ -238,7 +238,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
           <div
             v-for="(column, colIndex) in columns"
             :key="column.key"
-            class="flex items-center truncate px-4 py-4 extra-small-normal text-slate-700"
+            class="flex items-center truncate p-4 extra-small-normal text-slate-700"
             role="gridcell"
             :aria-colindex="colIndex + (selectable ? 2 : 1)"
           >

package/src/components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue

@@ -107,7 +107,7 @@ const getPhaseDirection = () => {
         <template v-if="getPhaseDirection()">
           <NexxtIcon
             :name="getPhaseDirection() === 'up' ? 'arrow-up' : 'arrow-down'"
-            class="h-4 w-4 text-white"
+            class="size-4 text-white"
           />
         </template>
       </div>
@@ -124,14 +124,11 @@ const getPhaseDirection = () => {
 
       <div v-if="!isLast" class="h-1"></div>
 
-      <div
-        class="absolute top-0 bottom-0 left-5 w-px bg-linear-to-b"
-        :class="gradientClasses"
-      ></div>
+      <div class="absolute inset-y-0 left-5 w-px bg-linear-to-b" :class="gradientClasses"></div>
 
       <div
         v-if="isSplitView"
-        class="absolute top-0 right-5 bottom-0 w-px bg-linear-to-b"
+        class="absolute inset-y-0 right-5 w-px bg-linear-to-b"
         :class="gradientClasses"
       ></div>
     </div>

package/src/components/organisms/VideoPlayer/VideoPlayer.vue

@@ -218,7 +218,7 @@ defineExpose({ playing, muted })
         class="pointer-events-none absolute inset-0 flex items-center justify-center"
       >
         <div
-          class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white"
+          class="flex size-16 items-center justify-center rounded-full bg-black/50 text-white"
           aria-hidden="true"
         >
           <NexxtIcon :name="flashIcon" class="text-2xl" />
@@ -264,7 +264,7 @@ defineExpose({ playing, muted })
           :style="{ width: `${progressPct}%` }"
         />
         <div
-          class="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sapphire-100 opacity-0 shadow transition-opacity group-hover/player:opacity-100"
+          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="{ left: `${progressPct}%` }"
         />
       </div>
@@ -273,7 +273,7 @@ defineExpose({ playing, muted })
         <button
           type="button"
           :aria-label="playing ? labels.pause : labels.play"
-          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
+          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
           @click="togglePlay"
         >
           <NexxtIcon :name="playing ? 'pause' : 'play'" class="text-sm" aria-hidden="true" />
@@ -288,7 +288,7 @@ defineExpose({ playing, muted })
         <button
           type="button"
           :aria-label="muted ? labels.unmute : labels.mute"
-          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
+          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
           @click="toggleMute"
         >
           <NexxtIcon
@@ -301,7 +301,7 @@ defineExpose({ playing, muted })
         <button
           type="button"
           :aria-label="isFullscreen ? labels.exitFullscreen : labels.enterFullscreen"
-          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
+          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
           @click="toggleFullscreen"
         >
           <NexxtIcon

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'