diff --git a/playground/pages/button.vue b/playground/pages/button.vue
index e17967b2..1a48e4c9 100644
--- a/playground/pages/button.vue
+++ b/playground/pages/button.vue
@@ -27,11 +27,6 @@ const variants = Object.keys(theme.variants.variant)
         Loading
       </UButton>
     </div>
-    <div class="flex items-center gap-2">
-      <UButton truncate class="w-16">
-        Truncate
-      </UButton>
-    </div>
     <div class="flex items-center gap-2">
       <UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" label="Button" :variant="(variant as any)" />
     </div>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 1266d22c..aeaf83a6 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -19,7 +19,6 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'cu
   size?: ButtonVariants['size']
   square?: boolean
   block?: boolean
-  truncate?: boolean
   class?: any
   ui?: Partial<typeof button.slots>
 }
@@ -51,7 +50,6 @@ const ui = computed(() => tv({ extend: button, slots: props.ui })({
   variant: props.variant,
   size: buttonSize.value,
   loading: props.loading,
-  truncate: props.truncate,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
diff --git a/src/theme/button.ts b/src/theme/button.ts
index ebd70965..e6476645 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -4,7 +4,7 @@ import { buttonGroupVariant } from './button-group'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
-    label: '',
+    label: 'truncate',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
     trailingIcon: 'shrink-0'
@@ -52,11 +52,6 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-6'
       }
     },
-    truncate: {
-      true: {
-        label: 'truncate'
-      }
-    },
     block: {
       true: {
         base: 'w-full',
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index 830a0e47..59a82182 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -24,7 +24,6 @@ describe('Button', () => {
     ['with disabled', { props: { label: 'Button', disabled: true } }],
     ['with block', { props: { label: 'Button', block: true } }],
     ['with square', { props: { label: 'Button', square: true } }],
-    ['with truncate', { props: { label: 'Button', truncate: true } }],
     ['with class', { props: { class: 'rounded-full font-bold' } }],
     ['with ui', { props: { ui: { label: 'font-bold' } } }],
     // Slots
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 51467a9e..5cbef038 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Button > renders with block correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
@@ -11,56 +11,56 @@ exports[`Button > renders with class correctly 1`] = `"<button type="button" cla
 
 exports[`Button > renders with color black correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with color gray correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with color green correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with color primary correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with color red correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with color white correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with default slot correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Default slot</span>
+  <!--v-if--><span class="truncate">Default slot</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with disabled correctly 1`] = `
 "<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
@@ -74,7 +74,7 @@ exports[`Button > renders with icon correctly 1`] = `
 
 exports[`Button > renders with label correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
@@ -116,42 +116,42 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 
 exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size md correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size sm correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xl correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xs correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with square correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
@@ -177,53 +177,46 @@ exports[`Button > renders with trailingIcon correctly 1`] = `
 </button>"
 `;
 
-exports[`Button > renders with truncate correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="truncate">Button</span>
-  <!--v-if-->
-</button>"
-`;
-
 exports[`Button > renders with ui correctly 1`] = `"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"></button>"`;
 
 exports[`Button > renders with variant ghost correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with variant link correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with variant outline correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with variant soft correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with variant solid correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with variant subtle correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
-  <!--v-if--><span class="">Button</span>
+  <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/ButtonGroup.spec.ts.snap b/test/components/__snapshots__/ButtonGroup.spec.ts.snap
index ea761928..2f76c8b5 100644
--- a/test/components/__snapshots__/ButtonGroup.spec.ts.snap
+++ b/test/components/__snapshots__/ButtonGroup.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`ButtonGroup > renders orientation vertical with default slot correctly
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -22,7 +22,7 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -34,7 +34,7 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -46,7 +46,7 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -58,7 +58,7 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -70,7 +70,7 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
@@ -82,7 +82,7 @@ exports[`ButtonGroup > renders with size xs correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if--><span class="truncate"> Click me! </span>
     <!--v-if-->
   </button>
 </div>"
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index 93e2f842..0e06174f 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -9,19 +9,19 @@ exports[`Pagination > renders with active color black correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -42,19 +42,19 @@ exports[`Pagination > renders with active color gray correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -75,19 +75,19 @@ exports[`Pagination > renders with active color green correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -108,19 +108,19 @@ exports[`Pagination > renders with active color primary correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -141,19 +141,19 @@ exports[`Pagination > renders with active color red correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -174,19 +174,19 @@ exports[`Pagination > renders with active color white correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -207,19 +207,19 @@ exports[`Pagination > renders with active variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -240,19 +240,19 @@ exports[`Pagination > renders with active variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -273,19 +273,19 @@ exports[`Pagination > renders with active variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -306,19 +306,19 @@ exports[`Pagination > renders with active variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -339,19 +339,19 @@ exports[`Pagination > renders with active variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -372,19 +372,19 @@ exports[`Pagination > renders with active variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -405,19 +405,19 @@ exports[`Pagination > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -438,19 +438,19 @@ exports[`Pagination > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -471,19 +471,19 @@ exports[`Pagination > renders with color black correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -504,19 +504,19 @@ exports[`Pagination > renders with color gray correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -537,19 +537,19 @@ exports[`Pagination > renders with color green correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -570,19 +570,19 @@ exports[`Pagination > renders with color primary correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -603,19 +603,19 @@ exports[`Pagination > renders with color red correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -636,19 +636,19 @@ exports[`Pagination > renders with color white correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -669,19 +669,19 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -702,19 +702,19 @@ exports[`Pagination > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -735,19 +735,19 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
-      <!--v-if--><span class="min-w-5 text-center">6</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
-      <!--v-if--><span class="min-w-5 text-center">10</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -768,25 +768,25 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="ellipsis" index="1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
-      <!--v-if--><span class="min-w-5 text-center">6</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button><button type="button" data-type="ellipsis" index="5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
-      <!--v-if--><span class="min-w-5 text-center">10</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -804,19 +804,19 @@ exports[`Pagination > renders with first slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -837,19 +837,19 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -888,19 +888,19 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -921,19 +921,19 @@ exports[`Pagination > renders with last slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -951,19 +951,19 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -984,19 +984,19 @@ exports[`Pagination > renders with next slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>Next slot<button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1014,19 +1014,19 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-small-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1047,19 +1047,19 @@ exports[`Pagination > renders with page correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1077,19 +1077,19 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1110,19 +1110,19 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1143,31 +1143,31 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
-      <!--v-if--><span class="min-w-5 text-center">6</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="7">
-      <!--v-if--><span class="min-w-5 text-center">7</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
     </button><button type="button" data-type="ellipsis" index="7" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
-      <!--v-if--><span class="min-w-5 text-center">10</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1188,25 +1188,25 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="ellipsis" index="1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
-      <!--v-if--><span class="min-w-5 text-center">6</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button><button type="button" data-type="ellipsis" index="5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
-      <!--v-if--><span class="min-w-5 text-center">10</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1227,19 +1227,19 @@ exports[`Pagination > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1260,19 +1260,19 @@ exports[`Pagination > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1293,19 +1293,19 @@ exports[`Pagination > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
@@ -1326,19 +1326,19 @@ exports[`Pagination > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-base gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
@@ -1359,19 +1359,19 @@ exports[`Pagination > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
@@ -1392,19 +1392,19 @@ exports[`Pagination > renders with total correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1425,19 +1425,19 @@ exports[`Pagination > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1458,19 +1458,19 @@ exports[`Pagination > renders with variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1491,19 +1491,19 @@ exports[`Pagination > renders with variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1524,19 +1524,19 @@ exports[`Pagination > renders with variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1557,19 +1557,19 @@ exports[`Pagination > renders with variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1590,19 +1590,19 @@ exports[`Pagination > renders with variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1623,19 +1623,19 @@ exports[`Pagination > renders with variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -1652,19 +1652,19 @@ exports[`Pagination > renders without showControls correctly 1`] = `
   <div class="flex items-center gap-1">
     <!--v-if-->
     <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
-      <!--v-if--><span class="min-w-5 text-center">1</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
-      <!--v-if--><span class="min-w-5 text-center">2</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
-      <!--v-if--><span class="min-w-5 text-center">3</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
-      <!--v-if--><span class="min-w-5 text-center">4</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
-      <!--v-if--><span class="min-w-5 text-center">5</span>
+      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index c812742e..3cc16955 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -14,7 +14,7 @@ exports[`Toast > renders with actions correctly 1`] = `
         <!--v-if-->
       </div>
       <div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-          <!--v-if--><span class="">Action</span>
+          <!--v-if--><span class="truncate">Action</span>
           <!--v-if-->
         </button><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
           <!---->
@@ -202,7 +202,7 @@ exports[`Toast > renders with description actions correctly 1`] = `
         <div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
         <div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
         <div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
-            <!--v-if--><span class="">Action</span>
+            <!--v-if--><span class="truncate">Action</span>
             <!--v-if-->
           </button></div>
       </div>