@nexxtmove/ui 1.12.0 → 1.13.0

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